TabLayout的使用和踩过的坑

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

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


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

二、xml中使用

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#fff">
        </android.support.design.widget.TabLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    </android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
   相关样式设置:
    设置背景: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设置适配器的时候,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) {

            }
        });


发布了109 篇原创文章 · 获赞 26 · 访问量 16万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览