最近用腾讯视频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关联起来。就这样
项目链接