android ——滑动菜单

黄沙百战穿金甲,不破楼兰终不还。这篇文章主要讲述android ——滑动菜单相关的知识,希望能为你提供帮助。
一、DrawerLayout是一个拥有两个子控件的布局,第一个子控件是主屏幕中显示的内容,第二个子控件是滑动菜单中显示的内容:

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

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

文章图片

然后在标题栏上加入一个导航按钮,点击导航按钮也能打开滑动菜单,具体实现原理是,标题栏左方本来就有一个叫作HomeAsup的按钮,它默认的图标是一个返回的箭头,含义是返回上一个活动,所以只需要将它显示出来,修改它的图标和点击事件即可。
具体java代码:
1 public class MainActivity extends AppCompatActivity { 2 3private DrawerLayout mDrawerLayout; 4@Override 5protected void onCreate(Bundle savedInstanceState) { 6super.onCreate(savedInstanceState); 7setContentView(R.layout.activity_main); 8Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 9setSupportActionBar(toolbar); 10mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); 11ActionBar actionBar = getSupportActionBar(); 12if(actionBar != null){ 13//让ActionBar的HomeAsUp按钮显示出来 14actionBar.setDisplayHomeAsUpEnabled(true); 15//改变HomeAsUp按钮的图标 16actionBar.setHomeAsUpIndicator(R.drawable.ic_action_name); 17} 18 19} 20... 21public boolean onOptionsItemSelected(MenuItem item){ 22switch (item.getItemId()){ 23case android.R.id.home: 24mDrawerLayout.openDrawer(GravityCompat.START); 25break; 26... 27default: 28break; 29} 30return 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 2xmlns:android="http://schemas.android.com/apk/res/android" 3xmlns:app="http://schemas.android.com/apk/res-auto" 4android:id="@+id/drawer_layout" 5android:layout_width="match_parent" 6android:layout_height="match_parent" 7> 8 9< FrameLayout 10android:layout_width="match_parent" 11android:layout_height="match_parent"> 12 13< android.support.v7.widget.Toolbar 14android:id="@+id/toolbar" 15android:layout_width="match_parent" 16android:layout_height="?attr/actionBarSize" 17android:background="?attr/colorPrimary" 18android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 19app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> 20 21< /FrameLayout> 22< android.support.design.widget.NavigationView 23android:id="@+id/nav_view" 24android:layout_width="match_parent" 25android:layout_height="match_parent" 26android:layout_gravity="start" 27app:menu="@menu/nav_menu" 28app:headerLayout="@layout/nav_header"> 29 30< /android.support.design.widget.NavigationView> 31 < /android.support.v4.widget.DrawerLayout>

app:menu和app:headerLayout两个属性分别指定了NavigationView的具体菜单项和头部布局,这里只是先写好一个名字,还需要去创建这样两个布局文件:
【android ——滑动菜单】菜单项:
1 < menu xmlns:app="http://schemas.android.com/apk/res-auto" 2xmlns:android="http://schemas.android.com/apk/res/android"> 3 4< group android:checkableBehavior="single"> 5< item 6android:id="@+id/nav_call" 7android:icon="@drawable/nav_call" 8android:title="Call" /> 9< item 10android:id="@+id/nav_friend" 11android:icon="@drawable/nav_friend" 12android:title="Friend" /> 13< item 14android:id="@+id/nav_location" 15android:icon="@drawable/nav_location" 16android:title="Location" /> 17< item 18android:id="@+id/nav_mail" 19android:icon="@drawable/nav_mail" 20android:title="Mail" /> 21< item 22android:id="@+id/nav_task" 23android:icon="@drawable/nav_task" 24android:title="Task" /> 25< /group> 26 < /menu>

< /menu> 里嵌套了一个< /group> ,然后将group的checkableBehavior属性设置为single表示所有的菜单只能单选。
然后是头部布局:
1 < RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2android:orientation="vertical" 3android:layout_width="match_parent" 4android:layout_height="180dp" 5android:padding="10dp" 6android:background="?attr/colorPrimary"> 7 8< de.hdodenhof.circleimageview.CircleImageView 9android:id="@+id/icon_image" 10android:layout_width="70dp" 11android:layout_height="70dp" 12android:src="https://www.songbingjia.com/android/@drawable/nac_icon" 13android:layout_centerInParent="true"/> 14 15< TextView 16android:id="@+id/mail" 17android:layout_width="wrap_content" 18android:layout_height="wrap_content" 19android:layout_alignParentBottom="true" 20android:text="943217258@qq.com" 21android:textSize="14sp" 22android:textColor="#FFF"/> 23 24< TextView 25android:id="@+id/username" 26android:layout_width="wrap_content" 27android:layout_height="wrap_content" 28android:layout_above="@id/mail" 29android:text="一个名字" 30android:textSize="14sp" 31android:textColor="#FFF"/> 32 < /RelativeLayout>

最终效果:
android ——滑动菜单

文章图片

最后就是菜单项的点击事件了,直接改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; } });

 

    推荐阅读