[AndroidStudio]DrawerLayout布局结合HomeAsUp箭头动画效果最小系统

2019-12-27  20:44:40  WideMouth

DrawerLayout布局结合HomeAsUp箭头动画效果最小系统

 

 　　2019年12月27日，现在，终于解决了写下这篇博客的所有事情，之前一直纠结博客园无法上传视频，找了很多种方法，尝试上传B网站视频测试，查看博客时却无法显示，原来是园主设置了JS权限，申请了才能支持HTML代码，几个小时申请完后，发现上传的视频无法自动播放（尝试了网上的办法，还是没能解决，头疼），一小时前找到了完美的解决办法（GIF）哈哈，多么简单的办法，还真是难倒人的总是一些简单到恶心的细节。终于开启我的博客之路啦！！！这是我的第一篇博客哦！

　　说了这么多废话，现在开始啦！！！

　　先上效果图：

                            

　　随便下了一个GIF软件（Screen To GIF），鼠标特效挺不错的，看到ToolBar最左侧的箭头按钮了吗，效果很炫酷吧，没玩过的你一定觉得很难做吧，嘻嘻，放心啦，AndroidStudio都为你封装好啦，只需几段代码量就能解决呢，有没有很激动，那就跟我一起来吧！！！

　　首先我们需要准备一个ToolBar布局，为了以后更好的扩展，就不直接在activity_main.xml里添加啦，我要将他独立出来，那让我们在layout文件夹New一个layout XML file吧，就命名为toolbar.xml吧!

　　代码如下:

 

1 <?xml version="1.0" encoding="utf-8"?>
2 <androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
3     xmlns:app="http://schemas.android.com/apk/res-auto"
4     android:id="@ id/Toolbar"
5     android:layout_width="match_parent"
6     android:layout_height="?attr/actionBarSize"
7     android:background="?attr/colorPrimary"
8     app:title="WideMouth"
9     app:titleTextColor="@android:color/holo_blue_dark" />

 

　　这里将ToolBar的高度设置成ActionBar的高度，将背景颜色设置为colorPrimary（标题栏）颜色，标题为WideMouth并设置颜色为暗蓝色，一个简单的自定义ToolBar就做好啦！

下面是DrawerLayout布局：

　　drawerlayout.xml

 

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     android:id="@ id/DrawerLayout"
 5     android:layout_width="match_parent"
 6     android:layout_height="match_parent">
 7     <!-- 主界面-->
 8     <FrameLayout
 9         android:layout_width="match_parent"
10         android:layout_height="match_parent">
11         <TextView
12             android:id="@ id/textView"
13             android:layout_width="wrap_content"
14             android:layout_height="wrap_content"
15             android:layout_gravity="center"
16             android:gravity="center"
17             android:text="This is main_layout"
18             android:textColor="@android:color/holo_blue_dark"
19             android:textSize="24sp" />
20     </FrameLayout>
21     <!--滑动菜单-->
22     <LinearLayout
23         android:layout_width="match_parent"
24         android:layout_height="match_parent"
25         android:layout_gravity="start"
26         android:orientation="vertical"
27         android:background="@android:color/darker_gray" >
28         <TextView
29             android:id="@ id/textView2"
30             android:layout_width="wrap_content"
31             android:layout_height="wrap_content"
32             android:layout_gravity="center"
33             android:gravity="center"
34             android:text="This is menu"
35             android:textSize="24sp"
36             android:textColor="@android:color/holo_blue_dark"
37             />
38     </LinearLayout>
39 </androidx.drawerlayout.widget.DrawerLayout>

 

　　虽然代码有点长，但都是常用的布局控件，并不复杂，最外层的是我们自定义的DrawerLayout布局，DrawerLayout下放置了两个直接子布局（FrameLayout和LinearLayout)，第一个子布局默认为主界面，也就是主屏幕中显示的内容，第二个子布局为滑动菜单，在LinearLayout标签属性中，最核心的代码是android:layout_gravity="start"，这个属性是必须指定的，告知DrawerLayout滑动菜单是从哪边滑出，这里指定为start，意思是根据系统语言顺序习惯进行判断，系统语言为英语或汉语，则滑动菜单就从左边滑出，如果是阿拉伯语，则是从右边滑出。

　　注意：DrawerLayout布局可以有多个子布局，这里放置了两个，其实也可以两个以上，但除了第一个子布局外，后面的子布局都需指定android:layout_gravity属性，可以是start、end（右边）、bottom（底部）。子布局也可以是其他控件，DrawerLayout并没有限制只能使用固定的控件。

 

 

　　准备好这两个主要的自定义布局后，下面我们将他写进activity_main.xml吧。

　　activity_main.xml　

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     xmlns:tools="http://schemas.android.com/tools"
 5     android:layout_width="match_parent"
 6     android:layout_height="match_parent"
 7     android:orientation="vertical"
 8     tools:context=".MainActivity">
 9     
10     <include layout="@layout/toolbar"/>
11     <include layout="@layout/drawerlayout"/>
12 </LinearLayout>

　　主布局是不是很简单，这主要得益于我们将两个主布局都做好啦，这里我们只需要通过include标签将他们添加进来即可。现在我们运行一下。

　　　　　　　　

　　这时，我们发现屏幕上方多出一条白条，这是因为我们的MainActivity继承自AppCompatActivity，系统自动给我们配置了一个ActionBar（标题栏），这是我们需要将他删除，打开res/values/styles.xml文件，添加<item name="windowNoTitle">true</item>，去掉默认的ActionBar。

styles.xml：

 1 <resources>
 2 
 3     <!-- Base application theme. -->
 4     <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
 5         <!-- Customize your theme here. -->
 6 
 7         <item name="windowNoTitle">true</item>
 8 
 9         <item name="colorPrimary">@color/colorPrimary</item>
10         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
11         <item name="colorAccent">@color/colorAccent</item>
12     </style>
13 </resources>

　　再次运行：　

 　　　　　　　

　　这里我们已经实现了滑动菜单功能，但还不具有滑动箭头特效，这就需要我们的代码了。我们继续来优化。

MainActivity：

 1 package com.widemouth.drawerlayout;
 2 
 3 import androidx.annotation.NonNull;
 4 import androidx.appcompat.app.ActionBar;
 5 import androidx.appcompat.app.ActionBarDrawerToggle;
 6 import androidx.appcompat.app.AppCompatActivity;
 7 import androidx.appcompat.widget.Toolbar;
 8 import androidx.core.view.GravityCompat;
 9 import androidx.drawerlayout.widget.DrawerLayout;
10 
11 import android.os.Bundle;
12 import android.view.MenuItem;
13 import android.view.View;
14 
15 public class MainActivity extends AppCompatActivity {
16     private DrawerLayout drawerLayout;
17     private ActionBarDrawerToggle drawerToggle;
18     @Override
19     protected void onCreate(Bundle savedInstanceState) {
20         super.onCreate(savedInstanceState);
21         setContentView(R.layout.activity_main);
22         //设置状态栏黑色字体
23         getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
24 
25         Toolbar toolbar = (Toolbar) findViewById(R.id.Toolbar);
26         //将ToolBar实例传入，使ToolBar的外观与功能都和ActionBar保持一致
27         setSupportActionBar(toolbar);
28 
29         ActionBar actionBar = getSupportActionBar();//得到当前ActionBar实例
30         if (actionBar != null) {
31             actionBar.setDisplayHomeAsUpEnabled(true);//显示箭头导航按钮
32             actionBar.setHomeButtonEnabled(true);//设置按钮可点击
33             //  actionBar.setHomeAsUpIndicator(R.drawable.location);//更改导航按钮图标
34         }
35         drawerLayout = findViewById(R.id.DrawerLayout);//得到DrawerLayout实例
36         //new一个 ActionBarDrawerToggle，特殊类型的抽屉监听器
37         drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, R.string.app_name, R.string.app_name);
38         drawerLayout.setDrawerListener(drawerToggle);//设置监听器
39     }
40 
41     //菜单按钮监听器，这里只有导航键按钮
42     @Override
43     public boolean onOptionsItemSelected(@NonNull MenuItem item) {
44         switch (item.getItemId()) {
45             case android.R.id.home:  //HomeAsUp导航按钮id为android.R.id.home.
46                 if (drawerLayout.isDrawerOpen(GravityCompat.START)) {//如果滑动菜单已显示
47                     drawerLayout.closeDrawer(GravityCompat.START);//隐藏左边滑动菜单
48                     //drawerLayout.closeDrawers();//隐藏所有滑动菜单
49                 } else {
50                     drawerLayout.openDrawer(GravityCompat.START);//显示滑动菜单
51                 }
52                 return true;
53         }
54         return super.onOptionsItemSelected(item);
55     }
56 
57     //屏幕翻转变化监测，监测DrawerLayout布局状态
58     @Override
59     protected void onPostCreate(Bundle savedInstanceState) {
60         super.onPostCreate(savedInstanceState);
61         drawerToggle.syncState();//syncState方法更新导航图标和DrawerLayout布局状态保持一致
62                                 //实现动画效果
63     }
64 }

　　首先将状态栏字体和图标设置为暗色，因为这里将状态栏背景设置为浅色（文章底部附屏幕主题颜色设置指南），如果字体和图标默认也为浅色，会引起视觉上的模糊（见第二个效果图）。然后需要得到ToolBar和DrawerLayout控件实例，这样才能进行逻辑操作。这里重新两个类方法，一个是onOptionsItemSelected，用来监听ActionBar上的菜单按钮，类似于Button的setOnClickListener()方法，这里只监听了导航按钮；另一个是onPostCreate，用来监测屏幕的翻转情况，当DrawerLayout滑动时，会调用此方法，方法内更新了导航按钮状态，从而实现了文章开头的动画效果。代码部分我注释的很详细，大家应该容易上手。

　　效果图：

　　　　　　

　　注意：如果大家运行时出现闪退，可能是大家没有按文章上述要求修改styles.xml,因为MainActivity继承自AppCompatActivity，Activity会自带一个ActionBar，当执行setSupportActionBar(toolbar);时，出现了两个ActionBar导致程序闪退。返回上一步，在styles.xml文件中添加<item name="windowNoTitle">true</item>即可。

　　这样，我们就完成了DrawerLayout的动画效果，不过，大家应该也发现了一个问题，导航按钮颜色是灰色的，这与ToolBar主题格格不入，我们需要进行主题修改。打开values文件夹的styles.xml，这里包含了所有的主题设置，在这里面系统在配置时默认给添加了一个AppTheme主题，其中写了colorPrimary、colorPrimaryDark和colorAccent这3个属性的颜色，相关属性的对应位置如图：

  　　　　　　　　　　

　　最后的优化，修改导航按钮颜色需要我们为其设置主题，顺便我们设置了其他属性颜色。

　　附最终styles.xml：

 1 <resources>
 2     <!-- Base application theme. -->
 3     <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
 4         <!-- Customize your theme here. -->
 5         <item name="windowNoTitle">true</item>
 6         <item name="colorPrimary">@android:color/white</item>
 7         <item name="colorPrimaryDark">#FFF0EFEF</item>
 8         <item name="colorAccent">@color/colorAccent</item>
 9         <item name="android:navigationBarColor">@android:color/holo_blue_dark</item>
10         <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
11     </style>
12     <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
13         <item name="spinBars">true</item>
14         <item name="color">@android:color/holo_blue_dark</item>
15     </style>
16 </resources>

　　大功告成！！！ @WideMouth

　　最终效果图：