Android材料设计之FloatingActionButton+Snackbar+SheetX3

本文把几个小东西讲一下

FloatingActionButton:浮动按钮 Snackbar:底弹框 BottomSheet:底抽屉 BottomSheetDialog :抽屉对话框 BottomSheetDialogFragment:抽屉对话框Fragment


一、FloatingActionButton

1.基本认知

问:FloatingActionButton何许人也? --- 答:View国 ImageView 人氏

FloatingActionButton.png


2.常用属性

fab的属性.png

 颜色   android:backgroundTint="@color/jietelan" 
 图片   android:src="@drawable/icon_t"
 厚度   app:borderWidth="@dimen/dp_4"
 阴影   app:elevation="@dimen/dp_8"
 尺寸   app:fabSize="normal"
 位置   android:layout_gravity="bottom|end"
 点击深度 app:pressedTranslationZ="@dimen/dp_16"
 点击颜色 app:rippleColor="@color/yase"/>
 挂接view app:layout_anchor="@id/id_tv_moving"
3.使用:AppBarLayout+CoordinatorLayout篇的布局展示一下挂接

fab的挂接.gif


二、Snackbar和FloatingActionButton联动

Snackbar感觉就像下面出来的Toast,只是可以交互而已

fab_sna.gif

1.代码实现:
public class FabSnaActivity extends AppCompatActivity {
    @BindView(R.id.fab)
    FloatingActionButton mFab;
    @BindView(R.id.cl_root)
    CoordinatorLayout mClRoot;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_snackbar);
        ButterKnife.bind(this);
        mFab.setOnClickListener(v -> {
            Snackbar.make(mClRoot, "Hello Snack", Snackbar.LENGTH_LONG)
                    .setAction("Toast", v1 -> {
                        Toast.makeText(this, "Hi , I'm toly", Toast.LENGTH_SHORT).show();
                    }).show();
        });
    }
}
2.布局
<?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:id="@+id/cl_root"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_gravity="bottom|end"
        android:layout_margin="10dp"
        android:backgroundTint="@color/jietelan"
        android:clickable="true"
        android:focusable="true"
        android:src="@drawable/icon_t"
        app:borderWidth="@dimen/dp_4"
        app:elevation="@dimen/dp_8"
        app:fabSize="normal"
        app:pressedTranslationZ="@dimen/dp_16"
        app:rippleColor="@color/yase"/>

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

3.改变Snackbar外观
1).追踪一下源码:getView()

可以发现把Snackbar的跟布局返回出来了,是个FrameLayout,好了,可以肆无忌惮了

--> public View getView() {
        return mView;
    }
    
--> final SnackbarBaseLayout mView;

--> static class SnackbarBaseLayout extends FrameLayout
2).修改布局

snackbar自定义布局.gif

mFab.setOnClickListener(v -> {
    Snackbar snackbar = Snackbar.make(mClRoot, "Hello Snack", Snackbar.LENGTH_LONG);
    ViewGroup view = (ViewGroup) snackbar.getView();
    view.removeAllViews();//清除原来的View
    //加载布局
    View child = LayoutInflater.from(this).inflate(R.layout.item_of_base, view, false);
    view.addView(child);//添加自己的View
    snackbar.show();
});

三、底部抽屉:bottom_sheet

个人感觉向抽屉,放一些小的功能按钮上面的感觉会不错 bottom_sheet要在CoordinatorLayout里才能用 注:任何View都可以作为抽屉内容,下面以LinearLayout作为实验对象

BottomSheet.gif

1.抽屉内布局

behavior_hideable:是否可以完全淹没抽屉 layout_behavior:内置的bottom_sheet行为,不用动 behavior_peekHeight:要留多长的头在外面(也就是说,至少给个抽屉把手吧)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:behavior_hideable="false"
    app:behavior_peekHeight="30dp"
    app:layout_behavior="@string/bottom_sheet_behavior">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_gravity="center"
        android:background="@color/transparent"
        android:src="@drawable/icon_up_3"/>

    <TextView
        style="@style/TVTestCenter"
        android:background="@color/feise"
        android:text="Sheet1"/>

    <TextView
        style="@style/TVTestCenter"
        android:background="@color/yase"
        android:text="Sheet2"/>

    <TextView
        style="@style/TVTestCenter"
        android:background="@color/zhuqing"
        android:text="Sheet3"/>

    <TextView
        style="@style/TVTestCenter"
        android:background="@color/yuebai"
        android:text="Sheet4"/>

</LinearLayout>
2.直接内嵌如CoordinatorLayout
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cl_root"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <include layout="@layout/sheet_4"/>
    
    //FloatingActionButton---同上
</android.support.design.widget.CoordinatorLayout>
3.状态监听
1).五种状态,见下:看动图应该挺清楚的
public static final int STATE_DRAGGING = 1;//手指接触正在移动
public static final int STATE_SETTLING = 2;//手指释放正在移动
public static final int STATE_EXPANDED = 3;//展开
public static final int STATE_COLLAPSED = 4;//收起
public static final int STATE_HIDDEN = 5;//隐藏

状态监听.gif

2).监听:BottomSheet
//成员变量
@BindView(R.id.bottom_sheet)
LinearLayout mBottomSheet;
private BottomSheetBehavior<LinearLayout> mBottomSheetBehavior;
    
mBottomSheetBehavior = BottomSheetBehavior.from(mBottomSheet);
mBottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
    @Override
    public void onStateChanged(@NonNull View bottomSheet, int newState) {
        ToastUtil.showAtOnce(FabSnaActivity.this, "newState:" + newState);
    }
    @Override
    public void onSlide(@NonNull View bottomSheet, float slideOffset) {
        L.d(slideOffset + L.l());//slideOffset:移动的分度值
    }
});

4.FloatingActionButton打开和关闭BottomSheet

sheet的控制.gif

//成员变量
private boolean isOpen;

mFab.setOnClickListener(v -> {
    if (isOpen) {
        mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
    } else {
        mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
    }
    isOpen = !isOpen;
});

四、BottomSheetDialog和BottomSheetDialogFragment

1.BottomSheetDialog

这个非常简单就三行,就是一个底部出来的Dialog,并且可以自定义布局

BottomSheetDialog.gif

 mFab.setOnClickListener(v -> {
     mBottomSheetDialog = new BottomSheetDialog(this);
     mBottomSheetDialog.setContentView(R.layout.a_pome_item);
     mBottomSheetDialog.show();
 });
2.BottomSheetDialogFragment

效果和上面一样,只不过这里是一个Fragment

BottomSheetDialogFragment

public class MyBSDFragment extends BottomSheetDialogFragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.a_pome_item, container, false);
    }

}
//使用:
new MyBSDFragment().show(getSupportFragmentManager(), "toly");

好了,基本上FloatingActionButton+Snackbar+SheetX3的用法都涉及了


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏肖蕾的博客

Android网络请求慢的时候,任意位置弹出加载中提示

1465
来自专栏Android开发指南

5.侧边栏逻辑

38212
来自专栏Android Note

Android – 登录、注册动画

2323
来自专栏GIS讲堂

打造属于自己的安卓menu

看下面的menu菜单,是原装的菜单,好丑陋哦,类似于小编这么爱美的人来说,纯粹就是天大的打击,接受不起。于是,小编就发奋图强,努力,努力,再努力,终于,将菜单改...

1664
来自专栏pangguoming

Android利用V4包中的SwipeRefreshLayout实现上拉加载

基本原理 上拉加载或者说滚动到底部时自动加载,都是通过判断是否滚动到了ListView或者其他View的底部,然后触发相应的操作,这里我们以 ListView来...

3269
来自专栏向治洪

android TabLayout实现京东详情效果

Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Sup...

32810
来自专栏xingoo, 一个梦想做发明家的程序员

【插件开发】—— 5 SWT控件以及布局使用

前文回顾: 1 插件学习篇 2 简单的建立插件工程以及模型文件分析 3 利用扩展点,开发透视图 4 SWT编程须知   经过前几篇的介绍,多少对S...

2099
来自专栏青蛙要fly的专栏

Android技能树 — PopupWindow小结

关于下拉选择框,估计大家都有很多选择,我在以前的文章:项目需求讨论-HyBrid模式需求改造 上写过下拉框选择这一块,正好用的Spinner。

1331
来自专栏技术小黑屋

超简单实现Google+列表特效

相信用过Google+的人都感到其应用的特效相当棒,本文将以超简单的形式来实现类似Google+列表的特效。仅仅写几行代码就可以实现奥。

992
来自专栏向治洪

SwipeListView实现仿ios的侧滑

github地址:https://github.com/xiangzhihong/SwipeMenuListView 今天介绍一个SwipeMenuListVi...

2758

扫码关注云+社区

领取腾讯云代金券