Android中巧用官方自带View —— 导航
TabLayout
- 步骤：
- 布局（TabLayout和ViewPager位置关系）；
- 自定义Adapter（继承自 FragmentPagerAdapter），并配置Fragment和tab标题内容；
- java代码中给ViewPager绑定Adapter；
布局
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
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="0.1dp"
android:background="@color/tab_sep"/>
<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
style="@style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"/>
<View
android:layout_width="match_parent"
android:layout_height="0.1dp"
android:background="@color/tab_sep"/>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"/>
</merge>自定义Adapter
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
public class ModeListVpAdapter extends FragmentPagerAdapter {
private final String mTabTitles[];
private final Mode.Position[] mPosition = Mode.Position.values();
private final int PAGE_COUNT = mPosition.length;
private Context mContext;
public ModeListVpAdapter(FragmentManager fm, Context context) {
super(fm);
mContext = context;
mTabTitles = context.getResources().getStringArray(R.array.main_tabs);
}
public int getCount() {
return PAGE_COUNT;
}
public Fragment getItem(int position) {
return ModeListFragment.newInstance(position); // 根据position返回对应的fragment
}
public CharSequence getPageTitle(int position) {
return mTabTitles[position]; // 根据position返回对应的tab标题
}
}绑定
1
2
3
4
5
6ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setAdapter(new ModeListVpAdapter(getSupportFragmentManager(), mContext));
TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
tabLayout.setupWithViewPager(viewPager);
viewPager.setCurrentItem(2); // 默认选中第二个tab
DrawerLayout & NavigationView
- NavigationView隐藏menu：不使用app:menu属性即可；
- 给NavigationView头部布局组件设置点击事件：可以通过
mNavView.getHeaderView(0)获取根布局的view引用； - 禁用滑动
1
2
3
4// lock
mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
// unlock
mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED);
外部链接
- disable the swipe gesture that opens the navigation drawer in android
- How do I use DrawerLayout to display over the ActionBar/Toolbar and under the status bar?
- 使用 DrawerLayout 实现 Material Design风格的侧滑
ToolBar
切换fragment时对应显示不同的菜单：
通过控制自定义的标志，然后调用invalidateOptionsMenu();刷新菜单即可；1
2
3
4
5
6
7
8
9
10
11
protected boolean onPrepareOptionsPanel(View view, Menu menu) {
if (mMode == DEVICE_FRAGMENT) {
menu.findItem(R.id.action_add).setVisible(true);
menu.findItem(R.id.action_ok).setVisible(false);
} else if (mMode == SETTING_TIME_FRAGMENT) {
menu.findItem(R.id.action_add).setVisible(false);
menu.findItem(R.id.action_ok).setVisible(true);
}
return super.onPrepareOptionsPanel(view, menu);
}在Fragment中获取ToolBar对象，并监听点击事件；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18Toolbar toolbar = (Toolbar) getActivity().findViewById(R.id.toolbar);
TextView tvTitle = (TextView) toolbar.findViewById(R.id.tv_nav_title);
tvTitle.setText("标题1");
// 处理toolbar上的菜单点击事件；
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_ok:
Usp.init(mContext).putInt(CKeys.KEY_TS, indexInTIMES(mRgSettingTime.getCheckedRadioButtonId()));
Utoast.toastOnMain(mContext, mContext.getString(R.string.time_setting_setted));
break;
}
return false;
}
});
适配
Toolbar 里面有两个属性很关键:
android:minHeight=”?attr/actionBarSize”,这个表示引用系统 ActionBar 的高度.
android:paddingTop=”@dimen/tool_bar_top_padding”这个是来引用资源文件里面的tool_bar_top_padding的高度,这个高度主要是为了对5.0做适配,在5.0 上为24dp,其他版本为0dp