整理TabLayout+ViewPager+Fragment的使用


主頁面佈局


添加Tablayout和ViewPager兩個控件


1.添加依賴庫(根據自己依賴庫修改)



  • compile ‘com.android.support:support-v4:24.1.0’

  • compile ‘com.android.support:design:24.0.0’


2.xml佈局(文章最後提供自定義Tablayout屬性)


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="@+id/activity_main"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.kevinyang.tablayout_viewpager.MainA ctivity">

<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>

3.主頁代碼


public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

//初始化控件
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);

//設置Adapter
if (viewPager != null) {
setupViewPager(viewPager);
}

//tablayout滾動模式,要標簽數量夠多,不然標簽會靠左顯示
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
//設置tablayout的viewpager
tabLayout.setupWithViewPager(viewPager);
}

private void setupViewPager(ViewPager viewPager) {
//創建Fragment的集合,和tatlyout的title的名稱集合
ArrayList<Fragment> mFragmentList = new ArrayList<>();
ArrayList<String> mTitleList = new ArrayList<>();

//可以固定,可以網絡請求添加進集合
mTitleList.add("標簽 一");
mTitleList.add("標簽 二");
mTitleList.add("標簽 三");
mFragmentList.add(new MyFrament());
mFragmentList.add(new MyFrament());
mFragmentList.add(new MyFrament());

MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), mFragmentList,mTitleList);
viewPager.setAdapter(adapter);
}

//適配FragmentPagerAdapter
static class MyFragmentPagerAdapter extends FragmentPagerAdapter {

private List<?> mFragment;
private List<String> mTitleList;

/**
* 普通使用
*/
public MyFragmentPagerAdapter(FragmentManager fm, List<?> mFragment) {
super(fm);
this.mFragment = mFragment;
}

/**
* 接收標題使用
*/
public MyFragmentPagerAdapter(FragmentManager fm, List<?> mFragment, List<String> mTitleList) {
super(fm);
this.mFragment = mFragment;
this.mTitleList = mTitleList;
}

@Override
public Fragment getItem(int position) {
return (Fragment) mFragment.get(position);
}

@Override
public int getCount() {
return mFragment.size();
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
super.destroyItem(container, position, object);
}

//設置tablayout的title
@Override
public CharSequence getPageTitle(int position) {
if (mTitleList != null) {
return mTitleList.get(position);
} else {
return "";
}
}

}

}

4.自己添加Frament


public class MyFrament extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
TextView view = new TextView(getContext());
view.setText("HelloWorld!");
return view;
}
}

示例圖




這裡寫圖片描述


5.TabLayout的屬性設置


1.改變選中字體的顏色


app:[email protected]:color/light”

2.改變未選中字體的顏色


app:[email protected]/colorPrimary”

3.改變指示器下標的顏色


app:[email protected]:color/light”

4.改變整個TabLayout的顏色


app:tabBackground=”color”

5.改變TabLayout內部字體大小


app:[email protected]:style/TextAppearance.Holo.Large”//設置文字的外貌

6.改變指示器下標的高度


app:tabIndicatorHeight=”4dp”

7.添加圖標


tabLayout.addTab(tabLayout.newTab().setText(“Tab1”).setIcon(R.mipmap.ic_launcher));

8.Tablayout滑動

app:tabMode=”scrollable”


9.設置Tab內部的子控件的Padding


app:tabPadding=”xxdp”

app:tabPaddingTop=”xxdp”

app:tabPaddingStart=”xxdp”

app:tabPaddingEnd=”xxdp”

app:tabPaddingBottom=”xxdp”

10.設置整個TabLayout的Padding:


app:paddingEnd=”xxdp”

app:paddingStart=”xxdp”

11.內容的顯示模式


app:tabGravity=”center”//居中,如果是fill,則是充滿

12.設置最大的tab寬度:


app:tabMaxWidth=”xxdp”

13.設置最小的tab寬度:


app:tabMinWidth=”xxdp”

14.TabLayout開始位置的偏移量:


app:tabContentStart=”100dp”

0 個評論

要回覆文章請先登錄註冊