Android客户端之“微服私访”App的系统学习（四）使用ViewPager+Fragment实现Tab

前言

今天要向大家介绍的是有关于微服私访App的主界面的UI框架实现，根据界面模块可以划分为三个部分：1.顶部导航栏 2.中间内容布局 3.底部导航栏
先来看一下预览效果：

介绍

整体的UI实现是ViewPager+Fragment的实现方式，这也是比较主流的实现方式。

一、顶部导航栏

从上面预览效果可以看出，顶部的导航栏只是在页面的切换时更改了titleBar的标题，以及显示或隐藏图标控件。由于Android源生的actionBar的局限性，这里我们采用自己自定义的TitleBar,因此这里需要对标题栏进行隐藏处理requestWindowFeature(Window.FEATURE_NO_TITLE);//隐藏标题栏 ，下面看一下titleBar的实现,这里把包含所有界面可能用到的titleBar控件都写出来，通过代码来控制隐藏和显示。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="43dp"
    android:background="@color/colorAccent"
    android:gravity="center_vertical"
    >
    <TextView
        android:id="@+id/title_bar_back"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:drawableLeft="@drawable/title_bar_back"
        android:gravity="center"
        android:paddingLeft="@dimen/title_bar_back_left"
        android:paddingRight="@dimen/title_bar_add_padding"
        android:paddingBottom="@dimen/title_bar_back_bottom"
        android:paddingTop="@dimen/title_bar_back_bottom"/>
    <TextView
        android:id="@+id/title_bar_name"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:text="name"
        android:singleLine="true"
        android:textColor="@color/white"
        android:textSize="@dimen/title_bar_text_size"/>
    <ImageView
        android:id="@+id/title_bar_more"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:src="@drawable/title_bar_add"
        android:paddingTop="@dimen/title_bar_add_bottom"
        android:paddingBottom="@dimen/title_bar_add_bottom"
        android:paddingLeft="@dimen/title_bar_add_padding"
        android:paddingRight="@dimen/title_bar_add_right"
        android:visibility="gone"
        />
    <ImageView
        android:id="@+id/title_bar_save"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:src="@drawable/title_bar_save"
        android:paddingTop="@dimen/title_bar_save_bootom"
        android:paddingBottom="@dimen/title_bar_save_bootom"
        android:paddingLeft="@dimen/title_bar_save_right"
        android:paddingRight="@dimen/title_bar_save_right"
        android:visibility="gone"
        />
    <ImageView
        android:id="@+id/title_bar_change"
        android:layout_width="wrap_content"
        android:layout_height="35dp"
        android:layout_toLeftOf="@+id/title_bar_more"
        android:layout_centerVertical="true"
        android:src="@drawable/title_bar_histroy"
        android:paddingTop="@dimen/title_bar_add_padding"
        android:paddingBottom="@dimen/title_bar_add_padding"
        android:paddingLeft="@dimen/title_bar_histroy_right"
        android:paddingRight="@dimen/title_bar_histroy_right"
        android:visibility="gone"
        />
</RelativeLayout>

总结一下，可以从以下三个步骤来实现顶部导航栏：1.分析全量因素 2.分析可控制变化因素 3.抽取公共基类

二、底布导航栏

底布的导航栏采用的通过权重来实现五个控件的等间距分布，每一块采用的是TexView控件，通过android:drawableTop="@drawable/menu_me_style"来实现在文本上面放置图片。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_menu_bottom"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="@color/color_bottom_layout_bg"
    android:layout_alignParentBottom="true"
    android:layout_gravity="center_vertical"
    >
    <TextView
        android:id="@+id/txt_menu_bottom_home"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1.0"
        android:drawablePadding="@dimen/bottom_img_padding"
        android:drawableTop="@drawable/menu_home_style"
        android:gravity="center"
        android:padding="@dimen/bottom_img_padding"
        android:text="@string/txt_home"
        android:textColor="@color/color_txt_bottom_style"
        android:textSize="@dimen/bottom_text_size"/>
    <TextView
        android:id="@+id/txt_menu_bottom_shop"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1.0"
        android:drawablePadding="@dimen/bottom_img_padding"
        android:drawableTop="@drawable/menu_shop_style"
        android:gravity="center"
        android:padding="@dimen/bottom_img_padding"
        android:text="@string/txt_shop"
        android:textColor="@color/color_txt_bottom_style"
        android:textSize="@dimen/bottom_text_size"/>
    <TextView
        android:id="@+id/txt_menu_bottom_visit"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1.0"
        android:drawablePadding="@dimen/bottom_img_padding"
        android:drawableTop="@drawable/menu_visit_style"
        android:gravity="center"
        android:padding="@dimen/bottom_img_padding"
        android:text="@string/txt_visit"
        android:textColor="@color/color_txt_bottom_style"
        android:textSize="@dimen/bottom_text_size"/>
    <TextView
        android:id="@+id/txt_menu_bottom_train"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1.0"
        android:drawablePadding="@dimen/bottom_img_padding"
        android:drawableTop="@drawable/menu_train_style"
        android:gravity="center"
        android:padding="@dimen/bottom_img_padding"
        android:text="@string/txt_train"
        android:textColor="@color/color_txt_bottom_style"
        android:textSize="@dimen/bottom_text_size"/>
    <TextView
        android:id="@+id/txt_menu_bottom_me"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1.0"
        android:drawablePadding="@dimen/bottom_img_padding"
        android:drawableTop="@drawable/menu_me_style"
        android:gravity="center"
        android:padding="@dimen/bottom_img_padding"
        android:text="@string/txt_me"
        android:textColor="@color/color_txt_bottom_style"
        android:textSize="@dimen/bottom_text_size"/>
</LinearLayout>

到这里就可以通过include 标签来添加顶部和底布导航栏

   <include
        android:id="@+id/title_up_layout"
        layout="@layout/title_bar_activity"/>
    <include
        android:id="@+id/layout_menu_bottom"
        layout="@layout/title_bottom_layout"/>

三、中间内容层实现ViewPager+Fragment

1.为了更好实现对具有相同导航栏的Activity进行管理，我们需要封装一个自己的BaseFragmentActivity来重写setContentView，更好的控制titleBar的上的控件的隐藏和显示。
2.构建fragment基类，通过重写startActivity（）,给fragment到Activity添加动画事件。
3.通过getSupportFragmentManager来构造ViewPager的适配器，设置setOnPageChangeListener监听来实现，fragment的滑动切换。

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }
            @Override public void onPageSelected(int position) {
                switch (position){
                    case TAB_HOME://点击首页模块执行
                        IsTab = 1;
                        jumpHomeFragment();
                        break;
                    case TAB_SHOP://点击巡店模块执行
                        IsTab = 2;
                        jumpShopFragment();
                        break;
                    case TAB_VISIT://点击拜访模块执行
                        IsTab = 3;
                        jumpVisitsFragment();
                        break;
                    case TAB_TRAIN://点击培训模块执行
                        IsTab = 4;
                        jumpTrainFragment();
                        break;
                    case TAB_ME://点击个人中心模块执行
                        IsTab = 5;
                        jumpMeFragment();
                        break;
                }
            }
            @Override public void onPageScrollStateChanged(int state) {
            }
        });
    }

4.通过对底部导航栏中的TextView添加点击事件来实现通过点击来切换fragment

 case R.id.txt_menu_bottom_home://点击首页模块执行
                IsTab = 1;
                titleBarMore.setVisibility(View.GONE);
                titleBarChange.setVisibility(View.GONE);
                setSelected(txtMenuBottomHome);
                viewPagerContent.setCurrentItem(TAB_HOME, false);
                setTitleBarName("首页");
                break;
            case R.id.txt_menu_bottom_shop://点击巡店模块执行
                IsTab = 2;
                titleBarMore.setVisibility(View.VISIBLE);
                titleBarChange.setVisibility(View.VISIBLE);
                setSelected(txtMenuBottomShop);
                viewPagerContent.setCurrentItem(TAB_SHOP, false);
                setTitleBarName("巡店");
                break;
            case R.id.txt_menu_bottom_visit://点击拜访模块执行
                IsTab = 3;
                titleBarMore.setVisibility(View.VISIBLE);
                titleBarChange.setVisibility(View.GONE);
                setSelected(txtMenuBottomVisit);
                viewPagerContent.setCurrentItem(TAB_VISIT, false);
                setTitleBarName("拜访");
                break;
            case R.id.txt_menu_bottom_train://点击培训模块执行
                IsTab = 4;
                titleBarMore.setVisibility(View.GONE);
                titleBarChange.setVisibility(View.GONE);
                setSelected(txtMenuBottomTrain);
                viewPagerContent.setCurrentItem(TAB_TRAIN, false);
                setTitleBarName("培训");
                break;
            case R.id.txt_menu_bottom_me://点击个人中心模块执行
                IsTab = 4;
                titleBarMore.setVisibility(View.GONE);
                titleBarChange.setVisibility(View.GONE);
                setSelected(txtMenuBottomMe);
                viewPagerContent.setCurrentItem(TAB_ME, false);
                setTitleBarName("个人中心");
                break;
            default:
                break;
        }

小伙伴们到这里就实现了整体的一个UI框架的搭建，是不是很简单~，在这里说明一下，本文中这种tab导航实现的方式较为简单，感兴趣的读者可以考虑用一下两种方式实现效果更好的tab导航：
1.顶部导航栏：Toolbar 参考文章：
http://dujinghua.cn/2017/01/18/Android5.0%E4%B9%8BToolbar%E8%AF%A6%E8%A7%A3/
2.底部导航栏：BottomView 参考文章：
http://www.jianshu.com/p/2bd1d1f35465

到这里依旧给大家介绍几个干货网站：
屏幕尺寸：https://material.io/devices/
配色方案：https://webgradients.com/
从图片中提取颜色：http://www.colorfavs.com/

获取资料源码，请点击此处~