一,概述

之前我們使用ViewPager時,往往喜歡與TabPageIndicator配合使用,達到滑動就可以切換頁面的效果.但是,TabPageIndicator畢竟是第三方庫,多少還是沒有谷歌推出的Tablayout好用.Tablayout出來後,估計之前在GitHub上類似的第三方控件都會沉寂下去了.Tablayout還有一個優點就是,它可以最低可以相容到Android api2.2,這就很有吸引力了.本文主要是記錄Tablayout+ViewPager+Fragment結合使用,搭建一個漂亮的app界面,小型項目可以直接使用!

二,代碼實作

布局實作

1)Tablayout是在Android Support Design庫,所有先去app/build.gradle添加該庫

//使用TabLayout，需要引入design庫
  compile 'com.android.support:design:25.1.0'

2)布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <LinearLayout android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:orientation="vertical">
        <!--titlebar-->
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/myColor_green"
            android:padding="8dp"
        >
            <TextView
                android:id="@+id/home_tv_qrcode"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:background="@drawable/qr_code"
            />

            <TextView
                android:id="@+id/home_tv_category"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:background="@drawable/category"
            />
            <TextView
                android:id="@+id/home_tv_search"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_toLeftOf="@id/home_tv_category"
                android:layout_toRightOf="@id/home_tv_qrcode"
                android:background="@drawable/bg_home_edittext"
                android:gravity="center"
                android:padding="6dp"
                android:text="@string/text_tv_search"
                android:textColor="@color/black_cdcdcd"
                android:textSize="16sp"
            />
        </RelativeLayout>


        <!--tablayout的背景顔色: android:background="#38B059"-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <android.support.design.widget.TabLayout
                android:background="@color/colorPrimary"
                android:id="@+id/home_tablayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabGravity="fill"
                app:tabIndicatorColor="@color/myColor_green"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="@color/myColor_green"
                app:tabTextColor="@color/pale_black"
            />
            <android.support.v4.view.ViewPager
                android:id="@+id/home_viewpager"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"/>
        </LinearLayout>
    </LinearLayout>

    <!--設定fab的背景顔色app:backgroundTint="@color/myColor_green"-->
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/home_fabtn_settings"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="@dimen/size_dp14"
        android:layout_marginRight="@dimen/size_dp14"
        android:src="@drawable/icon_setting"
        app:backgroundTint="@color/myColor_green"
        app:rippleColor="@color/colorAccent"/>
</RelativeLayout>

3)關于Tablayout的幾個屬性

background: 設定背景圖，示例為#38B059

tabTextColor: tab 的字型顔色，示例為#7D&D&D

tabSelectedTextColor: tab 選中時候的字型顔色

tabMode: tab 的模式，有兩種。fixed 為固定模式，scrollable 為可滾動模式

程式代碼實作

1)HomeUI.java的所有代碼

public class HomeUI extends BaseActivity implements View.OnClickListener {

    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private FloatingActionButton mFabtnSettings;//懸浮按鈕
    /**
     * title list
     */
    private List<String> mTitleLists;
    /**
     * fragment list
     */
    private List<Fragment> mFragLists;

    private TextView mQrCode;//二維碼

    @Override
    protected void setContentView() {
        setContentView(R.layout.ui_home);
        //changeStatusBarColor(R.color.myColor_green);
        //隐藏actionbar
        getSupportActionBar().hide();

    }

    @Override
    protected void initView() {
        mTabLayout = (TabLayout) findViewById(R.id.home_tablayout);
        mViewPager = (ViewPager) findViewById(R.id.home_viewpager);
        mFabtnSettings = (FloatingActionButton) findViewById(R.id.home_fabtn_settings);
        mQrCode = (TextView) findViewById(R.id.home_tv_qrcode);
    }

    @Override
    protected void initData() {
        //預設隐藏
        mFabtnSettings.setVisibility(ViewPager.GONE);
        //去掉陰影
        getSupportActionBar().setElevation(0);

        mTitleLists = new ArrayList<>();
        mTitleLists.add("語音助手");
        mTitleLists.add("微信精選");
        mTitleLists.add("視訊推薦");
        mTitleLists.add("創意商品");
        mTitleLists.add("個人中心");

        mFragLists = new ArrayList<>();
        mFragLists.add(new HelperFrag());
        mFragLists.add(new WechatFrag());
        mFragLists.add(new VideoFrag());
        mFragLists.add(new GoodsFrag());
        mFragLists.add(new UserFrag());

        //viewpager預加載
        mViewPager.setOffscreenPageLimit(mFragLists.size());
        //監聽ViewPager
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //在第一個ViewPager中隐藏，其他頁面顯示
                mFabtnSettings.setVisibility((position == 0) ? ViewPager.GONE : ViewPager.VISIBLE);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        //設定擴充卡
        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                //傳回目前位置的頁面
                return mFragLists.get(position);
            }

            @Override
            public int getCount() {
                //總的頁面數
                return mFragLists.size();
            }

            @Override
            public CharSequence getPageTitle(int position) {
                //每個item的title
                return mTitleLists.get(position);
            }
        });

        /**
         * 綁定
         */
        mTabLayout.setupWithViewPager(mViewPager);
        //跳轉到懸浮按鈕設定界面
        mFabtnSettings.setOnClickListener(this);
        //跳轉到掃碼頁面
        mQrCode.setOnClickListener(this);


    }

    @Override
    protected void showBackKey() {
        //首頁不顯示傳回的按鈕
        //super.showBackKey();
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.home_fabtn_settings:
                IntentUtils.startActivity(this, UserSettingUI.class);
                showNext();
                break;
            default:
                break;
        }
    }


}

2)HomeUI繼承自BaseActivity,BaseActivity是自定義的Activity基類,繼承自該基類的Activity預設就要實作setContentView() initView() initData()三個方法,作用分别為加載布局檔案擷取id 初始化一些資料.

3)标題與需要綁定的Fragment最好是用一個JavaBean來封裝資料,如FragmentInfo.java,如下:

public class FragmentInfo {

    private  String title;

    private Class fragment;

    public FragmentInfo(String title, Class fragment) {
        this.title = title;
        this.fragment = fragment;
    }

   //setter與getter方法省略
}

本文為了友善,分别用集合來存标題和Fragment執行個體,如下:

mTitleLists = new ArrayList<>();
        mTitleLists.add("語音助手");
        mTitleLists.add("微信精選");
        mTitleLists.add("視訊推薦");
        mTitleLists.add("創意商品");
        mTitleLists.add("個人中心");

        mFragLists = new ArrayList<>();
        mFragLists.add(new HelperFrag());
        mFragLists.add(new WechatFrag());
        mFragLists.add(new VideoFrag());
        mFragLists.add(new GoodsFrag());
        mFragLists.add(new UserFrag());

4)為了提高效率,進行了ViewPager的預加載.

mViewPager.setOffscreenPageLimit(mFragLists.size());

5)實際開發中最好另外寫一個擴充卡類,将代碼分析,而不是通過匿名内部類的方式

//設定擴充卡
        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                //傳回目前位置的頁面
                return mFragLists.get(position);
            }

            @Override
            public int getCount() {
                //總的頁面數
                return mFragLists.size();
            }

            @Override
            public CharSequence getPageTitle(int position) {
                //每個item的title
                return mTitleLists.get(position);
            }
        });

6)接下來就是Tablayout綁定ViewPager了

/**
         * 綁定
         */
        mTabLayout.setupWithViewPager(mViewPager);

三,效果圖

效果圖如下,可以自然的滑動滑動切換頁面哦,個人感覺還不錯!嘻嘻!

Android進階之利用Tablayout+ViewPager+Fragment實作神奇的滑動效果一,概述二,代碼實作三,效果圖

Android進階之利用Tablayout+ViewPager+Fragment實作神奇的滑動效果一,概述二,代碼實作三,效果圖

一,概述

二,代碼實作

布局實作

1)Tablayout是在Android Support Design庫,所有先去app/build.gradle添加該庫

2)布局

3)關于Tablayout的幾個屬性

程式代碼實作

1)HomeUI.java的所有代碼

2)HomeUI繼承自BaseActivity,BaseActivity是自定義的Activity基類,繼承自該基類的Activity預設就要實作setContentView() initView() initData()三個方法,作用分别為加載布局檔案擷取id 初始化一些資料.

3)标題與需要綁定的Fragment最好是用一個JavaBean來封裝資料,如FragmentInfo.java,如下:

4)為了提高效率,進行了ViewPager的預加載.

5)實際開發中最好另外寫一個擴充卡類,将代碼分析,而不是通過匿名内部類的方式

6)接下來就是Tablayout綁定ViewPager了

三,效果圖

繼續閱讀

專訪鄧凡平：深入了解Android

與專家面對面：Android開發入門問與答

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯

Android進階之利用Tablayout+ViewPager+Fragment實作神奇的滑動效果一,概述二,代碼實作三,效果圖

一,概述

二,代碼實作

布局實作

1)Tablayout是在Android Support Design庫,所有先去app/build.gradle添加該庫

2)布局

3)關于Tablayout的幾個屬性

程式代碼實作

1)HomeUI.java的所有代碼

2)HomeUI繼承自BaseActivity,BaseActivity是自定義的Activity基類,繼承自該基類的Activity預設就要實作setContentView() initView() initData()三個方法,作用分别為加載布局檔案 擷取id 初始化一些資料.

3)标題與需要綁定的Fragment最好是用一個JavaBean來封裝資料,如FragmentInfo.java,如下:

4)為了提高效率,進行了ViewPager的預加載.

5)實際開發中最好另外寫一個擴充卡類,将代碼分析,而不是通過匿名内部類的方式

6)接下來就是Tablayout綁定ViewPager了

三,效果圖

繼續閱讀

2)HomeUI繼承自BaseActivity,BaseActivity是自定義的Activity基類,繼承自該基類的Activity預設就要實作setContentView() initView() initData()三個方法,作用分别為加載布局檔案擷取id 初始化一些資料.