Android使用TabLayout实现选项卡

来源：互联网发布：施工网络进度计划编辑：程序博客网时间：2024/05/20 19:28

使用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简单呢

0 0