BottomSheet底部动作条使用

来源：互联网发布：九九乘法表c语言编程编辑：程序博客网时间：2024/06/14 21:52

底部动作条

底部动作条(Bottom Sheets)是一个从屏幕底部边缘向上滑出的一个面板，使用这种方式向用户呈现一组功能。底部动作条呈现了简单、清晰、无需额外解释的一组操作。

使用环境

底部动作条(Bottom Sheets)特别适合有三个或者三个以上的操作需要提供给用户选择、并且不需要对操作有额外解释的情景。如果只有两个或者更少的操作，或者需要详加描述的，可以考虑使用菜单(Menu)或者对话框替代。

底部动作条(Bottom Sheets)可以是列表样式的也可以是宫格样式的。宫格布局可以增加视觉的清晰度。

你可以使用底部动作条(Bottom Sheets)展示和其 app 相关的操作，比如做为进入其他 app 的入口(通过 app 的 icon 进入)。

我们来看看官方展示的效果：

行为

显示底部动作条的时候，动画应该从屏幕底部边缘向上展开。根据上一步的内容，向用户展示用户上一步的操作之后能够继续操作的内容，并提供模态[1]的选择。点击其他区域会使得底部动作条伴随下滑的动画关闭掉。如果这个窗口包含的操作超出了默认的显示区域，这个窗口需要可以滑动。滑动操作应当向上拉起这个动作条的内容，甚至可以覆盖整个屏幕。当窗口覆盖整个屏幕的时候，需要在上部的标题栏左侧增加一个收起按钮。

添加依赖：

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

BottomSheet使用例子：

<?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">    <Button        android:layout_width="match_parent"        android:layout_height="80dp"        android:onClick="click"        android:text="BottomSheet" />    <android.support.v4.widget.NestedScrollView        android:id="@+id/bottom_sheet"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:layout_behavior="@string/bottom_sheet_behavior">        <LinearLayout            android:layout_width="match_parent"            android:layout_height="300dp"            android:gravity="center"            android:orientation="vertical">            <TextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:minHeight="50dp"                android:gravity="center_vertical"                android:drawableLeft="@mipmap/ic_launcher"                android:text="BottomSheet布局" />            <TextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:gravity="center_vertical"                android:minHeight="50dp"                android:drawableLeft="@mipmap/ic_launcher"                android:text="BottomSheet布局" />            <TextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:gravity="center_vertical"                android:minHeight="50dp"                android:drawableLeft="@mipmap/ic_launcher"                android:text="BottomSheet布局" />            <TextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:gravity="center_vertical"                android:minHeight="50dp"                android:drawableLeft="@mipmap/ic_launcher"                android:text="BottomSheet布局" />        </LinearLayout>    </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>

页面代码：

public class MainActivity extends AppCompatActivity {    private BottomSheetBehavior<View> bottomSheet;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        ButterKnife.bind(this);        init();    }    private void init() {        bottomSheet.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {            @Override            public void onStateChanged(@NonNull View bottomSheet, int newState) {                //newState 有四个状态 ：                //展开 BottomSheetBehavior.STATE_EXPANDED                //收起 BottomSheetBehavior.STATE_COLLAPSED                //拖动 BottomSheetBehavior.STATE_DRAGGING                //下滑 BottomSheetBehavior.STATE_SETTLING            }            @Override            public void onSlide(@NonNull View bottomSheet, float slideOffset) {            //这里是拖拽中的回调，slideOffset为0-1 完全收起为0 完全展开为1            }        });    }}

当然BottomSheet这种效果是高度可扩展的，你可以在布局中实现你想要的任何效果。

BottomSheetDialog

BottomSheetDialog的使用也很简单，直接上代码：

public class BottomSheetDialogActivity extends AppCompatActivity{    private List<String> mList;    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_bottomsheet);        initData();    }    private void initData() {        mList = new ArrayList<>();        for(int i=0; i<20; i++){            mList.add("item "+i);        }    }    public void click1(View view){        final BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(this);        //创建recyclerView        RecyclerView recyclerView = new RecyclerView(this);        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);        linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);        recyclerView.setLayoutManager(linearLayoutManager);        RecyclerAdapter recyclerAdapter = new RecyclerAdapter(mList,this);        recyclerView.setAdapter(recyclerAdapter);        recyclerAdapter.setOnItemClickListener(new RecyclerAdapter.OnItemClickListener() {            @Override            public void onItemClickListener(View item, int position) {                Toast.makeText(BottomSheetDialogActivity.this, "item "+position, Toast.LENGTH_SHORT).show();                bottomSheetDialog.dismiss();            }        });        bottomSheetDialog.setContentView(recyclerView);        bottomSheetDialog.show();    }}

adapter

public class RecyclerAdapter  extends RecyclerView.Adapter<RecyclerAdapter.ViewHolder>{    private List<String> list;    private Context mContext;    private OnItemClickListener onItemClickListener;    public RecyclerAdapter(List<String> list, Context mContext) {        this.list = list;        this.mContext = mContext;    }    @Override    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        View inflate = LayoutInflater.from(mContext).inflate(R.layout.item_layou, parent, false);        return new ViewHolder(inflate);    }    @Override    public void onBindViewHolder(ViewHolder holder, final int position) {        holder.tv.setText(list.get(position));        holder.tv.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                if(onItemClickListener!=null){                    onItemClickListener.onItemClickListener(v,position);                }            }        });    }    @Override    public int getItemCount() {        return list.size();    }    public static class ViewHolder extends RecyclerView.ViewHolder{        TextView tv;        public ViewHolder(View itemView) {            super(itemView);            tv = (TextView) itemView.findViewById(R.id.item_tv);        }    }    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {        this.onItemClickListener = onItemClickListener;    }    public interface OnItemClickListener{        void onItemClickListener(View item, int position);    }}

item布局：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="50dp"    android:orientation="vertical">    <TextView        android:id="@+id/item_tv"        android:layout_width="match_parent"        android:layout_height="50dp" /></LinearLayout>

其它可以实现的效果还有很多，大家可以根据具体情况自行修改。

0 0