转载 请明确说明 MingsangAndroid

本文介绍了Design Support Library的引入 拥抱Android Design Support Library新变化(导航视图、悬浮ActionBar..).今天则重点介绍当中三个控件:NavigationView和 FloatingActionBar以及 SnackBar的基本使用方法。

本文代码地址:DesignSupportDemo

为了便于各位练习,这是代码中会用到的全部图片素材 图片素材.zip

作为三者的综合练习,我们终于要实现的效果:

1。NavigationView

在未引入Design Support Library曾经,想想我们要实现上面的导航效果。须要怎么做?

我们须要在DrawerLayout里面通过ListView来设置导航条目。然后通过设置ListView的ItemOnclickListener设置相应的点击事件;事实上NavigationView的源代码也是通过这样的方式实现的,唯一复杂的地方就是ListView里的Item非常多时候视图并不一样。

但我们今天的主角是NavigationView,所以就不展开讲这样的实现方法了,对通过ListView实现有兴趣的能够參考以下两篇文章:

Android 自己实现 NavigationView [Design Support Library(1)]

Android Sliding Menu using Navigation Drawer

官方引入的NavigationView有什么优点

它主要是将这部分的布局简化了,通过NavigationView中的app:headerLayoutapp:menu属性将側换导航中的头部和菜单布局分离出来(如图):

所以它的原理非常easy,我们首先须要一个主布局,然后须要为headerLayout以及menu布局,然后在代码中通过NavigationView的setNavigationItemSelectedListener()设置点击各个menu相应的响应事件。

理解了上面所说,我们来完毕上述效果:

1.引入Design Support Library

怎样下载更新Design Support Library上篇文章中讲过。不再赘述:拥抱Android Design Support Library新变化(导航视图、悬浮ActionBar..)

build.gradle中加入:

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

2.完毕布局res/layout/activity_main.xml

<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/drawer_layout"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true"> <!-- 主界面-->
<RelativeLayout
android:id="@+id/parent_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"> <ImageView
android:id="@+id/image"
android:src="@mipmap/bg_default"
android:layout_centerInParent="true"
android:padding="5dp"
android:layout_width="match_parent"
android:layout_height="match_parent" /> </RelativeLayout> <!-- 側滑导航-->
<android.support.design.widget.NavigationView
android:id="@+id/navigation"
android:layout_gravity="start"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/drawer_menu"/> </android.support.v4.widget.DrawerLayout>

headerLayout布局res/layout/drawer_header.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="@mipmap/bg_header"
android:paddingLeft="20dp"
android:paddingBottom="15dp"
android:layout_width="match_parent"
android:layout_height="180dp">
<ImageView
android:id="@+id/photo"
android:src="@mipmap/photo"
android:layout_above="@+id/desc"
android:layout_marginBottom="20dp"
android:layout_width="80dp"
android:layout_height="80dp" />
<TextView
android:id="@+id/desc"
android:layout_alignParentBottom="true"
android:text="欢迎关注个人博客 明桑Android"
android:textStyle="bold"
android:textColor="#ffffff"
android:textSize="20sp"
android:layout_marginBottom="2dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" /> </RelativeLayout>

menu的布局:

res/menu/drawer_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group>
<item android:id="@+id/navigation_item1"
android:checkable="true"
android:title="热门图片"
android:icon="@mipmap/icon_hot"/>
<item android:id="@+id/navigation_item2"
android:checkable="true"
android:title="联系人"
android:icon="@mipmap/icon_people"/>
<item android:id="@+id/navigation_item3"
android:checkable="true"
android:title="图库"
android:icon="@mipmap/icon_photos"/>
</group>
<item android:id="@+id/navigation_sub"
android:title="新增功能">
<menu>
<item android:id="@+id/navigation_sub_item1"
android:checkable="true"
android:title="地图导航"
android:icon="@mipmap/icon_local"/>
<item android:id="@+id/navigation_sub_item2"
android:checkable="true"
android:title="近期热门"
android:icon="@mipmap/icon_event"/>
<item android:id="@+id/navigation_sub_item3"
android:checkable="true"
android:title="社交圈子"
android:icon="@mipmap/icon_communities"/>
</menu>
</item>
</menu>

3.设置Theme:编辑res/values/styles.xml

<resources>

    <!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style> <style name="DemoTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#38A4DE</item>
<item name="colorPrimaryDark">#1B88CA</item>
<item name="colorAccent">#1B88CA</item>
</style>
</resources>

至于colorPrimary,colorPrimaryDark。以及colorAccent属性各代表什么含义,我偏不说,大家最好还是给每一个设置不同的颜色值,然后看看有什么变化。你就明确它们所代表的意义了,O(∩_∩)O~

之后在Manifest.xml中将当前主题设置为DemoTheme

<application ...
android:theme="@style/DemoTheme" >

4.为NavigationView加入事件监听:如今我们已经完毕上面的布局效果了,然后须要在MainActivity中为NavigationView加入响应事件:

MainActivity.java

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private DrawerLayout drawerLayout;
private ImageView imageView;
private NavigationView navigationView; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); drawerLayout= (DrawerLayout) findViewById(R.id.drawer_layout);
imageView= (ImageView) findViewById(R.id.image);
navigationView= (NavigationView) findViewById(R.id.navigation); //navigationView选中Item处理,为了代码整齐些,就放在一个函数里了
handNavigationView(); } private void handNavigationView() {
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { //用于辨别此前是否已有选中条目
MenuItem preMenuItem;
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) { //首先将选中条目变为选中状态 即checked为true,后关闭Drawer,曾经选中的Item须要变为未选中状态
if(preMenuItem!=null)
preMenuItem.setChecked(false);
menuItem.setChecked(true);
drawerLayout.closeDrawers();
preMenuItem=menuItem; //不同item相应不同图片
switch (menuItem.getItemId()){
case R.id.navigation_item1:
imageView.setImageResource(R.mipmap.bg_one);
break;
case R.id.navigation_item2:
imageView.setImageResource(R.mipmap.bg_two);
break;
case R.id.navigation_item3:
imageView.setImageResource(R.mipmap.bg_three);
break;
case R.id.navigation_sub_item1:
imageView.setImageResource(R.mipmap.bg_four);
break;
case R.id.navigation_sub_item2:
imageView.setImageResource(R.mipmap.bg_five);
break;
case R.id.navigation_sub_item3:
imageView.setImageResource(R.mipmap.bg_default);
break;
}
return true;
}
});
}
}

完毕效果

2,FloatingActionBar(FAB)

FlaotingActionBar继承自ImageView。除了继承自ImageView的属性。它自身还有些跟动画、阴影相关的属性;重点熟悉下以下几个属性:

  fabSize="normal|mini" //FloatingActionBar的两种大小

   rippleColor="" //按下状态的波纹颜色

比方设置成白色:

elevation="6dp"
pressedTranslationZ="12dp"
backgroundTint="#ffffff"

evelation用来显示阴影,pressedTranslationZ用来控制按下状态阴影的变化;backgroundTint用来填充背景颜色;

borderWidth="0dp"

这个属性非常关键,由于假设你不设置这个属性等于0dp,默认情况下borderWidth会将阴影遮挡住,你就看不到阴影了,看起来FloatingActionBar就不Floating了,而像贴上去的。

like this

关于Floating Action Menuandroid-floating-action-button这是一个非常流行的第三方库,实现的是弹出效果,有兴趣的能够研究下!

我们这次简单模仿下,只是仅仅是通过点击下方FAB显示其他两个FAB。没有考虑弹出动画等效果。

FAB的事件监听非常easy,通过OnClickListener()就可以。

以下是详细实现步骤。

1.在主界面布局中res/layout/activity.xml中加入FloatingActionBar:总共三个FAB,刚開始我们让其他两个FAB不显示(通过Visibility=”gone”

<android.support.v4.widget.DrawerLayout
...> <!-- 主界面-->
<RelativeLayout
...> <ImageView
... /> <!-- FloatingActonBar-->
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_add_white_24dp"
app:fabSize="normal"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="70dp"
android:layout_marginRight="20dp"
app:rippleColor="#79BD4C"
app:elevation="6dp"
app:borderWidth="0dp"
app:pressedTranslationZ="12dp"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_local"
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_room_white_24dp"
app:fabSize="normal"
android:layout_above="@+id/fab"
android:layout_marginBottom="20dp"
android:layout_alignParentRight="true"
android:layout_marginRight="20dp"
app:backgroundTint="#79BD4C"
app:rippleColor="#ffffff"
app:elevation="6dp"
app:borderWidth="0dp"
app:pressedTranslationZ="12dp"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_favorite"
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_favorite_white_24dp"
app:fabSize="normal"
android:layout_above="@+id/fab_local"
android:layout_marginBottom="20dp"
android:layout_alignParentRight="true"
android:layout_marginRight="20dp"
app:backgroundTint="#FF4081"
app:rippleColor="#ffffff"
app:elevation="6dp"
app:borderWidth="0dp"
app:pressedTranslationZ="12dp"/> </RelativeLayout> <!-- 側滑导航-->
<android.support.design.widget.NavigationView
.../> </android.support.v4.widget.DrawerLayout>

2.完毕MainActivity部分:

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
...
private FloatingActionButton fab,fabLocal,fabFavorite;
//标识FloatingActionBar的打开状态
private int FAB_STATE=1; @Override
protected void onCreate(Bundle savedInstanceState) {
.... fab= (FloatingActionButton) findViewById(R.id.fab);
fabLocal= (FloatingActionButton) findViewById(R.id.fab_local);
fabFavorite= (FloatingActionButton) findViewById(R.id.fab_favorite); fab.setOnClickListener(this);
fabLocal.setOnClickListener(this);
fabFavorite.setOnClickListener(this); } /**
* Called when a view has been clicked.
*
* @param v The view that was clicked.
*/
@Override
public void onClick(View v) {
switch(v.getId()){ // 点击fab弹出上面两个FAB,通过FAB_STATE推断当前fab的打开状态
case R.id.fab:
//假设没有打开。则弹出
if(FAB_STATE==1){
fab.setImageResource(R.mipmap.ic_clear_white_24dp);
fabLocal.setVisibility(View.VISIBLE);
fabFavorite.setVisibility(View.VISIBLE);
FAB_STATE=0;
break;
}
//已经在打开状态,则关闭
if(FAB_STATE==0){
fab.setImageResource(R.mipmap.ic_add_white_24dp);
fabLocal.setVisibility(View.GONE);
fabFavorite.setVisibility(View.GONE);
FAB_STATE=1;
break;
}
break;
case R.id.fab_local:
//弹出SnackBar。 break;
case R.id.fab_favorite: break;
}
} }

实现效果

3,SnackBar

SnackBar的使用非常easy,仅仅只是比Toast多了个Action监听,能够在未到消失时间之前通过用户点击而撤销。假设你对Toast的使用也不熟悉能够看看我曾经写的这篇文章:

Android消息提示:AlertDialog、Toast、Notification的使用

//Snackbarmake(View view, CharSequence text, int duration)
第一个參数代表父布局,第二个代表显示的文本消息,第三个參数代表显示时长
//Snackbar.setAction(CharSequence text, View.OnClickListener listener)
第一个參数代表Action显示的文本,第二个參数代表动作监听
//能够通过setActionTextColor()设置Action文本颜色。假设不设置,默认颜色跟当前主题有关 Snackbar.make(parentLayout,"你点击了FAB_LOCAL",Snackbar.LENGTH_LONG)
.setAction("换个美女", new View.OnClickListener() {
@Override
public void onClick(View v) {
//这里的单击事件代表点击消除Action后的响应事件,比方换掉背景图片
imageView.setImageResource(R.mipmap.bg_six);
}
})
.show();

显示效果:

4,完毕我们的练习

综上我们已经掌握了NavigationViewFloatingActionBar Snakcbar的基本使用方法,能够完毕我们终于的效果了:

MainActivity.java完整代码:

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private DrawerLayout drawerLayout;
private RelativeLayout parentLayout;
private FloatingActionButton fab,fabLocal,fabFavorite;
private ImageView imageView;
private NavigationView navigationView; //标识FloatingActionBar的打开状态
private int FAB_STATE=1; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); drawerLayout= (DrawerLayout) findViewById(R.id.drawer_layout);
parentLayout= (RelativeLayout) findViewById(R.id.parent_layout);
imageView= (ImageView) findViewById(R.id.image);
fab= (FloatingActionButton) findViewById(R.id.fab);
fabLocal= (FloatingActionButton) findViewById(R.id.fab_local);
fabFavorite= (FloatingActionButton) findViewById(R.id.fab_favorite);
navigationView= (NavigationView) findViewById(R.id.navigation); //navigationView选中Item处理,为了代码整齐些,就放在一个函数里了
handNavigationView(); fab.setOnClickListener(this);
fabLocal.setOnClickListener(this);
fabFavorite.setOnClickListener(this); } private void handNavigationView() {
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { //用于辨别此前是否已有选中条目
MenuItem preMenuItem;
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) { //首先将选中条目变为选中状态 即checked为true,后关闭Drawer,曾经选中的Item须要变为未选中状态
if(preMenuItem!=null)
preMenuItem.setChecked(false);
menuItem.setChecked(true);
drawerLayout.closeDrawers();
preMenuItem=menuItem; //不同item相应不同图片
switch (menuItem.getItemId()){
case R.id.navigation_item1:
imageView.setImageResource(R.mipmap.bg_one);
break;
case R.id.navigation_item2:
imageView.setImageResource(R.mipmap.bg_two);
break;
case R.id.navigation_item3:
imageView.setImageResource(R.mipmap.bg_three);
break;
case R.id.navigation_sub_item1:
imageView.setImageResource(R.mipmap.bg_four);
break;
case R.id.navigation_sub_item2:
imageView.setImageResource(R.mipmap.bg_five);
break;
case R.id.navigation_sub_item3:
imageView.setImageResource(R.mipmap.bg_default);
break;
}
return true;
}
});
} /**
* Called when a view has been clicked.
*
* @param v The view that was clicked.
*/
@Override
public void onClick(View v) {
switch(v.getId()){ // 点击fab弹出上面两个FAB,通过FAB_STATE推断当前fab的打开状态
case R.id.fab:
//假设没有打开,则弹出
if(FAB_STATE==1){
fab.setImageResource(R.mipmap.ic_clear_white_24dp);
fabLocal.setVisibility(View.VISIBLE);
fabFavorite.setVisibility(View.VISIBLE);
FAB_STATE=0;
break;
}
//已经在打开状态,则关闭
if(FAB_STATE==0){
fab.setImageResource(R.mipmap.ic_add_white_24dp);
fabLocal.setVisibility(View.GONE);
fabFavorite.setVisibility(View.GONE);
FAB_STATE=1;
break;
}
break;
case R.id.fab_local:
//弹出SnackBar,仅仅显示文字消息的SnackBar //注意第一个參数,须要一个合适的父视图
Snackbar.make(parentLayout,"你点击了FAB_LOCAL",Snackbar.LENGTH_LONG)
.setAction("换个美女", new View.OnClickListener() {
@Override
public void onClick(View v) {
//这里的单击事件代表点击消除按钮后的响应事件。比方换掉背景图片
imageView.setImageResource(R.mipmap.bg_six);
}
})
.show();
break;
case R.id.fab_favorite:
//设置字体颜色
Snackbar.make(parentLayout,"你点击了FAB_FAVORITE",Snackbar.LENGTH_LONG)
.setAction("Undo", new View.OnClickListener() {
@Override
public void onClick(View v) {
//
}
}).setActionTextColor(R.color.action_text_color)
.show();
break;
}
} @Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main,menu);
return super.onCreateOptionsMenu(menu);
} @Override
public boolean onOptionsItemSelected(MenuItem item) {
return super.onOptionsItemSelected(item);
}
}

总结:

简介了官方在Design Support Library中引入的NavigationView FloatingActionBar SnackBar控件的的使用方法,后面还将继续介绍新增的其他视图和控件。各个控件的高级属性和使用方法还需大家自己去研究。在以后的使用中尽量多引入Material Design,多參考官方文档和博客。

參考资料:

Android Design Support Library

Design Support Library (II): Floating Action Button

Defining Custom Animations


版权声明:本文博主原创文章,博客,未经同意不得转载。

Material Design: NavigationView FlaotingActionBar SnackBar采用的更多相关文章

  1. Android Material Design 系列之 SnackBar详解

    SnackBar是google Material Design提供的一种轻量级反馈组件.支持从布局的底部显示一个简洁的提示信息,支持手动滑动取消操作,同时在同一个时间内只能显示一个SnackBar. ...

  2. Android Material Design NavigationView 及 Palette 颜色提取器

    DrawerLayout + NavigationView DrawerLayout布局,通常在里面添加两个子控件,程序主界面添加到NavitagionView前面. <android.supp ...

  3. Android Material Design:NavigationView抽屉导航菜单

    需要添加的包: 测试代码: package com.zzw.navigationview; import android.app.Activity; import android.os.Bundle; ...

  4. Android Material Design的FloatingActionButton,Snackbar和CoordinatorLayout

    如果是为了兼容低版本的Android系统,则需要引用Android Material Design的扩展支持库,我在之前的一篇文章张,较为详细的说明了如何导入Android Material Desi ...

  5. Material Design 组件之NavigationView

    今天来看一下 NavigationView 的使用,NavigationView 是一个标准的导航菜单,其菜单内容由菜单资源文件来填充,NavigationView 一般和 DrawerLayout ...

  6. Android学习之基础知识十五 — 最佳UI体验(Material Design实战)

    一.前言 长久以来,大多数人都认为Android系统的UI并不美观,至少没有iOS系统的美观.以至于很多IT公司在进行应用界面设计的时候,为了保证双平台的统一性,强制要求Android端的界面风格必须 ...

  7. 再不迁移到Material Design Components 就out啦

    翻译自国外文档加自己理解 原文 我们最近宣布了 Material Design Components(MDC)1.1.0 ,这是一个库更新,为您的 Android 应用程序带来了 Material T ...

  8. Material Design with the Android Design Support Library

    Material Design with the Android Design Support Library 原文http://www.sitepoint.com/material-design-a ...

  9. Android Material Design 兼容库的使用

    Android Material Design 兼容库的使用 mecury 前言:近来学习了Android Material Design 兼容库,为了把这个弄懂,才有了这篇博客,这里先推荐两篇博客: ...

随机推荐

  1. 读文件头数据判断 PE 文件格式和类型

    namespace X.Reflection { using System; using System.IO; public static partial class ReflectionX { pu ...

  2. POJ 3134 - Power Calculus (IDDFS)

    题意:求仅仅用乘法和除法最快多少步能够求到x^n 思路:迭代加深搜索 //Accepted 164K 1094MS C++ 840B include<cstdio> #include< ...

  3. Android 调用系统邮件,发送邮件到指定邮箱

    在项目中,最后有一个联络我们,要求是点击号码还有邮箱地址能够发送邮件,这时候解决的方案其实有两种,一种是调用系统发邮件的软件,可以添加邮箱账号就可以发送邮件:第二种是使用javamail来发送邮件.在 ...

  4. RTC时钟和BKP的配置stm32

    摘自:https://blog.csdn.net/gtkknd/article/details/52233605 RTC和后备寄存器通过一个开关供电,在VDD有效的时候选择VDD供电,否则选择VBAT ...

  5. (转)nginx的root和alias指令的区别

    转自 http://www.cnblogs.com/tintin1926/archive/2012/07/11/2586813.html nginx配置下有两个指定目录的执行,root和alias   ...

  6. popen:让进程看似文件

    popen打开一个指向进程的带缓冲的连接: FILE *fp; fp = popen("ls", "r"); fgets(buf, len, fp); pclo ...

  7. AES 加密解密

    package XX.XX.XX.test; import java.io.IOException; import java.io.UnsupportedEncodingException; impo ...

  8. 【42.86%】【Codeforces Round #380D】Sea Battle

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  9. 详解HTML的a标签(超链接标签)

    原文 简书原文:https://www.jianshu.com/p/d6a2499db73b 大纲 1.什么是<a>标签 2.<a>标签的几个重要属性 3.a标签的运行机制 4 ...

  10. POJ 1251 Jungle Roads (zoj 1406) MST

    传送门: http://poj.org/problem?id=1251 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=406 P ...