zoukankan      html  css  js  c++  java
  • android ——滑动菜单

    一、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="943217258@qq.com"
    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;
             }
         });
  • 相关阅读:
    Django基础
    MySQL(索引)
    MySQL(进阶部分)
    MySQL(Python+ORM)
    JavaScript的对象
    abc
    Let's Encrypt,免费好用的 HTTPS 证书
    Java调试那点事
    Memcache mutex 设计模式
    从 Nginx 默认不压缩 HTTP/1.0 说起
  • 原文地址:https://www.cnblogs.com/xxbbtt/p/7469627.html
Copyright © 2011-2022 走看看