1. 概述
在上一篇文章Material Design学习笔记之Toolbar+DrawerLayout中介绍了Toolbar+DrawerLayout的实现。在此,本文进一步丰富其功能,通过第三方开源库PagerSlidingTabStrip(Github地址)来实现tab导航栏效果。点击tab标签将跳转到相应页面,并且可以实现页面滑动,效果如图:
2. 实现
2.1 平台配置
- Android Studio 1.4
- compileSdkVersion 23
- buildToolsVersion “23.0.1”
- build:gradle:1.3.0
如果要使用PagerSlidingTabStrip库,首先将下载的PagerSlidingTabStrip文件夹中的library导入到本地工程。即File->New->Import Module…
2.2 风格(Style)
设置Tab背景,新建res/drawable/background_tabs:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/tabs_pattern"
android:tileMode="repeat" />
其中,图片tabs_pattern可以从下载的PagerSlidingTabStrip文件夹下的Sample文件夹下找到。
2.2 布局(Layout)
在此,仅需简单修改drawerlayout布局文件:
...
<com.astuetz.PagerSlidingTabStrip
android:id="@+id/tab_strip"
android:layout_width="match_parent"
android:layout_height="48dip"
android:background="@drawable/background_tabs" />
...
代码(Java)
src/MainActivity.java:
public class MainActivity extends ActionBarActivity {
private DrawerLayout mDrawerLayout;
private ActionBarDrawerToggle mDrawerToggle;
private Toolbar mToolbar;
private ListView mDrawerListView;
private ViewPager mViewPager;
private String titles[] = new String[]{"Sample Tab 1", "Sample Tab 2", "Sample Tab 3", "Sample Tab 4"
, "Sample Tab 5", "Sample Tab 6", "Sample Tab 7", "Sample Tab 8"};
PagerSlidingTabStrip mPagerSlidingTabStrip;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
}
private void initViews() {
mToolbar = (Toolbar) findViewById(R.id.toolbar);
if(mToolbar != null){
mToolbar.setLogo(R.drawable.logo);
mToolbar.setTitle("My Title");// 标题的文字需在setSupportActionBar之前,不然会无效
mToolbar.setSubtitle("Sub Title");
mToolbar.setTitleTextColor(getResources().getColor(R.color.white));
setSupportActionBar(mToolbar);
}
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open,
R.string.drawer_close);
mDrawerToggle.syncState();
mDrawerLayout.setDrawerListener(mDrawerToggle);
mDrawerListView = (ListView)findViewById(R.id.mListView);
mViewPager = (ViewPager)findViewById(R.id.viewpager);
mViewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager(), titles));
mPagerSlidingTabStrip = (PagerSlidingTabStrip)findViewById(R.id.tab_strip);
mPagerSlidingTabStrip.setViewPager(mViewPager);
mPagerSlidingTabStrip.setIndicatorColor(getResources().getColor(R.color.colorPrimaryDark));
mPagerSlidingTabStrip.setIndicatorHeight(4);
String[] values = new String[]{
"DEFAULT", "RED", "BLUE", "MATERIAL GREY"
};
ArrayAdapter<String> adapter = new ArrayAdapter<String>(
this,android.R.layout.simple_list_item_1,android.R.id.text1,values);
mDrawerListView.setAdapter(adapter);
mDrawerListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
switch (position){
case 0:
mDrawerListView.setBackgroundColor(getResources().getColor(R.color.material_deep_teal_500));
mToolbar.setBackgroundColor(getResources().getColor(R.color.material_deep_teal_500));
mPagerSlidingTabStrip.setBackgroundColor(getResources().getColor(R.color.material_deep_teal_500));
mDrawerLayout.closeDrawer(Gravity.LEFT);
break;
case 1:
mDrawerListView.setBackgroundColor(getResources().getColor(R.color.red));
mToolbar.setBackgroundColor(getResources().getColor(R.color.red));
mPagerSlidingTabStrip.setBackgroundColor(getResources().getColor(R.color.red));
mDrawerLayout.closeDrawer(Gravity.LEFT);
break;
case 2:
mDrawerListView.setBackgroundColor(getResources().getColor(R.color.blue));
mToolbar.setBackgroundColor(getResources().getColor(R.color.blue));
mPagerSlidingTabStrip.setBackgroundColor(getResources().getColor(R.color.blue));
mDrawerLayout.closeDrawer(Gravity.LEFT);
break;
case 3:
mDrawerListView.setBackgroundColor(getResources().getColor(R.color.material_blue_grey_800));
mToolbar.setBackgroundColor(getResources().getColor(R.color.material_blue_grey_800));
mPagerSlidingTabStrip.setBackgroundColor(getResources().getColor(R.color.material_blue_grey_800));
mDrawerLayout.closeDrawer(Gravity.LEFT);
break;
}
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return super.onCreateOptionsMenu(menu);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
return super.onOptionsItemSelected(item);
}
}
个性化定制:PagerSlidingTabStrip提供了丰富的个性化定制属性,可以通过
- .setIndicatorColor 滑动指示器颜色
- .setUnderlineColor 视图的底部的全宽线的颜色
- .setDividerColor 选项卡之间的分隔线的颜色
- .setIndicatorHeight 滑动指标高度
- .setUnderlineHeight 视图的底部高度的全宽线
- .setDividerPadding 顶部和分频器的底部填充
- .setTabPaddingLeftRight 左,每个选项卡的右填充
- .setScrollOffset 所选选项卡的滚动偏移量
- .setTabBackground 每个标签的背景可拉伸,应该是一个StateListDrawable
- .setShouldExpand 如果设置为true,每个选项卡被赋予了相同的权重,默认为false
- .setTextAllCaps 如果为true,所有的选项卡标题将是大写,默认为true