安卓使用.9图实现阴影效果box-shadow: 0 2px 6px 1px rgba(0,0,0,0.08);

1.安卓实现阴影效果有很多种,一般UX设计会给以H5参数box-shadow: 0 2px 6px 1px rgba(0,0,0,0.08);这种方式提供背景阴影效果,这里记录一下实现过程

2.界面xml源码

XML 复制代码
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <data>

        <import type="android.text.TextUtils" />

        <variable
            name="appCardEntity"
            type="cn.com.westone.cxjr.cxsdk.model.AppCardEntity" />

        <variable
            name="adapter"
            type="cn.com.westone.cx.platform.fragment.sub.card.AppCardListDataType.AppCardListDataTypeAdapter" />


    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/app_card_shadow_bg" //带阴影边框的透明背景图
        android:minHeight="144dp"
        android:orientation="vertical"
        android:paddingHorizontal="16dp"
        android:paddingVertical="8dp">

        <LinearLayout
            android:id="@+id/ll_title"
            android:layout_width="match_parent"
            android:layout_height="32dp"
            android:gravity="center_vertical"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/iv_icon"
                android:layout_width="16dp"
                android:layout_height="16dp"
                android:padding="2dp"
                android:src="@drawable/ic_placeholder" />

            <com.westone.cx.commonsdk.uikit.scaleView.CXScaleTextView
                android:id="@+id/tv_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:gravity="center_horizontal"
                android:maxWidth="200dp"
                android:maxLines="1"
                android:text="@{TextUtils.isEmpty(appCardEntity.cardTitle)?appCardEntity.appName:appCardEntity.cardTitle}"
                android:textColor="@color/cx_first_level_text_color"
                android:textSize="@dimen/store_font_12" />

            <ImageView
                android:layout_width="16dp"
                android:layout_height="16dp"
                android:background="@drawable/arrow_right_icon"
                android:padding="2dp" />
        </LinearLayout>

        <cn.com.westone.cx.platform.fragment.sub.component.NonScrollListView
            android:id="@+id/lv_data"
            adapter="@{adapter}"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:divider="#00000000" />
    </LinearLayout>
</layout>

2.浅色模式和深色模式分别使用不同的rgba值做阴影颜色

PS:奉送一个大神提供的在线制作.9图的工具

Android Shadow Generator

2.1深色模式 app_card_shadow.9.png阴影参数 box-shadow: 0 2px 6px 1px rgba(26,26,26,0.29);

工具类参数:x:0 y:2 blur:6 round:8 rgba(26,26,26,0.29);

2.2浅色模式 app_card_shadow.9.png阴影参数 box-shadow: 0 2px 6px 1px rgba(250,250,250,0.29);

工具类参数:x:0 y:2 blur:6 round:8 rgba(250,250,250,0.29);

3.实现效果图

相关推荐
优选资源分享9 分钟前
GKD v1.11.6 | 安卓开屏广告跳过工具 可用版
android
robotx26 分钟前
安卓zygote启动相关
android
Mac的实验室1 小时前
2026年最新真实社交怎么注册?手把手教你如何成功注册Truth Social账号
android
毕设源码-郭学长2 小时前
【开题答辩全过程】以 基于Android的点餐APP的设计为例,包含答辩的问题和答案
android
polaris06302 小时前
学生成绩管理系统(MySQL)
android·数据库·mysql
__Yvan2 小时前
Kotlin 的 ?.let{} ?: run{} 真的等价于 if-else 吗?
android·开发语言·前端·kotlin
tangweiguo030519873 小时前
Android WorkManager 完整实战教程(含完整文件)
android·kotlin
loitawu3 小时前
Rockchip Android16 系统裁剪指南
android·android16·android裁剪·系统裁剪·rockchip app
小羊子说4 小时前
关于车机中的升级流程小结(SOC、MCU、4G升级流程)
android·adb·性能优化·车载系统
肖。35487870944 小时前
[技巧-11]AndroidManifest.xml完善小技巧。
android