Android之官方导航栏之Toolbar(Toolbar+DrawerLayout+ViewPager+PagerSlidingTabStrip)

  通过前几篇文章,我们对Android的导航栏有了一定的了解认识,本次文章将对Toolbar进行综合应用,主要结合DrawerLayout、ViewPager、PagerSlidingTabStrip一起使用。

  PagerSlidingTabStrip是github上一个开源库,地址为:https://github.com/astuetz/PagerSlidingTabStrip

  DrawerLayout之前有过介绍,在此不在过多介绍。

  先看布局文件:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.jredu.MainActivity" >

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize" />

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/toolbar" >

        <LinearLayout
            android:id="@+id/main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <com.jredu.PagerSlidingTabStrip
                android:id="@+id/tabs"
                style="@style/pagerTabStype"
                android:layout_width="match_parent"
                android:layout_height="48dip"
                android:background="@drawable/background_tabs" />

            <android.support.v4.view.ViewPager
                android:id="@+id/pager"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                tools:context=".MainActivity" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/left"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="#fff"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                android:paddingTop="30dp" >

                <ImageView
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:src="@drawable/ic_launcher" />

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:paddingLeft="20dp" >

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="用户名"
                        android:textSize="18sp" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="身份"
                        android:textSize="18sp" />
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
    </android.support.v4.widget.DrawerLayout>
</RelativeLayout>

  布局文件很简单,首先将整个布局划分为两个部分,上面是Toolbar,下面是DrawerLayout,在DrawerLayout里面有分为两个部分,分别是主布局和侧边布局。侧边布局没啥好说的,主要是主布局,在主布局里面,上面部分是PagerSlidingTabStrip,下面部分是ViewPager。

  布局文件完成之后,我们来看java文件,首先将Toolbar和DrawerLayout使用ActionBarDrawerToggle关联起来,代码如下:

Toolbar boolBar = (Toolbar)findViewById(R.id.toolbar);
        mDrawerLayout = (DrawerLayout)findViewById(R.id.drawerLayout);
        boolBar.setTitle("杰瑞教育");
        setSupportActionBar(boolBar);
        getSupportActionBar().setHomeButtonEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, boolBar,R.string.drawer_open, R.string.drawer_close);
        mDrawerToggle.syncState();
    mDrawerLayout.setDrawerListener(mDrawerToggle);

  然后看看如何结合PagerSlidingTabStrip和ViewPager,PagerSlidingTabStrip很简单,我们只需要将库里的java文件和所需要的attr文件拷到我们的项目里面即可。

        tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
        pager = (ViewPager) findViewById(R.id.pager);
        MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
        pager.setAdapter(adapter);
    tabs.setViewPager(pager);

  通过PagerSlidingTabStrip的setViewPager方法即可将两个组件关联起来。不过要想实现如上效果,还必须编写样式,具体如下:

    <style name="AppTheme" parent="AppBaseTheme">
        <item name="colorPrimary">#1570A6</item>
        <item name="actionBarSize">50dp</item>
        <item name="windowActionBar">false</item>
        <item name="titleTextAppearance">@style/CustomTitleTextAppearance</item>
    </style>

    <style name="CustomTitleTextAppearance">
        <item name="android:textColor">#fff</item>
        <item name="android:textSize">20sp</item>
    </style>
    <!-- PagerSlidingTabStrip的自定义样式 -->
    <style name="pagerTabStype">
        <item name="pstsShouldExpand">true</item>
        <item name="pstsDividerColor">#00000000</item>
        <item name="pstsUnderlineHeight">1dp</item>
        <item name="pstsIndicatorHeight">3dp</item>
        <item name="pstsIndicatorColor">#1570A6</item>
</style>

  需要说明的的PagerSlidingTabStrip没有提供选中tab字体颜色的方法,在这里可自行修改源码实现。

  想要了解更多内容的小伙伴,可以点击查看源码,亲自运行测试。

  疑问咨询或技术交流,请加入官方QQ群: (452379712)

作者:杰瑞教育
出处:http://www.cnblogs.com/jerehedu/ 
本文版权归烟台杰瑞教育科技有限公司和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

时间: 2024-10-13 22:50:19

Android之官方导航栏之Toolbar(Toolbar+DrawerLayout+ViewPager+PagerSlidingTabStrip)的相关文章

android之官方导航栏ActionBar(三)之高仿优酷首页

一.问题概述 通过上两篇文章,我们对如何使用ActionBar大致都已经有了认识.在实际应用中,我们更多的是定制ActionBar,那么就需要我们重写或者定义一些样式来修饰ActionBar,来满足具体的需要.我们就以优酷首页为例,一起学习下ActionBar的综合应用. 二.Android系统ActionBar样式的定义 首先,我们先认识一下android系统中是如何定义ActionBar样式的,这里我们以Theme.Holo.Light主题为例,通过源码我们可以看到在该主题中关于Action

Android之官方导航栏ActionBar

一.ActionBar概述 ActionBar是android3.0以后新增的组件,主要用于标示应用程序以及用户所处的位置并提供相关操作以及全局的导航功能.下面我们就看看如何使用ActionBar,真正使用之前,我们应该首先了解一下ActionBar的结构. 根据官方文档,我们看到整个ActionBar可以分为4个部分,具体如下图: 1.  App icon:主要用于展示App的Logo,如果当前界面不是一级界面,还可以展示返回导航. 2.  View Control:用于切换不同的视图或者展示

Android官方导航栏ActionBar(二)—— Action View、Action Provider、Navigation Tabs的详细用法

在上一篇文章(Android之官方导航栏ActionBar)中,我们介绍了ActionBar各组成部分的基本应用.ActionBar除了提供Action Buttons外,还提供了多种导航方式如 Action View.Action Provider.Navigation Tabs.Drop-down Navigation等,下面我们将具体介绍他们的用法. 一.Action View 首先来看Action View,action view是用于替换action button并显示在action

Android界面编程——导航栏及菜单(六)

Android界面编程--导航栏及菜单 2.7导航栏及菜单 2.7.1  ActionBar ActionBar是Android3.0(API 11)开始增加的新特性,ActionBar出现在活动窗口的顶部,可以显示标题.icon.Actions按钮.可交互View,可实现应用程序级的导航,如图2.7-1所示 图2.7-1 其中 1. App icon: 主要用于展示App的Logo,如果当前界面不是一级界面,还可以展示返回航. 2.View Control: 用于切换不同的视图或者展示非交互信

android MIPI屏 导航栏丢失

/**************************************************************************** * android MIPI屏 导航栏丢失 * 说明: * 本文主要是记录使用RGB转MIPI时出现上面导航栏丢失问题的解决方式. * * 2016-3-17 深圳 南山平山村 曾剑锋 ***************************************************************************/ 一.

Android 修改底部导航栏navigationbar的颜色

Android 修改底部导航栏navigationbar的颜色 getWindow().setNavigationBarColor(Color.BLUE); //写法一 getWindow().setNavigationBarColor(getResources().getColor(R.color.black_12));//写法二

Andorid之官方导航栏Toobar

在前面学习使用ActionBar的时候,我们就发现ActionBar中有些方法被标记为过时了,原来在android5.0之后,google推出了一个新的导航工具栏,官方将其定义为:A standard toolbar for use within application content.使用Toolbar将会比ActionBar更加有弹性,更加灵活. 老规矩,先看Toolbar效果图: 下面,我们一起看看,如何使用Toolbar.由于Toolbar是android5.0之后新增的,要想在低版本中

Android应用底部导航栏(选项卡)实例

现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其中各个类的作用以及资源文件就不详细解释了,还有资源图片(在该Demo中借用了其它应用程序的资源图片)也不提供了,大家可以自行更换自己需要的资源图片.直接上各个布局文件或各个类的代码: [1]  res/layout目录下的 maintabs.xml 源码: <?xml version="1.0

仿Android印象笔记底部导航栏

最近用上了印象笔记,觉得android 版的底部导航栏挺不错的,好多应用里面都有用到,想着自己动手实现一下,不多说,先上图: 要完成这样的效果.需要自定义ViewGroup. 1.onMeasure(测量过程) 2.onLayout(布局) 3.添加动画 onMeasure(测量过程) @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int count = getChildCoun