ANDROID L——Material Design详解(UI控件)

转载 2015年07月09日 23:05:38

http://doc.okbase.net/a396901990/archive/113540.html



转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持!



Android L:


Google已经确认Android L就是Android Lollipop(5.0)。


前几天发现Android5.0正式版的sdk已经可以下载了,而且首次搭载Android L系统的Nexus 6和 Nexus 9也即将上市。

所以是时候开始学习Android L了!

关于Android L如何配置模拟器和创建项目,如果大家有兴趣的话可以看看我之前的一篇文章:

Android L——模拟器配置及创建项目





Material Design:



Material Design是Google推出的一个全新的设计语言,它的特点就是拟物扁平化。


Material Design包含了很多内容,我大致把它分为四部分:

主题和布局——ANDROID L——Material Design详解(主题和布局)

视图和阴影——ANDROID L——Material Design详解(视图和阴影)

UI控件——ANDROID L——Material Design详解(UI控件)

动画——ANDROID L——Material Design详解(动画篇)


今天就先来说说第三部分——Material新增的UI控件




UI控件

在Android L中新增了两个控件分别是RecyclerViewCardView


RecyclerView:


RecyclerView是ListView的升级版,它提供了更好的性能而且更容易使用。




RecyclerView这个控件是一个可以装载大量的视图集合,并且可以非常效率的进行回收和滚动。当你list中的元素经常动态改变时可以使用RecyclerView控件。

RecyclerView非常容易使用,它提供了如下两个功能:

为每个条目位置提供了layout管理器(RecyclerView.setLayoutManager

为每个条目设置了操作动画(RecyclerView.setItemAnimator


下面的例子介绍了如何定义和使用一个RecyclerView

1.在布局文件中添加一个RecyclerView

  1. <!-- A RecyclerView with some commonly used attributes -->  
  2. <android.support.v7.widget.RecyclerView  
  3.     android:id="@+id/my_recycler_view"  
  4.     android:scrollbars="vertical"  
  5.     android:layout_width="match_parent"  
  6.     android:layout_height="match_parent"/>  


2.初始化RecyclerView参数,设置layoutManager和adapter

  1. public class MyActivity extends Activity {  
  2.     private RecyclerView mRecyclerView;  
  3.     private RecyclerView.Adapter mAdapter;  
  4.     private RecyclerView.LayoutManager mLayoutManager;  
  5.   
  6.     @Override  
  7.     protected void onCreate(Bundle savedInstanceState) {  
  8.         super.onCreate(savedInstanceState);  
  9.         setContentView(R.layout.my_activity);  
  10.         mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);  
  11.   
  12.         // improve performance if you know that changes in content  
  13.         // do not change the size of the RecyclerView  
  14.         mRecyclerView.setHasFixedSize(true);  
  15.   
  16.         // use a linear layout manager  
  17.         mLayoutManager = new LinearLayoutManager(this);  
  18.         mRecyclerView.setLayoutManager(mLayoutManager);  
  19.   
  20.         // specify an adapter (see also next example)  
  21.         mAdapter = new MyAdapter(myDataset);  
  22.         mRecyclerView.setAdapter(mAdapter);  
  23.     }  
  24.     ...  
  25. }  

3.创建一个adapter

  1. public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {  
  2.     private String[] mDataset;  
  3.   
  4.     // Provide a reference to the type of views that you are using  
  5.     // (custom viewholder)  
  6.     public static class ViewHolder extends RecyclerView.ViewHolder {  
  7.         public TextView mTextView;  
  8.         public ViewHolder(TextView v) {  
  9.             super(v);  
  10.             mTextView = v;  
  11.         }  
  12.     }  
  13.   
  14.     // Provide a suitable constructor (depends on the kind of dataset)  
  15.     public MyAdapter(String[] myDataset) {  
  16.         mDataset = myDataset;  
  17.     }  
  18.   
  19.     // Create new views (invoked by the layout manager)  
  20.     @Override  
  21.     public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,  
  22.                                                    int viewType) {  
  23.         // create a new view  
  24.         View v = LayoutInflater.from(parent.getContext())  
  25.                                .inflate(R.layout.my_text_view, parent, false);  
  26.         // set the view's size, margins, paddings and layout parameters  
  27.         ...  
  28.         ViewHolder vh = new ViewHolder(v);  
  29.         return vh;  
  30.     }  
  31.   
  32.     // Replace the contents of a view (invoked by the layout manager)  
  33.     @Override  
  34.     public void onBindViewHolder(ViewHolder holder, int position) {  
  35.         // - get element from your dataset at this position  
  36.         // - replace the contents of the view with that element  
  37.         holder.mTextView.setText(mDataset[position]);  
  38.   
  39.     }  
  40.   
  41.     // Return the size of your dataset (invoked by the layout manager)  
  42.     @Override  
  43.     public int getItemCount() {  
  44.         return mDataset.length;  
  45.     }  
  46. }  


CardView:


CardView继承自FrameLayout,允许你在card视图中显示信息. CardView也可以设置阴影和圆角。(其实现在很多应用都自定义了Card视图,Google这回将card视图作为基本控件,可以拿来直接使用了)





Layout中为CardView设置圆角使用card_view:cardCornerRadius属性

代码中为CardView设置圆角使用CardView.setRadius方法

CardView设置背景颜色使用card_view:cardBackgroundColor属性


在布局中包含一个CardView,如下:

  1. <!-- A CardView that contains a TextView -->  
  2. <android.support.v7.widget.CardView  
  3.     xmlns:card_view="http://schemas.android.com/apk/res-auto"  
  4.     android:id="@+id/card_view"  
  5.     android:layout_gravity="center"  
  6.     android:layout_width="200dp"  
  7.     android:layout_height="200dp"  
  8.     card_view:cardCornerRadius="4dp">  
  9.   
  10.     <TextView  
  11.         android:id="@+id/info_text"  
  12.         android:layout_width="match_parent"  
  13.         android:layout_height="match_parent" />  
  14. </android.support.v7.widget.CardView>  

兼容性:

RecyclerViewCardView都包含在Android L Developer Preview Support Library中,所以他们可以在之前的版本中使用,只会有一些限制。



总结:


我将Material Design分为如下四部分:

主题和布局——ANDROID L——Material Design详解(主题和布局)

视图和阴影——ANDROID L——Material Design详解(视图和阴影)

UI控件——ANDROID L——Material Design详解(UI控件)

动画——ANDROID L——Material Design详解(动画篇)


本文所介绍的两个控件(RecyclerViewCardView)非常重要,因为在以后Android L的开发中会经常用到。



这篇文章介绍的内容都是从官方文档翻译过来的,大家看着可能有点迷糊。不过没关系,过几天我会更新一个介绍RecyclerViewCardView在Android Studio和Eclipse中是如何导包,和两个控件结合使用的小Demo。

Android L——RecyclerView,CardView导入和使用(Demo)


Android Material Design 史上最全的材料设计控件大全

主要内容: 本文将要介绍Material design和Support library控件,主要包括TextInputLayout、SwitchCompat、SnackBar、FloatingAc...
  • tyk9999tyk
  • tyk9999tyk
  • 2017年02月14日 11:25
  • 951

12个Material Design风格控件的使用

项目在GitHub上的地址:https://github.com/Hebin320/MaterialDesignUseCSDN上的下载地址http://download.csdn.net/detail...
  • Hebin320320
  • Hebin320320
  • 2016年05月20日 14:50
  • 35851

ANDROID L——Material Design详解(动画篇)

Android L Material Design详解最后一篇——动画篇。使用动态GIF图演示Touch feedback(触摸反馈),Reveal effect(揭露效果)Activity tran...
  • a396901990
  • a396901990
  • 2014年10月28日 00:51
  • 33802

Android群英传笔记——第十二章:Android5.X 新特性详解,Material Design UI的新体验

Android群英传笔记——第十二章:Android5.X 新特性详解,Material Design UI的新体验 第十一章为什么不写,因为我很早之前就已经写过了,有需要的可以去看 Androi...
  • qq_26787115
  • qq_26787115
  • 2016年05月02日 13:19
  • 6114

【Material Design视觉设计语言】UI组件设计(八):列表

作者:郭孝星 微博:郭孝星的新浪微博 邮箱:allenwells@163.com 博客:http://blog.csdn.net/allenwells Github:https://githu...
  • AllenWells
  • AllenWells
  • 2015年08月28日 14:52
  • 1321

Android Material Design(一)史上最全的材料设计控件大全

主要内容: 本文将要介绍Material design和Support library控件,主要包括TextInputLayout、SwitchCompat、SnackBar、Fl...
  • johnny901114
  • johnny901114
  • 2016年07月15日 15:47
  • 16818

Android Material Design 兼容库的使用详解

转自:http://www.jianshu.com/p/1e6eed09d48b 众所周知Material Design(材质设计)是Google在2014年I/O大会上发布的一种新的设...
  • Hknock
  • Hknock
  • 2016年04月25日 17:28
  • 2887

下拉刷新上拉加载控件+Material Design使用

下拉刷新上拉加载控件+Material Design使用人所缺乏的不是才干而是志向,不是成功的能力而是勤劳的意志。 —— 部尔卫Material Design控件使用前几天分享了两篇Material ...
  • tyk9999tyk
  • tyk9999tyk
  • 2017年04月12日 11:15
  • 1661

【Material Design视觉设计语言】UI组件设计(四):表格

作者:郭孝星 微博:郭孝星的新浪微博 邮箱:allenwells@163.com 博客:http://blog.csdn.net/allenwells Github:https://githu...
  • AllenWells
  • AllenWells
  • 2015年08月28日 10:51
  • 2708

Android源码大放送之material design类型

本文转载自:http://www.apkbus.com/android-243232-1-1.html 鉴于大家对源码的渴望,就算自己辛苦一点也要满足大家的需求,查看了几百个源码...
  • cike110120
  • cike110120
  • 2015年06月20日 09:33
  • 11830
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ANDROID L——Material Design详解(UI控件)
举报原因:
原因补充:

(最多只允许输入30个字)