【Android】另一种Tab的实现--TabLayout

来源：互联网发布：淘宝助理数据设置编辑：程序博客网时间：2024/05/19 17:27

在我们的应用市场上的程序，十个应用程序有九个是采用了Tab页卡的这样一种形式。实现的方式也各不相同，古老的TabHost，ViewPager+Fragment+自定义的Title，3.0后ActionBar所提供的Tab，以及各种成熟的Tab开源控件等，都可以直接或间接地实现Tab的效果。在5.0后放出的design包中官方推出了TabLayout控件来方便地实现类似的效果。首先上效果图：

以TabLayout的方式来实现这种页卡的效果非常的方便，顶上的一个TabLayout + 下面的一个ViewPager，ViewPager里面放置Fragment。

dependencies {    compile 'com.android.support:design:23.0.1'    compile 'com.android.support:support-v4:23.0.1'}

TabLayout是依赖于design包的所以需要导入你的Android SDK里面相应的design包和support-v4包。

布局：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity"    android:orientation="vertical">    <android.support.design.widget.TabLayout        android:id="@+id/tab_layout"        android:layout_width="match_parent"        android:layout_height="wrap_content" />    <android.support.v4.view.ViewPager        android:id="@+id/tab_vp"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1" /></LinearLayout>

主要的代码：

public class MainActivity extends AppCompatActivity {    private ViewPager viewPager;    private TabLayout tabLayout;    //Tab页卡的title    private String[] strs = {"首页","发现","我"};    private static final List<Fragment> FRAGMENTS = new ArrayList<Fragment>();    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //initView        tabLayout = (TabLayout) findViewById(R.id.tab_layout);        viewPager = (ViewPager) findViewById(R.id.tab_vp);        //为TabPagerAdapter准备数据        if(FRAGMENTS.size() == 0){            FRAGMENTS.add(new HomeFragment());            FRAGMENTS.add(new FoundFragment());            FRAGMENTS.add(new MeFragment());        }        FragmentManager fm = this.getSupportFragmentManager();        // 构造一个TabPagerAdapter对象        TabPagerAdapter adapter = new TabPagerAdapter(fm, FRAGMENTS);        // 设置TabLayout模式        // MODE_FIXED => 所有的tab撑满整个屏幕        // MODE_SCROLLABLE => 整个可滑动的，一般用于Tab比较多的情况下        tabLayout.setTabMode(TabLayout.MODE_FIXED);        // 设置Tab的选择监听        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {            @Override            public void onTabSelected(TabLayout.Tab tab) {                // 每当我们选择了一个Tab就将ViewPager滚动至对应的Page                viewPager.setCurrentItem(tab.getPosition(), true);            }            @Override            public void onTabUnselected(TabLayout.Tab tab) {            }            @Override            public void onTabReselected(TabLayout.Tab tab) {            }        });        // 构造一个TabLayoutOnPageChangeListener对象        TabLayout.TabLayoutOnPageChangeListener listener =                new TabLayout.TabLayoutOnPageChangeListener(tabLayout);        // 设置ViewPager页面改变后的监听        viewPager.addOnPageChangeListener(listener);        // 设置从PagerAdapter中获取Tab        tabLayout.setTabsFromPagerAdapter(adapter);        // 设置ViewPager的适配器        viewPager.setAdapter(adapter);    }    private class TabPagerAdapter extends FragmentPagerAdapter {        private List<Fragment> mList;        public TabPagerAdapter(FragmentManager fm,List<Fragment> list) {            super(fm);            mList = list;        }        @Override        public Fragment getItem(int position) {            return mList.get(position);        }        @Override        public int getCount() {            return mList.size();        }        @Override        public CharSequence getPageTitle(int position) {            if(position< 0 || position >2) position=0;            return strs[position];        }    }}

所用的Fragment里面只是使用到了一个TextView，这里就不贴代码了。在文章的最后会给出在Android Studio上的源代码，如果你使用的是Eclipse，请自行搬运。

点击下载源代码

0 0