天天看點

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關聯起來。就這樣
           

項目連結