BottomSheet 的详解及注意事项

android support library更新的比较快,使用了几个控件挺不错,不过今天只写BottomSheet 。
OK,这个东西肯定很多人都没听过和用过,其实用起来特别方便和简单,不过它的使用需要引入Behavior机制,别说你没听说过Behavior,Behavior是CoordinatorLayout的核心内容,其允许我们在自定义控件的前提下实现一些特效,BottomSheet 就是通过Behavior实现的。
下面看布局:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="点击一下弹出" />

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/scoll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_blue_light"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
             android:padding="20dp"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="这是BottomSheet "
                android:textColor="@color/white" />

        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>


</android.support.design.widget.CoordinatorLayout>

布局很简单,只需要在NestedScrollView中指定Behavior就可以了,看一下代码,几行代码搞定,几行代码而已,当然也可以不用代码,但是用户怎么知道你会从下面弹出来呢是不是。

 BottomSheetBehavior behavior = BottomSheetBehavior.from(findViewById(R.id.scoll));
        if (behavior.getState() == BottomSheetBehavior.STATE_EXPANDED) {
            behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
        } else {
            behavior.setState(BottomSheetBehavior.STATE_EXPANDED);
        }

如果是展开的状态,就关闭,很简单,效果图,点击按钮从下方弹出。
这里写图片描述
其实这个我们用的并不多,个人觉得比较实用的还是BottomSheetDialog,下面来看一下效果
这里写图片描述
为了方便直接把两张图放一起了,下方的列表如果显示不完,可以上拉铺满屏幕,效果杠杠的,当然,如果用过的朋友肯定遇到弹出时状态栏变黑的问题,下面再说,我们来看看这个效果的代码,很简单的,

 BottomSheetAdapter adapter = new BottomSheetAdapter(this);
        RecyclerView recyclerView = (RecyclerView) LayoutInflater.from(this).inflate(R.layout.recycler, null);
        RecyclerView.LayoutParams params = new RecyclerView.LayoutParams(RecyclerView.LayoutParams.MATCH_PARENT, RecyclerView.LayoutParams.MATCH_PARENT);
        recyclerView.setLayoutParams(params);
        recyclerView.setItemAnimator(new DefaultItemAnimator());
        recyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false));
        recyclerView.setAdapter(adapter);

        final MyBottomSheetDialog dialog = new MyBottomSheetDialog(this, this);
        dialog.setContentView(recyclerView);
        dialog.show();

直接加载一个recycleView布局,这里adapter就省略了,注意,这里我是用了自定义的MyBottomSheetDialog,上面说到了弹出会使状态栏变黑的问题在自定义中解决,看了一下源码,不能改变状态栏的颜色是因为 OnCreate()里面setLayout()中的参数设置成了MatchParent,我们需要自定义重写,直接贴代码:


/**
 * 当dialog弹出时,会把状态栏的颜色变为黑色,需重写onCreate(),在里面进行高度设置
 * <p/>
 * 
 * Created by dong.he on 2016/9/6.
 */
public class MyBottomSheetDialog extends BottomSheetDialog {
    private Context mContext;
    Activity activity;

    public MyBottomSheetDialog(@NonNull Context context,Activity activity) {
        super(context);
        mContext = context;
        this.activity = activity;
    }

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        int screenHeight = getScreenHeight(activity);
        int statusBarHeight = getStatusBarHeight(getContext());
        int dialogHeight = screenHeight - statusBarHeight;
                getWindow().setLayout(ViewGroup.LayoutParams.MATCH_PARENT, dialogHeight == 0 ? ViewGroup.LayoutParams.MATCH_PARENT : dialogHeight);
    }

    private static int getScreenHeight(Activity activity) {
        DisplayMetrics displaymetrics = new DisplayMetrics();
        activity.getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
        return displaymetrics.heightPixels;
    }

    private static int getStatusBarHeight(Context context) {
        int statusBarHeight = 0;
        Resources res = context.getResources();
        int resourceId = res.getIdentifier("status_bar_height", "dimen", "android");
        if (resourceId > 0) {
            statusBarHeight = res.getDimensionPixelSize(resourceId);
        }
        return statusBarHeight;
    }
}

这样就没有疑问了,挺好用的控件,记录下来,以后用得着。
项目链接:https://github.com/hedongBlog/BottomSheetExample

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值