/**
 * 作者：Pich
 * 原文鏈接：http://me.woblog.cn/
 * QQ群：129961195
 * 微信公眾號(hào)：woblog
 * Github：https://github.com/lifengsofts
 */

詳解RecyclerView系列文章目錄

概述

?卡片的效果現(xiàn)在的應(yīng)用還是很常見(jiàn)的，特別是新聞應(yīng)用，很適合用這類(lèi)的布局，先來(lái)一張效果圖：

同時(shí)實(shí)現(xiàn)這一的效果也很簡(jiǎn)單，只需要使用Google提供的CardView。

Item布局

在RecyclerView的item中寫(xiě)入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ì)講解。

接下來(lái)就很簡(jiǎn)單了，使用我們前面說(shuō)的方法顯示這個(gè)Item就有上面的效果了。

自動(dòng)計(jì)算Item高度(可選)

可以發(fā)現(xiàn)上面的Item中的圖片是寫(xiě)死的，其他我們是可以動(dòng)態(tài)計(jì)算出來(lái)的，讓每個(gè)圖片都最大顯示，這樣美觀點(diǎn)，關(guān)鍵點(diǎn)就是在bindData方法中：

//如果有高度，就直接取出來(lái)不用再計(jì)算了
final Integer height = heights[position];
if (height == 0) {
  //沒(méi)有高度，需要計(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ì)算了，直接拿出來(lái)用
  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)了。