Material Design： NavigationView FlaotingActionBar SnackBar采用
2024-08-31 04:37:20
转载 请明确说明 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:headerLayout和app: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 Menu：android-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的使用也不熟悉能够看看我曾经写的这篇文章:
//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，完毕我们的练习
综上我们已经掌握了
NavigationView。FloatingActionBar 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中引入的
NavigationViewFloatingActionBarSnackBar控件的的使用方法，后面还将继续介绍新增的其他视图和控件。各个控件的高级属性和使用方法还需大家自己去研究。在以后的使用中尽量多引入Material Design，多參考官方文档和博客。
參考资料：
Android Design Support Library
Design Support Library (II): Floating Action Button
- 微博： @明桑Android
- 邮箱： <13141459344@163.com>
- 个人主页： Android修行记
- 微信公众号： ITBird
版权声明：本文博主原创文章，博客，未经同意不得转载。
最新文章
- Linux内核源代码获取教程
- MVC 关于easyui-datebox 赋值问题
- http学习笔记（一）
- Slip.js（移动端跟随手指滑动组件，零依赖）
- VR制作的规格分析
- Extended Data Type Properties [AX 2012]
- JQuery开发之Galleriffic图片插件介绍
- 设置UINavigationController相同标题
- JavaWeb项目开发案例精粹-第3章在线考试系统-007View层
- ejs简单教程
- Cocos2dx中Plugin-X 在android下的整合
- 使用 WPF 实现所见即所得HTML编辑器
- Spring-MVC开发步骤(入门配置)
- jQuary学习の三の效果展示
- 关于python中的operator.itemgetter()函数的用法
- ES 16 - 对Elasticsearch中的索引数据进行增删改查 (CRUD)
- luogu P5300 [GXOI/GZOI2019]与或和
- postgresql之json操作
- Jenkins pipeline 并行执行任务流
- asp.net MVC 5 路由 Routing
热门文章
- HDU - 3341 Lost&#39;s revenge(AC自己主动机+DP)
- php实现 24点游戏算法
- 关于Altium Designer中的搜索图纸上的元件
- centos7 安装部署运行 Redis5
- embed-it_Integrator memory compile工具使用之三
- js进阶解决浏览器缓存不能自动更新的问题（在ajax的url上带上一个参数，可以是日期，或者是随机数）（随机数Math.random）（取得日期的毫秒数：new Date().getTime();）
- https://www.cyberciti.biz/faq/howto-change-rename-user-name-id/
- 《JavaScript &amp; jQuery交互式Web前端开发》之JavaScript基础指令
- 创建ListView的基本步骤 分类： H1_ANDROID 2013-10-31 23:25 1276人阅读 评论(0) 收藏
- html5 背景音乐 js控制播放 暂停