700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > MaterialDesign之NavigationView和DrawerLayout实现侧滑菜单栏

MaterialDesign之NavigationView和DrawerLayout实现侧滑菜单栏

时间:2020-10-12 08:09:23

相关推荐

MaterialDesign之NavigationView和DrawerLayout实现侧滑菜单栏

本文将介绍使用Google最新推出规范式设计中的NavigationView和DrawerLayout结合实现侧滑菜单栏效果,NavigationView是android-support-design包下的一个控件,该包下还有AppBarLayout、CoordinatorLayout、FloatingActionButton、SnackBar、TabLayout、TextInputLayout等控件,也是Google在Android5.x推荐规范式使用的控件。本系列将逐一介绍每个控件的使用。。。

好了,先来看看本文最终的效果图吧!

它把标题栏也遮住了,正是符号Google的材料设计思想。。。

现在我们分几步说说怎么实现这个效果吧:

一、首先就需要添加包依赖,废话就不说了,上图

二、主布局:activity_main.xml

<android.support.v4.widget.DrawerLayout xmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:id="@+id/drawer_layout"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"tools:context=".MainActivity"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:background="#30469b"/><!--内容显示布局--><FrameLayoutandroid:id="@+id/frame_content"android:layout_width="match_parent"android:layout_height="match_parent"/></LinearLayout><android.support.design.widget.NavigationViewandroid:id="@+id/navigation_view"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_gravity="left"app:headerLayout="@layout/navigation_header"app:menu="@menu/drawer" /></android.support.v4.widget.DrawerLayout>

其中在NavigationView布局中,需要给NavigationView设置app:headerLayout和app:menu,那是什么意思呢?

headerLayout就是给导航栏增加一个头部Layout。

menu就是对应菜单项的选择条目。

三、分别写headerLayout和menu对应的布局navigation_header.xml和菜单drawer.xml文件

navigation_header.xml

view sourceprint?01.<?xml version="1.0"encoding="utf-8"?>02.<RelativeLayout xmlns:android="/apk/res/android"03.android:layout_width="match_parent"04.android:layout_height="200dp"05.android:background="#30469b">06.<TextView07.android:id="@+id/header_tv"08.android:layout_width="wrap_content"09.android:layout_height="wrap_content"10.android:layout_centerInParent="true"11.android:text="HeaderLayout"12.android:textColor="#ffffff"13.android:textSize="25sp"/>14.</RelativeLayout>drawer.xml view sourceprint?01.<?xml version="1.0"encoding="utf-8"?>02.<menu xmlns:android="/apk/res/android">03.<group android:checkableBehavior="single">04.<item05.android:id="@+id/item_one"06.android:icon="@mipmap/icon"07.android:title="我的动态"></item>08.<item09.android:id="@+id/item_two"10.android:icon="@mipmap/icon"11.android:title="我的留言"></item>12.<item13.android:id="@+id/item_three"14.android:icon="@mipmap/icon"15.android:title="附近的人"></item>16.</group>17.</menu>

四、这时候开始写代码了,也很简单:

MainActivity:

import android.graphics.Color;import android.os.Bundle;import android.support.design.widget.NavigationView;import android.support.v4.app.ActionBarDrawerToggle;import android.support.v4.view.GravityCompat;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.ActionBar;import android.support.v7.app.ActionBarActivity;import android.support.v7.widget.Toolbar;import android.view.MenuItem;public class MainActivity extends ActionBarActivity {private DrawerLayout mDrawerLayout =null;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//设置ToolBarfinal Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);// mToolbar.setTitleTextColor(Color.WHITE);setSupportActionBar(mToolbar);//这里是动态的在action bar上添加图标final ActionBar ab = getSupportActionBar();ab.setHomeAsUpIndicator(R.drawable.ic_menu);ab.setDisplayHomeAsUpEnabled(true);//设置抽屉DrawerLayoutmDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);// ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.ic_launcher,//R.string.drawer_open, R.string.drawer_close);// mDrawerToggle.syncState();//初始化状态// mDrawerLayout.setDrawerListener(mDrawerToggle);//设置导航栏NavigationView的点击事件NavigationView mNavigationView = (NavigationView) findViewById(R.id.navigation_view);mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {@Overridepublic boolean onNavigationItemSelected(MenuItem menuItem) {switch (menuItem.getItemId()) {case R.id.item_one:getSupportFragmentManager().beginTransaction().replace(R.id.frame_content, new FragmentOne()).commit();mToolbar.setTitle("我的动态");break;case R.id.item_two:getSupportFragmentManager().beginTransaction().replace(R.id.frame_content, new FragmentTwo()).commit();mToolbar.setTitle("我的留言");break;case R.id.item_three:getSupportFragmentManager().beginTransaction().replace(R.id.frame_content, new FragmentThree()).commit();mToolbar.setTitle("附近的人");break;}menuItem.setChecked(true);//点击了把它设为选中状态mDrawerLayout.closeDrawers();//关闭抽屉return true;}});}@Overridepublic boolean onOptionsItemSelected(MenuItem item) {if (item.getItemId() == android.R.id.home) {mDrawerLayout.openDrawer(GravityCompat.START);return true;}return super.onOptionsItemSelected(item);}}

小结 : 这里的DrawerLayout的布局是很重要的它的层次一次是 标题栏 主屏幕内容(fragment) 侧边栏内容,层次比较清晰,要在哪里填充数据就在相应的地方写代码.这里写的参考的zhanghongyang的博客,补充了三个fragment.

源码地址:/detail/qq_26296197/9494419

在这也可以参考zhanghongyang的博客 /lmj623565791/article/details/46405409,写的也很好。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。