TabLayout+ViewPager+Fragment

最新推荐文章于 2024-04-27 17:53:37 发布

原创最新推荐文章于 2024-04-27 17:53:37 发布 · 752 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#viewpager #tablelayout

Android 专栏收录该内容

62 篇文章

订阅专栏

本文介绍如何使用Tablayout+ViewPager+Fragment实现类似腾讯视频APP的首页分类滑动效果。包括依赖配置、布局文件编写、Fragment间传参及Tablayout与ViewPager的结合使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近用腾讯视频APP，看视频的时候发现，他的首页上面分类滑动条，点击会自动居中显示，就来了点兴趣。
找了下资料，发现这个实现其实很简单，就是Tablayout+viewpager+fragment实现的。
首先，先依赖Tablayout

compile 'com.android.support:design:25.2.0'

    然后就是布局文件了

<android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabTextColor="#00f"
        app:tabSelectedTextColor="#f00"
        app:tabIndicatorColor="#0373b4"
        app:tabIndicatorHeight="5px"
        app:tabMode="scrollable"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

我这里先说一下fragment传参的问题，我们以往fragment之间通信都是通过构造方法，activity之间通信
基本上都是intent传一些基本类型数据。这里我想说的是通过Bundle传值。一部分的人可能没用过，
bundle可以传基本数据类型，也能传对象，只不过对象需要先序列化，两种一种是Android专属的：Parcelable，还有一种是java有的，android也可以用的：Serializable。
下面，我贴出我的一个序列化的类：

package com.xinggui.wz.tablayout.moudle;

import android.os.Parcel;
import android.os.Parcelable;

/**
 *  @describe   序列化对象
 *  @author 忠
 *  @time 2017/5/26  15:15
 *  @E-main 371965177@qq.com
 */


public class PersonMoudle implements Parcelable {
    private String name;
    private String age;
    private String sex;

    public PersonMoudle() {
    }

    public void setName(String name) {
        this.name = name;
    }

    public void setAge(String age) {
        this.age = age;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public String getName() {
        return name;
    }

    public String getAge() {
        return age;
    }

    public String getSex() {
        return sex;
    }
    //自动生成
    public PersonMoudle(Parcel in) {
        name = in.readString();
        age = in.readString();
        sex = in.readString();
    }
    //自动生成
    public static final Creator<PersonMoudle> CREATOR = new Creator<PersonMoudle>() {
        @Override
        public PersonMoudle createFromParcel(Parcel in) {
            return new PersonMoudle(in);
        }

        @Override
        public PersonMoudle[] newArray(int size) {
            return new PersonMoudle[size];
        }
    };
    //自动生成
    @Override
    public int describeContents() {
        return 0;
    }
    //自动生成
    @Override
    public void writeToParcel(Parcel dest, int flags) {
        dest.writeString(name);
        dest.writeString(age);
        dest.writeString(sex);
    }
}

看上去这么多，好难，好多都没见过。尼玛全都是自己自动生成的，你就只用写你要用的变量，自动生成代码
即可，记得写一个空构造方法，还有就是读写的顺序要相同，就是in跟write就行了。就这么简单。
再就是在fragment里面取数据是用getArguments()方法，并不是参数里面的那个Bundle。
    言归正传，我们说一下Tablayout的用法。说一下最简单的一个方法：

mTabLayout.addTab(mTabLayout.newTab().setText(title.get(i)).setIcon(R.mipmap.ic_launcher));

new 一个tab，然后tablayout的addtab()方法加上去，设置标题，设置icon都是tab的方法，
设置下面横线的颜色，高度是tablayout的方法。
下面，我说一下viewpager的fragmentAdapter。

package com.xinggui.wz.tablayout.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

/**
 *  @describe   adapter
 *  @author 忠
 *  @time 2017/5/26  15:34
 *  @E-main 371965177@qq.com
 */

public class Adapter extends FragmentPagerAdapter {
    private List<Fragment> list_fragment;                         //fragment列表
    private String[] list_Title;                              //tab名的列表

    public Adapter(FragmentManager fm, List<Fragment> list_fragment, String[] list_Title) {
        super(fm);
        this.list_fragment = list_fragment;
        this.list_Title = list_Title;
    }

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

    @Override
    public int getCount() {
        return list_fragment.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return list_Title[position];
    }
}

要注意的就是，就写这几个方法，其他方法不要写。我记得有一个return 是 == 那个方法不用写，
再就是要写这个getpagetitle方法。
再就是mainactivity里面的代码了。

package com.xinggui.wz.tablayout.activity;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.widget.Toast;

import com.xinggui.wz.tablayout.fragment.MyFragment;
import com.xinggui.wz.tablayout.R;
import com.xinggui.wz.tablayout.adapter.Adapter;
import com.xinggui.wz.tablayout.moudle.PersonMoudle;

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

public class MainActivity extends AppCompatActivity {
    public final static String FRAGMENTTAG = "person";
    private TabLayout mTabLayout;
    private ViewPager mViewpager;
    private String[] title = {"精选","游戏","电影","娱乐","体育","电视剧","综艺","新闻","美剧","动漫","少儿"};
    private String[] age = {"11","12","13","14","15","16","17","18","19","20","21"};
    private String[] sex = {"男","女","女","男","男","男","女","女","女","女","男"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        List<Fragment> fragment = new ArrayList<>();
        for (int i = 0;i<title.length;i++){
            MyFragment myFragment = new MyFragment();
            PersonMoudle personMoudle = new PersonMoudle();
            personMoudle.setAge(age[i]);
            personMoudle.setName(title[i]);
            personMoudle.setSex(sex[i]);
            Bundle bundle = new Bundle();
            bundle.putParcelable(MainActivity.FRAGMENTTAG,personMoudle);
            myFragment.setArguments(bundle);
            fragment.add(myFragment);
        }
        Adapter adapter = new Adapter(getSupportFragmentManager(), fragment, title);

//        for (int i = 0; i < title.size(); i++) {
//            mTabLayout.addTab(mTabLayout.newTab().setText(title.get(i)).setIcon(R.mipmap.ic_launcher));
//        }
        //viewpager加载adapter
        mViewpager.setAdapter(adapter);
        //TabLayout加载viewpager
        mTabLayout.setupWithViewPager(mViewpager);//最重要的就是这句
        //监听tablayout
        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
//                Toast.makeText(MainActivity.this,tab.getText(),Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }

    private void initView() {
        mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
        mViewpager = (ViewPager) findViewById(R.id.viewpager);
    }
}

mainactivity里面就是初始化数据，初始化标题，然后把通过mTabLayout.setupWithViewPager(mViewpager);把tablayout跟viewpager关联起来。就这样

项目链接