Android:Material Design(四) UI控件

最新推荐文章于 2022-08-11 22:44:32 发布

BAOLIANG196

最新推荐文章于 2022-08-11 22:44:32 发布

阅读量1k

点赞数 1

分类专栏： Android 文章标签： android

本文链接：https://blog.csdn.net/wangyanguiyiyang/article/details/48932825

版权

Android 专栏收录该内容

95 篇文章 0 订阅

订阅专栏

Android:Material Design(一) 概述
 Android:Material Design(二) Material主题
 Android:Material Design(三) 动画
 Android:Material Design(四) UI控件
 Android:Material Design(五) 视图和阴影
 Android:Material Design(六) 使用Drawable
Android:Material Design(七) 兼容性

本文主要介绍Android L新增加的两个UI控件RecyclerView，CardView的导入和使用。

导入依赖包

这两个组件是在最新的support v7包(version 21)中提供的。因此需要引入依赖包：

dependencies {
    compile 'com.android.support:cardview-v7:+'
    compile 'com.android.support:recyclerview-v7:+'
}

RecyclerView介绍

RecyclerView：大家都知道ListView在我们开发中很常用，Android5.0的到来，它给我们带来了一个替代ListView的新的控件，也可以说是ListView的升级版，那就是RecyclerView。它提供了更好的性能而且更容易使用。该控件是一个可以装载大量的视图集合，并且可以非常效率的进行回收和滚动。当你list中的元素经常动态改变时可以使用RecyclerView控件。
1、为每个条目位置提供了layout管理器（RecyclerView.setLayoutManager）
使用RecyclerView组件，你需要指定一个Adapter和布局管理器，创建一个Adapter继承RecyclerView.Adapter类，具体的实现细节要根据数据集合视图的类型变化，具体信息，看下面的例子。
一个布局管理器定位Item视图在RecyclerView中，决定什么时候去回收它当他不再可见时。当重用（或者回收）一个视图时，布局管理器可能会请求适配器（Adapter）去替换子视图中的内容用不同的内容。通过这种方式回收重用视图，可以减少view的创建和避免更多的findViewById()，从而提高性能。
RecyclerView提供了以下内建的布局管理器：
LinearLayoutManager 显示Item 在一个水平或者垂直的滚动列表中。
GridLayoutManager 显示Item 作为网格布局。
StaggeredGridLayoutManager 显示Item在交错的网格布局。
也可以自己通过继承RecyclerView.LayoutManager类创建自定义的布局管理器。
这里写图片描述

2、为每个条目设置了操作动画（RecyclerView.setItemAnimator）
RecyclerView默认情况下就有动画，在删除或者增加Ite的时候。如果需要自定义动画，继承RecyclerView.ItemAnimator类，并且使用RecyclerView.setItemAnimator()方法将定义的动画设置到我们的视图中。

CardView介绍

CardView继承FrameLayout类，通过它可以显示信息在卡片内部，并且在不同的平台上有统一的样式。CardView组件可以有阴影和圆角。
创建有阴影的Card,使用card_view:cardElevation属性。CardView 使用真实的高度和动态阴影在Android5.0(API 21)和更高版本，较早的版本则使用传统的阴影。
使用这些属性去定制CardView的外观：

card_view:cardElevation属性创建有阴影的Card
card_view:cardCornerRadius属性设置圆角的半径，在布局文件中
card_view:cardBackgroundColor属性设置卡片的背景颜色
card_view:cardCornerRadius属性设置外围的圆角大小
CardView.setRadius方法设置圆角的半径在java代码中

RecyclerView创建

XML布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    tools:context=".MainActivity"  
    >  
    <android.support.v7.widget.RecyclerView  
        android:id="@+id/recycler_view"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        android:scrollbars="vertical"  
        tools:listitem="@layout/list_basic_item"  
        />  

</RelativeLayout>

Activity代码

public class MyActivity extends Activity {  
    private RecyclerView mRecyclerView;  
    private RecyclerView.Adapter mAdapter;  
    private RecyclerView.LayoutManager mLayoutManager;  

    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.my_activity);  
        mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);    
        mRecyclerView.setHasFixedSize(true); //使用固定size 以优化性能    
        // use a linear layout manager  
        mLayoutManager = new LinearLayoutManager(this);  
        mRecyclerView.setLayoutManager(mLayoutManager);    
        // specify an adapter (see also next example)  
        mAdapter = new MyAdapter(myDataset);  
        mRecyclerView.setAdapter(mAdapter);  
    }  
}

Adapter代码

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
    List<Actor> actors = new ArrayList<Actor>();
    private Context context;
    public MyAdapter(Context context, List<Actor> actors) {
        this.context = context;
        this.actors = actors;
    }
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v= LayoutInflater.from(context).inflate(R.layout.card_view,parent,false);
        return new ViewHolder(v);
    }
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
// 给ViewHolder设置元素
        Actor p = actors.get(position);
        holder.mTextView.setText(p.name);        holder.mImageView.setImageDrawable(context.getDrawable(p.getImageResourceId(context)));
    }
    @Override
    public int getItemCount() {
        // 返回数据总数
        return actors == null ? 0 : actors.size();
    }
    // 重写的自定义ViewHolder
    public static class ViewHolder
            extends RecyclerView.ViewHolder {
        public TextView mTextView;
        public ImageView mImageView;
        public ViewHolder(View v) {
            super(v);
            mTextView = (TextView) v.findViewById(R.id.name);
            mImageView = (ImageView) v.findViewById(R.id.pic);
        }
    }
}

CardView创建

XML布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    ... >
    <!-- A CardView that contains a TextView -->
    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="center"
        android:layout_width="200dp"
        android:layout_height="200dp"
        card_view:cardCornerRadius="4dp">
        <TextView
            android:id="@+id/info_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </android.support.v7.widget.CardView>
</LinearLayout>