CardView和模糊背景

2017-11-30 本文已影响0人黄烨1121

本章目录

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

CardView和模糊背景

本章目录

Part One：CardView

Part Two：模糊背景

猜你喜欢

热点阅读