Alex_孤獨患者
0__ 說在前邊的話
- 第一次玩這個舷胜,有許多不足之處叁扫。
希望大家一起學習Android 5.x 枕扫,共同進步陪腌。辱魁。烟瞧。
Go go go ...
01_ TabLayout的概述 和 效果 圖片
4078BCBB-C202-4234-8CF2-C3914D725255.png
- 首先呢它是Android 5.0推出的Tab欄,之前呢 我們可能會用三方庫染簇,來實現頁面切換的效果参滴,諸如ViewPagerIndicator等。現在锻弓,Google終于自己推出了砾赔,TabLayout來實現頁面切換效果。感覺棒棒噠。暴心。妓盲。
02_如何玩這個呢
- 01首先得加入依賴包,在app/build.gradle 文件中
dependencies {
compile "com.android.support:appcompatv7:${supportLibVersion}"
compile "com.android.support:design:${supportLibVersion}"
}
注意: ${supportLibVersion} 是根據你自己擁有的版本來填寫
例如: 我的是
compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.android.support:design:23.1.1'
- 02 我們先寫布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tl_sliding"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="@+id/vp_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
</LinearLayout>
- 布局文件問簡單, 一個TabLayout: 我們標簽指示欄专普,下面是ViewPager:準備裝載Fragment...沒錯悯衬,我們準備TabLayout+ViewPager 來實現最簡單的頁面切換哦。檀夹。筋粗。
- 03 創(chuàng)建填充ViewPager的Fragment
public class CommonFragment extends Fragment {
private static final String CF_PAGE = "cf_page";
private int mPage;
//初始化Fragment
public static CommonFragment newInstance(int page) {
Bundle args = new Bundle();
args.putInt(CF_PAGE, page);
CommonFragment fragment = new CommonFragment();
fragment.setArguments(args);
return fragment;
}
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mPage = getArguments().getInt(CF_PAGE);
}
//
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
TextView tv = new TextView(getActivity());
tv.setText("fragments---" + mPage);
return tv;
}
簡書的代碼,寫的我好蛋疼啊炸渡。娜亿。。怎么格式化蚌堵。买决。。累死寶寶了辰斋。策州。。
- 04 創(chuàng)建ViewPager的適配器FragmentPagerAdapter
public class PagerAdaper extends FragmentPagerAdapter {
/** 標題欄 */
private static final String[] mTitles = {"tab0","tab1", "tab2", "tab3", "tab4", "tab5", "tab6"};
public PagerAdaper(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return CommonFragment.newInstance(position);
}
@Override
public int getCount() {
return mTitles.length;
}
//設置標題
@Override
public CharSequence getPageTitle(int position) {
return mTitles[position];
}}
已經無力吐槽~~ 這段代碼很簡單宫仗,主要的方法是getPageTitle(position) ,通過這個方法够挂,可以給Tab設置標題
- 05 最后,看看MainActivity中的代碼
public class MainActivity extends FragmentActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPager vp_content = (ViewPager) findViewById(R.id.vp_content);
TabLayout tl_sliding = (TabLayout) findViewById(R.id.tl_sliding);
vp_content.setAdapter(new PagerAdaper(getSupportFragmentManager()));
/**讓標題欄和viewpager聯動起來*/
tl_sliding.setupWithViewPager(vp_content);
}}
**當然藕夫,如果給TabLayout設置方法孽糖,tl_sliding.setTabMode(TabLayout.MODE_SCROLLABLE);標題欄就可以自動滾動起來了,如圖所示: **
10EDE03D-3F93-4543-B706-D11BD9C299B0.png