利用 TabLayout 和 ToolBar 实现滑动标签页
最近在实现便签滑动页的时候突然发现 ActionBar 已经不被官方推荐使用,比较好的一个方法就是利用 ToolBar 和 TabLayout 来实现,以下是实现步骤:
- TalLayout 是 Android Support Design 中的一个控件,在使用之前需要在 build.gradle 文件中添加
compile'com.android.support:design:23.2.0'
才能够正常使用。 对 values 中的 style 文件进行设置以屏蔽 Activity 的 ActionBar,让主题继承于 NoActionBar,如果需要改变 Acitivity 的背景颜色设置
windowBackground
即可:1
2
3
4
5
6
7
8
9<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/material_blue_grey_800</item>
<!--Status bar color-->
<item name="colorPrimaryDark">@color/accent_material_light</item>
<!--Window color-->
<item name="colorAccent">@color/colorAccent</item>
</style>由于需要实现标签页的滑动效果所以需要用到 ViewPager ,加上 TabLayout 和 TooBar 基本的布局如下:
其中 TabLayout 中1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<android.support.v7.widget.Toolbar
android:id="@+id/topToolBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/bar_top_padding"></android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/topToolBar"
app:tabSelectedTextColor="#3da6a2"
app:tabTextColor="#817f7f"></android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/tabLayout"></android.support.v4.view.ViewPager>tabSelectedTextColor
用于设置选中Tab的字体颜色,tabTextColor
用于设置未选中的Tab字体的颜色,Toolbar 中设置paddingTop
主要用于4.4中沉浸式状态栏的适配,防止 ToolBar 和状态栏重合。- 之后是为 ToolBar 设置各种属性创建 FramePagerAdapter,对 ViewPager 和 TabLayout 设置监听事件:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98public class Bar_Activity extends AppCompatActivity {
Toolbar topToolBar;
TabLayout tabLayout;
ViewPager viewPager;
FragmentPagerAdapter pagerAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_bar_);
init();
topToolBar.setTitle("BarDemo");
setSupportActionBar(topToolBar);
/*设置状态栏为透明*/
WindowManager.LayoutParams layoutParams = getWindow().getAttributes();
layoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | layoutParams.flags);
getSupportActionBar().setDisplayHomeAsUpEnabled(false);
//遍历FragmentPagerAdapter为TabLayout添加Tab
for (int i = 0; i < pagerAdapter.getCount(); i++) {
tabLayout.addTab(
tabLayout.newTab().setText(pagerAdapter.getPageTitle(i)));
}
//为ViewPager设置适配器
viewPager.setAdapter(pagerAdapter);
//为viewPager设置监听事件,当frame改变时更改Tab
viewPager.addOnPageChangeListener(
new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
//为tabLayout设置监听事件,当选中tab的时候切换frame
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
topToolBar.setNavigationIcon(R.drawable.ic_account_circle_white_24dp);
}
protected void init() {
topToolBar = (Toolbar) findViewById(R.id.topToolBar);
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
viewPager = (ViewPager) findViewById(R.id.viewPager);
topToolBar.setBackgroundColor(Color.parseColor("#1aae98"));
tabLayout.setBackgroundColor(Color.GRAY);
//创建针对ViewPager的FragmentPagerAdapter
pagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
Fragment tabFragment = new TabFragment();
Bundle args = new Bundle();
args.putInt(TabFragment.FLAG_TAB, position + 1);
tabFragment.setArguments(args);
return tabFragment;
}
@Override
public int getCount() {
return 3;
}
@Override
public CharSequence getPageTitle(int position) {
switch (position) {
case 0:
return "tab1";
case 1:
return "tab2";
case 2:
return "tab3";
}
return null;
}
};
}
//设置 toolBar 右上角的菜单项
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
return super.onOptionsItemSelected(item);
}
} 最后看下 menu 文件
最终实现效果如图所示:1
2
3
4
5
6
7
8<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="@+id/search_item"
android:title="search"
android:icon="@drawable/ic_search_white_24dp"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="ifRoom|collapseActionView"></item>
</menu>