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;  4 import android.support.annotation.Nullable;  5 import android.support.v4.app.Fragment;  6 import android.support.v4.view.ViewPager;  7 import android.view.LayoutInflater;  8 import android.view.View;  9 import android.view.ViewGroup; 10 import android.widget.TableLayout; 11 import android.widget.TextView; 12 
import java.util.ArrayList; 14 import java.util.List; 15 
/**
 * Created by terry-song on 2016/10/18. 18  */

public class OneFragment extends Fragment { 21 
 @Nullable 23  @Override 24     public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { 25         View view = inflater.inflate(R.layout.fragment_test,null); 26         return view; 27  } 28 
 @Override 30     public void onViewCreated(View view, @Nullable Bundle savedInstanceState) { 31         TextView textView = (TextView) view.findViewById(R.id.tv_show_id); 32         textView.setText("第1個頁面"); 33         super.onViewCreated(view, savedInstanceState); 34  } 35 }

其他

兩個也一樣，