Android學習筆記（七）--滑動選項卡TabLayout

今天想做一個類似騰訊體育那樣的滑動選項卡，一開始的想法是選項卡是可以滑動擴展的就用個scrollview裏面放button，下面用一個ViewPager，覺得實現起來也不復雜，然後發現官方爲我們提供了一個TabLayout,使用起來也比較方便，先上一下效果圖。

看一下主活動的佈局

<?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">
    <android.support.design.widget.TabLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:fillViewport="false"
        app:tabTextColor="@color/colorPrimary"
        app:tabSelectedTextColor="@color/colorAccent"
        app:tabIndicatorColor="@color/colorPrimaryDark">
    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white" />

</LinearLayout>

這裏面的

        app:tabTextColor="@color/colorPrimary"
        app:tabSelectedTextColor="@color/colorAccent"
        app:tabIndicatorColor="@color/colorPrimaryDark"

三行，分辨是設置未選定狀態的文字顏色，選定狀態的文字顏色，還有下方選定時的下劃線的顏色。然後是Fragment的佈局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:id="@+id/tab_txt"/>
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@mipmap/ic_launcher"/>


</LinearLayout>

然後看一下TabLayoutFragment

package com.sp.tablayout;

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

/**
 * Created by my on 2016/10/27.
 */
public class TabLayoutFragment extends Fragment {
    public static String TABLAYOUT_FRAGMENT = "tab_fragment";
    private TextView txt;
    private int type;

    public static TabLayoutFragment newInstance(int type) {
        TabLayoutFragment fragment = new TabLayoutFragment();
        Bundle bundle = new Bundle();
        bundle.putSerializable(TABLAYOUT_FRAGMENT, type);
        fragment.setArguments(bundle);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        if (getArguments() != null) {
            type = (int) getArguments().getSerializable(TABLAYOUT_FRAGMENT);
        }

    }


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


    protected void initView(View view) {
        txt = (TextView) view.findViewById(R.id.tab_txt);
        switch (type) {
            case 1:
                txt.setText("這是1Fragment");
                break;
            case 2:
                txt.setText("這是2Fragment");
                break;
            case 3:
                txt.setText("這是3Fragment");
                break;
            case 4:
                txt.setText("這是4Fragment");
                break;
            case 5:
                txt.setText("這是5Fragment");
                break;
            case 6:
                txt.setText("這是6Fragment");
                break;
            case 7:
                txt.setText("這是7Fragment");
                break;
            case 8:
                txt.setText("這是8Fragment");
                break;
            case 9:
                txt.setText("這是9Fragment");
                break;
            case 10:
                txt.setText("這是10Fragment");
                break;
        }


    }

}

這裏涉及到了Fragment的傳值問題，具體看一看這裏http://blog.csdn.net/lmj623565791/article/details/42628537/，簡單說就是利用Bundle構建了一個鍵值對，然後set進Fragment中，然後在onCreate的時候用getArguments（bundle）取出這個鍵值對中key的值。

下面看一下Adpter

package com.sp.tablayout;

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

import java.util.List;

/**
 * Created by my on 2016/10/27.
 */
public class TabAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragments;

    public TabAdapter(FragmentManager fm, List<Fragment> fragments) {
        super(fm);
        this.fragments = fragments;
    }


    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return MainActivity.tabTitle[position];

    }
}

這裏面由於我們的Fragment也沒什麼內容所以也很簡單，getPageTitle是獲取該位置的title，在MainActivity中傳進去的，這裏要匹配一下。下面就是我們的主活動了

package com.sp.tablayout;

import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

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

public class MainActivity extends AppCompatActivity {

    private TabLayout tab;
    private ViewPager viewpager;
    private TabAdapter adapter;
    public static final String[] tabTitle = new String[]{"牀前", "明月", "光啊", "疑是", "地上", "霜啊", "南京", "最近", "有點", "冷啊"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initviews();
    }

    private void initviews() {
        tab = (TabLayout) findViewById(R.id.tab);
        viewpager = (ViewPager) findViewById(R.id.viewpager);

        List<Fragment> fragments = new ArrayList<>();
        for (int i = 0; i < tabTitle.length; i++) {
            fragments.add(TabLayoutFragment.newInstance(i + 1));
        }
        adapter = new TabAdapter(getSupportFragmentManager(), fragments);
        //給ViewPager設置適配器
        viewpager.setAdapter(adapter);
        //將TabLayout和ViewPager關聯起來。
        tab.setupWithViewPager(viewpager);
        //設置可以滑動
        tab.setTabMode(TabLayout.MODE_SCROLLABLE);
    }


}

到此就實現了所有的功能。