美文网首页
高级UI--Material Design(一)

高级UI--Material Design(一)

作者: AndryYu | 来源:发表于2017-08-02 17:48 被阅读0次

    Material Design总结(一)

    • RecyclerView 控件
    • LinearLayoutCompat添加分割线
    • NavigationView与DrawLayout侧滑控件

    RecyclerView

    优点:

    RecyclerView标准化了ViewHolder,而且异常的灵活,可以轻松实现ListView实现不了的样式和功能,通过布局管理器LayoutManager可控制Item的布局方式,通过设置Item操作动画自定义Item添加和删除的动画,通过设置Item之间的间隔样式,自定义间隔。

    几大功能点:

    1. 设置布局管理器以控制Item的布局方式,横向、竖向以及瀑布流方式。
      2. 可设置Item操作的动画(删除或者添加等)
      3. 可设置Item的间隔样式(可绘制)
      4. Item的点击和长按事件,需要用户自己去实现。

    布局管理器

    RecyclerView提供了三种布局管理器:
      LinerLayoutManager 以垂直或者水平列表方式展示Item
      GridLayoutManager 以网格方式展示Item
      StaggeredGridLayoutManager 以瀑布流方式展示Item

    Item动画

    RecyclerView可以设置列表中Item删除和添加的动画,在v7包中给我们提供了一种默认的Item删除和添加的动画,如果没有特殊的需求,默认使用这个动画即可。

    // 设置Item添加和移除的动画
    mRecyclerView.setItemAnimator(new DefaultItemAnimator());
    

    间隔样式

    RecyclerView本身没有divider属性,支持自定义间隔样式的。通过mRecyclerView.addItemDecoration()来设置我们定义好的间隔样式。自定义间隔样式需要继承RecyclerView.ItemDecoration类,该类是个抽象类,主要有三个方法。
            - onDraw(Canvas c, RecyclerView parent, State state),在Item绘制之前被调用,该方法主要用于绘制间隔样式
            - onDrawOver(Canvas c, RecyclerView parent, State state),在Item绘制之前被调用,该方法主要用于绘制间隔样式
            - getItemOffsets(Rect outRect, View view, RecyclerView parent, State state),设置item的偏移量,偏移的部分用于填充间隔样式,在RecyclerView的onMesure()中会调用该方法。
        onDraw()和onDrawOver()这两个方法都是用于绘制间隔样式,我们只需要复写其中一个方法即可。

    Item点击和长按事件

    adapter设置监听接口

    public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder>{
    
        /** 事件回调监听 */
        private MyAdapter.OnItemClickListener onItemClickListener;
    
        /** 设置回调监听*/
        public void setOnItemClickListener(MyAdapter.OnItemClickListener listener) {
            this.onItemClickListener = listener;
        }
    
        ...
        public interface OnItemClickListener {
            void onItemClick(View view, int position);
            void onItemLongClick(View view, int position);
        }
    }
    

    设置Adapter的事件监听。

    mAdapter.setOnItemClickListener(new MyAdapter.OnItemClickListener() {
        @Override
        public void onItemClick(View view, int position) {
            Toast.makeText(MDRvActivity.this,"click " + position + " item", Toast.LENGTH_SHORT).show();
        }
    
        @Override
        public void onItemLongClick(View view, int position) {
            Toast.makeText(MDRvActivity.this,"long click " + position + " item", Toast.LENGTH_SHORT).show();
        }
    });
    

    参考文献
    RecyclerView使用完全指南,是时候体验新控件了(一)
    RecyclerView使用完全指南,是时候体验新控件了(二)


    LinearLayoutCompat添加分割线

    android Material Design 扩展支持包中的LinearLayoutCompat是过去的LinearLayout的扩展,可以为此布局中功德子View之间添加分割线divider。其中比较关键的地方有两点:
       - (1)app:showDividers="beginning|middle|end"属性。beginning,middle,end属性值分别指明将在何处添加分割线。
      beginning表示从该LinearLayoutCompat布局的最顶一个子view的顶部开始。
      middle表示在此LinearLayoutCompat布局内的子view之间添加。
      end表示在此LinearLayoutCompat最后一个子view的底部添加分割线。
      - (2)app:divider="@drawable/line"。LinearLayoutCompat添加分割线需要为此分割线定义一个shape。

    参考文献
    Android Material Design :LinearLayoutCompat添加分割线divider


    NavigationView + DrawLayout

    参考文献
    DrawerLayout和NavigationView使用详解

    相关文章

      网友评论

          本文标题:高级UI--Material Design(一)

          本文链接:https://www.haomeiwen.com/subject/frqflxtx.html