Android中MaterialDesign使用 (二)Navi

作者: 飞渡浮舟 | 来源:发表于2016-10-11 15:26 被阅读398次

MaterialDesign使用 (二) Navigation的使用#

使用Navigation+Drawerlayout+Toolbar实现简单侧滑菜单

2016/9/8 星期四 19:59:10

先看效果图:

使用Tablayout,首先需要在项目中加入Design包


dependencies {

compile 'com.android.support:design:24.1.1'

}

因为要用到Toolbar所以首先把主题改为没有ActionBar的主题

我这里是使用的是这个主题:

在activity_main.xml布局文件中


xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:orientation="vertical"

tools:context="zhengliang.com.navigationview.MainActivity">

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?actionBarSize"

android:background="@color/colorPrimary"

app:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar">

android:id="@+id/drawer_layout"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Hello World!" />

android:id="@+id/navigation_view"

android:layout_width="240dp"

android:layout_height="match_parent"

app:menu="@menu/navigation"

app:itemIconTint="@color/colorAccent"

android:layout_gravity="start"

app:headerLayout="@layout/header">

布局比较简单,因为这里主要是讲NavigationView的使用,所以后面只会讲到NavigationView的一些常用属性,其它不懂的地方自行百度.

从上面的效果图可以看出,侧滑部分由两部分组成: 上面的头像部分和下面的导航菜单部分

这两个部分分别对应一个Lyout布局文件, 和一个菜单menu文件

头部文件 header.xml




android:layout_width="match_parent"

android:layout_height="160dp"

android:orientation="vertical"

android:gravity="center"

android:background="@drawable/header_bg">

android:layout_width="72dp"

android:layout_height="72dp"

android:src="@mipmap/header"/>

android:layout_marginTop="16dp"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textSize="18dp"

android:textColor="#FFF"

android:text="印象丶亮仔"/>

记得在res/下创建一个menu目录然后在menu/navigation.xml




android:id="@+id/group1"

android:checkableBehavior="single">

android:id="@+id/single_1"

android:icon="@mipmap/xiaoxi"

android:title="我的消息" />

android:id="@+id/single_2"

android:icon="@mipmap/shangcheng"

android:title="积分商城" />

android:id="@+id/single_3"

android:icon="@mipmap/huiyuan"

android:title="会员中心" />

android:id="@+id/single_4"

android:icon="@mipmap/zaixian"

android:title="在线听歌" />

android:id="@+id/item_1"

android:icon="@mipmap/shiqu"

android:title="听歌识曲" />

android:id="@+id/item_2"

android:icon="@mipmap/pifu"

android:title="主题皮肤" />

android:id="@+id/item_3"

android:icon="@mipmap/yejian"

android:title="夜间模式" />

android:id="@+id/item_4"

android:icon="@mipmap/dingshi"

android:title="定时停止播放" />

android:id="@+id/item_5"

android:icon="@mipmap/naozhong"

android:title="音乐闹钟" />

android:id="@+id/item_6"

android:icon="@mipmap/yun"

android:title="我的音乐云盘" />

android:id="@+id/item_7"

android:icon="@mipmap/shiqu"

android:title="听歌识曲" />

android:id="@+id/item_8"

android:icon="@mipmap/pifu"

android:title="主题皮肤" />

android:id="@+id/item_9"

android:icon="@mipmap/yejian"

android:title="夜间模式" />

android:id="@+id/item_10"

android:icon="@mipmap/dingshi"

android:title="定时停止播放" />

android:id="@+id/item_11"

android:icon="@mipmap/naozhong"

android:title="音乐闹钟" />

android:id="@+id/item_12"

android:icon="@mipmap/yun"

android:title="我的音乐云盘" />

这两个布局分别在NavigationView设置对应的属性时,将这两个布局加入进去:


app:menu="@menu/navigation"

app:headerLayout="@layout/header"

这里讲一下menu中的布局,navigation中的菜单可以用`` 来进行分组,分组之间会有一条分割线。###

当的属性为:

android:checkableBehavior="single"

时,这个时候的菜单是单选菜单,并且会出现选中的效果

如图:

当需要嵌套多个子菜单时,可以在item中嵌套menu 比如上面的布局文件中的代码最后的效果

如图:

当子菜单过多时,不必担心超出屏幕,因为当菜单超出屏幕后会自动出现滑动效果

下面直接看MainActivity.java中的代码:


public class MainActivity extends AppCompatActivity{

private android.support.v7.widget.Toolbar toolbar;

private android.support.design.widget.NavigationView navigationview;

private android.support.v4.widget.DrawerLayout drawerlayout;

/*创建一个Drawerlayout和Toolbar联动的开关*/

private ActionBarDrawerToggle toggle;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

/*初始化View*/

initViews();

/*隐藏滑动条*/

hideScrollBar();

/*设置ActionBar*/

setActionBar();

/*设置Drawerlayout开关*/

setDrawerToggle();

/*设置监听器*/

setListener();

}

/*初始化View*/

private void initViews() {

this.drawerlayout = (DrawerLayout) findViewById(R.id.drawer_layout);

this.navigationview = (NavigationView) findViewById(R.id.navigation_view);

this.toolbar = (Toolbar) findViewById(R.id.toolbar);

}

/*去掉navigation中的滑动条*/

private void hideScrollBar() {

navigationview.getChildAt(0).setVerticalScrollBarEnabled(false);

}

/*设置ActionBar*/

private void setActionBar() {

setSupportActionBar(toolbar);

/*显示Home图标*/

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

}

/*设置Drawerlayout的开关,并且和Home图标联动*/

private void setDrawerToggle() {

toggle = new ActionBarDrawerToggle(this, drawerlayout, toolbar, 0, 0);

drawerlayout.addDrawerListener(toggle);

/*同步drawerlayout的状态*/

toggle.syncState();

}

/*设置监听器*/

private void setListener() {

navigationview.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {

@Override

public boolean onNavigationItemSelected(MenuItem item) {

switch (item.getItemId()) {

case R.id.item_1:

break;

case R.id.item_2:

break;

case R.id.item_3:

break;

case R.id.item_4:

finish();

break;

}

drawerlayout.closeDrawer(GravityCompat.START);

return true;

}

});

}

}

代码中的注释写的很明确,就不做过多的解释了。不过要注意一点:在给drawerlayout添加 toggle 开关监听时一定要先设置ActionBar,也就是说###

drawerlayout.addDrawerListener(toggle);

一定要写在

setSupportActionBar(toolbar);

前面,不然当点击Toolbar上的Home图标不会产生相应的打开和关闭侧滑事件。

到了这里就用Navigation实现了一个简单的侧滑菜单了。不过要让侧滑菜单更加美观还需要设置几个属性,让我们回到上面的activity_main.xml中

还是把具体代码拿下来吧:


android:id="@+id/navigation_view"

android:layout_width="240dp"

android:layout_height="match_parent"

android:layout_gravity="start"

app:headerLayout="@layout/header"

app:itemIconTint="@color/colorAccent"

app:menu="@menu/navigation"/>

设置头部的布局效果: 当我们需要像效果图那样设置顶部的布局时就可以用该参数


app:headerLayout="@layout/header"

加载菜单项


app:menu="@menu/navigation"

对图标进行着色(这个属性很关键,因为当在菜单中加入图标时,图标的颜色都会变成着色的样式而失去原本的样式,着色样式可以是一个Drawable选择器)


app:itemIconTint="@color/colorAccent"

如果要去掉布局中菜单过多造成的滑动条,不能直接使用一下代码来实现


android:scrollbars="none"

因为这句代码是去掉NavigationView中的滑动条,而这个时候出现的滑动条是属于menu这个布局中的

要去掉滑动条可以使用如下代码:


navigationview.getChildAt(0).setVerticalScrollBarEnabled(false);

好了到此结束,更多细节的东西需要慢慢研究!

简书上xml代码显示有点问题，请移步CSDN##

原文地址:http://blog.csdn.net/qq_23179075/article/details/52475291

网友评论

巴图鲁:膜拜
睿丶清:这代码格式根标签都么有？？
飞渡浮舟: @豆浆爱上油条用markdownpad写简书时，有时会出现先小bug，不好意思，结尾出有csdn的地址

本文标题：Android中MaterialDesign使用 (二)Navi

本文链接：https://www.haomeiwen.com/subject/eqrbyttx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

Android中MaterialDesign使用 (二)Navi

MaterialDesign使用 (二) Navigation的使用#

使用Navigation+Drawerlayout+Toolbar实现简单侧滑菜单

先看效果图:

使用Tablayout,首先需要在项目中加入Design包

因为要用到Toolbar所以首先把主题改为没有ActionBar的主题

我这里是使用的是这个主题:

在activity_main.xml布局文件中

布局比较简单,因为这里主要是讲NavigationView的使用,所以后面只会讲到NavigationView的一些常用属性,其它不懂的地方自行百度.

从上面的效果图可以看出,侧滑部分由两部分组成: 上面的头像部分和下面的导航菜单部分

这两个部分分别对应一个Lyout布局文件, 和一个菜单menu文件

头部文件 header.xml

记得在res/下创建一个menu目录然后在menu/navigation.xml

这两个布局分别在NavigationView设置对应的属性时,将这两个布局加入进去:

这里讲一下menu中的布局,navigation中的菜单可以用`` 来进行分组,分组之间会有一条分割线。###

当的属性为:

时,这个时候的菜单是单选菜单,并且会出现选中的效果

如图:

当需要嵌套多个子菜单时,可以在item中嵌套menu 比如上面的布局文件中的代码最后的效果

如图:

当子菜单过多时,不必担心超出屏幕,因为当菜单超出屏幕后会自动出现滑动效果

下面直接看MainActivity.java中的代码:

代码中的注释写的很明确,就不做过多的解释了。不过要注意一点:在给drawerlayout添加 toggle 开关监听时一定要先设置ActionBar,也就是说###

一定要写在

前面,不然当点击Toolbar上的Home图标不会产生相应的打开和关闭侧滑事件。

到了这里就用Navigation实现了一个简单的侧滑菜单了。不过要让侧滑菜单更加美观还需要设置几个属性,让我们回到上面的activity_main.xml中

还是把具体代码拿下来吧:

好了到此结束,更多细节的东西需要慢慢研究!

简书上xml代码显示有点问题，请移步CSDN##

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

AndroidUI

Android知识

Android技术知识

Android学习

Android中MaterialDesign使用 (二)Navi

MaterialDesign使用 (二) Navigation的使用#

使用Navigation+Drawerlayout+Toolbar实现简单侧滑菜单

先看效果图:

使用Tablayout,首先需要在项目中加入Design包

因为要用到Toolbar所以首先把主题改为没有ActionBar的主题

我这里是使用的是这个主题:

在activity_main.xml布局文件中

布局比较简单,因为这里主要是讲NavigationView的使用,所以后面只会讲到NavigationView的一些常用属性,其它不懂的地方自行百度.

从上面的效果图可以看出,侧滑部分由两部分组成: 上面的头像部分和下面的导航菜单部分

这两个部分分别对应一个Lyout布局文件, 和一个菜单menu文件

头部文件 header.xml

记得在res/下创建一个menu目录然后在menu/navigation.xml

这两个布局分别在NavigationView设置对应的属性时,将这两个布局加入进去:

这里讲一下menu中的布局,navigation中的菜单可以用`` 来进行分组,分组之间会有一条分割线。###

当的属性为:

时,这个时候的菜单是单选菜单,并且会出现选中的效果

如图:

当需要嵌套多个子菜单时,可以在item中嵌套menu 比如上面的布局文件中的代码 最后的效果

如图:

当子菜单过多时,不必担心超出屏幕,因为当菜单超出屏幕后会自动出现滑动效果

下面直接看MainActivity.java中的代码:

代码中的注释写的很明确,就不做过多的解释了。 不过要注意一点:在给drawerlayout添加 toggle 开关监听时一定要先设置ActionBar,也就是说###

一定要写在

前面,不然当点击Toolbar上的Home图标不会产生相应的打开和关闭侧滑事件。

到了这里就用Navigation实现了一个简单的侧滑菜单了。不过要让侧滑菜单更加美观还需要设置几个属性,让我们回到上面的activity_main.xml中

还是把具体代码拿下来吧:

好了到此结束,更多细节的东西需要慢慢研究!

简书上xml代码显示有点问题 ，请移步CSDN##

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

AndroidUI

Android知识

Android技术知识

Android学习

当需要嵌套多个子菜单时,可以在item中嵌套menu 比如上面的布局文件中的代码最后的效果

代码中的注释写的很明确,就不做过多的解释了。不过要注意一点:在给drawerlayout添加 toggle 开关监听时一定要先设置ActionBar,也就是说###

简书上xml代码显示有点问题，请移步CSDN##