首页 > 学院 > 开发设计 > 正文

第一行代码笔记 DrawerLayout 和NavigationView实现侧滑抽屉布局

2019-11-06 09:41:30
字体:
来源:转载
供稿:网友

实现效果图:

实现步骤:

第一步:先在gradle添加这两个

//   使用nevigationview    compile 'com.android.support:design:23.2.0'//    实现图片圆形    compile 'de.hdodenhof:circleimageview:2.1.0'

第二步

创建一个NavigationView头部的布局文件:在layout中new ->layout->nav_header布局如下

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="180dp">    <de.hdodenhof.circleimageview.CircleImageView        android:id="@+id/head"        android:layout_width="70dp"        android:layout_height="70dp"        android:layout_centerInParent="true"        android:src="@mipmap/a1" />    <TextView        android:id="@+id/username"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:text="你的名字" />    <TextView        android:id="@+id/mail"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_above="@+id/username"        android:text="14658@163.com" /></RelativeLayout>第三步

创建一个NavigationView的列表menu 先在res中新建一个menu文件夹 new->menu resurous file ->drawlayput_toobar.xml 示例如下

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">    <!--group表示一个组,checkableBehavior表示组中的菜单选项single单选-->    <group android:checkableBehavior="single">        <item            android:id="@+id/nav_call"            android:icon="@mipmap/ic_launcher"            android:title="电话" />        <item            android:id="@+id/nav_friend"            android:icon="@mipmap/a1"            android:title="朋友" />        <item            android:id="@+id/nav_laction"            android:icon="@mipmap/rn10"            android:title="位置" />        <item            android:id="@+id/nav_mail"            android:icon="@mipmap/rn12"            android:title="邮箱" />        <item            android:id="@+id/nav_task"            android:icon="@mipmap/rn09"            android:title="任务" />    </group></menu>第四步

创建一个activity

import android.os.Bundle;import android.support.design.widget.NavigationView;import android.support.v4.view.GravityCompat;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.ActionBar;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.view.MenuItem;import android.view.View;import android.widget.Toast;import com.lvyequeen.test.R;//滑动菜单,public class DrawerLayoutActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener, View.OnClickListener {    PRivate Toolbar toolbar;    private DrawerLayout drawerlayout;    private NavigationView nav;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_drawer_layout);        initView();    }    private void initView() {        toolbar = ((Toolbar) findViewById(R.id.draw_toolbar));        setSupportActionBar(toolbar);        drawerlayout = ((DrawerLayout) findViewById(R.id.activity_drawer_layout));//        给主界面的toolbar添加一个点击让抽屉出现的导航按钮//        先获取一个action的实例        ActionBar actionBar = getSupportActionBar();        if (null != actionBar) {//            让导航按钮显示出来            actionBar.setDisplayHomeAsUpEnabled(true);//            设置导航按钮的图标,如果不设置默认为一个返回箭头//            actionBar.setHomeAsUpIndicator(R.mipmap.rn12);        }//      navigition的每一列        nav = ((NavigationView) findViewById(R.id.nav));        nav.setCheckedItem(R.id.nav_call);        nav.setCheckedItem(R.id.nav_task);        nav.setCheckedItem(R.id.nav_friend);        nav.setCheckedItem(R.id.nav_laction);        nav.setCheckedItem(R.id.nav_mail);        nav.setNavigationItemSelectedListener(this);//        获取头部控件的实例        View headView = nav.getHeaderView(0);        headView.findViewById(R.id.head).setOnClickListener(this);        headView.findViewById(R.id.username).setOnClickListener(this);        headView.findViewById(R.id.mail).setOnClickListener(this);    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        switch (item.getItemId()) {//            toolbar最左边的按钮为HomeAsUp,他的id为android.R.id.home            case android.R.id.home://                这里让抽屉出现                drawerlayout.openDrawer(GravityCompat.START);                break;        }        return true;    }    @Override    public boolean onNavigationItemSelected(MenuItem item) {        switch (item.getItemId()) {            case R.id.nav_call:                Toast.makeText(this, "电话被点击了", Toast.LENGTH_SHORT).show();                break;            case R.id.nav_friend:                Toast.makeText(this, "朋友被点击了", Toast.LENGTH_SHORT).show();                break;            case R.id.nav_laction:                Toast.makeText(this, "定位被点击了", Toast.LENGTH_SHORT).show();                break;            case R.id.nav_mail:                Toast.makeText(this, "邮件被点击了", Toast.LENGTH_SHORT).show();                break;            case R.id.nav_task:                Toast.makeText(this, "任务被点击了", Toast.LENGTH_SHORT).show();                break;        }        return true;    }    @Override    public void onClick(View v) {        switch (v.getId()){            case R.id.head:                Toast.makeText(this, "头像被点击了", Toast.LENGTH_SHORT).show();                break;            case R.id.username:                Toast.makeText(this, "用户名被点击了", Toast.LENGTH_SHORT).show();                break;            case R.id.mail:                Toast.makeText(this, "邮箱名被点击了", Toast.LENGTH_SHORT).show();                break;        }    }}

布局文件为

<?xml version="1.0" encoding="utf-8"?><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/activity_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/draw_toolbar"            android:layout_width="match_parent"            android:layout_height="?attr/actionBarSize"            android:background="?attr/colorPrimary"            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"            app:theme="@style/Base.ThemeOverlay.AppCompat.ActionBar" />    </FrameLayout>    <!--这个为滑出的抽屉布局layout_gravity必须要指定,指定抽屉从那边滑出-->    <android.support.design.widget.NavigationView        android:id="@+id/nav"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_gravity="start"        app:headerLayout="@layout/nav_header"        app:menu="@menu/drawlayout_toolbar" /></android.support.v4.widget.DrawerLayout>


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表