DrawerLayout 和NavigationView 实现抽屉式侧滑

来源:互联网 发布:开淘宝店描述怎么写 编辑:程序博客网 时间:2024/05/02 00:57

看到侧滑我想我们都可能觉得他很难实现,其实不然。那下面我们就看看我是这么完成的。
首先我们对侧滑这个界面做一个简单的分析,
侧滑我们看做是手机展示给用户的两个视图,在侧拉的过程中一个将另一覆盖。而每一视图又不同的展示着view 组件,并做监听。
有思路就好说了,那我们就来一步步实现吧。
首先在app build.gradle里添加

注意sdk版本 compile 'com.android.support:design:24.2.1'

使用 DrawerLayout 作为父布局,该布局至少包含两个view 。

这个属性设置滑出 layout_gravity=”left”,

<android.support.v4.widget.DrawerLayout        xmlns:android="http://schemas.android.com/apk/res/android"        xmlns:tools="http://schemas.android.com/tools"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:id="@+id/layout_drawerlayout"        tools:context="com.tool.nativeproject.MainActivity">        <TextView            android:id="@+id/tv"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:text="Hello World!" />        <android.support.design.widget.NavigationView            android:id="@+id/design_navigation_view"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_gravity="left"            android:fitsSystemWindows="true"            app:itemTextColor="#000000"            app:itemIconTint="#FFBE1EAB"            app:itemBackground="@mipmap/ic_launcher"            app:headerLayout="@layout/head_view"            app:menu="@menu/menu_drawer">        </android.support.design.widget.NavigationView>    </android.support.v4.widget.DrawerLayout>

因为是抽屉的效果,所以我们让他们的宽高都充满了父容器,前一个text view 在这里是底层,当慢慢拉出是有NavigationView 来覆盖。app:headerLayout=”@layout/head_view app:menu=”@menu/menu_drawer”>
分别是我们拉出来后看见的 head,和我们的 menu

接线来我们定义 NavigationView 里边的

head_view

<?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="match_parent">    <TextView        android:id="@+id/tv_textview"        android:layout_width="match_parent"        android:layout_height="100dp"        android:gravity="center"        android:text="head_view"/></RelativeLayout>

menu
在values 包下建

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">    <item        android:id="@+id/nav_order"        android:checked="true"        android:icon="@mipmap/ic_launcher"        android:title="标题" />    <item        android:id="@+id/nav_wallet"        android:checked="true"        android:icon="@mipmap/ic_launcher"        android:title="标题" />    <item        android:id="@+id/nav_message"        android:checked="true"        android:icon="@mipmap/ic_launcher"        android:title="标题" />    <item        android:id="@+id/nav_setting"        android:checked="true"        android:icon="@mipmap/ic_launcher"        android:title="标题" /></menu>

下边看我们完整的代码。
activity

package com.example.fristproject.twenty;import android.os.Bundle;import android.support.annotation.NonNull;import android.support.annotation.Nullable;import android.support.design.widget.NavigationView;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.AppCompatActivity;import android.view.MenuItem;import android.view.View;import android.widget.TextView;import android.widget.Toast;import com.example.fristproject.R;/** * Created by Administrator on 2016/9/20. */public class SideslipActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {    DrawerLayout mDrawerLayout;    NavigationView mNavigationView;   TextView tv;    View headView;    @Override    protected void onCreate( Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_sideslip);       tv = (TextView) findViewById(R.id.tv);        mDrawerLayout = (DrawerLayout) findViewById(R.id.layout_drawerlayout);        mNavigationView = (NavigationView) findViewById(R.id.design_navigation_view);        mNavigationView.setNavigationItemSelectedListener(this);        //获取头部View控件        headView = mNavigationView.getHeaderView(0);        final TextView textView = (TextView) headView.findViewById(R.id.tv_textview);        //头部View进行事件的操作        textView.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Toast.makeText(SideslipActivity.this, textView.getText().toString(), Toast.LENGTH_LONG).show();            }        });    }    @Override    public boolean onNavigationItemSelected( MenuItem item) {        switch (item.getItemId()) {            case R.id.nav_order:                mDrawerLayout.closeDrawers();                tv.setText("nav_order");                break;            case R.id.nav_wallet:                mDrawerLayout.closeDrawers();                tv.setText("nav_wallet");                break;            case R.id.nav_message:                tv.setText("nav_message");                mDrawerLayout.closeDrawers();                break;            case R.id.nav_setting:                tv.setText("nav_setting");                mDrawerLayout.closeDrawers();                break;        }        return false;    }}

activity_sideslip.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.v4.widget.DrawerLayout        xmlns:android="http://schemas.android.com/apk/res/android"        xmlns:tools="http://schemas.android.com/tools"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:id="@+id/layout_drawerlayout"        tools:context="com.tool.nativeproject.MainActivity">        <TextView            android:id="@+id/tv"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:text="Hello World!" />        <android.support.design.widget.NavigationView            android:id="@+id/design_navigation_view"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_gravity="left"            android:fitsSystemWindows="true"            app:headerLayout="@layout/head_view"            app:itemTextColor="#000000"            app:itemIconTint="#FFBE1EAB"            app:itemBackground="@mipmap/ic_launcher"            app:menu="@menu/menu_drawer">        </android.support.design.widget.NavigationView>    </android.support.v4.widget.DrawerLayout></RelativeLayout>

当然这样实现由一定的局限mune 里边的设置有我们自定义属性来决定。 这时候就不能完成我们的需要,我们考虑把 NavigationView 这个控件换成list view 用他的多布局来实现,这样就灵活了很多。具体看
http://blog.csdn.net/lmj623565791/article/details/46405409

0 0
原创粉丝点击