Android Design Support Library系列
2017-06-22 本文已影响662人
滴滴滴9527
Android Support Library 23.2开始，添加了一个新特性Bottom sheets.
那么这个Bottom sheets有什么作用呢，观看官方示例图：
官方介绍.
A bottom sheet is a sheet of material that slides up from the bottom edge of the screen.
Bottom Sheets是一个从屏幕底部边缘向上滑出的一个面板.
惯例，使用前添加依赖：
compile 'com.android.support:design:25.3.1'
一、BottomSheet
1、简单使用
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:id="@+id/bottomsheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:behavior_hideable="true"
app:behavior_peekHeight="48dp"
app:layout_behavior="@string/bottom_sheet_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="@android:drawable/divider_horizontal_bright"
android:orientation="vertical"
android:showDividers="middle">
<TextView
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="@android:color/holo_blue_dark"
android:gravity="center"
android:text="收藏"
android:textColor="@android:color/white" />
<TextView
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="@android:color/holo_blue_dark"
android:gravity="center"
android:text="分享"
android:textColor="@android:color/white" />
<TextView
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="@android:color/holo_blue_dark"
android:gravity="center"
android:text="取消"
android:textColor="@android:color/white" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
2、常用属性、方法介绍
1）与BottomShee相关的最重要的3条属性
使用BottomSheetBehavior,表明这是一个BottomSheet
app:layout_behavior="@string/bottom_sheet_behavior"
Tip:必须用在CoordinatorLayout的直接子View上
BottomSheet 预显的高度
app:behavior_peekHeight=" "
Tip:BottomSheet 默认是关闭的，使用该属性可以预显一部分内容
可以在代码中通过：mBottomSheetBehavior.setPeekHeight()设置
BottomSheet是否可以完全隐藏，默认false
app:behavior_hideable=" "
Tip:当我们设置了预显高度时，如果不设为true，向下拖动BottomSheet，预显内容隐藏不了
可以在代码中通过：mBottomSheetBehavior.setHideable()设置
2）BottomSheet设置回调
BottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
/**
* BottomSheet状态的改变时的回调
* @param newState BottomSheet此时的状态
*/
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
}
/**
* 拖拽BottomSheet时的回调
*/
@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
}
});
下面分别来测一下BottomSheet的5种状态
package com.my;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomSheetBehavior;
import android.support.v4.widget.NestedScrollView;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private NestedScrollView mBottomSheet;
private BottomSheetBehavior mBottomSheetBehavior;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
/**
* 从NestedScrollView上获取到它的Behavior
*/
mBottomSheet = (NestedScrollView) findViewById(R.id.bottomsheet);
mBottomSheetBehavior = BottomSheetBehavior.from(mBottomSheet);
/**
* 设置回调
*/
mBottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
switch (newState){
case BottomSheetBehavior.STATE_COLLAPSED:
Toast.makeText(MainActivity.this, "BottomSheet关闭时", Toast.LENGTH_SHORT).show();
break;
case BottomSheetBehavior.STATE_DRAGGING:
// Toast.makeText(MainActivity.this, "拖拽BottomSheet时", Toast.LENGTH_SHORT).show();
break;
case BottomSheetBehavior.STATE_SETTLING:
// Toast.makeText(MainActivity.this, "拖拽松开手指时", Toast.LENGTH_SHORT).show();
break;
case BottomSheetBehavior.STATE_EXPANDED:
// Toast.makeText(MainActivity.this, "完全展开的状态", Toast.LENGTH_SHORT).show();
break;
case BottomSheetBehavior.STATE_HIDDEN:
// Toast.makeText(MainActivity.this, "完全隐藏时的状态", Toast.LENGTH_SHORT).show();
break;
}
}
@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
}
});
}
}
STATE_COLLAPSED
STATE_DRAGGING
STATE_SETTLING
STATE_EXPANDED
STATE_HIDDEN
3）获取BottomSheet状态、设置BottomSheet状态
mBottomSheetBehavior.getState();
mBottomSheetBehavior.setState();
有时我们不希望预显内容，希望通过点击事件来显示和隐藏BottomSheet，此时可以通过上面两个方法获取此时的状态以及设置此时的状态
在布局文件中添加了一个Button，通过android:onClick="click1"设置点击事件
public void click1(View v) {
if (mBottomSheetBehavior.getState() == BottomSheetBehavior.STATE_EXPANDED) {
mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
} else if (mBottomSheetBehavior.getState() == BottomSheetBehavior.STATE_COLLAPSED) {
mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
}
}
二、BottomSheetDialog
BottomSheetDialog的使用就更加简单了
第一步:实例化
BottomSheetDialog dialog = new BottomSheetDialog(MainActivity.this);
第二步:设置对话框内容
View view = View.inflate(MainActivity.this, R.layout.dialog_layout, null);
dialog.setContentView(view);
或者
dialog.setContentView(R.layout.dialog_layout);
这个对话框的内容完全由你自己决定
第三步:show
dialog.show();
布局文件dialog_layout：
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/a"
android:drawablePadding="24dp"
android:padding="12dp"
android:text="设置备注及标签"
android:textColor="#555555"
android:textSize="16sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/b"
android:drawablePadding="24dp"
android:padding="12dp"
android:text="标为星标朋友"
android:textColor="#555555"
android:textSize="16sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/c"
android:drawablePadding="24dp"
android:padding="12dp"
android:text="设置朋友圈权限"
android:textColor="#555555"
android:textSize="16sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/d"
android:drawablePadding="24dp"
android:padding="12dp"
android:text="发送该名片"
android:textColor="#555555"
android:textSize="16sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/e"
android:drawablePadding="24dp"
android:padding="12dp"
android:text="投诉"
android:textColor="#555555"
android:textSize="16sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/f"
android:drawablePadding="24dp"
android:padding="12dp"
android:text="加入黑名单"
android:textColor="#555555"
android:textSize="16sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/g"
android:drawablePadding="24dp"
android:padding="12dp"
android:text="删除"
android:textColor="#555555"
android:textSize="16sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/h"
android:drawablePadding="24dp"
android:padding="12dp"
android:text="添加到桌面"
android:textColor="#555555"
android:textSize="16sp" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
和一般的dialog一样，BottomSheetDialog可以通过dismiss()消失
dialog.dismiss(); dialog消失
dialog.setCanceledOnTouchOutside(false); 触摸dialog之外的地方，dialog不消失
dialog.setCancelable(false); dialog无法取消，按返回键都取消不了
三、BottomSheetDialogFragment
第一步:继承BottomSheetDialogFragment ，复写onCreateView()方法
package com.my;
import android.os.Bundle;
import android.support.design.widget.BottomSheetBehavior;
import android.support.design.widget.BottomSheetDialogFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class MyFragment extends BottomSheetDialogFragment {
public static MyFragment newInstance() {
return new MyFragment();
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.dialog_layout, container, false);
return v;
}
}
第二步:实例化
MyFragment myFragment = MyFragment.newInstance();
第三步:show
myFragment.show(getSupportFragmentManager(), "bottom sheet tag");
查看BottomSheetDialogFragment继承结构，发现它其实就是一个DialogFragment
四、设计规范
1、Bottom Sheets特别适合有三个或者三个以上的操作需要提供给用户选择、并且不需要对操作有额外解释的情景.如果只有两个或者更少的操作，或者需要详加描述的，可以考虑使用菜单(Menu)或者对话框替代.
2、在一个标准的列表样式的Bottom Sheets中，每一个操作应该有一句描述和一个左对齐的icon，并且这些图标大小、间距都有标准.
更多设计规范，请观看官方指南.
