FragmentPagerAdapter+ViewPager 實現TabLayout

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

效果

程式碼

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

布局XML

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

 <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``` java

mFragment = new ArrayList(); Fragment mTab01 = new TrendFragment(); Fragment mTab02 = new SurroundingFragment(); Fragment mTab03 = new AppliancesFragment(); mFragment.add(mTab01); mFragment.add(mTab02); mFragment.add(mTab03);

### FragmentPagerAdapter``` java
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 請在自行補上其他的

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();
在設定布局比例文字大小

public void onClick(View v) {

       switch (v.getId()) {
           case R.id.id_tab_trend:
               setSelect(0);
               break;


      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事件

public void onPageSelected(int position) {
               int currentItem = mViewPager.getCurrentItem();
               setTab(currentItem);

           }

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會比較好一點