关闭

Material Design学习之 Bottom Sheets (顺便提提CoordinatorLayout)

标签: MDAndroid
6361人阅读 评论(4) 收藏 举报
分类:

转载请注明出处:王亟亟的大牛之路

昨天连续上了2篇介绍第三方库的文章,正直好久没提交自己写东西了,那么就补一篇之前MD系列漏的部分 Bottom Sheets


Bottom Sheets–底部动作条

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

在一个标准的列表样式的底部动作条(Bottom Sheets)中,每一个操作应该有一句描述和一个左对齐的 icon。如果需要的话,也可以使用分隔符对这些操作进行逻辑分组,也可以为分组添加标题或者副标题。

像这样:
这里写图片描述

请记得遵循MD严谨的设计规则,统一编剧,字体等尺寸规范,像这样

这里写图片描述

上面那种是类似于ListView的呈现,要变成类似于GridView的样子也行,像这样

这里写图片描述

原文地址:http://www.google.com/design/spec/components/bottom-sheets.html


CoordinatorLayout (不知道怎么称呼,泪目。。)

CoordinatorLayout实现了多种Material Design中提到的滚动效果(传送门:http://www.google.com/design/spec/patterns/scrolling-techniques.html)
打不开的话我就简单描述下,就是手势上下滑动的一些操作,像这样

这里写图片描述

只要使用CoordinatorLayout作为基本布局,将自动产生向上移动的动画。

也就是这样

<?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:fitsSystemWindows="true"
    tools:context="sample.wjj.materialdesignbottomsheets.MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/byRecycleView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:background="#c2cc"
            android:text="RecycleView方式"
            android:textColor="@android:color/white" />
    </RelativeLayout>


    <ImageView
        android:src="@drawable/flash"
        android:id="@+id/fillView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></ImageView>

    <android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fff"
        app:behavior_hideable="false"
        app:behavior_peekHeight="10dp"
        app:layout_behavior="@string/bottom_sheet_behavior" />
</android.support.design.widget.CoordinatorLayout>

更多介绍可以看:http://blog.csdn.net/xyz_lmn/article/details/48055919

接下来我们来看今天的例子

先上下效果图
这里写图片描述

这里写图片描述

这里把最上方的2种样式分别实现了一下(无视具体item 还是请跟着规范走)

这样的实现以前用PopupWindow我也写过一篇,效果大致差不多不过,Popup那一系列方法都得自己重写,还是比较麻烦的,这里也补下传送门:http://blog.csdn.net/ddwhan0123/article/details/50379340

OK,那我们来看下如何实现的

包结构

这里写图片描述

如果你不需要RecycleView的分割线的话就Copy走MainActivity内的内容即可DividerItemDecoration这个类是翔哥之前写的分割线

直接贴代码,然后在 // 里做解释

public class MainActivity extends AppCompatActivity implements View.OnClickListener {                 
    public static List<String> mDatas;                                                                
    public Button byRecycleView;                                                                      
    public BottomSheetBehavior behavior;                                                              
    public RecyclerView recyclerView;                                                                 
    public View fillView;                                                                             
    public WjjAdapter wjjAdapter;                                                                     


    @Override                                                                                         
    protected void onCreate(Bundle savedInstanceState) {                                              
        super.onCreate(savedInstanceState);                                                           
        setContentView(R.layout.activity_main);                                                       
        //初始化,业务逻辑                                                                                              
        init();                                                                                       

    }                                                                                                 
    //绿色的按钮,触发隐藏和显示RecycleView    

    //Bottom Sheet 一共有五个状态回调:
    //STATE_COLLAPSED
    //折叠状态。可通过app:behavior_peekHeight来设置默认显示的高度。

    //STATE_SETTING
    //拖拽松开之后到达终点位置(collapsed or expanded)前的状态。

    //STATE_EXPANDED
    //完全展开的状态。

    //STATE_HIDDEN
    //隐藏状态。默认是false,可通过app:behavior_hideable属性设置。

    //STATE_DRAGGING
    //被拖拽状态  

    @Override                                                                                         
    public void onClick(View v) {                                                                     
        switch (v.getId()) {                                                                          
            case R.id.byRecycleView:                                                                  

               //展开控件 behavior.setState(BottomSheetBehavior.STATE_EXPANDED);                                

                break;                                                                                
        }                                                                                             

    }                                                                                                 

    private void init() {                                                                             

        initData();                                                                                   

        byRecycleView = (Button) findViewById(R.id.byRecycleView);                                    
        byRecycleView.setOnClickListener(this);                                                       

        recyclerView = (RecyclerView) findViewById(R.id.recyclerview);                                

        //添加分割线                                                                                       
//        recyclerView.addItemDecoration(new DividerItemDecoration(this,                              
//                DividerItemDecoration.VERTICAL_LIST));                                              

        //设置ListView模式                                                                                          
        recyclerView.setLayoutManager(new LinearLayoutManager(recyclerView.getContext()));            
//设置GridView模式       
//recyclerView.setLayoutManager(new GridLayoutManager(this, 3));                               

        //初始化适配器                                                                                              
        wjjAdapter = new WjjAdapter(this);                                                            
        //设置监听事件                                                                                              
        wjjAdapter.setItemClickListener(new WjjAdapter.ItemClickListener() {                          
            @Override                                                                                 
            public void onItemClick(int pos) {                                                        
//当被点击后隐藏控件                behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);    
//土司被点击的Item的位置                           
                Toast.makeText(MainActivity.this, "--->" + pos, Toast.LENGTH_LONG).show();            
            }                                                                                         
        });        
        //设置适配器                                                                                   
        recyclerView.setAdapter(wjjAdapter);   
        //设置动画                                                       
        recyclerView.setItemAnimator(new DefaultItemAnimator()); 
        //这句很重要,绑定滑动操作内容给 recyclerView                          
        behavior = BottomSheetBehavior.from(recyclerView);  
        //设置滑动回调                                          
        behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() { 
        //状态变化时触发              
            @Override                                                                                 
            public void onStateChanged(@NonNull View bottomSheet, int newState) {                     
                if (newState == BottomSheetBehavior.STATE_COLLAPSED || newState == BottomSheetBehavior
//blackView.setBackgroundColor(Color.TRANSPARENT);                                
                    fillView.setVisibility(View.GONE);                                                
                }                                                                                     
            }                                                                                         

            @Override                                                                                 
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {                       
                // 手势滑动时                                                           
                fillView.setVisibility(View.VISIBLE);                                                 
                ViewCompat.setAlpha(fillView, slideOffset);                                           
            }                                                                                         
        });                                                                                           
         //显示RecycleView时才呈现的“树懒--闪电”                                                                                             
        fillView = findViewById(R.id.fillView);                                                       
        fillView.setBackgroundColor(getResources().getColor(R.color.white));                          
        fillView.setVisibility(View.GONE);                                                            
        fillView.setOnClickListener(new View.OnClickListener() {                                      
            @Override                                                                                 
            public void onClick(View v) {                                                             
            //点击闪电时也隐藏掉ReclcyeView
                behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);                               

            }                                                                                         
        });                                                                                           

    }                                                                                                 
     //填充数据                                                                                                 
    public void initData() {                                                                          
        mDatas = new ArrayList<>();                                                                   
        for (int k = 0; k < 6; k++) {                                                                 
            mDatas.add("第" + k + "个");                                                                
        }                                                                                             
    }                                                                                                 

    //下面就是 Adapter的内容了,就不做解释了                                                                                                  
    public static class WjjAdapter                                                                    
            extends RecyclerView.Adapter<WjjAdapter.ViewHolder> {                                     

        public ItemClickListener mItemClickListener;                                                  

        public void setItemClickListener(ItemClickListener listener) {                                
            mItemClickListener = listener;                                                            
        }                                                                                             

        public interface ItemClickListener {                                                          
            void onItemClick(int pos);                                                                
        }                                                                                             

        private Context mContext;                                                                     

        public static class ViewHolder extends RecyclerView.ViewHolder {                              

            public final TextView mTextView;                                                          

            public ViewHolder(View view) {                                                            

                super(view);                                                                          
                mTextView = (TextView) view.findViewById(R.id.tv);                                    

            }                                                                                         


        }                                                                                             

        public WjjAdapter(Context context) {                                                          

            super();                                                                                  
            mContext = context;                                                                       

        }                                                                                             

        @Override                                                                                     
        public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {                        

            ViewHolder holder = new ViewHolder(LayoutInflater.from(                                   
                    parent.getContext()).inflate(R.layout.list_item, parent,                          
                    false));                                                                          
            return holder;                                                                            

        }                                                                                             

        @Override                                                                                     
        public void onBindViewHolder(final ViewHolder holder, final int position) {                   


            holder.mTextView.setOnClickListener(new View.OnClickListener() {                          
                @Override                                                                             
                public void onClick(View v) {                                                         

                    mItemClickListener.onItemClick(position);                                         
                }                                                                                     
            });                                                                                       

            holder.mTextView.setText(mDatas.get(position));                                           
        }                                                                                             

        @Override                                                                                     
        public int getItemCount() {                                                                   
            return mDatas.size();                                                                     
        }                                                                                             
    }                                                                                                 

}                                                                                                     

整体使用起来不复杂,而且拓展性好。只是对版本有一定的要求,至少21+的才可以作为.from()的寄存对象

源码地址:https://github.com/ddwhan0123/BlogSample/blob/master/MaterialDesignBottomSheets.zip

6
0
查看评论

Bottom Sheets实现底部动作条

从事Android开发工作快一年多了,也没有坚持写什么博客,感觉很容易的东西但是要讲出来还是觉得很麻烦,所以又断断续续的继续坚持写下去,今天学习了一下Bottom Sheets来实现底部动作条,来跟大家分享学习一下啊,请大家指正: 首先介绍一下何为Bottom Sheets:底部动作条 底部动作...
  • qq_16131393
  • qq_16131393
  • 2016-03-10 15:00
  • 1744

Bottom Sheets(底部动作条)使用介绍

底部动作条 底部动作条(Bottom Sheets)是一个从屏幕底部边缘向上滑出的一个面板,使用这种方式向用户呈现一组功能。底部动作条呈现了简单、清晰、无需额外解释的一组操作。 使用 底部动作条(Bottom Sheets)特别适合有三个或者三个以上的操作需要提供给用户选择、并且不需要对操作有...
  • liyx2018
  • liyx2018
  • 2016-05-19 14:47
  • 1038

Android Bottom Sheet详解

最近android更新了support library, 版本到了23.2, 从官方blog中我们还是可以看到几个令人心动的特性的,例如夜间模式的支持,BottomSheet.今天我们就来介绍一下这个Bottom Sheet,这可能会给我们开发中需要的一些效果带来便利.虽然这里我们准备用整整一篇博客...
  • qibin0506
  • qibin0506
  • 2016-03-28 23:23
  • 23375

CoordinatorLayout 之深入理解

上篇在对 CoordinatorLayout 作了一些简单介绍,以了解 CoordinatorLayout 带来的一些特性和常见用途。本篇将对 CoordinatorLayout 的源码进行一些分析,以了解它的相关特性的运行原理,以及 Behavior 的执行过程。Android design li...
  • maosidiaoxian
  • maosidiaoxian
  • 2017-11-17 20:02
  • 367

Android 原生BottomSheet 介绍及坑

Android Support Library 23.2 推出之后,增加了几个功能,例如支持Vector Drawables 和Animated Vector Drawables;增加AppCompat DayNight 主题;Design 库中增加Bottom Sheets,RecyclerVie...
  • sunshine2050_CSDN
  • sunshine2050_CSDN
  • 2016-03-07 11:41
  • 3354

BottomSheets使用

参考: Teach you how to use Design Support Library: Bottom Sheets android developers blog Android Support Library 23.2用法简析 注意:如果要在Bottom ...
  • u014099894
  • u014099894
  • 2016-03-13 18:09
  • 666

Material Design学习之 Bottom navigation

转载请注明出处:王亟亟的大牛之路礼拜4一天因为事假没有去单位然后礼拜3因为生日也没写文章,今天一早上班就补一篇MD的内容,这一篇是关于颇有争议的Bottom navigation相关内容(主要是翻译和理解,代码部分还没来得及实验)众所周知Android之前一直提倡者”Bar”一系列的东西尽量是在“上...
  • ddwhan0123
  • ddwhan0123
  • 2016-03-18 11:15
  • 8203

Material Design实现之 CoordinatorLayout的滚动效果

CoordinatorLayout是google在android L之后引入的新控件,用于实现Material Design的多种滚动效果。而关键在于我们使用CoordinatorLayout不用写多少代码就能实现一些非常酷的动画,能够极大的提升我们的效率。那么,听起来很神奇的Coordinator...
  • zoudifei
  • zoudifei
  • 2015-11-15 23:11
  • 2627

Android学习Material design中的底部导航栏BottomNavigationBar

今天写项目的之于看了一下material Design关于底座图标BottomNacigationBar的介绍,网上的资料已经很详细了,在此留下记录便于以后查找.   首先要添加项目依赖   compile 'com.ashokvarma.android:bottom-...
  • hui9520
  • hui9520
  • 2017-01-04 16:18
  • 1154

Material Design系列风格控件之(一)----AppBarLayout实现上滑隐藏ToolBar

一、简介 Material Design是Google推出的一个全新的设计语言,它的特点就是拟物扁平化。谷歌表示,这种设计语言旨在为手机、平板电脑、台式机和"其他平台"提供更一致、更广泛的"外观和感觉"。 Material Design包含了很多内容...
  • u011781521
  • u011781521
  • 2017-04-26 23:31
  • 2086
    个人资料
    • 访问:814105次
    • 积分:10527
    • 等级:
    • 排名:第1891名
    • 原创:211篇
    • 转载:5篇
    • 译文:6篇
    • 评论:938条
    博客专栏