標籤:
轉自:
安卓Design包之TabLayout控制項的簡單使用
Google在2015的IO大會上,給我們帶來了更加詳細的Material Design設計規範,同時,也給我們帶來了全新的Android Design Support Library,在這個support庫裡面,Google給我們提供了更加規範的MD設計風格的控制項。最重要的是,Android Design Support Library的相容性更廣,直接可以向下相容到Android 2.2。這不得不說是一個良心之作。
使用方法很簡單,只需要添加一句依賴
compile ‘com.android.support:design:24.0.0‘
首先帶來的是TabLayout
Tab滑動切換View並不是一個新的概念,但是Google卻是第一次在support庫中提供了完整的支援,
而且,Design library的TabLayout 既實現了固定的選項卡 - view的寬度平均分配,
也實現了可滾動的選項卡 - view寬度不固定同時可以橫向滾動。選項卡可以在程式中動態添加,
但大部分時間我們都不會這樣用,通常滑動布局都會和ViewPager配合起來使用,所以,我們需要ViewPager來幫忙:
通過一句話setupWithViewPager,我們就把ViewPager和TabLayout結合了起來。
layout_main.xml:
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="fanggao.qf.tablelayouttest.MainActivity"> <FrameLayout android:id="@+id/fl_layout" android:layout_width="match_parent" android:layout_height="match_parent"> </FrameLayout></RelativeLayout>
View Code
layout_fragmentxml布局:
<?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" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical"> <android.support.design.widget.TabLayout android:id="@+id/tl_title" android:layout_height="wrap_content" android:layout_width="match_parent" android:background="#ffffff" app:tabIndicatorColor="#0000ff" app:tabTextColor="#000000" app:tabSelectedTextColor="#0000ff" app:tabMode="fixed"><!-- app:tableIndicatorColor = "#0000ff" 設定底線的顏色 app:tabTextColor="#000000" 設定文本顏色 app:tabSelectedTextColor="#0000ff" 設定選擇時文本顏色 app:tabMode="scrollable" 模式:scrollable橫向滾動 fixed 填充,不能滾動 --> </android.support.design.widget.TabLayout> <android.support.v4.view.ViewPager android:id="@+id/vp_fragment" android:layout_width="match_parent" android:layout_height="match_parent"></android.support.v4.view.ViewPager></LinearLayout>
View Code
MainActivity:
添加片段檔案
public class MainActivity extends FragmentActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //載入fragment getSupportFragmentManager().beginTransaction().add(R.id.fl_layout,new MainFragment()).commit(); }}
MainFragment:
設定顯示內容(添加了tabLayout與viewPager)
public class MainFragment extends Fragment { private TabLayout tbTitle; private ViewPager vpFragments; @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View inflate = inflater.inflate(R.layout.fragment_main, container,false); tbTitle = (TabLayout) inflate.findViewById(R.id.tl_title); vpFragments = (ViewPager) inflate.findViewById(R.id.vp_fragment); initView(); return inflate; } private void initView() {
//片段集合 ArrayList<Fragment> fragmentList = new ArrayList<>();
//標題集合 ArrayList<String> titles = new ArrayList<>(); String[] titleRes = new String[]{"推薦","排行","歌單","電台","MV"}; for (int j = 0; j < titleRes.length; j++) { titles.add(titleRes[j]); } for (int i = 0; i < titleRes.length; i++) { TestFragment testFragment = new TestFragment(); Bundle bundle = new Bundle(); bundle.putString("VALUE",titleRes[i]); testFragment.setArguments(bundle); fragmentList.add(testFragment); } //建立並設定適配器 TestFragmentAdapter testFragmentAdapter = new TestFragmentAdapter(getActivity().getSupportFragmentManager(), fragmentList, titles); vpFragments.setAdapter(testFragmentAdapter); //將Tablelayout與viewPager綁定 tbTitle.setupWithViewPager(vpFragments); }}
TestFragmentAdapter:
public class TestFragmentAdapter extends FragmentPagerAdapter { private List<Fragment> fragmentList; private List<String>titles; public TestFragmentAdapter(FragmentManager fm, List<Fragment> fragmentList,List<String>titles) { super(fm); this.fragmentList = fragmentList; this.titles = titles; } @Override public Fragment getItem(int position) { return fragmentList.get(position); } @Override public int getCount() { return fragmentList.size(); } /** * 將標題頭與viewPager綁定 * @param position * @return */ @Override public CharSequence getPageTitle(int position) { return titles.get(position); }}
TestFragment(添加到viewPager中顯示內容的片段)
public class TestFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View inflate = inflater.inflate(R.layout.fragment_test1, container, false);
Bundle bundle = getArguments();
String value = bundle.getString("VALUE");
Log.i("tag", "onCreateView: "+value);
TextView tvText = (TextView) inflate.findViewById(R.id.tv_textFragment);
tvText.setText(value);
return inflate;
}
}
效果:
安卓Design包之TabLayout控制項的使用