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图的工具
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.实现效果图