TabLayout 简单使用。

Posted 2020-08-09 末日之花的备忘录

先上效果图

 

在使用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.TabLayout
13         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.ViewPager
24         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包里的。