Android:Material Design(四) UI控件

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 ?  : 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>
           

效果圖

RecyclerView_CardView源代碼下載下傳

參考

http://www.open-open.com/lib/view/open1416664070023.html

http://blog.isming.me/2014/10/21/creating-app-with-material-design-two-list/

http://www.devstore.cn/new/newInfo/868.html

http://blog.csdn.net/jjwwmlp456/article/details/46775489

http://blog.csdn.net/ljx19900116/article/details/41806881