/**
* 作者：Pich
* 原文鏈接：http://me.woblog.cn/
* QQ群：129961195
* 微信公眾號(hào)：woblog
* Github：https://github.com/lifengsofts
*/
詳解RecyclerView系列文章目錄
概述
?卡片的效果現(xiàn)在的應(yīng)用還是很常見的矫夯，特別是新聞應(yīng)用，很適合用這類的布局吊洼，先來一張效果圖：
同時(shí)實(shí)現(xiàn)這一的效果也很簡(jiǎn)單训貌，只需要使用Google提供的CardView。
Item布局
在RecyclerView的item中寫入CardView冒窍，它相當(dāng)于一個(gè)FrameLayout递沪，因此我們需要將他包裹到最外層。
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view_four"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/activity_horizontal_margin"
android:layout_marginLeft="@dimen/activity_horizontal_margin"
android:layout_marginRight="@dimen/activity_horizontal_margin"
android:layout_gravity="center"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackgroundBorderless"
app:cardCornerRadius="@dimen/activity_horizontal_margin"
app:cardElevation="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="@+id/iv"
android:layout_width="match_parent"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:src="@mipmap/ic_launcher" />
<TextView
android:id="@+id/tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="這是一段測(cè)試文本這是一段測(cè)試文本這是一段測(cè)試文本這是一段測(cè)試文本這是一段測(cè)試文本這是一段測(cè)試文本這是一段測(cè)試文本這是一段測(cè)試文本這是一段測(cè)試文本這是一段測(cè)試文本這是一段測(cè)試文本" />
</LinearLayout>
</android.support.v7.widget.CardView>
這里使用了幾個(gè)常用的屬性：
foreground：設(shè)置了他在Api21以后就有水波效果
cardCornerRadius：圓角的半徑
cardElevation：陰影的大小
其他的屬性我們?cè)诜治鯟ardView的源碼的時(shí)候詳細(xì)講解综液。
接下來就很簡(jiǎn)單了款慨，使用我們前面說的方法顯示這個(gè)Item就有上面的效果了。
自動(dòng)計(jì)算Item高度(可選)
可以發(fā)現(xiàn)上面的Item中的圖片是寫死的谬莹，其他我們是可以動(dòng)態(tài)計(jì)算出來的檩奠，讓每個(gè)圖片都最大顯示，這樣美觀點(diǎn)附帽，關(guān)鍵點(diǎn)就是在bindData方法中：
//如果有高度埠戳，就直接取出來不用再計(jì)算了
final Integer height = heights[position];
if (height == 0) {
//沒有高度，需要計(jì)算
Glide.with(CardViewActivity.this).load(d).diskCacheStrategy(DiskCacheStrategy.ALL)
.into(new SimpleTarget<GlideDrawable>() {
@Override
public void onResourceReady(GlideDrawable resource,
GlideAnimation<? super GlideDrawable> glideAnimation) {
Log.d("TAG", iv.getWidth() + "," + resource.getIntrinsicWidth());
//計(jì)算ImageView的高度
int imageWidth = resource.getIntrinsicWidth();
int imageHeight = resource.getIntrinsicHeight();
int imageViewWidth = iv.getWidth();
double scale = imageWidth * 1.0 / imageViewWidth;
LayoutParams layoutParams = iv.getLayoutParams();
int h = (int) (imageHeight / scale);
layoutParams.height = h;
iv.setLayoutParams(layoutParams);
iv.setImageDrawable(resource);
heights[position]=h;
}
});
} else {
//已經(jīng)計(jì)算了士葫，直接拿出來用
LayoutParams layoutParams = iv.getLayoutParams();
layoutParams.height = height;
iv.setLayoutParams(layoutParams);
Glide.with(CardViewActivity.this).load(d).diskCacheStrategy(DiskCacheStrategy.ALL)
.into(iv);
}
這樣就出現(xiàn)了這樣的效果
這個(gè)計(jì)算方法也可以用到前面我們講的瀑布流效果中乞而，這樣就可以解決Item不會(huì)到處跳動(dòng)了。
