TabLayout+Fragment+ViewPager+FragmentStatePagerAdapter實現Tab標簽

阿新 • • 發佈：2017-08-05

log 初始總結劃線 clas item codes @override sta

首先來看下實現的效果吧：
技術分享
最近在項目中實現這個效果的時候。盡管自己磕磕絆絆的實現了，可是知識確實模模糊糊的，今天天氣異常的冷，在加上這個知識不太熟練，實在是沒有心情進行接下來的計劃，幹脆借著這個時間，好好的整理一下這個實現方式。也在次總結一下，記憶更加深刻。

TabLayout簡單介紹

在2015年的Google I/O大會上，Google公布的新的Android Support Design庫，裏面也包括了幾個新的控件，那麽TabLayout就是當中一個。使用該組件我們能夠非常輕松的實現TabPageIndicator效果。而且該為官方的，能夠向下兼容非常多版本號而且能夠更加統一Material Design效果。

使用的時候要在庫依賴中增加
假設不太清楚，能夠看下http://blog.csdn.net/wuyinlei/article/details/50570018
教你怎麽在項目中增加依賴。

compile‘com.android.support:design:23.1.1’

接下來，在TabLayout中增加

<android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height 
="wrap_content"
        <!-- 下方滾動的下劃線顏色  -->
        app:tabIndicatorColor="#33aa22"
        <!-- 下方指示條的高度  -->
        app:tabIndicatorHeight="5dp"
        <!-- tab被選中後，文字的顏色  -->
        app:tabSelectedTextColor="#33aa22"
        <!--能夠改變tab中的字體的大小-->
        app:tabTextAppearance="@style/App_Theme"
        <!-- tab中字體的顏色  --> 

        app:tabTextColor="#33aa22"/>

能夠在這裏設置字體大小，然後引用：

  <style name="App_Theme" parent="Theme.AppCompat">
        <item name="android:windowNoTitle">true</item>
        <item name="android:textSize">18dp</item>
        <item name="android:textAllCaps">false</item>
    </style>

註意：上面的這個style必須在承載他的activity中theme中增加，要不然會出現

Cause by ：java.lang.IllegalArgumentException: You need to use a Theme.AppCompat theme (or descendant) with the design library;（我沒有加上之前各種錯，加上正常執行。可是執行之後去掉，居然也能夠正常執行。不得解)

好了。接下來我們看下詳細怎麽實現的吧，裏面有解釋：
MainActivity.java：

package com.example.tablayoutfragment;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

activity_main.xml:

<?
xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    tools:context="com.example.tablayoutfragment.MainActivity">

        <FrameLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            >
            <!--在這裏直接增加fragment。而且制定fragment類名-->
            <fragment
                android:id="@+id/main_info_fragment"
                class="com.example.tablayoutfragment.MainFragment"
                android:layout_width="fill_parent"
                android:layout_height="match_parent"/>
        </FrameLayout>
</LinearLayout>

MAinFragment.java：

package com.example.tablayoutfragment;


import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;
import java.util.List;


/**
 * A simple [email protected] Fragment} subclass.
 */
public class MainFragment extends Fragment {

    private TabLayout mTabLayout;
    private ViewPager mViewPager;

    //fragment存儲器
    private List<Fragment> mFragments;
    //tab條目中的內容
    private String[]titles = {"第一個","第二個","第三個","第四個","第五個","第六個","第七個","第八個"};
    private FixedPagerAdapter mAdapter;


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_blank, container, false);
        mTabLayout = (TabLayout) view.findViewById(R.id.tabLayout);
        mViewPager = (ViewPager) view.findViewById(R.id.viewPager);
        initData();
        return view;
    }

    /**
     * 初始化數據
     */
    private void initData() {
        mAdapter = new FixedPagerAdapter(getChildFragmentManager());
        mAdapter.setTitles(titles);//標題
        mFragments = new ArrayList<>();
        for (int i = 0; i < titles.length; i++) {
            mFragments.add(PageFragment.newInstance(titles[i]));
        }
        //把要顯示的fragment集合傳給adapter
        mAdapter.setFragments(mFragments);
        /**
         * 設置tablayout的模式
         *  模式一：MODE_SCROLLABLE  能夠滑動，顯示非常多個tab中的幾個展示出來
         *  模式二：MODE_FIXED Fixed tabs display all tabs concurrently   展示出全部的。適合三四個tab
         */
        mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        //給viewPager設置適配器
        mViewPager.setAdapter(mAdapter);
        //TabLayout綁定ViewPager
        mTabLayout.setupWithViewPager(mViewPager);

    }
}

fragment_main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="#fff"
              android:orientation="vertical"
              tools:context=".MainFragment">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="#33aa22"
        app:tabIndicatorHeight="5dp"
        app:tabSelectedTextColor="#33aa22"
        app:tabTextAppearance="@style/App_Theme"
        app:tabTextColor="#33aa22"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
    </android.support.v4.view.ViewPager>
</LinearLayout>

PageFragment.java:

package com.example.tablayoutfragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * Created by 若蘭 on 2016/1/23.
 * 一個懂得了編程樂趣的小白，希望自己
 * 能夠在這個道路上走的非常遠，也希望自己學習到的
 * 知識能夠幫助很多其它的人,分享就是學習的一種樂趣
 * QQ:1069584784
 * csdn:http://blog.csdn.net/wuyinlei
 */

public class PageFragment extends Fragment {

    private View mView;

    /**
     * key值
     */
    private static final String KEY = "EXTRA";

    private String title;

    /**
     * 在這裏我們提供一個靜態的方法來實例化PageFragment
     * 在這裏我們傳入一個參數。用來得到title，然後我們拿到這個title設置給內容
     *
     * @param extra
     * @return
     */
    public static PageFragment  newInstance(String extra){
        //利用bundle傳值
        Bundle bundle = new Bundle();
        bundle.putString(KEY,extra);
        //實例化
        PageFragment fragment = new PageFragment();
        fragment.setArguments(bundle);
        return fragment;
    }

   /* @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Bundle bundle = getArguments();
        if (bundle != null) {
            title = bundle.getString(KEY);
        }
    }
*/
    private TextView mTextView;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        Bundle bundle = getArguments();
        if (bundle != null) {
            title = bundle.getString(KEY);
        }
        if (mView == null) {
            mView = inflater.inflate(R.layout.page_fragment, container, false);
        }
        initView();
        return mView;
    }


    public void initView() {
        mTextView = (TextView) mView.findViewById(R.id.text_fragment);
        mTextView.setText(title);
    }
}

這個fragment的布局裏面就一個textview，我就不寫上了。
以下看下這個adapter吧
FixedPagerAdapter.java:

package com.example.tablayoutfragment;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.view.ViewGroup;

import java.util.List;

/**
 * Created by 若蘭 on 2016/1/23.
 * 一個懂得了編程樂趣的小白，希望自己
 * 能夠在這個道路上走的非常遠。也希望自己學習到的
 * 知識能夠幫助很多其它的人,分享就是學習的一種樂趣
 * QQ:1069584784
 * csdn:http://blog.csdn.net/wuyinlei
 */

public class FixedPagerAdapter extends FragmentStatePagerAdapter {


    private String[] titles;

    /**
     * 設置標題
     *
     * @param titles
     */
    public void setTitles(String[] titles) {
        this.titles = titles;
    }

    private List<Fragment> mFragments;

    /**
     * 這個是在繼承FragmentStatePagerAdapter會強制寫入的
     *
     * @param fm
     */
    public FixedPagerAdapter(FragmentManager fm) {
        super(fm);
    }


    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }

    /**
     * Return the number of views available.
     * 返回一個能夠用的view的個數
     *
     * @return
     */
    @Override
    public int getCount() {
        return mFragments.size();
    }

    /**
     * Create the page for the given position. The adapter is responsible for
     * adding the view to the container given here,
     * although it only must ensure this is done by the time it returns from finishUpdate(ViewGroup).
     * 這個同destroyItem（）相反，是對於給定的位置創建視圖。適配器往container中增加
     *
     * @param container
     * @param position
     * @return
     */
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        Fragment fragment = null;
        fragment = (Fragment) super.instantiateItem(container,position);
        return fragment;
    }


    public List<Fragment> getFragments() {
        return mFragments;
    }

    public void setFragments(List<Fragment> fragments) {
        mFragments = fragments;
    }

    /**
     * Remove a page for the given position. The adapter is responsible for
     * removing the view from its container,
     * although it only must ensure this is done by the time it returns from finishUpdate(View).
     * 移除給定位置的數據。適配器負責從container（容器）中取出。可是這個必須保證是在finishUpdate（view）
     * 返回的時間內完畢
     *
     * @param container
     * @param position
     * @param object
     */
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        super.destroyItem(container, position, object);
    }

    /**
     * 得到滑動頁面的Title
     *
     * @param position
     * @return
     */
    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }
}

好了，到此為止。執行就能夠出現了開頭的效果了。如今附上github該demo的地址：https://github.com/wuyinlei/TTFVF, 有疑問能夠交流哈。多謝支持！！

TabLayout+Fragment+ViewPager+FragmentStatePagerAdapter實現Tab標簽

log 初始總結劃線 clas item codes @override sta 首先來看下實現的效果吧：最近在項目中實現這個效果的時候。盡管自己磕磕絆絆的實現了，可是知識確實模模糊糊的，今天天氣異常的冷，在加上這個知識不太熟練，實在是沒有心

TabLayout+Fragment+ViewPager+FragmentStatePagerAdapter實現Tab標簽

TabLayout簡單介紹

TabLayout+Fragment+ViewPager+FragmentStatePagerAdapter實現Tab標簽

jQuery 實現tab標簽實例

微信小程序-tab標簽欄實現教程

RDIFramework.NET ━ .NET快速信息化系統開發框架 V3.2-> “Tab”標簽新增可“最大化”顯示功能

每天一個JavaScript實例-tab標簽切換

js實現網頁標簽內容的自刪自增

網站開發，推薦使用SuperSlide 插件-Tab標簽切換，圖片滾動，無縫滾動，焦點圖

JavaScript之Tab標簽（原始版）

tab標簽頁

解決Tab標簽頁切換圖表顯示問題全體快三源碼開發

js練習----tab標簽欄切換

TabLayout+Fragment+ViewPager聯合使用

巧力避免ViewPager的預載入資料，Tablayout+Fragment+viewPager

Easyui 關閉jquery-easui tab標簽頁前觸發事件

Android TabLayout+ViewPager+Fragment實現tab欄的時候，無法實時更新ViewPager內的Fragment問題終極解決方法

【Android界面實現】使用PagerTabStrip實現有滑動標簽的Viewpager

java cs tab點擊切換標簽的實現 panel

TabLayout、ViewPager、fragment實現可滑動的頂部選單

Fragment、ViewPager、ActionBar實現TAB導航條效果

Android5.0新元件TabLayout+ViewPager實現Tab頁面

TabLayout+Fragment+ViewPager+FragmentStatePagerAdapter實現Tab標簽

TabLayout簡單介紹

相關推薦