安卓Design包之TabLayout控件的使用
分类:
IT文章
•
2023-12-15 20:21:37
转自:
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;
}
}
效果:
