android ——滑动菜单

Posted 2020-10-05 xxbbtt

一、DrawerLayout是一个拥有两个子控件的布局，第一个子控件是主屏幕中显示的内容，第二个子控件是滑动菜单中显示的内容：

 1 <android.support.v4.widget.DrawerLayout
 2     xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     android:id="@+id/drawer_layout"
 5     android:layout_width="match_parent"
 6     android:layout_height="match_parent"
 7     >
 8 
 9     <FrameLayout
10         android:layout_width="match_parent"
11         android:layout_height="match_parent">
12 
13         <android.support.v7.widget.Toolbar
14             android:id="@+id/toolbar"
15             android:layout_width="match_parent"
16             android:layout_height="?attr/actionBarSize"
17             android:background="?attr/colorPrimary"
18             android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
19             app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
20 
21     </FrameLayout>
22     <TextView
23         android:layout_width="match_parent"
24         android:layout_height="match_parent"
25         android:layout_gravity="start"
26         android:text="这是一个菜单"
27         android:textSize="30sp"
28         android:background="#FFF"/>
29 </android.support.v4.widget.DrawerLayout>

要注意的地方是第二个子控件TextView的layout_gravity属性指定的是滑动菜单是在屏幕的左边还是右边，属性值使用right或者left,这里使用start表示根据系统语言进行判断。

这里的效果是这样：

然后在标题栏上加入一个导航按钮，点击导航按钮也能打开滑动菜单，具体实现原理是，标题栏左方本来就有一个叫作HomeAsup的按钮，它默认的图标是一个返回的箭头，含义是返回上一个活动，所以只需要将它显示出来，修改它的图标和点击事件即可。

具体java代码：

 1 public class MainActivity extends AppCompatActivity {
 2 
 3     private DrawerLayout mDrawerLayout;
 4     @Override
 5     protected void onCreate(Bundle savedInstanceState) {
 6         super.onCreate(savedInstanceState);
 7         setContentView(R.layout.activity_main);
 8         Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
 9         setSupportActionBar(toolbar);
10         mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
11         ActionBar actionBar = getSupportActionBar();
12         if(actionBar != null){
13             //让ActionBar的HomeAsUp按钮显示出来
14             actionBar.setDisplayHomeAsUpEnabled(true);
15             //改变HomeAsUp按钮的图标
16             actionBar.setHomeAsUpIndicator(R.drawable.ic_action_name);
17         }
18 
19     }
20     ...
21     public boolean onOptionsItemSelected(MenuItem item){
22         switch (item.getItemId()){
23             case android.R.id.home:
24                 mDrawerLayout.openDrawer(GravityCompat.START);
25                 break;
26     ...
27             default:
28                 break;
29         }
30         return true;
31     }
32 }

 HomeAsup的id永远都是android.R.id.home，mDrawerLayout.openDrawer(GravityCompat.START)调用这个方法就可以打开滑动菜单。

 

二、 在滑动菜单中定制任意的布局——使用NavigationView

使用这个NavigationView先要添加一个库，

compile \'com.android.support:design:26.0.0-alpha1\'

这里为了一个图片圆形化的功能我又添加了另一个库

compile \'de.hdodenhof:circleimageview:2.1.0\'

把DrawerLayout的第二个子控件换成NavigationView，具体代码如下：

 1 <android.support.v4.widget.DrawerLayout
 2     xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     android:id="@+id/drawer_layout"
 5     android:layout_width="match_parent"
 6     android:layout_height="match_parent"
 7     >
 8 
 9     <FrameLayout
10         android:layout_width="match_parent"
11         android:layout_height="match_parent">
12 
13         <android.support.v7.widget.Toolbar
14             android:id="@+id/toolbar"
15             android:layout_width="match_parent"
16             android:layout_height="?attr/actionBarSize"
17             android:background="?attr/colorPrimary"
18             android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
19             app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
20 
21     </FrameLayout>
22     <android.support.design.widget.NavigationView
23         android:id="@+id/nav_view"
24         android:layout_width="match_parent"
25         android:layout_height="match_parent"
26         android:layout_gravity="start"
27         app:menu="@menu/nav_menu"
28         app:headerLayout="@layout/nav_header">
29 
30     </android.support.design.widget.NavigationView>
31 </android.support.v4.widget.DrawerLayout>

app:menu和app:headerLayout两个属性分别指定了NavigationView的具体菜单项和头部布局，这里只是先写好一个名字，还需要去创建这样两个布局文件：

菜单项：

 1 <menu xmlns:app="http://schemas.android.com/apk/res-auto"
 2     xmlns:android="http://schemas.android.com/apk/res/android">
 3 
 4     <group android:checkableBehavior="single">
 5         <item
 6             android:id="@+id/nav_call"
 7             android:icon="@drawable/nav_call"
 8             android:title="Call" />
 9         <item
10             android:id="@+id/nav_friend"
11             android:icon="@drawable/nav_friend"
12             android:title="Friend" />
13         <item
14             android:id="@+id/nav_location"
15             android:icon="@drawable/nav_location"
16             android:title="Location" />
17         <item
18             android:id="@+id/nav_mail"
19             android:icon="@drawable/nav_mail"
20             android:title="Mail" />
21         <item
22             android:id="@+id/nav_task"
23             android:icon="@drawable/nav_task"
24             android:title="Task" />
25     </group>
26 </menu>

</menu>里嵌套了一个</group>，然后将group的checkableBehavior属性设置为single表示所有的菜单只能单选。

然后是头部布局：

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     android:orientation="vertical"
 3     android:layout_width="match_parent"
 4     android:layout_height="180dp"
 5     android:padding="10dp"
 6     android:background="?attr/colorPrimary">
 7 
 8     <de.hdodenhof.circleimageview.CircleImageView
 9         android:id="@+id/icon_image"
10         android:layout_width="70dp"
11         android:layout_height="70dp"
12         android:src="@drawable/nac_icon"
13         android:layout_centerInParent="true"/>
14 
15     <TextView
16         android:id="@+id/mail"
17         android:layout_width="wrap_content"
18         android:layout_height="wrap_content"
19         android:layout_alignParentBottom="true"
20         android:text="[e-mail]"
21         android:textSize="14sp"
22         android:textColor="#FFF"/>
23 
24     <TextView
25         android:id="@+id/username"
26         android:layout_width="wrap_content"
27         android:layout_height="wrap_content"
28         android:layout_above="@id/mail"
29         android:text="一个名字"
30         android:textSize="14sp"
31         android:textColor="#FFF"/>
32 </RelativeLayout>

最终效果：

最后就是菜单项的点击事件了，直接改java代码就行：

  NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
  navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
  　　@Override
      public boolean onNavigationItemSelected(MenuItem item) {
      　　switch (item.getItemId()){
          　　case R.id.nav_call:
              　　Intent intent = new Intent(MainActivity.this,Main2Activity.class);
                  startActivity(intent);
                  break;
             }
                return true;
         }
     });