android ——滑动菜单

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

 <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"

     >

     <FrameLayout

         android:layout_width="match_parent"

         android:layout_height="match_parent">

         <android.support.v7.widget.Toolbar

             android:id="@+id/toolbar"

             android:layout_width="match_parent"

             android:layout_height="?attr/actionBarSize"

             android:background="?attr/colorPrimary"

             android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

             app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

     </FrameLayout>

     <TextView

         android:layout_width="match_parent"

         android:layout_height="match_parent"

         android:layout_gravity="start"

         android:text="这是一个菜单"

         android:textSize="30sp"

         android:background="#FFF"/>

 </android.support.v4.widget.DrawerLayout>

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

这里的效果是这样：

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

具体java代码：

 public class MainActivity extends AppCompatActivity {

     private DrawerLayout mDrawerLayout;

     @Override

     protected void onCreate(Bundle savedInstanceState) {

         super.onCreate(savedInstanceState);

         setContentView(R.layout.activity_main);

         Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

         setSupportActionBar(toolbar);

         mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

         ActionBar actionBar = getSupportActionBar();

         if(actionBar != null){

             //让ActionBar的HomeAsUp按钮显示出来

             actionBar.setDisplayHomeAsUpEnabled(true);

             //改变HomeAsUp按钮的图标

             actionBar.setHomeAsUpIndicator(R.drawable.ic_action_name);

         }

     }

     ...

     public boolean onOptionsItemSelected(MenuItem item){

         switch (item.getItemId()){

             case android.R.id.home:

                 mDrawerLayout.openDrawer(GravityCompat.START);

                 break;

     ...

             default:

                 break;

         }

         return true;

     }

 }

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，具体代码如下：

 <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"

     >

     <FrameLayout

         android:layout_width="match_parent"

         android:layout_height="match_parent">

         <android.support.v7.widget.Toolbar

             android:id="@+id/toolbar"

             android:layout_width="match_parent"

             android:layout_height="?attr/actionBarSize"

             android:background="?attr/colorPrimary"

             android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

             app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

     </FrameLayout>

     <android.support.design.widget.NavigationView

         android:id="@+id/nav_view"

         android:layout_width="match_parent"

         android:layout_height="match_parent"

         android:layout_gravity="start"

         app:menu="@menu/nav_menu"

         app:headerLayout="@layout/nav_header">

     </android.support.design.widget.NavigationView>

 </android.support.v4.widget.DrawerLayout>

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

菜单项：

 <menu xmlns:app="http://schemas.android.com/apk/res-auto"

     xmlns:android="http://schemas.android.com/apk/res/android">

     <group android:checkableBehavior="single">

         <item

             android:id="@+id/nav_call"

             android:icon="@drawable/nav_call"

             android:title="Call" />

         <item

             android:id="@+id/nav_friend"

             android:icon="@drawable/nav_friend"

             android:title="Friend" />

         <item

             android:id="@+id/nav_location"

             android:icon="@drawable/nav_location"

             android:title="Location" />

         <item

             android:id="@+id/nav_mail"

             android:icon="@drawable/nav_mail"

             android:title="Mail" />

         <item

             android:id="@+id/nav_task"

             android:icon="@drawable/nav_task"

             android:title="Task" />

     </group>

 </menu>

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

然后是头部布局：

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

     android:orientation="vertical"

     android:layout_width="match_parent"

     android:layout_height="180dp"

     android:padding="10dp"

     android:background="?attr/colorPrimary">

     <de.hdodenhof.circleimageview.CircleImageView

         android:id="@+id/icon_image"

         android:layout_width="70dp"

         android:layout_height="70dp"

         android:src="@drawable/nac_icon"

         android:layout_centerInParent="true"/>

     <TextView

         android:id="@+id/mail"

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_alignParentBottom="true"

         android:text="943217258@qq.com"

         android:textSize="14sp"

         android:textColor="#FFF"/>

     <TextView

         android:id="@+id/username"

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_above="@id/mail"

         android:text="一个名字"

         android:textSize="14sp"

         android:textColor="#FFF"/>

 </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;

         }

     });

巴特西

android ——滑动菜单

最新文章

热门文章