本章目錄
- Part One：CardView
- Part Two：模糊背景
Part One：CardView
從Android5.0開始灯萍，Google正式推出了Material Design的設(shè)計理念示启，統(tǒng)一了它旗下所有產(chǎn)品的設(shè)計風格。簡單來說乔妈，就是把界面想象成由卡片層疊在一起組成，三要素就是紙汗侵，墨和空間匾南，基本概念可以看我之前做過的一篇課件初識Material Design。圍繞這套理念馏锡，Android也推出了一大批新控件，CardView就是其中之一伟端。
顧名思義杯道，CardView可以翻譯為卡片視圖，本質(zhì)上可以看成一個FrameLayout，用來給控件設(shè)置圓角和陰影党巾，可以大大減少我們給控件設(shè)置shape的操作萎庭。
CardView的主要有三個屬性：
- cardBackgroundColor：設(shè)置背景顏色
- cardCornerRadius：設(shè)置圓角弧度
- cardElevation：陰影大小
需要注意的是，引用這三個屬性必須使用自定義命名空間齿拂，可以將其理解為官方出品的自定義View驳规。CardView還有一些通用屬性，以及為了提高兼容性而設(shè)置的屬性署海，這里就不再細說了吗购，一般用不到。
下面將其引入我們的案例
- 導包
在app的build.gradle中添加依賴
implementation 'com.android.support:cardview-v7:26.1.0'
- 給RecyclerView的條目配置CardView
在item布局中砸狞，將先前的布局用CardView包裹捻勉，并添加自定義命名空間
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="24dp"
app:cardCornerRadius="10dp"
app:cardElevation="8dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/imageView_item_photo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:contentDescription="@null" />
<TextView
android:id="@+id/textView_item_photo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="48dp"
android:gravity="center_horizontal"
android:textColor="@android:color/white" />
</RelativeLayout>
</android.support.v7.widget.CardView>
最終的效果為：
CardView.png
Part Two：模糊背景
使用卡片式布局后，圖片四周會有一個白色的留白刀森，如果想讓顏色更豐富一些踱启，可以設(shè)定一個背景顏色。但是研底，背景顏色不能太亮埠偿，否則會搶到主照片的視野，所以就要做一些模糊化處理榜晦。
模糊化的處理可以調(diào)用網(wǎng)上BitmapUtils工具類來處理冠蒋，所以用法比較簡答。
- 創(chuàng)建BitmapUtils工具類
去百度搜索BitmapUtils工具類芽隆，里面會包含很多功能浊服，暫時我們用不到，只需要其中的blurBitmap方法而已胚吁。
package com.terana.mycustomview.tools;
import android.annotation.SuppressLint;
import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Bitmap;
import android.os.Build;
import android.renderscript.Allocation;
import android.renderscript.Element;
import android.renderscript.RenderScript;
import android.renderscript.ScriptIntrinsicBlur;
public class BitmapUtils {
/**
* TODO<圖片模糊化處理>
*
* @param bitmap 源圖片
* @param radius The radius of the blur Supported range 0 < radius <= 25
* @param context 上下文
* @return Bitmap
* @throw
*/
@TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR1)
@SuppressLint("NewApi")
public static Bitmap blurBitmap(Bitmap bitmap, float radius, Context context) {
// Let's create an empty bitmap with the same size of the bitmap we want
// to blur
Bitmap outBitmap = Bitmap.createBitmap(bitmap.getWidth(),
bitmap.getHeight(), Bitmap.Config.ARGB_8888);
// Instantiate a new Renderscript
RenderScript rs = RenderScript.create(context);
// Create an Intrinsic Blur Script using the Renderscript
ScriptIntrinsicBlur blurScript = ScriptIntrinsicBlur.create(rs,
Element.U8_4(rs));
// Create the Allocations (in/out) with the Renderscript and the in/out
// bitmaps
Allocation allIn = Allocation.createFromBitmap(rs, bitmap);
Allocation allOut = Allocation.createFromBitmap(rs, outBitmap);
// Set the radius of the blur
if (radius > 25) {
radius = 25.0f;
} else if (radius <= 0) {
radius = 1.0f;
}
blurScript.setRadius(radius);
// Perform the Renderscript
blurScript.setInput(allIn);
blurScript.forEach(allOut);
// Copy the final bitmap created by the out Allocation to the outBitmap
allOut.copyTo(outBitmap);
// recycle the original bitmap
bitmap.recycle();
bitmap = null;
// After finishing everything, we destroy the Renderscript.
rs.destroy();
return outBitmap;
}
}
- 添加模糊化背景
本來想用ImageSwitcher動態(tài)獲取每一個圖片牙躺，然后當做背景，但是發(fā)現(xiàn)圖片內(nèi)容不一腕扶，效果一般般孽拷，還是使用固定背景了。
獲取容器對象半抱，然后生成一個Bitmap位圖脓恕，調(diào)用工具類將其模糊化，最后生成一個BitmapDrawable對象放入到背景中窿侈，模糊度可自行調(diào)節(jié)炼幔。
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
removeStatusBar();
setContentView(R.layout.activity_gallery);
initViews();
initRecyclerView();
}
private void initViews() {
RelativeLayout container = findViewById(R.id.relativeLayout_gallery);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.itembackground);
bitmap = BitmapUtils.blurBitmap(bitmap, 25, this);
container.setBackground(new BitmapDrawable(getResources(), bitmap));
}
- 微調(diào)
先前的字體是內(nèi)嵌到圖片上的，由于圖片的顏色不受控制史简，導致字體的顏色也不好控制乃秀。這里可以把TextView的位置挪到圖片的下方，然后讓背景透明，直接使用寫到模糊背景上跺讯。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:layout_marginTop="24dp"
android:layout_marginBottom="40dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="10dp"
app:cardElevation="8dp"
android:layout_above="@+id/textView_item_photo"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginBottom="8dp">
<ImageView
android:id="@+id/imageView_item_photo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="@null" />
</android.support.v7.widget.CardView>
<TextView
android:id="@+id/textView_item_photo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#00000000"
android:gravity="center_horizontal"
android:textColor="@android:color/white" />
</RelativeLayout>
最后的結(jié)果為
模糊背景.png
