Design包下TabLayout的简单使用

Android design支持库中的TabLayout一般都用来实现头部Tab的效果。例如：

m3.png

但是像微信这种底部Tab布局在我们实际项目中还是非常常见的设计，现在我们也可以用TabLayout非常方便的实现。

TabLayout.gif

布局

下面开始实现底部Tab，layout布局比较简单，只用把TabLayout放置在底部即可。

自定义的style,把tabIndicatorHeight设为0dp。

代码实现

首先设置好ViewPager，然后设置TabLayout与ViewPager的对应关系，最后最关键的是使用TabLayout的setCustomView设置自定义的TAB View。

public class TabLayoutActivity extends AppCompatActivity {
    private static final String TAG = "TabLayoutActivity";
    private  ViewPager mViewPager;
    private TabLayout mTabLayout;
    private MyAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        mViewPager = (ViewPager) findViewById(R.id.Tab_ViewPager);
        mTabLayout = (TabLayout) findViewById(R.id.TabLayout);
        mAdapter = new MyAdapter(getSupportFragmentManager(),this);
        mViewPager.setAdapter(mAdapter);
        mTabLayout.setupWithViewPager(mViewPager);


//        mViewPager.setCurrentItem(0);

        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                changeTabSelect(tab);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                changeTabNormal(tab);
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

        for (int i = 0;i

其中changeTabSelect(TabLayout.Tab tab)与changeTabNormal(TabLayout.Tab tab)是用来实现Tab页转换的时候图片以及文字颜色的改变。
Fragment中：

public class PageFragment extends Fragment{
    public static final String ARG_PAGE = "ARG_PAGE";
    private int mPage;

    public static PageFragment newInstance(int page) {
        Bundle args = new Bundle();
        args.putInt(ARG_PAGE, page);
        PageFragment pageFragment = new PageFragment();
        pageFragment.setArguments(args);
        return pageFragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mPage = getArguments().getInt(ARG_PAGE);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_page, container, false);
//        TextView textView = (TextView) view;
        TextView textView = (TextView) view.findViewById(R.id.Fragment_Page_TV);
        textView.setText("Fragment #" + mPage);
        return view;
    }
}

在MyAdapter中：

public class MyAdapter extends FragmentPagerAdapter{
    private final int PAGE_COUNT = 3;
    private String[] tabs = new String[]{"标题一","标题二","标题三"};
    private Context context;
    private int imageResId[] = new int[]{R.mipmap.homepage_normal,R.mipmap.startorder_normal,R.mipmap.shopcar_normal};
    private int imageResPress[] = new int[]{R.mipmap.homepage_select,R.mipmap.startorder_select,R.mipmap.shopcar_select};
    public MyAdapter(FragmentManager fm,Context context) {
        super(fm);
        this.context = context;
    }

    @Override
    public Fragment getItem(int position) {
        return PageFragment.newInstance(position+1);
    }

    @Override
    public int getCount() {
        return PAGE_COUNT;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return tabs[position];
    }
    public View getTabView(int position) {
        View v = LayoutInflater.from(context).inflate(R.layout.custom_tab, null);
        TextView tv = (TextView) v.findViewById(R.id.textview);
        tv.setText(tabs[position]);
        ImageView img = (ImageView) v.findViewById(R.id.imageview);
        img.setImageResource(imageResId[position]);
        if (position == 0) {
            tv.setTextColor(Color.GREEN);
            img.setImageResource(imageResPress[position]);
        } else {
            tv.setTextColor(Color.BLACK);
            img.setImageResource(imageResId[position]);
        }
        return v;
    }
}

其中getTabView(int position)是用来初始化Tab页面的图标与文字的。

 public View getTabView(int position) {
        View v = LayoutInflater.from(context).inflate(R.layout.custom_tab, null);
        TextView tv = (TextView) v.findViewById(R.id.textview);
        tv.setText(tabs[position]);
        ImageView img = (ImageView) v.findViewById(R.id.imageview);
        img.setImageResource(imageResId[position]);
        if (position == 0) {
            tv.setTextColor(Color.GREEN);
            img.setImageResource(imageResPress[position]);
        } else {
            tv.setTextColor(Color.BLACK);
            img.setImageResource(imageResId[position]);
        }
        return v;
    }