首页 > 代码库 > TabLayout 简单使用。

TabLayout 简单使用。

2024-08-14 14:21:41   219人阅读

先上效果图

技术分享

 

在使用TabLayout 之前需要导入design包。 我使用的是android studio 只要在build.gradle中加入

compile ‘com.android.support:design:24.2.0‘ 即可。

一、首先看一下布局文件
技术分享
 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout 3     xmlns:android="http://schemas.android.com/apk/res/android" 4     xmlns:app="http://schemas.android.com/apk/res-auto" 5     xmlns:tools="http://schemas.android.com/tools" 6     android:layout_width="match_parent" 7     android:layout_height="match_parent" 8     android:orientation="vertical" 9     tools:context=".MainActivity">10 11 12     <android.support.design.widget.TabLayout13         android:id="@+id/tablayout"14         android:layout_width="match_parent"15         android:layout_height="wrap_content"16         android:background="@color/colorPrimary"17         app:tabIndicatorColor="@color/white"18         app:tabSelectedTextColor="@color/red"19         app:tabTextColor="@color/white"20         >21     </android.support.design.widget.TabLayout  >22 23     <android.support.v4.view.ViewPager24         android:id="@+id/viewpage"25         android:layout_width="match_parent"26         android:layout_height="0dp"27         android:layout_weight="1">28 29     </android.support.v4.view.ViewPager>30 31 </LinearLayout>
View Code

布局很简单，一个是TabLayout用来显示文字的，一个是ViewPage 用来真是页面内容的

其中
　　app:tabIndicatorColor="@color/white" 　　　　// 选中项下面的标线颜色
　　app:tabSelectedTextColor="@color/red"　　　　// 选中时标题字体颜色
　　app:tabTextColor="@color/white"　　　　　　　 // 标题字体默认颜色

 

二、 我们看看 TabLayout 的适配器，很简单

技术分享
package lyf.com.tablayoutdemo;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import java.util.List;/** * lyf on 2016/9/24. * Fragment 适配器 */public class TabAdapter extends FragmentPagerAdapter {    //Fragment集合    private List<Fragment> listFragment;    //Tab名称集合    private List<String> listTitle;    public TabAdapter(FragmentManager fm,List<Fragment> listF,List<String> listS) {        super(fm);        listFragment = listF;        listTitle = listS;    }    @Override    public Fragment getItem(int position) {        return listFragment.get(position);    }    @Override    public int getCount() {        return listFragment.size();    }    @Override    public CharSequence getPageTitle(int position) {        return listTitle.get(position);    }}
View Code

 

三、看看我们的主布局界面

技术分享
package lyf.com.tablayoutdemo;import android.os.Bundle;import android.support.design.widget.TabLayout;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.view.ViewPager;import java.util.ArrayList;import java.util.List;/** * FragmentActivity 应该导入 android.support.v4.app.Fragment包 */public class MainActivity extends FragmentActivity {    private List<Fragment> fragmentList = new ArrayList<>();    private List<String> titleList = new ArrayList<>();    private TabLayout tabLayout;    private ViewPager viewPager;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        tabLayout = (TabLayout) this.findViewById(R.id.tablayout);        viewPager = (ViewPager) this.findViewById(R.id.viewpage);        initControls();    }    private void initControls() {        fragmentList.add(new OneFragment());        fragmentList.add(new TwoFragment());        fragmentList.add(new ThreeFragment());        fragmentList.add(new FourFragment());        titleList.add("推荐");        titleList.add("视频");        titleList.add("热点");        titleList.add("娱乐");        //添加标签选项布局样式        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);        tabLayout.addTab(tabLayout.newTab().setText(titleList.get(0)));        tabLayout.addTab(tabLayout.newTab().setText(titleList.get(1)));        tabLayout.addTab(tabLayout.newTab().setText(titleList.get(2)));        tabLayout.addTab(tabLayout.newTab().setText(titleList.get(3)));        //设置页面选项        TabAdapter tabAdapter = new TabAdapter(this.getSupportFragmentManager(), fragmentList, titleList);        viewPager.setAdapter(tabAdapter);        tabLayout.setupWithViewPager(viewPager);    }}
View Code

这里面的Fragment 就不贴出来了，大家可以用来展示自己的Fragment。这样我们的Demo 就结束了。

 

注意：包的引用 ViewPage和Fragment 都是引用 support.V4.app包里的。

 








TabLayout 简单使用。






























        

            
                
                  
                
                

                    联系

                    我们