Android主布局框架整理

Android主布局框架整理

本篇内容小生主要介绍的是几种常见的主框架的布局实现方式，仅供各位客官茶饭之余略微点评。闲话不说，切入正题。

-No1.TabActivity+TabHost实现普通tab栏切换
最终效果如下：

虽然TabActivity已经过时，但是小生相信还是有许多老一辈同学依旧在自己的code中乐此不疲的用着此等控件，故此文也列举出此方式。以下小生为各位 看官奉上友情代码

  【1】首先是activity_main.layout主布局代码

<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.allen.demo.MainActivity">

    
    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            
            <FrameLayout
                android:background="@android:color/white"
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1">
            FrameLayout>

            
            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/white">
            TabWidget>

        LinearLayout>

    TabHost>

LinearLayout>

【2】其次是MainActivity.java文件,直接上代码

package com.allen.demo;

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.content.ContextCompat;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends TabActivity implements TabHost.OnTabChangeListener {

    TabHost mTabHost;
    List btmViewList = new ArrayList();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //初始化TabHost容器
        mTabHost = getTabHost();
        // 创建Tab内容
        TabHost.TabSpec mSpecWeChat = mTabHost.newTabSpec("tab0");
        mSpecWeChat.setIndicator(createBottomView(1));
        mSpecWeChat.setContent(new Intent(this, ShowTab1Activity.class));
        mTabHost.addTab(mSpecWeChat);

        TabHost.TabSpec mSpecNoteList = mTabHost.newTabSpec("tab1");
        mSpecNoteList.setIndicator(createBottomView(2));
        mSpecNoteList.setContent(new Intent(this, ShowTab2Activity.class));
        mTabHost.addTab(mSpecNoteList);

        TabHost.TabSpec mSpecDiscovery = mTabHost.newTabSpec("tab2");
        mSpecDiscovery.setIndicator(createBottomView(3));
        mSpecDiscovery.setContent(new Intent(this, ShowTab3Activity.class));
        mTabHost.addTab(mSpecDiscovery);

        TabHost.TabSpec mSpecMine = mTabHost.newTabSpec("tab3");
        mSpecMine.setIndicator(createBottomView(4));
        mSpecMine.setContent(new Intent(this, ShowTab4Activity.class));
        mTabHost.addTab(mSpecMine);


        // 添加切换监听
        mTabHost.setOnTabChangedListener(this);
        // 设置默认选择
        mTabHost.setCurrentTab(0);
    }

    /**
     * 初始化时创建底部Tab文本栏
     * @param i
     * @return
     */
    private View createBottomView(int i) {
        View btmView = getLayoutInflater().inflate(R.layout.layout_main_bottom, null);
        ImageView tabImageView =(ImageView)btmView.findViewById(R.id.tabImageView);
        TextView tabTextView = (TextView)btmView.findViewById(R.id.tabTextView);
        switch (i) {
            case 1:
                tabImageView.setImageDrawable(ContextCompat.getDrawable(this, R.drawable.main_tab1));
                tabTextView.setText(getResources().getString(R.string.main_tab1));
                tabTextView.setTextColor(ContextCompat.getColor(this, R.color.tab_select));
                break;
            case 2:
                tabImageView.setImageDrawable(ContextCompat.getDrawable(this, R.drawable.main_tab2));
                tabTextView.setText(getResources().getString(R.string.main_tab2));
                tabTextView.setTextColor(ContextCompat.getColor(this, R.color.tab_unselect));
                break;
            case 3:
                tabImageView.setImageDrawable(ContextCompat.getDrawable(this, R.drawable.main_tab3));
                tabTextView.setText(getResources().getString(R.string.main_tab3));
                tabTextView.setTextColor(ContextCompat.getColor(this, R.color.tab_unselect));
                break;
            case 4:
                tabImageView.setImageDrawable(ContextCompat.getDrawable(this, R.drawable.main_tab4));
                tabTextView.setText(getResources().getString(R.string.main_tab4));
                tabTextView.setTextColor(ContextCompat.getColor(this, R.color.tab_unselect));
                break;
        }
        btmViewList.add(btmView);
        return btmView;
    }

    @Override
    public void onTabChanged(String tabId) {
        for(int i=0; i
            if(tabId.equalsIgnoreCase("tab"+i)) {
                TextView tabTextView = (TextView)btmViewList.get(i).findViewById(R.id.tabTextView);
                tabTextView.setTextColor(ContextCompat.getColor(this, R.color.tab_select));
            }else{
                TextView tabTextView = (TextView)btmViewList.get(i).findViewById(R.id.tabTextView);
                tabTextView.setTextColor(ContextCompat.getColor(this, R.color.tab_unselect));
            }
        }
    }
}

【3】以上代码中用到的底部Tab文本布局layout_main_bottom.xml，当然此处也可以用动态java文件直接去创建布局创建ImageView和TextView来实现此等简单布局。此处只是简单实现。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <LinearLayout style="@style/MainBottomStyle">
        <ImageView
            android:id="@+id/tabImageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <TextView
            android:id="@+id/tabTextView"
            android:layout_marginTop="@dimen/dimen5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    LinearLayout>


LinearLayout>

【4】因为main_tab1到main_tab4为同类布局，此处只展示tab1的代码，是个简单的选择器布局。

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/ic_wechat_select" android:state_selected="true"/>
    <item android:drawable="@drawable/ic_wechat_unselect" android:state_selected="false"/>
    <item android:drawable="@drawable/ic_wechat_unselect"/>

selector>

【5】选择器中所使用的drawable均来自IconFont的svg素材，此处展示其中之一

<vector android:height="24dp" android:viewportHeight="1024.0"
    android:viewportWidth="1024.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#51C332" android:pathData="M812.7,584.6c-16.9,0 -36.3,-16.9 -36.3,-36.3 0,-16.9 16.9,-36.3 36.3,-36.3 27.2,0 44.1,16.9 44.1,36.3 1.3,18.1 -18.1,36.3 -44.1,36.3m-198.3,0c-16.9,0 -36.3,-16.9 -36.3,-36.3 0,-16.9 16.9,-36.3 36.3,-36.3 27.2,0 44.1,16.9 44.1,36.3 2.6,18.1 -16.9,36.3 -44.1,36.3m405.7,42.8c0,-143.9 -143.9,-260.5 -304.6,-260.5 -171.1,0 -304.6,116.7 -304.6,260.5s134.8,260.5 304.6,260.5c36.3,0 71.3,-10.4 107.6,-16.9l97.2,53.1 -27.2,-90.7c72.6,-51.8 127,-124.4 127,-206.1"/>
    <path android:fillColor="#51C332" android:pathData="M246.3,339.6c-27.2,0 -53.1,-16.9 -53.1,-44.1s27.2,-44.1 53.1,-44.1 44.1,16.9 44.1,44.1c2.6,27.2 -16.9,44.1 -44.1,44.1m251.5,-86.8c27.2,0 44.1,16.9 44.1,44.1s-16.9,44.1 -44.1,44.1 -53.1,-16.9 -53.1,-44.1 25.9,-44.1 53.1,-44.1m194.4,94.6c11.7,0 22,0 33.7,2.6C694.8,206.1 541.8,98.5 362.9,98.5 165.9,98.5 3.9,232 3.9,403.1c0,97.2 53.1,180.2 143.9,241.1L111.5,751.8l124.4,-63.5c44.1,10.4 80.4,16.9 127,16.9 11.7,0 22,0 33.7,-2.6 -7.8,-24.6 -11.7,-49.3 -11.7,-75.2 0,-150.4 137.4,-280 307.2,-280"/>
vector>

顺便奉上SVG素材(使用.svg格式的好处此处不做说明，有需要了解的同学请自行度之)下载的传送门阿里素材图库

• No2.Fragment+普通布局实现以上效果
  这种实现比较简单，不做过多说明，直接上代码。
  【1】首先看布局文件activity_main.xml

<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.allen.demo.MainActivity">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            
            <FrameLayout
                android:id="@+id/container"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1">
            FrameLayout>

            
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <LinearLayout
                    android:id="@+id/tab1Layout"
                    style="@style/MainBottomStyle">
                    <ImageView
                        android:id="@+id/tab1ImageView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/main_tab1"/>
                    <TextView
                        android:id="@+id/tab1TextView"
                        android:layout_marginTop="@dimen/dimen5"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/main_tab1"/>
                LinearLayout>

                <LinearLayout
                    android:id="@+id/tab2Layout"
                    style="@style/MainBottomStyle">
                    <ImageView
                        android:id="@+id/tab2ImageView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/main_tab2"/>
                    <TextView
                        android:id="@+id/tab2TextView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="@dimen/dimen5"
                        android:text="@string/main_tab2"/>
                LinearLayout>

                <LinearLayout
                    android:id="@+id/tab3Layout"
                    style="@style/MainBottomStyle">
                    <ImageView
                        android:id="@+id/tab3ImageView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/main_tab3"/>
                    <TextView
                        android:id="@+id/tab3TextView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="@dimen/dimen5"
                        android:text="@string/main_tab3"/>
                LinearLayout>

                <LinearLayout
                    android:id="@+id/tab4Layout"
                    style="@style/MainBottomStyle">
                    <ImageView
                        android:id="@+id/tab4ImageView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/main_tab4"/>
                    <TextView
                        android:id="@+id/tab4TextView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="@dimen/dimen5"
                        android:text="@string/main_tab4"/>
                LinearLayout>



            LinearLayout>

        LinearLayout>


LinearLayout>

【2】其次看java文件的改动MainActivity.java

package com.allen.demo;

import android.os.Bundle;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import butterknife.ButterKnife;
import butterknife.InjectView;
import butterknife.OnClick;

public class MainActivity extends AppCompatActivity {

    @InjectView(R.id.container)
    FrameLayout mLayoutContainer;
    @InjectView(R.id.tab1ImageView)
    ImageView mTab1Image;
    @InjectView(R.id.tab1TextView)
    TextView mTab1Text;
    @InjectView(R.id.tab1Layout)
    LinearLayout mTab1;
    @InjectView(R.id.tab2ImageView)
    ImageView mTab2Image;
    @InjectView(R.id.tab2TextView)
    TextView mTab2Text;
    @InjectView(R.id.tab2Layout)
    LinearLayout mTab2;
    @InjectView(R.id.tab3ImageView)
    ImageView mTab3Image;
    @InjectView(R.id.tab3TextView)
    TextView mTab3Text;
    @InjectView(R.id.tab3Layout)
    LinearLayout mTab3;
    @InjectView(R.id.tab4ImageView)
    ImageView mTab4Image;
    @InjectView(R.id.tab4TextView)
    TextView mTab4Text;
    @InjectView(R.id.tab4Layout)
    LinearLayout mTab4;


    FragmentManager mFragManager;
    FragmentTransaction mFragTran;
    Tab1Fragment mTab1Fragment;
    Tab2Fragment mTab2Fragment;
    Tab3Fragment mTab3Fragment;
    Tab4Fragment mTab4Fragment;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.inject(this);

        // 初始化界面所需布局
        initView();
    }

    /**
     * 初始化界面所需布局
     */
    private void initView() {
        mFragManager = getSupportFragmentManager();
        mFragTran = mFragManager.beginTransaction();
        mTab1Fragment = new Tab1Fragment();
        mTab2Fragment = new Tab2Fragment();
        mTab3Fragment = new Tab3Fragment();
        mTab4Fragment = new Tab4Fragment();

        mTab1Image.setSelected(true);
        mTab1Text.setTextColor(ContextCompat.getColor(this, R.color.tab_select));
        mFragTran.add(R.id.container, mTab1Fragment);  // 默认显示tab1
        mFragTran.commit();

    }

    @OnClick({R.id.tab1Layout, R.id.tab2Layout, R.id.tab3Layout, R.id.tab4Layout})
    public void onClick(View view) {
        mTab1Image.setSelected(false);
        mTab2Image.setSelected(false);
        mTab3Image.setSelected(false);
        mTab4Image.setSelected(false);
        mTab1Text.setTextColor(ContextCompat.getColor(this, R.color.tab_unselect));
        mTab2Text.setTextColor(ContextCompat.getColor(this, R.color.tab_unselect));
        mTab3Text.setTextColor(ContextCompat.getColor(this, R.color.tab_unselect));
        mTab4Text.setTextColor(ContextCompat.getColor(this, R.color.tab_unselect));

        switch (view.getId()) {
            case R.id.tab1Layout:
                // 微信
                if(mTab1Fragment == null) {
                    mTab1Fragment = new Tab1Fragment();
                }
                mFragTran = mFragManager.beginTransaction();
                mFragTran.replace(R.id.container, mTab1Fragment).commit();
                mTab1Image.setSelected(true);
                mTab1Text.setTextColor(ContextCompat.getColor(this, R.color.tab_select));
                break;
            case R.id.tab2Layout:
                // 通讯录
                if(mTab2Fragment == null) {
                    mTab2Fragment = new Tab2Fragment();
                }
                mFragTran = mFragManager.beginTransaction();
                mFragTran.replace(R.id.container, mTab2Fragment).commit();
                mTab2Image.setSelected(true);
                mTab2Text.setTextColor(ContextCompat.getColor(this, R.color.tab_select));
                break;
            case R.id.tab3Layout:
                // 发现
                if(mTab3Fragment == null) {
                    mTab3Fragment = new Tab3Fragment();
                }
                mFragTran = mFragManager.beginTransaction();
                mFragTran.replace(R.id.container, mTab3Fragment).commit();
                mTab3Image.setSelected(true);
                mTab3Text.setTextColor(ContextCompat.getColor(this, R.color.tab_select));
                break;
            case R.id.tab4Layout:
                // 我
                if(mTab4Fragment == null) {
                    mTab4Fragment = new Tab4Fragment();
                }
                mFragTran = mFragManager.beginTransaction();
                mFragTran.replace(R.id.container, mTab4Fragment).commit();
                mTab4Image.setSelected(true);
                mTab4Text.setTextColor(ContextCompat.getColor(this, R.color.tab_select));
                break;
        }
    }

}

• No3.FragmentTabHost+Fragment实现普通tab栏切换
  这一对组件的搭配出现就是为了代替第一组（TabActivity+TabHost）。下边贴出代码。
  【1】布局文件

<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.allen.demo.MainActivity">

    <FrameLayout
        android:id="@+id/mainContent"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white">

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />
    android.support.v4.app.FragmentTabHost>


LinearLayout>

【2】类文件

package com.allen.demo;

import android.os.Bundle;
import android.support.v4.app.FragmentTabHost;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TextView;

import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity {

    FragmentTabHost mTabHost;
    LayoutInflater mInflater;
    Class[] mFragments;
    int[] mImageReses;
    String[] mTextStrs;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.inject(this);

        // 初始化界面所需布局
        initView();
    }

    /**
     * 初始化界面所需布局
     */
    private void initView() {
        mInflater = LayoutInflater.from(this);

       mFragments = new Class[]{ Tab1Fragment.class, Tab2Fragment.class, Tab3Fragment.class, Tab4Fragment.class };
       mImageReses = new int[]{ R.drawable.main_tab1, R.drawable.main_tab2, R.drawable.main_tab3, R.drawable.main_tab4 };
       mTextStrs = new String[]{ getString(R.string.main_tab1), getString(R.string.main_tab2), getString(R.string.main_tab3), getString(R.string.main_tab4)  };

        mTabHost = (FragmentTabHost)findViewById(android.R.id.tabhost);
        mTabHost.setup(this, getSupportFragmentManager(), R.id.mainContent);//实际界面内容

        for(int i=0; i
            TabHost.TabSpec tabSpec = mTabHost.newTabSpec(mTextStrs[i]).setIndicator(createBottomView(i));
            mTabHost.addTab(tabSpec, mFragments[i], null);
        }
        //设置第一个的颜色
        View childAt = mTabHost.getTabWidget().getChildAt(0);
        TextView tvTab = (TextView) childAt.findViewById(R.id.tabTextView);
        tvTab.setTextColor(ContextCompat.getColor(this, R.color.tab_select));
        mTabHost.setOnTabChangedListener(myTabChangeListernr);
    }

    /**
     * 初始化时创建底部Tab文本栏
     * @param i
     * @return
     */
    private View createBottomView(int i) {
        View btmView = mInflater.inflate(R.layout.layout_main_bottom, null);
        ImageView tabImageView =(ImageView)btmView.findViewById(R.id.tabImageView);
        TextView tabTextView = (TextView)btmView.findViewById(R.id.tabTextView);

        tabImageView.setImageResource(mImageReses[i]);
        tabTextView.setText(mTextStrs[i]);
        return btmView;
    }

    private TabHost.OnTabChangeListener myTabChangeListernr = new TabHost.OnTabChangeListener() {
        @Override
        public void onTabChanged(String tabId) {
            for (int i = 0; i < mTextStrs.length; i++) {
                // 设置Tab按钮的背景
                View childAt = mTabHost.getTabWidget().getChildAt(i);
                TextView tvTab = (TextView) childAt.findViewById(R.id.tabTextView);

                if(mTextStrs[i].equals(tabId)) {
                    tvTab.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.tab_select));
                }else{
                    tvTab.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.tab_unselect));
                }
            }
        }
    };

}

• No4.TabLayout +ViewPager 实现滑动的布局
  TabLayout是谷歌MD设计理念下诞生的控件之一。此处做以简单应用来实现上述效果。
  【1】.添加依赖
  compile ‘com.android.support:design:25.0.0’
  【2】.布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.allen.demo.MainActivity">

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/view_pager"/>

    
    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@android:color/white"
        app:tabTextColor="@color/tab_unselect"
        app:tabSelectedTextColor="@color/tab_select"
        app:tabGravity="fill"
        android:id="@+id/tab_layout" />

LinearLayout>

【3】.类文件

package com.allen.demo;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;

import java.util.ArrayList;
import java.util.List;

import butterknife.ButterKnife;
import butterknife.InjectView;

public class MainActivity extends AppCompatActivity {


    @InjectView(R.id.view_pager)
    ViewPager mViewPager;
    @InjectView(R.id.tab_layout)
    TabLayout mTabLayout;

    private Tab1Fragment mTab1Fragment;
    private Tab2Fragment mTab2Fragment;
    private Tab3Fragment mTab3Fragment;
    private Tab4Fragment mTab4Fragment;
    private List mList;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.inject(this);

        // 初始化界面所需布局
        initView();
    }

    /**
     * 初始化界面所需布局
     */
    private void initView() {
        mList = new ArrayList<>();
        mTab1Fragment = new Tab1Fragment();
        mTab2Fragment = new Tab2Fragment();
        mTab3Fragment = new Tab3Fragment();
        mTab4Fragment = new Tab4Fragment();
        mList.add(mTab1Fragment);
        mList.add(mTab2Fragment);
        mList.add(mTab3Fragment);
        mList.add(mTab4Fragment);

        mViewPager.setOffscreenPageLimit(3);
        mViewPager.setAdapter(new MainAdapter(getSupportFragmentManager(), mList));

        initBottomView();
    }

    /**
     * 初始化底部文本Tab栏
     */
    private void initBottomView() {
        mTabLayout.setupWithViewPager(mViewPager);
        int[] mIcons = { R.drawable.main_tab1, R.drawable.main_tab2, R.drawable.main_tab3, R.drawable.main_tab4};
        String[] txts = { getString(R.string.main_tab1), getString(R.string.main_tab2), getString(R.string.main_tab3), getString(R.string.main_tab4)};
        for(int i=0; i/**
     * 适配器
     */
    class MainAdapter extends FragmentPagerAdapter {

        private List mList;
        public MainAdapter(FragmentManager fm, List mList) {
            super(fm);
            this.mList = mList;
        }

        @Override
        public Fragment getItem(int position) {
            return mList.get(position);
        }

        @Override
        public int getCount() {
            return mList.size();
        }
    }


}

• No5.DrawerLayout+NavigationView实现侧滑抽屉式布局
  这一组要介绍的这对组件都是基于MD理念的产物，谷歌提倡实现抽屉效果时使用。直接进入主题。
  【1】.先上效果图，北京图挺丑的，看官可以忽略。
  

【2】.展示主布局文件

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    FrameLayout>

    
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/main_drawer" />

android.support.v4.widget.DrawerLayout>

【3】导航菜单布局文件

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single"
        android:id="@+id/group_main">
        <item
            android:id="@+id/main_tab1"
            android:icon="@drawable/main_tab1"
            android:title="@string/main_tab1" />
        <item
            android:id="@+id/main_tab2"
            android:icon="@drawable/main_tab2"
            android:title="@string/main_tab2" />
    group>

    <group android:checkableBehavior="none"
        android:id="@+id/group_other">
        <item android:id="@+id/main_tab3"
            android:title="@string/main_tab3"
            android:icon="@drawable/main_tab3" />

        <item
            android:id="@+id/main_tab4"
            android:icon="@drawable/main_tab4"
            android:title="@string/main_tab4" />

    group>

menu>

【4】导航菜单头布局（只是简单的背景图片）

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@mipmap/nav_header"
    android:gravity="bottom"
    android:orientation="vertical">

LinearLayout>

【5】.类文件

package com.allen.demo;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;

import butterknife.ButterKnife;
import butterknife.InjectView;

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {
    /**
     * 抽屉布局
     */
    @InjectView(R.id.drawer_layout)
    DrawerLayout mDrawerLayout;
    /**
     * 导航菜单布局
     */
    @InjectView(R.id.nav_view)
    NavigationView mNavMenu;

    Tab1Fragment mTab1Fragment;
    Tab2Fragment mTab2Fragment;
    Tab3Fragment mTab3Fragment;
    Tab4Fragment mTab4Fragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.inject(this);

        if (savedInstanceState != null) {
            mTab1Fragment = (Tab1Fragment) getSupportFragmentManager().getFragment(savedInstanceState, "Tab1Fragment");
            mTab2Fragment = (Tab2Fragment) getSupportFragmentManager().getFragment(savedInstanceState, "Tab2Fragment");
            mTab3Fragment = (Tab3Fragment) getSupportFragmentManager().getFragment(savedInstanceState, "Tab3Fragment");
            mTab4Fragment = (Tab4Fragment) getSupportFragmentManager().getFragment(savedInstanceState, "Tab4Fragment");
        } else {
            mTab1Fragment = Tab1Fragment.newInstance();
            mTab2Fragment = Tab2Fragment.newInstance();
            mTab3Fragment = Tab3Fragment.newInstance();
            mTab4Fragment = Tab4Fragment.newInstance();
        }

        // 默认初始化只显示tab1
        if (!mTab1Fragment.isAdded()) {
            getSupportFragmentManager().beginTransaction() .add(R.id.container, mTab1Fragment, "Tab1Fragment") .commit();
        }

        mNavMenu.setNavigationItemSelectedListener(this);
    }

    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        if (mTab1Fragment.isAdded()) {
            getSupportFragmentManager().putFragment(outState, "Tab1Fragment", mTab1Fragment);
        }
        if (mTab2Fragment.isAdded()) {
            getSupportFragmentManager().putFragment(outState, "Tab2Fragment", mTab2Fragment);
        }
        if (mTab3Fragment.isAdded()) {
            getSupportFragmentManager().putFragment(outState, "Tab3Fragment", mTab3Fragment);
        }
        if (mTab4Fragment.isAdded()) {
            getSupportFragmentManager().putFragment(outState, "Tab4Fragment", mTab4Fragment);
        }
    }

    private void showTab1() {
        FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
        fragmentTransaction.show(mTab1Fragment);
        fragmentTransaction.hide(mTab2Fragment);
        fragmentTransaction.hide(mTab3Fragment);
        fragmentTransaction.hide(mTab4Fragment);
        fragmentTransaction.commit();
    }

    private void showTab2() {
        FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
        fragmentTransaction.show(mTab2Fragment);
        fragmentTransaction.hide(mTab1Fragment);
        fragmentTransaction.hide(mTab3Fragment);
        fragmentTransaction.hide(mTab4Fragment);
        fragmentTransaction.commit();
    }

    private void showTab3() {
        FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
        fragmentTransaction.show(mTab3Fragment);
        fragmentTransaction.hide(mTab1Fragment);
        fragmentTransaction.hide(mTab2Fragment);
        fragmentTransaction.hide(mTab4Fragment);
        fragmentTransaction.commit();
    }

    private void showTab4() {
        FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
        fragmentTransaction.show(mTab4Fragment);
        fragmentTransaction.hide(mTab1Fragment);
        fragmentTransaction.hide(mTab2Fragment);
        fragmentTransaction.hide(mTab3Fragment);
        fragmentTransaction.commit();
    }

    /**
     * 导航菜单子项点击事件处理
     * @param item
     * @return
     */
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        mDrawerLayout.closeDrawer(GravityCompat.START);

        int id = item.getItemId();
        if(id == R.id.main_tab1) {
            mNavMenu.getMenu().getItem(0).setChecked(true);
            showTab1();
        }else if(id == R.id.main_tab2) {
            mNavMenu.getMenu().getItem(1).setChecked(true);
            showTab2();
        }else if(id == R.id.main_tab3) {
            showTab3();
        }else if(id == R.id.main_tab4) {
            showTab4();
        }

        return true;
    }
}

结尾：额，经此梳理，算是再复习一次吧。下铺的兄弟，记得关灯。。。