频道栏目
首页 > 程序开发 > 移动开发 > Android > 正文
Android的TabLayout 使用详情
2018-01-10 11:33:21         来源:虎虎之王的博客  
收藏   我要投稿
依赖 
compile 'com.android.support:design:25.3.1'

TabLayout属性

app:tabMode="fixed"         固定
app:tabMode="scrollable"    可滑动
app:tabIndicatorColor       滚动下划线的颜色  
app:tabSelectedTextColor    tab选中后文字的颜色  
app:tabTextColor            tab默认显示的文字颜色  
app:tabMaxWidth             tab最大宽度
app:tabMinWidth             tab最小宽度

设置tabMode为 scrollable

添加tab标题

TabLayout mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
mTabLayout.addTab(mTabLayout.newTab().setText("tab_1"));
mTabLayout.addTab(mTabLayout.newTab().setText("tab_2"));
mTabLayout.addTab(mTabLayout.newTab().setText("tab_3"));
mTabLayout.addTab(mTabLayout.newTab().setText("tab_4"));
mTabLayout.addTab(mTabLayout.newTab().setText("tab_5"));
mTabLayout.addTab(mTabLayout.newTab().setText("tab_6"));
mTabLayout.addTab(mTabLayout.newTab().setText("tab_7"));
mTabLayout.addTab(mTabLayout.newTab().setText("tab_8"));
mTabLayout.addTab(mTabLayout.newTab().setText("tab_9"));
mTabLayout.addTab(mTabLayout.newTab().setText("tab_10"));

运行后效果如下:
scrollable.gif

修改tabMode为 fixed重新运行

app:tabMode="fixed"

发现页面无法滑动。
fixed.gif

通常TabLayout和ViewPager配合在一起使用,先看图:

home.gif

布局代码:



    

    


    

    


创建layout_home,layout_address,layout_discover,layout_me布局
布局都一样,只有一个TextView,分别为首页,通讯录,发现,我。



    

Activity 中代码

public class TabLayoutActivity extends AppCompatActivity {

    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private List mViewList;
    private List mList;

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

        mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
        View home = LayoutInflater.from(getApplicationContext()).inflate(R.layout.layout_home, null);
        View address = LayoutInflater.from(getApplicationContext()).inflate(R.layout.layout_address, null);
        View discover = LayoutInflater.from(getApplicationContext()).inflate(R.layout.layout_discover, null);
        View me = LayoutInflater.from(getApplicationContext()).inflate(R.layout.layout_me, null);

        mViewList = new ArrayList<>();
        mViewList.add(home);
        mViewList.add(address);
        mViewList.add(discover);
        mViewList.add(me);

        mList = new ArrayList<>();
        mList.add("首页");
        mList.add("通讯录");
        mList.add("发现");
        mList.add("我");

        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mViewPager.setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
                return mViewList.size();
            }

            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;
            }

            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView(mViewList.get(position));
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(mViewList.get(position));
                return mViewList.get(position);
            }

            @Override
            public CharSequence getPage(int position) {
                return mList.get(position);
            }
        });

        mTabLayout.setupWithViewPager(mViewPager);

        //TabLayout监听
        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //切换tab时不使用ViewPager动画效果
                mViewPager.setCurrentItem(tab.getPosition(),false);
            }

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

            }

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

            }
        });
    }
}
运行即可实现图中的效果。
点击复制链接 与好友分享!回本站首页
上一篇:Android面向面试复习:ANR面试解析
下一篇:Android进行图片轮播banner
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站