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
- DrawerLayout 和NavigationView 实现抽屉式侧滑
- MaterialDesign之NavigationView和DrawerLayout实现侧滑菜单栏(抽屉)
- MaterialDesign之NavigationView和DrawerLayout实现侧滑菜单栏(抽屉)
- DrawerLayout和NavigationView轻松实现抽屉侧滑
- DrawerLayout和NavigationView轻松实现抽屉侧滑
- Android-NavigationView+DrawerLayout实现抽屉菜单
- NavigationView+DrawerLayout实现侧拉抽屉效果
- Android实现侧滑抽屉菜单(DrawerLayout+NavigationView+toolbar)
- MaterialDesign学习笔记1:DrawerLayout+NavigationView实现抽屉效果
- Material Design之DrawerLayout与NavigationView实现抽屉效果
- Kotlin实现侧滑抽屉菜单(DrawerLayout+NavigationView+Toolbar)
- NavigationView和DrawerLayout实现侧滑菜单栏
- 利用drawerlayout和NavigationView实现侧滑栏
- NavigationView和DrawerLayout
- 谷歌的导航抽屉NavigationView、DrawerLayout的去掉默认的图标颜色和选中颜色
- Android使用DrawerLayout实现抽屉式侧滑菜单
- DrawerLayout实现抽屉效果
- Material Design之NavigationView和DrawerLayout实现侧滑菜单栏
- HDU 5887 Herbs Gathering(01背包搜索)
- GearVRf使用说明
- POJ 1021 Fence 单调队列优化dp
- 内部线程
- HDU 5889 Barricade(最短路最小割)
- DrawerLayout 和NavigationView 实现抽屉式侧滑
- 也谈java三大特性
- POJ 分类很好很有层次感
- 前端复习--rotate和translate联用
- Java虚拟机学习之运行时数据区域
- poj-2115-C Looooops
- pomelo传递数组出现的问题
- RecyclerView的简单应用3:瀑布流
- 笔试题—字符串常见的算法题集锦