CardView和模糊背景

本章目錄

  • Part One：CardView
  • Part Two：模糊背景

Part One：CardView

從Android5.0開始，Google正式推出了Material Design的設(shè)計(jì)理念，統(tǒng)一了它旗下所有產(chǎn)品的設(shè)計(jì)風(fēng)格。簡(jiǎn)單來說，就是把界面想象成由卡片層疊在一起組成，三要素就是紙，墨和空間，基本概念可以看我之前做過的一篇課件初識(shí)Material Design。圍繞這套理念，Android也推出了一大批新控件，CardView就是其中之一。
顧名思義，CardView可以翻譯為卡片視圖，本質(zhì)上可以看成一個(gè)FrameLayout，用來給控件設(shè)置圓角和陰影，可以大大減少我們給控件設(shè)置shape的操作。
CardView的主要有三個(gè)屬性：

  • cardBackgroundColor：設(shè)置背景顏色
  • cardCornerRadius：設(shè)置圓角弧度
  • cardElevation：陰影大小

需要注意的是，引用這三個(gè)屬性必須使用自定義命名空間，可以將其理解為官方出品的自定義View。CardView還有一些通用屬性，以及為了提高兼容性而設(shè)置的屬性，這里就不再細(xì)說了，一般用不到。
下面將其引入我們的案例

  1. 導(dǎo)包
    在app的build.gradle中添加依賴
    implementation 'com.android.support:cardview-v7:26.1.0'
  1. 給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：模糊背景

使用卡片式布局后，圖片四周會(huì)有一個(gè)白色的留白，如果想讓顏色更豐富一些，可以設(shè)定一個(gè)背景顏色。但是，背景顏色不能太亮，否則會(huì)搶到主照片的視野，所以就要做一些模糊化處理。
模糊化的處理可以調(diào)用網(wǎng)上BitmapUtils工具類來處理，所以用法比較簡(jiǎn)答。

  1. 創(chuàng)建BitmapUtils工具類
    去百度搜索BitmapUtils工具類，里面會(huì)包含很多功能，暫時(shí)我們用不到，只需要其中的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;

    }

}
  1. 添加模糊化背景
    本來想用ImageSwitcher動(dòng)態(tài)獲取每一個(gè)圖片，然后當(dāng)做背景，但是發(fā)現(xiàn)圖片內(nèi)容不一，效果一般般，還是使用固定背景了。
    獲取容器對(duì)象，然后生成一個(gè)Bitmap位圖，調(diào)用工具類將其模糊化，最后生成一個(gè)BitmapDrawable對(duì)象放入到背景中，模糊度可自行調(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));
    }
  1. 微調(diào)
    先前的字體是內(nèi)嵌到圖片上的，由于圖片的顏色不受控制，導(dǎo)致字體的顏色也不好控制。這里可以把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
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,716評(píng)論 25贊 709
  • 內(nèi)容抽屜菜單ListViewWebViewSwitchButton按鈕點(diǎn)贊按鈕進(jìn)度條TabLayout圖標(biāo)下拉刷新...
    皇小弟閱讀 47,133評(píng)論 22贊 665
  • 原文鏈接：https://github.com/opendigg/awesome-github-android-u...
    IM魂影閱讀 33,142評(píng)論 6贊 472
  • 我有一位好友，讀高中時(shí)他原本比我高兩級(jí)，但因沒有考上理想的大學(xué)，外出打工一段時(shí)間后又去另一個(gè)學(xué)校復(fù)讀，我們竟...
    予未名閱讀 302評(píng)論 2贊 1
  • 如果你也剛剛畢業(yè)，如果你也工作一兩年，來看看有沒有我這樣的感覺，成長(zhǎng)是如此的痛苦。 我是一個(gè)工作快一年半的職場(chǎng)人了...
    酸李子閱讀 579評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容