最近用騰訊視訊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關聯起來。就這樣
項目連結