BottomSheet底部动作条使用详解手机开发

文章目录[隐藏]

  • BottomSheetDialog
  • 底部动作条

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

    使用环境

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

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

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

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

    BottomSheet底部动作条使用详解手机开发

    行为

    显示底部动作条的时候,动画应该从屏幕底部边缘向上展开。根据上一步的内容,向用户展示用户上一步的操作之后能够继续操作的内容,并提供模态[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>

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


    原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/tech/pnotes/5541.html

    (0)
    上一篇 2021年7月16日 23:50
    下一篇 2021年7月16日 23:50

    相关推荐

    发表回复

    登录后才能评论