TabLayout的使用和踩过的坑

在2015年的google大会上,google发布了新的Android Support Design库,里面包含了几个新的控件,其中就有一个TabLayout,TabLayout能够实现叶签效果,在这之前,我们一般使用的是开源框架ViewPagerIndicator、TabPageIndicator或者是RadioButton来实现单选效果,现在我们就来介绍他和viewpager的搭配使用。

首先我们先来看看效果图:

TabLayout的使用和踩过的坑_第1张图片

一、在gradle中添加依赖:
    compile 'com.android.support:design:26.0.0-alpha1'

二、xml中使用




    

        
        
    

    
    
    相关样式设置:
    设置背景:android:background="#fff"
    设置底部下划线颜色:app:tabIndicatorColor="#f00"
    设置选中后标签字体的颜色:app:tabSelectedTextColor="@android:color/holo_purple"
    设置默认标签字体颜色 :app:tabTextColor="#cccccc"
    设置下划线的高度:app:tabIndicatorHeight="3dp";为0可以隐藏
    设置显示的Tab的宽度:app:tabMaxWidth="100dp"
    设置显示Tab的横条:
    app:tabMode="fixed" ;//横条固定(默认)
    app:tabMode="scrollable";//横条支持滑动
    注意:
    (1)下划线的长度没有提供相关方法设置。

    (2) app:layout_behavior="@string/appbar_scrolling_view_behavior"不写会导致ViewPager充满屏幕。

三、activity中使用
    1、TabLayout可以脱离ViewPager单独使用,使用方法如下:
    TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
    tabLayout.addTab(tabLayout.newTab().setText("首页"));
    tabLayout.addTab(tabLayout.newTab().setText("下载"));
    tabLayout.addTab(tabLayout.newTab().setText("上传"));

    2、单独使用作用不大,在实际开发中基本上都是和ViewPager搭配使用

        MyAdapter myAdapter =new MyAdapter(getSupportFragmentManager());
        tabLayout.setupWithViewPager(viewPager);//viewpager进行绑定
        viewPager.setAdapter(myAdapter);

        private static final String[] TILEE = {"首页","下载","上传"};
        class MyAdapter extends FragmentPagerAdapter{

            public MyAdapter(FragmentManager fm) {
                super(fm);
            }

            @Override
            public Fragment getItem(int position) {
                return new Fragment();
            }

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

            @Override
            public CharSequence getPageTitle(int position) {
                return TILEE[position];
            }
        }
    注意 有人没有重写getPageTitle方法,直接在tabLayout.addTab(tabLayout.newTab().setText("首页"));里面进行标题设置,会无法显示标题内容,ViewPager也无法展示数据,会出现如下情况

TabLayout的使用和踩过的坑_第2张图片
原因是:再一次调用为tablayout设置适配器的时候,tablayout做了一次清空tab的处理。

其他属性设置:

默认选中:tablayout.getTabAt(position).select();

选中监听:

        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                Toast.makeText(MainActivity.this,tab.getPosition()+"tabLayout",Toast.LENGTH_SHORT).show();
            }

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

            }

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

            }
        });


你可能感兴趣的:(TabLayout的使用和踩过的坑)