最近用腾讯视频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;
private String[] list_Title;
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
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
// 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关联起来。就这样
项目链接