Androidx Design控件之TabLaout（二），仿微信实现App底部Tab布局【完结】

TabLayout的两种常见设计布局：

顶部标签页（如今日头条，知乎）
底部菜单栏（如微信主界面）
其中上一篇文章中讲到了Android Design新控件之TabLaout（一），快速打造一个滑动标签页，接着接着举例使用TabLayout+ViewPager来简单实现一个类似于微信等App底部菜单栏布局，按照惯例，我们先来看看简单的效果图：

 

这个。。我们只讲与上一篇不一样的地方哈

新建 WechatActicity

package com.angugo.tablayout;

import android.os.Bundle;

import android.widget.ImageView;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;

import com.angugo.tablayout.FragmentAdapter;
import com.angugo.tablayout.R;
import com.angugo.tablayout.TabFragment;
import com.google.android.material.tabs.TabLayout;

import java.util.ArrayList;
import java.util.List;
/**
 * 主页面
 * Created by lijuan on 2016/8/23.
 */
public class WechatActicity extends AppCompatActivity {
    private String[] titles = new String[]{"微信", "通讯录", "发现", "我"};
    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private FragmentAdapter adapter;
    //ViewPage选项卡页面集合
    private List<Fragment> mFragments;
    //Tab标题集合
    private List<String> mTitles;
    /**
     * 图片数组
     */
    private int[] mImgs=new int[]{R.drawable.selector_tab_weixin, R.drawable.selector_tab_friends, R.drawable.selector_tab_find,
            R.drawable.selector_tab_me};

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

        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mTabLayout = (TabLayout) findViewById(R.id.tablayout);

        mTitles = new ArrayList<>();
        for (int i = 0; i < 4; i++) {
            mTitles.add(titles[i]);
        }

        mFragments = new ArrayList<>();
        for (int i = 0; i < mTitles.size(); i++) {
            mFragments.add(TabFragment.newInstance(i));
        }
        adapter = new FragmentAdapter(getSupportFragmentManager(), mFragments, mTitles);
        mViewPager.setAdapter(adapter);//给ViewPager设置适配器
        mTabLayout.setupWithViewPager(mViewPager);//将TabLayout和ViewPager关联起来

        mTabLayout.setSelectedTabIndicatorHeight(0);
        for (int i = 0; i < mTitles.size(); i++) {
            //获得到对应位置的Tab
            TabLayout.Tab itemTab = mTabLayout.getTabAt(i);
            if (itemTab != null) {
                //设置自定义的标题
                itemTab.setCustomView(R.layout.item_tab);
                TextView textView = (TextView) itemTab.getCustomView().findViewById(R.id.tv_name);
                textView.setText(mTitles.get(i));
                ImageView imageView= (ImageView) itemTab.getCustomView().findViewById(R.id.iv_img);
                imageView.setImageResource(mImgs[i]);
            }
        }
        mTabLayout.getTabAt(0).getCustomView().setSelected(true);
    }

}

1. 其中需要注意几点：
   （1）mTabLayout.setSelectedTabIndicatorHeight(0);是为了不显示tab底部的横线；
   （2）系统默认的TabLayout模式是MODE_FIXED，让底部tab布局不可滑动；
   （3）itemTab.setCustomView(R.layout.item_tab);用于设置自定义的标题
   
   activity_wechat_acticity.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="match_parent"
    android:orientation="vertical">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="#bebebe" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@android:color/white" />
</LinearLayout>

selector_tab_find.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true" android:drawable="@mipmap/icon_weixin_press"/>
    <item android:drawable="@mipmap/icon_weixin_normal"/>

</selector>

selector_tab_friends.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true" android:drawable="@mipmap/icon_friend_press"/>
    <item android:drawable="@mipmap/icon_friend_normal"/>

</selector>

selector_tab_me.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true" android:drawable="@mipmap/icon_me_press"/>
    <item android:drawable="@mipmap/icon_me_normal"/>

</selector>

selector_tab_weixin.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_selected="true" android:drawable="@mipmap/icon_weixin_press"/>
<item android:drawable="@mipmap/icon_weixin_normal"/>

</selector>

mipmap-hdpi文件下copy 下面文件

分别对应名称为

icon_find_normal.png

icon_find_press.png

icon_friend_normal.png

icon_friend_press.png

icon_me_normal.png

icon_me_press.png

icon_weixin_normal.png

icon_weixin_press.png

 

FragmentAdapter.class 与 TabFragment.class 和tab_fragment.xml 与上次的一致 就不贴了 可以看文章（1）

item_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="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/iv_img"
        android:layout_width="26dp"
        android:layout_height="26dp" />

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/selector_blue" />

</LinearLayout>