本章目录
- Part One：CardView
- Part Two：模糊背景
Part One：CardView
从Android5.0开始，Google正式推出了Material Design的设计理念，统一了它旗下所有产品的设计风格。简单来说，就是把界面想象成由卡片层叠在一起组成，三要素就是纸，墨和空间，基本概念可以看我之前做过的一篇课件初识Material Design。围绕这套理念，Android也推出了一大批新控件，CardView就是其中之一。
顾名思义，CardView可以翻译为卡片视图，本质上可以看成一个FrameLayout，用来给控件设置圆角和阴影，可以大大减少我们给控件设置shape的操作。
CardView的主要有三个属性：
- cardBackgroundColor：设置背景颜色
- cardCornerRadius：设置圆角弧度
- cardElevation：阴影大小
需要注意的是，引用这三个属性必须使用自定义命名空间，可以将其理解为官方出品的自定义View。CardView还有一些通用属性，以及为了提高兼容性而设置的属性，这里就不再细说了，一般用不到。
下面将其引入我们的案例
- 导包
在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：模糊背景
使用卡片式布局后，图片四周会有一个白色的留白，如果想让颜色更丰富一些，可以设定一个背景颜色。但是，背景颜色不能太亮，否则会抢到主照片的视野，所以就要做一些模糊化处理。
模糊化的处理可以调用网上BitmapUtils工具类来处理，所以用法比较简答。
- 创建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动态获取每一个图片，然后当做背景，但是发现图片内容不一，效果一般般，还是使用固定背景了。
获取容器对象，然后生成一个Bitmap位图，调用工具类将其模糊化，最后生成一个BitmapDrawable对象放入到背景中，模糊度可自行调节。
@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));
}
- 微调
先前的字体是内嵌到图片上的，由于图片的颜色不受控制，导致字体的颜色也不好控制。这里可以把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>
最后的结果为
模糊背景.png
网友评论