当前位置：首页 > news >正文

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

news 2025/8/18 0:59:36

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

2.界面xml源码

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"><data><import type="android.text.TextUtils" /><variablename="appCardEntity"type="cn.com.westone.cxjr.cxsdk.model.AppCardEntity" /><variablename="adapter"type="cn.com.westone.cx.platform.fragment.sub.card.AppCardListDataType.AppCardListDataTypeAdapter" /></data><LinearLayoutandroid: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"><LinearLayoutandroid:id="@+id/ll_title"android:layout_width="match_parent"android:layout_height="32dp"android:gravity="center_vertical"android:orientation="horizontal"><ImageViewandroid: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.CXScaleTextViewandroid: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" /><ImageViewandroid: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.NonScrollListViewandroid: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.实现效果图