（二）用TabLayout搭建首屏介面

學生時代DO他的年代，Android上是有一個App的，後來作者就沒更新了。那個年代就有用Tab的了，非常方便快捷，食堂吃飯的時候能拿出來滑兩下看看，到宿舍就實踐起來^_。所以就決定了，用Tab

走的彎路

一開始是在github找的第三方開源庫SmartLayout 圍觀地址
嚴格意義上來說並不是彎路，是因為 我不會啊！技術不到家不會用啊！我表示很無奈啊！
懟來懟去半天，發現了TabLayout這個東西，是Google官方的東西，資料比較多一點，所以選擇了這個，其實按我的審美，還是SmartLayout好看啊T T

開始擼程式碼咯

1. 新增依賴

TabLayout是Android Support Design裡面的新東西，需要在Android Studio的SDK Manager——SDK Tools中勾選Android Support Library下載，截止到今天2016.3.14，最新版本為23.2.1，接下來還要在Project工程檔案下的build.gradle中的dependency中新增一行程式碼compile 'com.android.support:design:23.2.1'

2.正式開始寫程式碼

首先需要建立一個佈局，直接修改activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">
    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tabs"/>
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viewpager"
        android:layout_below="@id/tabs"/>
</RelativeLayout>```
接下來建立一個PageFragment.java
```Java 
package com.noisay.dota2guide.fragment;

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;

import com.noisay.dota2guide.R;


public class PageFragment extends Fragment {
    public static final String ARG_PAGE = "ARG_PAGE";
    private int mPage;//此變數純粹用來做Fragment內容的展示編號，後期會刪除

    public static PageFragment newInstance(int page) {
        Bundle args = new Bundle();
        args.putInt(ARG_PAGE, page);
        PageFragment pageFragment = new PageFragment();
        pageFragment.setArguments(args);
        return pageFragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mPage = getArguments().getInt(ARG_PAGE);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_page, container, false);
        TextView textView = (TextView) view;
        textView.setText("Fragment #" + mPage);
        return view;
    }
}```
然後新建一個fragment_page.xml，程式碼如下
```Java
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center" />

再新建一個SimpleFragmentPagerAdapter.java來適配

package com.noisay.dota2guide.adapter;

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

import com.noisay.dota2guide.fragment.PageFragment;

/**
 * Created by noisa on 2016/3/14.
 */
public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter{
    final int PAGE_COUNT = 4;
    private String tabTitles[] = new String[]{"敏捷英雄", "智力英雄", "力量英雄", "裝備"};
    private Context context;

    public SimpleFragmentPagerAdapter(FragmentManager fm, Context context) {
        super(fm);
        this.context = context;
    }

    @Override
    public Fragment getItem(int position) {
        return PageFragment.newInstance(position+1);//加1是因為position是從0開始
    }

    @Override
    public int getCount() {
        return PAGE_COUNT;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return tabTitles[position];
    }
}

最後一步，修改MainActivity.java

package com.noisay.dota2guide;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;

import com.noisay.dota2guide.adapter.SimpleFragmentPagerAdapter;

/**
 * Created by noisa on 2016/3/14.
 */
public class MainActivity extends FragmentActivity {
    private SimpleFragmentPagerAdapter pagerAdapter;

    private ViewPager viewPager;

    private TabLayout tabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        viewPager.setAdapter(pagerAdapter);
        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
    }
}

最終呈現出來的效果，沒有真機錄不了視訊轉Gif，簡直血崩一波。。。。。看個PNG湊合一下吧

本人現在還是超級菜鳥一枚，此文中部分程式碼來自於Chenfuduo的《TabLayout of design support library 》一問，結合App的需要有做修改，原文連結