Material Designer的低版本兼容實現（十四）—— CardView

　　今天說的又是一個5.0中才有的新控件——CardView（卡片視圖）。這個東東其實我們早就見過了，無論是微博還是人人客戶端，它都有出現。通常我們都是通過自定義一個背景圖片，然后通過給layout進行設置背景樣式來實現這個卡片視圖。雖然現在5.0和第三方庫都有了這個view，但是我還是很建議去自定義這個view，為啥？能在編譯器中直觀的看到效果，而且可定制度好。最重要的是自己做也不難，引入第三方庫反而會增大應用的體積。總之，本篇主要講解的還是如何使用開源庫和supportV7中的cardView。

 

一、通過開源庫來引入CardView

　　在我寫這篇文章的時候，這個開源庫對於CardView沒有做什么自定義的屬性設置，也就能設置個背景色和大小。至於今后會不會有更多的屬性加入呢？我感覺不太可能。這個開源庫的思路就是用java和drawable進行結合產生view，這個drawable又是用圖片來做的，當然沒有用代碼寫的那么靈活了，如果要增加很多屬性，只有一種辦法：讓作者對工程進行大刀闊斧的修改，改變自定義view的思路。

1.1 添加lib支持

首先還是下載lib，然后添加支持，並且寫好命名空間。

https://github.com/navasmdc/MaterialDesignLibrary

添加lib支持后我們就可以用這個控件了，放入布局文件前還是要寫命名空間的。

xmlns:app="http://schemas.android.com/apk/res-auto"

　　　　<com.gc.materialdesign.views.Card
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal" />

 

如果沒設定背景，那么在編輯器中是看不到大體的效果的，所以還是推薦設置個背景色，比較直觀。右圖是實際的效果

 

1.2 在布局文件中設置大小和背景色

android:layout_width="100dp"　　因為CardView繼承自RelativeLayout所以直接設定控件寬高就可以啦
android:layout_height="100dp"

<com.gc.materialdesign.views.Card
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_gravity="center_horizontal"
                android:background="#ff0000" />

 

 android:background="@color/blue" 　　設置背景色，默認是白色

<TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="背景=#ff0000" />

            <com.gc.materialdesign.views.Card
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_gravity="center_horizontal"
                android:background="#ff0000" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="背景=@color/blue" />

            <com.gc.materialdesign.views.Card
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_gravity="center_horizontal"
                android:background="@color/blue" />

 

1.3 通過代碼進行設置背景色

因為CardView繼承自relativeLayout，所以父類的設置內邊界等屬性都是可以用的~

package com.example.hhh;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;

import com.gc.materialdesign.views.Card;

public class CardTest extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.card);
        
        Card card01 = (Card)findViewById(R.id.card01);
        card01.setBackgroundColor(0xffff0000);
        
        Card card02 = (Card)findViewById(R.id.card02);
        card02.setBackgroundColor(getResources().getColor(R.color.orange));
    }
}

 

二、用google的SupportV7包中的cardView

這個CardView是google提供的，可以定制的東西就比較多啦

2.1 屬性解釋：

<resources>
    <declare-styleable name="CardView">
        <!-- Background color for CardView. -->
        <!-- 背景色 -->
        <attr name="cardBackgroundColor" format="color" />
        <!-- Corner radius for CardView. -->
        <!-- 邊緣弧度數 -->
        <attr name="cardCornerRadius" format="dimension" />
        <!-- Elevation for CardView. -->
        <!-- 高度 -->
        <attr name="cardElevation" format="dimension" />
        <!-- Maximum Elevation for CardView. -->
        <!-- 最大高度 -->
        <attr name="cardMaxElevation" format="dimension" />
        <!-- Add padding in API v21+ as well to have the same measurements with previous versions. -->
        <!-- 設置內邊距，v21+的版本和之前的版本仍舊具有一樣的計算方式 -->
        <attr name="cardUseCompatPadding" format="boolean" />
        <!-- Add padding to CardView on v20 and before to prevent intersections between the Card content and rounded corners. -->
        <!-- 在v20和之前的版本中添加內邊距，這個屬性是為了防止卡片內容和邊角的重疊 -->
        <attr name="cardPreventCornerOverlap" format="boolean" />
        <!-- 下面是卡片邊界距離內部的距離-->
        <!-- Inner padding between the edges of the Card and children of the CardView. -->
        <attr name="contentPadding" format="dimension" />
        <!-- Inner padding between the left edge of the Card and children of the CardView. -->
        <attr name="contentPaddingLeft" format="dimension" />
        <!-- Inner padding between the right edge of the Card and children of the CardView. -->
        <attr name="contentPaddingRight" format="dimension" />
        <!-- Inner padding between the top edge of the Card and children of the CardView. -->
        <attr name="contentPaddingTop" format="dimension" />
        <!-- Inner padding between the bottom edge of the Card and children of the CardView. -->
        <attr name="contentPaddingBottom" format="dimension" />
    </declare-styleable>
</resources>

 

2.2 小例子：

    <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        app:cardBackgroundColor="#ff0000"
        app:cardCornerRadius="10dp"
        app:cardElevation="1dp"
        app:cardMaxElevation="10dp"
        app:cardPreventCornerOverlap="true"
        app:cardUseCompatPadding="true" >
    </android.support.v7.widget.CardView>

 

具體使用方式請參考我之前的一篇文章，其實用起來也相當簡單了。

Android5.0新控件CardView的介紹和使用：http://www.cnblogs.com/tianzhijiexian/p/4067308.html