Tabs using TabLayout

最近在試著研究Android相關的一些介面設定

一來是因為自己也查到許多不太合用的資料

所以也是加減幫助有需要的人

二來也是留做未來需要時做個筆記~

(實在太容易忘東忘西了...

另外

因為我也還只是個學生，正在努力的研究中

可能有的名詞或是定義說錯或是不清楚請見諒一下QQ

也可以告訴我我哪裡講錯了~

希望我的筆記有點用瞜

---------------------------------我是分隔線---------------------------------

正文開始拉~

這是我最先預計要做到的狀態

1. 上方 Tab 用點擊的可以切換 Fraggment
2. 下方 Viewpage 用左右滑動的也能夠切換 Tab

android 的東西有的資源更新的速度蠻快的

因此有很多網路資源都不一定會與現在符合

所以要是是想要比較能夠實用的 Source Code 建議還是在 GitHub 上找比較容易

這次的程式也是以靠著 GitHub上的資源完成的

－－＞ 連結 ＜－－

在這專案中我一共使用了

• 兩個 layout 的 xml 檔：mian_activity.xml、testfragram.xml
• 三個 java 檔：MianActivity、PageFragment、SimpleFragmentPagerAdapter

痾 其他稍微改過的部分應該就不提了

mian_activity.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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1" />

</LinearLayout>

這部分 TabLayout 跟 ViewPager 就是用來顯示我們工的的部分

各自外觀可自行調整~

設定完這個 Layout 後(算是我們 app 的主體

就再新增一個用來切換的 fragram 

來讓我們後續顯示在我們的 ViewPager 中

testfragram.xml

<?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" />

這部分也是都能自行設定內部外觀

layout 的部分就到這邊

其餘為 Java 的 Class

因為後續的部分這幾個Class會彼此呼叫

所以建議在資料夾下新增兩個分類 1. adapter 2. fragment

這樣後續在 import 的時候比較不容易發生莫名其妙的問題

以後也比較好整理

先提用來控制當 fragment 被呼叫時用來控制 fragment 的部分

PageFragment

public class PageFragment extends Fragment {
    public static final String ARG_PAGE = "ARG_PAGE";

    private int mPage;

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

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

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.testfragment, container, false);
        TextView textView = (TextView) view;
        textView.setText("Fragment #" + mPage);
        return view;
    }
}

這部分就一些基本的連接以即顯示出來後 textView 的設定

如果是希望害各個頁面中進行變化也可以自行新增其他的 Layout 與另外的設定

接著是 SimpleFragmentPagerAdapter 這個部分可以在 android support library 裡面找到更多的資訊 (搜尋 FragmentPagerAdapter )

這邊是用來設定一些 Tap 的作用

SimpleFragmentPagerAdapter

public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {
    final int PAGE_COUNT = 3;
    private String tabTitles[] = new String[] { "Tab1", "Tab2", "Tab3" };
    private Context context;

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

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

    @Override
    public Fragment getItem(int position) {
        return PageFragment.newInstance(position + 1);
    }

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

最後就是我們的 MainActivity 了

這邊就負責設定 viewPager 與 tabLayout

MainActivity

public class MainActivity extends FragmentActivity {

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

        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        viewPager.setAdapter(new SimpleFragmentPagerAdapter(getSupportFragmentManager(), 
            MainActivity.this));

        TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
        tabLayout.setupWithViewPager(viewPager);
    }

}

到這邊其實大致上就已經差不多完成了

不過如果就照這樣去進行編譯，出來的外觀應該會長成下圖這樣：

會發現我們的 Tab 全部都跑去左邊了

要是想要讓他們像我們第一張圖那個樣子

我們就必須在 MainActivity 在加入一條

tabLayout.setTabMode(TabLayout.MODE_FIXED);

這樣他們就會各自就定位拉~

到這邊文字版的 Tab 製作基本都完成了

而要加入 icon 的方是我目前還沒時間完成

要是後續有完成的話，我在補上拉