DustinChu Blog

FragmentPagerAdapter+ViewPager 實現TabLayout

Posted on | In , | 0 comments   |   字數統計 861 個字   |   預計閱讀時間 4 分鐘 |

FragmentPagerAdapter+ViewPager 實現TabLayout

版權聲明：轉載請保留原文連結及作者
最近剛好在寫UI順便記錄一下
在安卓5.0有新增了TabLauout但他並不能滿足很多時候想顯示的樣子
所以使用V4下的FragmentPagerAdapter來實現.請記得都要import v4 否則會報錯
呈現的效果如下

效果

程式碼

  • 程式碼分成四類
  • FragmentPagerAdapter
  • ArrayList<Fragment>()
  • 初始化三個布局
  • 更改點擊的布局屬性

布局XML

  • 從上面的效果可以看的出來
  • 沒選重的狀況下其他兩個字體大小要一置 選重的要變大
  • 下底線要與字體長度一樣

  • 程式碼如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:orientation="horizontal">
        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="horizontal">
            <LinearLayout
                android:id="@+id/id_tab_trend"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_weight="1"
                android:orientation="vertical">
                <TextView
                    android:id="@+id/id_tab_tv_trend"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:textColor="#D6EDC6" />
                <ImageView
                    android:id="@+id/id_tab_trend_img"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/tabline"
                    android:layout_gravity="center"
                    android:layout_marginTop="5dp"/>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/id_tab_surrounding"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_weight="1"
                android:orientation="vertical">
                <TextView
                    android:id="@+id/id_tab_tv_sourrounding"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:textColor="#D6EDC6" />
                <ImageView
                    android:id="@+id/id_tab_surrounding_img"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/tabline"
                    android:layout_gravity="center"
                    android:layout_marginTop="5dp"/>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/id_tab_appliances"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_weight="1"
                android:orientation="vertical">
                <TextView
                    android:id="@+id/id_tab_tv_appliances"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:textColor="#D6EDC6" />
                <ImageView
                    android:id="@+id/id_tab_appliances_img"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/tabline"
                    android:layout_gravity="center"
                    android:layout_marginTop="5dp"/>
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

  • 在一個LinearLayout裡面 再放三個`LinearLayout``

  • 按照比例分配`android:layout_weight=”1”``
  • 點擊後在程式碼將點擊的layout_weight 改成你要的比例在把字體放大

Fragment

1
2
3
4
5
6
7
mFragment = new ArrayList<Fragment>();
       Fragment mTab01 = new TrendFragment();
       Fragment mTab02 = new SurroundingFragment();
       Fragment mTab03 = new AppliancesFragment();
       mFragment.add(mTab01);
       mFragment.add(mTab02);
       mFragment.add(mTab03);

FragmentPagerAdapter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return mFragment.get(position);
            }
            @Override
            public int getCount() {
                return mFragment.size();
            }
        };
        mViewPager.setAdapter(mAdapter);
        // Touch Replace the content area
        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }
            @Override
            public void onPageSelected(int position) {
                int currentItem = mViewPager.getCurrentItem();
                setTab(currentItem);
            }
            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });
    }

重置

  • 這邊來判斷字的寬度 來依照讀取的寬度來設定線的長度
  • 這邊只貼其中一組 textview ImageView 請在自行補上其他的
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    private void resetColor() {
            mTvTrend.setTextColor(getResources().getColor(R.color.tab_not_selectedl_Color));
            mTvTrend.setTextSize(NOT_SELECTED);
            mTvTrend.setText(one);
            mTabTrend.setLayoutParams(new LinearLayout.LayoutParams(0, LinearLayoutCompat.LayoutParams.WRAP_CONTENT, 1.0f));
            mTabtrendImg.setBackgroundResource(R.drawable.tabline);
            mTvTrend.measure(0, 0);
            LinearLayout.LayoutParams trend = new LinearLayout.LayoutParams(mTvTrend.getMeasuredWidth(), LinearLayout.LayoutParams.WRAP_CONTENT);
            mTabtrendImg.setLayoutParams(trend);

點擊

  • 在點擊的時候先呼叫一次resetColor();
  • 在設定布局比例 文字大小
1
2
3
4
5
6
public void onClick(View v) {
       switch (v.getId()) {
           case R.id.id_tab_trend:
               setSelect(0);
               break;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public void setSelect(int i) {
    resetColor();
    switch (i) {
        case 0:
            mTabTrend.setLayoutParams(new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT, 1.5f));
            mTvTrend.setTextColor(getResources().getColor(R.color.tab_selectedl_Color));
            mTvTrend.setTextSize(SELECTED);
            mTvTrend.setText("O N E");
            mTabtrendImg.setBackgroundResource(R.drawable.tablineselect);
            mTvTrend.measure(0, 0);
            LinearLayout.LayoutParams trend = new LinearLayout.LayoutParams(mTvTrend.getMeasuredWidth(), LinearLayout.LayoutParams.WRAP_CONTENT);
            mTabtrendImg.setLayoutParams(trend);
            break;

滑動

  • 別忘了上面寫的ViewPage事件
1
2
3
4
5
public void onPageSelected(int position) {
               int currentItem = mViewPager.getCurrentItem();
               setTab(currentItem);
           }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
public void setSelect(int i) {
       resetColor();
       switch (i) {
           case 0:
               mTabTrend.setLayoutParams(new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT, 1.5f));
               mTvTrend.setTextColor(getResources().getColor(R.color.tab_selectedl_Color));
               mTvTrend.setTextSize(SELECTED);
               mTvTrend.setText("O N E");
               mTabtrendImg.setBackgroundResource(R.drawable.tablineselect);
               mTvTrend.measure(0, 0);
               LinearLayout.LayoutParams trend = new LinearLayout.LayoutParams(mTvTrend.getMeasuredWidth(), LinearLayout.LayoutParams.WRAP_CONTENT);
               mTabtrendImg.setLayoutParams(trend);
               break;

結尾

  • 程式碼可以在寫一個class來去放 這樣會比較好維護一點
  • 下底線圖片要改成.9會比較好一點

相關文章：