预览图
界面布局
传统的抽屉菜单一般采取DrawerLayout+Toolbar+NavigationView的布局组合。而为了使菜单栏界面设计更加自由，这儿使用自定义布局来代替NavigationView。在设计布局之前，先在styles.xml中将“DarkActionBar”改为“NoActionBar”，删去标题栏，然后待会我们用Toolbar替代。1
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
接着开始写我们的主界面，采取Material Design的DrawerLayout布局。activity_main.xml1
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<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white">
<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="0dp"
app:cardElevation="20dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="@+id/content_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toBottomOf="@+id/toolbar"/>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
<fragment
android:id="@+id/nav_view"
android:name="com.example.yc.androidsrc.MenuFragment"
android:layout_gravity="start"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.DrawerLayout>
DrawerLayout布局下的第一个子视图表示主内容视图，我将其嵌套在一个CardView里面，主要是为了当拉开菜单时，主内容视图的边缘能呈现出卡片式的圆角和阴影。主内容视图主要包括Toolbar和FrameLayout，其中FrameLayout用以动态加载各个菜单选项所对应的fragment。
DrawerLayout布局下的第二个子视图表示菜单栏视图，我们使用静态加载fragment的方式来呈现界面内容，其中android:layout_gravity="start"表示抽屉菜单是从左边拉开，而end则表示右边。
菜单布局不详说了。不过菜单选项的ListView Item布局左边有个设置为透明的View，当该项被选中时才显示为黑色，充当“视觉标签”的作用。
菜单侧滑时的监听事件
我们主要实现的效果是：当滑动菜单时，主视图逐渐缩小，移至界面右边并呈现出卡片式的圆角与阴影，菜单栏视图逐渐放大并完整呈现在界面左边。
因此我们需要监听DrawerLayout的滑动事件，代码如下：
1 | mDrawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() { |
我们来分析一下：其中参数slideOffset代表此时菜单栏的滑动比例，数值为0~1。而在这个过程中，我希望主内容视图的尺寸从原本的1缩放至最后的0.8，因此我们可以得到一个很简单的线性函数，即主内容视图的尺寸Scale=0.8+(1-slideOffset)x0.2。同样的，我设置在这个过程中，菜单栏的尺寸由0.5扩大到1，因此它的尺寸线性函数为0.5+slideOffset*0.5。而此时主内容视图的右移尺寸刚好对应为菜单栏滑出来的宽度，因此设置为mContent.setTranslationX(mMenu.getWidth()xslideOffset)。另外关于主内容视图要从以哪个坐标点为中心进行缩放，可通过setPivot进行设置，我觉得从左边界的中间点进行缩放，效果会比较好看些。当然，以上这些数据你都可以自由设计，不同的数据得到的界面动态效果各有千秋。
主要的代码如下：
MainActivity.java1
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
75public class MainActivity extends AppCompatActivity {
private DrawerLayout mDrawerLayout;
private FrameLayout contentFrameLayout;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerLayout.setScrimColor(Color.TRANSPARENT); // 菜单滑动时content不被阴影覆盖
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle(""); // 不显示程序应用名
toolbar.setNavigationIcon(R.drawable.ic_menu_black_24dp); // 在toolbar最左边添加icon
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
mDrawerLayout.openDrawer(GravityCompat.START);
}
});
final CardView cardView = (CardView) findViewById(R.id.card_view);
contentFrameLayout = (FrameLayout) findViewById(R.id.content_view);
replaceFragment(new TabFragment1());
// 监听抽屉的滑动事件
mDrawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
public void onDrawerSlide(View drawerView, float slideOffset) {
View mContent = mDrawerLayout.getChildAt(0);
View mMenu = drawerView;
float scale = 1 - slideOffset;
float rightScale = 0.8f + scale * 0.2f;
float leftScale = 0.5f + slideOffset * 0.5f;
mMenu.setAlpha(leftScale);
mMenu.setScaleX(leftScale);
mMenu.setScaleY(leftScale);
mContent.setPivotX(0);
mContent.setPivotY(mContent.getHeight() * 1/2);
mContent.setScaleX(rightScale);
mContent.setScaleY(rightScale);
mContent.setTranslationX(mMenu.getWidth() * slideOffset);
}
public void onDrawerOpened(View drawerView) {
cardView.setRadius(20); // 拉开菜单时，主内容视图的边缘能呈现出卡片式的圆角和阴影
}
public void onDrawerClosed(View drawerView) {
cardView.setRadius(0); // 菜单关闭，圆角消失
}
public void onDrawerStateChanged(int newState) {
}
});
}
public void replaceFragment(Fragment fragment) { // 动态加载fragment
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.replace(R.id.content_view, fragment);
transaction.addToBackStack(null);
transaction.commit();
}
}
至于菜单栏视图，主要是设置好每个选项的点击事件。这里我通过getActivity()强行获得MainActivity对象，然后再直接通过上面写好的replaceFragment()函数去动态加载对应的fragment，将所要的不同功能视图呈现在主视图中。
MenuFragment1
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
61public class MenuFragment extends Fragment {
private ListView mListView;
private List<MenuItem> menuItemList = new ArrayList<>();
private MenuItemAdapter adapter;
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState)
{
View navView = inflater.inflate(R.layout.activity_menu, container, false);
mListView = (ListView) navView.findViewById(R.id.menu_list_view);
mListView.setDivider(null); // 去掉分割线
initListView();
clickEvents();
return navView;
}
public void initListView() {
String[] data_zh = getResources().getStringArray(R.array.menu_zh);
String[] data_en = getResources().getStringArray(R.array.menu_en);
for (int i = 0; i < data_zh.length; i++) {
MenuItem menuItem = new MenuItem(data_zh[i], data_en[i]);
menuItemList.add(menuItem);
}
adapter = new MenuItemAdapter(getActivity(), R.layout.menu_list_item, menuItemList);
mListView.setAdapter(adapter);
}
public void clickEvents() {
mListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
adapter.changeSelected(position); // 先定义好样式如何改变
MainActivity activity = (MainActivity) getActivity();
DrawerLayout mDrawerLayout = (DrawerLayout) activity.findViewById(R.id.drawer_layout);
mDrawerLayout.closeDrawer(Gravity.START);
switch (position) {
case 0:
activity.replaceFragment(new TabFragment1());
break;
case 1:
activity.replaceFragment(new TabFragment2());
break;
case 2:
activity.replaceFragment(new TabFragment3());
break;
case 3:
activity.replaceFragment(new TabFragment4());
break;
case 4:
activity.replaceFragment(new TabFragment5());
break;
default:
break;
}
}
});
}
}
沉浸式状态栏
可以看到效果图上的顶部状态栏为沉浸式，背景色与Toolbar一致并且字体为黑色（一般为白色）。
首先，应该明白各个版本的区别：要修改状态栏，Android版本至少要在4.4以上，并且在4.4是不能让状态栏透明的，只能达到一种半透明的阴影背景，而在5.x的版本中，是可以修改背景颜色但无法修改字体颜色的，只有在6.0以上是可以随意修改的。但是在魅族和小米第三方ROM在4.4版本以上的手机都提供了修改的接口。
这里就不详细展开了，具体怎么做，我觉得这两篇博客总结得比较好，放上地址：
改进：避免fragment重复加载
2018/11/30 Debug
因为之前只是做了个小Demo，今天将其加入项目时，发现在每次切换菜单选项时，主视图内容所在的fragment都需要重新实例化，也就是运行OnCreatVIew()方法。这样就造成了很不好的用户体验。
- 如果fragment加载内容耗时，在弹出主视图时可能会有菜单滑动卡顿的现象。
- 每次重新加载，之前的内容进度消失，体验极其差劲。
之前我们是使用replace()方法来替换fragment，即把容器清空后再进行添加，因此需要重新走一遍新的fragment的生命周期，数据也需重新拉取。而改进的方式是使用add()－hide()－show()。add()即往容器添加fragment，新添加进来的fragment都是可见的（visible），后添加的fragment会展示在先添加的fragment上面，在绘制界面的时候会绘制所有可见的view，因此我们需要利用hide()等方法来避免重叠。切换时，判断该fragment是否已经存在容器中，如果是的话，则hide()当前fragment，则show()该传进来的fragment；如果不存在的话，则先add()后再重复刚刚的步骤。
1 | /** |
如果想要从源码角度了解replace()、add()两者之间的区别，可以参考下面这篇博客。