利用TabLayout和ViewPager打造app架构的底部导

国际惯例：

底部导航效果图

因为要使用TabLayout，

import android.support.design.widget.TabLayout;

导包TabLayout，要添加的引用。

compile'com.android.support:design:25.0.0'

先上主类的布局文件：main_a.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_a"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/main_bg"
        />
    <android.support.design.widget.TabLayout
        android:id="@+id/main_tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/MainTabLayout"
        app:tabMode="fixed"
        />
</LinearLayout>

TabLayout的style="@style/MainTabLayout"。注释很清晰，不再累赘。

<style name="MainTabLayout">
    <item name="tabIndicatorColor">@android:color/transparent</item> <!-- tabLayout 底部选择状态横线的的颜色：透明 -->
    <item name="tabIndicatorHeight">0dp</item><!-- tabLayout 底部选择状态横线的高度：0 -->
    <item name="tabPaddingStart">12dp</item>
    <item name="tabPaddingEnd">12dp</item>
</style>

主类：MainA.java。注释很清晰，不再累赘。

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

public class MainA extends AppCompatActivity {
    private Fragment[] fragments = {new MainFragment(), new MainFragment(), new MainFragment(), new MainFragment(), new MainFragment()};
    private int[] imgs = {R.drawable.bottombar_01, R.drawable.bottombar_02, R.drawable.bottombar_03, R.drawable.bottombar_04, R.drawable.bottombar_05 };
    private String[] names = {"tab1", "tab2", "tab3", "tab4", "tab5" };
    
    private TabLayout tabLayout;
    private MainPageAdapter adapter;//PageAdapter适配器
    private ViewPager container;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_a);

        initView();//初始化布局组件

        setView();//对组件按需求进行相关属性设置
    }
    public void initView(){
        tabLayout = (TabLayout) findViewById(R.id.main_tablayout);
        adapter = new MainPageAdapter(getSupportFragmentManager(),fragments);
        container = (ViewPager) findViewById(R.id.container);
    }
    public void setView(){
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
        container.setAdapter(adapter);
        tabLayout.setupWithViewPager(container,false );//第二个参数autoRefresh：是否自动刷新(切换的时候是否刷PagerAdapter选中的Fragment)
        //以下是对TabLayout进行相关设置
        int tabCount = tabLayout.getTabCount();//获取TabLayout的个数
        for (int i=0; i<tabCount; i++) {
            View view = LayoutInflater.from(MainA.this).inflate(R.layout.main_tab,null);
            ImageView imageView = (ImageView) view.findViewById(R.id.main_tab_img);
            imageView.setImageDrawable(getResources().getDrawable(imgs[i]));
            TextView textView = (TextView) view.findViewById(R.id.main_tab_tv);
            textView.setText(names[i]);

            TabLayout.Tab tab = tabLayout.getTabAt(i);////获取TabLayout的子元素Tab
            tab.setCustomView(view);//设置TabLayout的子元素Tab的布局View
        }
    }
}

TabLayout的子元素Tab的布局View文件main_tab.xml

main_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="44dp"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/main_tab_img"
        android:layout_width="match_parent"
        android:layout_height="28dp"
        android:src="@drawable/bottombar_01" />

    <TextView
        android:id="@+id/main_tab_tv"
        android:layout_width="match_parent"
        android:layout_height="16dp"
        android:gravity="center"
        android:text="首页"
        android:textColor="@drawable/tab_text_color" />
</LinearLayout>

图片选择器：bottombar_01.xml。【总共有五个，这里就展示一个】

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tab_bar_1_1" android:state_selected="true"/><!--选中时候显示的图片-->
    <item android:drawable="@drawable/tab_bar_1" android:state_selected="false"/><!--默认没有选中的图片-->
</selector>

字体颜色选择器：tab_text_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Non focused states -->
    <item android:state_focused="false" android:state_pressed="false" android:state_selected="false" android:color="@color/main_tab_text"/>
    <item android:state_focused="false" android:state_pressed="false" android:state_selected="true" android:color="@color/main_tab_text_selected"/>
    <!-- Focused states -->
    <item android:state_focused="true" android:state_pressed="false" android:state_selected="false" android:color="@color/main_tab_text_selected"/>
    <item android:state_focused="true" android:state_pressed="false" android:state_selected="true" android:color="@color/main_tab_text_selected"/>
    <!-- Pressed -->
    <item android:state_pressed="true" android:state_selected="true" android:color="@color/main_tab_text_selected"/>
    <item android:state_pressed="true" android:color="@color/main_tab_text_selected"/>
</selector>

适配器：MainPageAdapter.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.ViewGroup;

public class MainPageAdapter extends FragmentPagerAdapter{
    Fragment[] fragments;

    public MainPageAdapter(FragmentManager fm,Fragment[] fragments){
        super(fm);
        this.fragments = fragments;
    }

    @Override
    public int getCount() {
        if(fragments==null){
            return 0;
        }
        return fragments.length;
    } 
    @Override
    public Fragment getItem(int position) {
        Bundle bundle = new Bundle();
        bundle.putInt("position",position);
        fragments[position].setArguments(bundle);
        return fragments[position];
    }
    @Override
    public int getItemPosition(Object object) {
        return super.getItemPosition(object);
    }
    @Override
    public long getItemId(int position){
        return super.getItemId(position);
    }
    @Override
    public void destroyItem(ViewGroup container, int position, Object object){
        super.destroyItem(container,position,object);
    }

}

还是勤快一点，让大家更清晰，把MainFragment.java粘贴出来。

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
 
public class MainFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.main_f,null);
        TextView textView = (TextView) view.findViewById(R.id.textview);
        int position = getArguments().getInt("position",0);
        textView.setText("textView------position="+position);
        return view;
    }
}

MainFragment的布局文件：main_f.xml。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_a"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <TextView
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"/>
</LinearLayout>

感谢阅览！希望对你有所帮助！你的支持是我的动力！
如有疑问 联系QQ：563084073。