Android使用TabLayout实现选项卡

使用TabLayout实现一个选项卡效果,之前一直自定义ViewGroup实现,今天之间用的Google框架,给我的感觉就是方便!

先上效果图:

内容区域使用的ViewPager，导航条使用的TabLayout

TabLayout在android.support.design包下，使用AS的同学记得先导入下

布局使用的线性布局：挺简单的，不多说了。

<android.support.design.widget.TabLayout
        android:id="@+id/id_tl_tabs"
        style="@style/myTabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff" />
    <android.support.v4.view.ViewPager
        android:id="@+id/id_vp_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

给Tablayout设置了一个Style，Style中设置一下TabLayout的基本样式

<!-- 使用Style设置滚动条样式-->
    <style name="myTabLayout" parent="Widget.Design.TabLayout">
        <!--tab的布局-->
        <item name="tabGravity">fill</item>
        <!--tab下面的滚动条的颜色-->
        <item name="tabIndicatorColor">#ff3355</item>
        <!--将tab设置成固定-->
        <item name="tabMode">fixed</item>
    </style>

注意，要是直接使用属性的话，需要引入"http://schema/android.com/apk/res-auto“”这个命名空间

下面是代码部分

public class MainActivity extends FragmentActivity {

    private ViewPager mVpContainer;
    private TabLayout mTvTabs;
    private Fragment[] mFragments = new MyFrag1[]{
            new MyFrag1(1), new MyFrag1(2), new MyFrag1(3)
    };
    private String[] mTitles = new String[]{
            "Tab1", "Tab2", "Tab3"
    };

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

    private void initView() {
        mVpContainer = (ViewPager) findViewById(R.id.id_vp_container);
        mTvTabs = (TabLayout) findViewById(R.id.id_tl_tabs);

        // 设置与Fragment的关联
        mVpContainer.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return mFragments[position];
            }

            @Override
            public int getCount() {
                return mFragments.length;
            }

            @Override
            // 设置与TAB的关联
            public CharSequence getPageTitle(int position) {
                return mTitles[position];
            }
        });
        // 设置与ViewPager的关联
        mTvTabs.setupWithViewPager(mVpContainer);
    }
}

Fragement

随便写了个Fragment用作测试

public class MyFrag1 extends android.support.v4.app.Fragment {
    private int index;

    public MyFrag1() {
        super();
    }

    public MyFrag1(int index) {
        super();
        this.index = index;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        TextView tv = new TextView(getContext());
        ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT
                , ViewGroup.LayoutParams.WRAP_CONTENT);
        
        tv.setText("Fragment "+index);
        return tv;
    }
}

好了，这样一个选项卡就完成了，是不是比自定义ViewGroup简单呢