UI设计—Material Design实战(3)之悬浮按钮和可交互提示
上一节:UI设计—Material Design实战(2)之滑动菜单
https://blog.youkuaiyun.com/qq_43468891/article/details/90623986
Material Design中有一条非常重要的设计思想,它就是立面设计。在官方给出的实例中,最简单的且最具代表性的就是悬浮按钮了。
FloatingActionButton
FloatingActionButton 是Design Support库中提供的一个控件,这个控件可以帮助我们比较轻松地实现悬浮按钮的效果,下面我们来具体实现吧。首先需要准备一张图标,然后修改activity_main.xml代码:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:addStatesFromChildren="false">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="@drawable/ic_done"
app:backgroundTint="#2EB634"
app:elevation="8dp" />
</FrameLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/nav_menu"
app:headerLayout="@layout/nav_header">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
其中layout_gravity属性指定将这个控件放置在屏幕的右下角,app:elevation属性是给FloatingActionButton指定一个高度值,高度值越大投影的范围就越大,但是投影的效果越淡,反之高度值越小投影的范围就越小,但是投影的效果越浓。
接下来需要处理点击事件FloatingActionButton,修改MainActicity中的代码:
package com.example.materialtext;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;
/**
* @author J.Min
*/
public class MainActivity extends AppCompatActivity {
private DrawerLayout mDrawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
mDrawerLayout=findViewById(R.id.drawer_layout);
NavigationView navView= (NavigationView) findViewById(R.id.nav_view);
ActionBar actionBar = getSupportActionBar();
if(actionBar !=null){
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
navView.setCheckedItem(R.id.nac_call);
navView.setNavigationItemSelectedListener(new NavigationView.
OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected( MenuItem item) {
mDrawerLayout.closeDrawers();
return false;
}
});
}
FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,
"This is Button",Toast.LENGTH_LONG).show();
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu){
getMenuInflater().inflate(R.menu.toolbar,menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item){
switch (item.getItemId()) {
case android.R.id.home:
mDrawerLayout.openDrawer(GravityCompat.START);
break;
case R.id.backup:
Toast.makeText(this, "You clicked Backup",
Toast.LENGTH_LONG).show();
case R.id.delete:
Toast.makeText(this, "You clicked Delete",
Toast.LENGTH_LONG).show();
case R.id.settings:
Toast.makeText(this, "You clicked Settings",
Toast.LENGTH_LONG).show();
break;
default:
}
return true;
}
}
其实FloatingActionButton只是一个普通的按钮没有什么特殊用法,当然也是Android开发的一个悬浮按钮。
Snackbar
Snackbar允许在提示中加入一个可交互按钮,当用户点击一个按钮时还可以进行一些额外的逻辑操作,接下来我们看看他的用法吧。修该:MainActivity中的代码:
package com.example.materialtext;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.NavigationView;
import android.support.design.widget.Snackbar;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;
/**
* @author J.Min
*/
public class MainActivity extends AppCompatActivity {
private DrawerLayout mDrawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
mDrawerLayout=findViewById(R.id.drawer_layout);
NavigationView navView= (NavigationView) findViewById(R.id.nav_view);
ActionBar actionBar = getSupportActionBar();
if(actionBar !=null){
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
navView.setCheckedItem(R.id.nac_call);
navView.setNavigationItemSelectedListener(new NavigationView.
OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected( MenuItem item) {
mDrawerLayout.closeDrawers();
return false;
}
});
}
FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view,"Data deleted",Snackbar.LENGTH_SHORT)
.setAction("Undo", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"Data restored",
Toast.LENGTH_SHORT).show();
}
})
.show();
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu){
getMenuInflater().inflate(R.menu.toolbar,menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item){
switch (item.getItemId()) {
case android.R.id.home:
mDrawerLayout.openDrawer(GravityCompat.START);
break;
case R.id.backup:
Toast.makeText(this, "You clicked Backup",
Toast.LENGTH_LONG).show();
case R.id.delete:
Toast.makeText(this, "You clicked Delete",
Toast.LENGTH_LONG).show();
case R.id.settings:
Toast.makeText(this, "You clicked Settings",
Toast.LENGTH_LONG).show();
break;
default:
}
return true;
}
}
这里调用了Snackbar的mack()方法来创建一个Snackbar对象,make()方法的第一个参数需要传入一个View,只要是当前界面布局的任意一个View都可以,Snackbar会使用这个View来自动查找最外层的布局,用于展示Snackbar。第二个参数是Snackbar中显示的内容,第三个参数是Snackbar显示的时长。
紧接着这里调用了一个setAction()方法来设置一个动作,从而让Snackbar不仅仅是一个提示,而是可以和用户进行交互的,简单一点,我们在动作按钮的点击事件里面弹出一个Toast提示,最后用show()方法让Snackbar显示出来。效果如下:
这里有一个bug,就是这个Snackbar把我们的悬浮按钮给遮住了,这时我们可以采用CoordinatorLayout解决。
CoordinatorLayou
CoordinatorLayou可以说是一个加强版FraneLayout,这个布局也是由Design Support库提供的。其使用方法非常简单,只需要将原来的FraneLayout替换掉就行了。修改activity_main.xml中的代码:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:addStatesFromChildren="false">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="@drawable/ic_done"
app:backgroundTint="#2EB634"
app:elevation="8dp" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/nav_menu"
app:headerLayout="@layout/nav_header">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
效果如下:
可以看到,悬浮按钮自动向上偏移了Snackbar的同等高度,从而确保不会被遮挡住,当Snackbar消失的时候,悬浮按钮会自动向下偏移回到原来的位置。
本节内容就到这里了,下一节:UI设计—Material Design实战(4)之卡片式布局