Demo效果:
該Demo應用了之前的文章:<二>Material主題的使用 <三>定義陰影與裁剪視圖
分析
1>主題設置:
<!-- Base application theme. -->
<style name="AppTheme" parent= "Theme.AppCompat.Light.DarkActionBar" >
<!-- Customize your theme here. -->
<item name= "colorPrimary"> #ec584e </item>
<item name= "colorPrimaryDark" >#ec584e </item>
<item name= "colorAccent" >@color/colorAccent </item>
</style>
2>RecycleView:採用系統提供的StaggeredGridLayoutManager即可實現效果中的不規則排列的item效果。
StaggeredGridLayoutManager mLayoutManager = new StaggeredGridLayoutManager( 2 , StaggeredGridLayoutManager. VERTICAL ); //兩列,縱向排列
mRecyclerView.setLayoutManager(mLayoutManager) ;
3>Item項使用了CardView, 內部包含一個經過自定義的ImageView和TextView。代碼如下:
<? xml version= "1.0" encoding= "utf-8" ?>
<android.support.v7.widget.CardView xmlns: android= "http://schemas.android.com/apk/res/android"
xmlns: card_view ="http://schemas.android.com/apk/res-auto"
android :id= "@+id/my_text_view"
android :layout_width= "match_parent"
android :layout_height= "wrap_content"
card_view :cardUseCompatPadding= "true"
>
<LinearLayout
android :layout_width= "match_parent"
android :layout_height= "wrap_content"
android :orientation= "vertical">
<com.example.wiky.materialdesigndemo1.view.DynamicHeightImageView
android :id= "@+id/image"
android :background= "#000000"
android :layout_width= "match_parent"
android :layout_height= "wrap_content"
android :scaleType= "fitXY"
/>
<TextView
android :id= "@+id/tv_userName"
android :layout_width= "match_parent"
android :layout_height= "30dp"
android :gravity= "center"
android :textColor= "#000000"/>
</LinearLayout>
</android.support.v7.widget.CardView>
4>因爲本例中需要使每個ImageView都能展示一張完整的圖片,即在寬度固定的情況下,我們需要自己動態的設置ImageView的高度,使ImageView的寬高比與圖片的一致,才能夠完整的顯示縮放後的圖片且避免變形。所以這裏對ImageView進行自定義處DynamicHeightImageView。代碼:
package com.example.wiky.materialdesigndemo1.view ;
import android.content.Context ;
import android.graphics.Bitmap ;
import android.graphics.BitmapFactory ;
import android.util.AttributeSet ;
import android.widget.ImageView ;
/**
* 動態高度的ImageView
* Created by wiky on 3/4/15.
*/
public class DynamicHeightImageView extends ImageView {
/**
* 圖片高寬比(高/寬)
*/
private double hwRatio ;
public DynamicHeightImageView(Context context , AttributeSet attrs) {
super(context , attrs);
}
public DynamicHeightImageView(Context context) {
super(context) ;
}
@Override
protected void onMeasure (int widthMeasureSpec , int heightMeasureSpec)
{
//獲取當前ImageView分配的寬度(即Item項的寬度)
int widthSize = MeasureSpec. getSize(widthMeasureSpec) ;
if (widthSize!=0 && hwRatio != 0 )
{
//根據高寬比,計算出ImagView需要的高度widthSize* hwRatio,並設置其大小
setMeasuredDimension(widthSize , ( int )(widthSize* hwRatio ));
}
else{
super .onMeasure(widthMeasureSpec, heightMeasureSpec) ;
}
}
@Override
public void setImageResource (int resId) {
super.setImageResource(resId) ;
//獲取圖片的高寬比(高/寬)
BitmapFactory.Options options = new BitmapFactory.Options() ;
options.inJustDecodeBounds = true;
Bitmap bmp = BitmapFactory.decodeResource(getResources() , resId, options) ;
hwRatio = options. outHeight /(double )options. outWidth;
bmp.recycle();
}
}
<補充>方法二:不需要自定義的ImageView,可以使用android:adjustViewBounds=”true”,即調整ImageView的界限來保持圖像縱橫比不變(寬、高其中一個是確定值,另一個根據寬高比調整)。android:adjustViewBounds=”true”,會將這個ImageView的scaleType設爲fitCenter,不過可被覆蓋。這裏建議用fitXY(可避免計算上的誤差導致圖片未能鋪滿ImageView)