TabLayout+Fragment+ViewPager+FragmentStatePagerAdapter实现Tab标签

首先来看下实现的效果吧：

最近在项目中实现这个效果的时候。尽管自己磕磕绊绊的实现了，可是知识确实模模糊糊的，今天天气异常的冷，在加上这个知识不太熟练，实在是没有心情进行接下来的计划，干脆借着这个时间，好好的整理一下这个实现方式。也在次总结一下，记忆更加深刻。

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 {@link 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, 有疑问能够交流哈。多谢支持！！

时间： 2024-12-28 15:50:51

TabLayout+Fragment+ViewPager+FragmentStatePagerAdapter实现Tab标签的相关文章

【FastDev4Android框架开发】Android Design支持库TabLayout打造仿网易新闻Tab标签效果(三十七)

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50158985 本文出自:[江清清的博客] (一).前言: 仿36Kr客户端开发过程中,因为他们网站上面的新闻文章分类比较多,所以我这边还是打算模仿网易新闻APP的主界面新闻标签Tab以及页面滑动效果来进行实现.要实现的顶部的Tab标签的效果有很多方法例如采用开源项目ViewPagerIndicator中的TabPageIndicator就可以实现.不过我们今天不讲V

Android tab导航的几种方法:ActionBar tab +fragment,Viewpager+pagerTitleStrip,开源框架ViewPageIndicator 和 ViewPager

action来实现tab标签 并跟fragment结合 因为要写新闻客户端这个tab导航是必须的 这里我写几个小练习,希望大家融会贯通. 1actionbar设置tab +fragment 布局是个layout 什么layout都可以 加个Id 叫container package com.example.demoforactionbar; import android.app.ActionBar; import android.app.Activity; import android.app.

使用TabLayout、ViewPager和Fragment实现顶部菜单可滑动切换

效果图如下 首先,要使用控件需要添加design library,在Android Studio中添加 compile 'com.android.support:design:23.4.0' 然后是布局文件 <?xml version="1.0" encoding="utf-8"?>   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&qu

Android ViewPager+Fragment滑动选项卡，tab点击选项卡

有一段时间一直再研究这个,自Android 3.0以后,很少开发者再用以前的TabWidget控件了.那种效果不是很好,也不能滑动.后来陆续出现了各种各样滑动选项卡,每种的出现都各有优势吧.但我还是推荐ViewPager+Fragment滑动选项卡,tab点击选项卡.因为横屏或者竖屏效果都还不错,针对这种效果,还有一种开源框架的出现.接下来会有所介绍. 转载请注明出处:http://blog.csdn.net/qq_16064871 本文demo下载:请点击 一.ViewPagerActivit

低版本系统兼容的ActionBar（六）用Fragment+ViewPager+Tab实现快速导航

Tab经常和Fragment结合使用,这一讲我们用3种方式来实现这种快捷导航. 0.重要的两个监听器 MyTabListener,这个我们之前已经接触过了 package com.kale.actionbar05; import android.support.v4.app.FragmentTransaction; import android.support.v4.view.ViewPager; import android.support.v7.app.ActionBar; import a

Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签

之前用JakeWharton的开源框架ActionBarSherlock和ViewPager实现了对网易新闻客户端Tab标签的功能,ActionBarSherlock是在3.0以下的机器支持ActionBar的功能,有兴趣的可以看看开源框架ActionBarSherlock 和 ViewPager 仿网易新闻客户端,今天用到的是JakeWharton的另一开源控件ViewPageIndicator,ViewPager想必大家都知道,Indicator指示器的意思,所以ViewPageIndica

关于TabLayout与ViewPager在Fragment中嵌套Fragment使用或配合使用的思考

注意: 因为继承的是Fragment,所以getSupportFragmentManager()与getFragmentManager()方法无法使用,这里需要用到getChildFragmentManager()方法: (用getFragmentManager()方法并不会报错,但到时候运行的时候会出问题,查了好久才知道这个错误) 统一Fragment类型,要么为"android.support.v4.app.Fragment",要么为"android.app.Fragme

TabLayout与ViewPager和Fragment、FragmentPagerAdapter的合用

activity_main.xml 注意要把垂直设置好,因为是linearLayout布局,漏掉了就不能滑动了 <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tool

TabLayout 和 ViewPager【综合示例】

完整Demo地址:https://github.com/baiqiantao/TabLayoutTest.git MainActivity public class MainActivity extends ListActivity { protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); String[] array = {"0.不重写getPageTitle,会导致没有