Android学习笔记--TabLayout的简单使用

我们在应用viewpager的时候，经常会使用TabPageIndicator来与其配合。达到很漂亮的效果。但是TabPageIndicator是第三方的，而且比较老了，当然了现在很多大神都已经开始自己写TabPageIndicator来满足自己的需求，在2015年的google大会上，google发布了新的Android Support Design库，里面包含了几个新的控件，其中就有一个TabLayout，它就可以完成TabPageIndicator的效果，而且还是官方的，最好的是它可以兼容到2.2以上版本，包括2.2。下面我就举一个简单的例子来使用它

fragment_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--app:tabMode - fixed: 固定tab的位置，当tab数量过多时，超出屏幕范围后。无法显示更多。
               scrollable: tab数量超出屏幕范围，可以滚动tab，显示更多的tab-->
    <!-- app:tabTextAppearance="@style/design_widget_TabLayout_TextStyle"-->
    <!-- app:tabIndicatorColor="@color/white"                 // 下方滚动的下划线颜色-->
    <!--app:tabSelectedTextColor="@color/gray"               // tab被选中后，文字的颜色-->
    <!--app:tabTextColor="@color/white"                      // tab默认的文字颜色-->
    <android.support.design.widget.TabLayout
        android:id="@+id/tab_find_fragment_title"
        android:layout_width="match_parent" android:layout_height="35dp"
        android:background="#e4e4e4"
        app:tabIndicatorColor="?attr/colorPrimary"
        app:tabSelectedTextColor="?attr/colorPrimary"
        app:tabTextColor="@android:color/black" app:tabGravity="fill"
        android:fillViewport="false" />
    <!--app:tabMode="scrollable"-->

    <android.support.v4.view.ViewPager
        android:id="@+id/tab_find_fragment_find_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

FindAdapter.java

package com.wuxianedu.ademo;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

/**
 * Created by Administrator on 2016/10/18.
 * 这个Adapter我也不知道是怎么回事，但是还是要照着写出出来。。。
 */

public class FindAdapter extends FragmentPagerAdapter {
    //这是标题的  第一个就显示第一个
    private List<String> titleList;
    //这个是fragmen，把集合中的fragmen都展示出来
    private List<Fragment> fragmentList;

    public FindAdapter(FragmentManager fm, List<String> titleList, List<Fragment> fragmentList) {
        super(fm);
        this.titleList = titleList;
        this.fragmentList = fragmentList;
    }

    @Override
    public android.support.v4.app.Fragment getItem(int position) {
        return fragmentList.get(position);
    }

    @Override
    public int getCount() {
        return titleList.size();
    }
    /**
     * 获取标题
     * @param position
     * @return
     */
    @Override
    public CharSequence getPageTitle(int position) {
        return titleList.get(position);
    }
}

FindAFragment.java

package com.wuxianedu.ademo;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by Administrator on 2016/10/18.
 */
public class FindAFragment extends Fragment {


    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_item,null);
        return view;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tab_find_fragment_title);
        ViewPager viewPager = (ViewPager) view.findViewById(R.id.tab_find_fragment_find_fragment);
        List<String> titellist = new ArrayList<>();
        titellist.add("推举项目");
        titellist.add("热门项目");
        titellist.add("最近更新");
        List<Fragment> fragme　ntList = new ArrayList<>();

        fragmentList.add(new OneFragment());//这里写你自己Fragment的名字 我是三个，
        fragmentList.add(new TwoFragment());
        fragmentList.add(new OneFragment());
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
        FindAAdapter findAAdapter = new FindAAdapter(getActivity().getSupportFragmentManager(),titellist,fragmentList);
        viewPager.setAdapter(findAAdapter);
        tabLayout.setupWithViewPager(viewPager);
        super.onViewCreated(view, savedInstanceState);
    }
}

MainActivity.java

package com.wuxianedu.ademo;

import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //往Fragment添加东西
        FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
        //往Fragment添加东西
        fragmentTransaction.add(R.id.frame_id,new FindFragment());
        //往Fragment添加东西
        fragmentTransaction.commit();
    }
}

OnFragmetn.java  1 package com.wuxianedu.ademo;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TableLayout;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by terry-song on 2016/10/18.
 */

public class OneFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_test,null);
        return view;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        TextView textView = (TextView) view.findViewById(R.id.tv_show_id);
        textView.setText("第1个页面");
        super.onViewCreated(view, savedInstanceState);
    }
}

其他

两个也一样，