天天看点

TabLayout+ViewPager+Fragment

最近用腾讯视频APP,看视频的时候发现,他的首页上面分类滑动条,点击会自动居中显示,就来了点兴趣。
找了下资料,发现这个实现其实很简单,就是Tablayout+viewpager+fragment实现的。
首先,先依赖Tablayout
           
然后就是布局文件了
           
<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 [email protected]
 */


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 ;
    }
    //自动生成
    @Override
    public void writeToParcel(Parcel dest, int flags) {
        dest.writeString(name);
        dest.writeString(age);
        dest.writeString(sex);
    }
}
           
看上去这么多,好难,好多都没见过。尼玛全都是自己自动生成的,你就只用写你要用的变量,自动生成代码
即可,记得写一个空构造方法,还有就是读写的顺序要相同,就是in跟write就行了。就这么简单。
再就是在fragment里面取数据是用getArguments()方法,并不是参数里面的那个Bundle。
    言归正传,我们说一下Tablayout的用法。说一下最简单的一个方法:
           
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 [email protected]
 */

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 = ;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 = ; 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关联起来。就这样
           

项目链接