Android 设置阴影效果

最新推荐文章于 2025-04-08 00:15:00 发布

瘋小書

最新推荐文章于 2025-04-08 00:15:00 发布

阅读量2.3k

点赞数 2

1. android api（限制 21 以上）
在layout中设置elevation，使用android:elevation属性。在代码中设置，使用View.setElevation()方法。设置一个View的translation，使用View.setTranslationZ()方法。ViewPropertyAnimator.z()和ViewPropertyAnimator.translationZ()能使你更轻易的推动Views的elevation。

android:elevation="1dp"
2.

（1）可以让美工切张阴影图（但是居中不方便），也可以使用系统自带的，有个叫android:background="@android:drawable/dialog_holo_light_frame”，设置后的效果就是带阴影的效果。

（2）自定义shape.xml drawable文件去给控件设置背景，使用Gradient渐变色属性实现阴影样式

3. paint.setShadowLayer(float radius, float dx, float dy, int shadowColor);
这个方法可以达到这样一个效果，在使用canvas画图时给视图顺带上一层阴影效果。
简单介绍一下这几个参数：
radius: 阴影半径，主要可以控制阴影的模糊效果以及阴影扩散出去的大小。
dx：阴影在X轴方向上的偏移量
dy: 阴影在Y轴方向上的偏移量
shadowColor：阴影颜色。

使用此方式的相关开源项目

https://github.com/cjlemon/Shadow/blob/master/src/main/java/example/chenj/com/shadow/ShadowContainer.java
或
https://github.com/dmytrodanylyk/shadow-layout/blob/master/library/src/main/java/com/dd/ShadowLayout.java

代码如下

package com.dd;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.*;
import android.graphics.drawable.BitmapDrawable;
import android.os.Build;
import android.util.AttributeSet;
import android.widget.FrameLayout;
import com.dd.shadow.layout.R;

public class ShadowLayout extends FrameLayout {

private int mShadowColor; 阴影颜色
private float mShadowRadius; 阴影范围大小
private float mCornerRadius; 阴影圆角光滑度
private float mDx; 阴影偏离原位置x坐标多少
private float mDy; 阴影偏离原位置y坐标多少

private boolean mInvalidateShadowOnSizeChanged = true;
private boolean mForceInvalidateShadow = false;

public ShadowLayout(Context context) {
super(context);
initView(context, null);
}

public ShadowLayout(Context context, AttributeSet attrs) {
super(context, attrs);
initView(context, attrs);
}

public ShadowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView(context, attrs);
}

@Override
protected int getSuggestedMinimumWidth() {
return 0;
}

@Override
protected int getSuggestedMinimumHeight() {
return 0;
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
if(w > 0 && h > 0 && (getBackground() == null || mInvalidateShadowOnSizeChanged || mForceInvalidateShadow)) {
mForceInvalidateShadow = false;
setBackgroundCompat(w, h);
}
}

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
if (mForceInvalidateShadow) {
mForceInvalidateShadow = false;
setBackgroundCompat(right - left, bottom - top);
}
}

public void setInvalidateShadowOnSizeChanged(boolean invalidateShadowOnSizeChanged) {
mInvalidateShadowOnSizeChanged = invalidateShadowOnSizeChanged;
}

public void invalidateShadow() {
mForceInvalidateShadow = true;
requestLayout();
invalidate();
}

private void initView(Context context, AttributeSet attrs) {
initAttributes(context, attrs);
/** x偏离量 **/
int xPadding = (int) (mShadowRadius + Math.abs(mDx));
/** y偏离量 **/
int yPadding = (int) (mShadowRadius + Math.abs(mDy));
setPadding(xPadding, yPadding, xPadding, yPadding);
}

@SuppressWarnings("deprecation")
private void setBackgroundCompat(int w, int h) {
Bitmap bitmap = createShadowBitmap(w, h, mCornerRadius, mShadowRadius, mDx, mDy, mShadowColor, Color.TRANSPARENT);
BitmapDrawable drawable = new BitmapDrawable(getResources(), bitmap);
if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.JELLY_BEAN) {
setBackgroundDrawable(drawable);
} else {
setBackground(drawable);
}
}

private void initAttributes(Context context, AttributeSet attrs) {
TypedArray attr = getTypedArray(context, attrs, R.styleable.ShadowLayout);
if (attr == null) {
return;
}

try {
mCornerRadius = attr.getDimension(R.styleable.ShadowLayout_sl_cornerRadius, getResources().getDimension(R.dimen.default_corner_radius));
mShadowRadius = attr.getDimension(R.styleable.ShadowLayout_sl_shadowRadius, getResources().getDimension(R.dimen.default_shadow_radius));
mDx = attr.getDimension(R.styleable.ShadowLayout_sl_dx, 0);
mDy = attr.getDimension(R.styleable.ShadowLayout_sl_dy, 0);
mShadowColor = attr.getColor(R.styleable.ShadowLayout_sl_shadowColor, getResources().getColor(R.color.default_shadow_color));
} finally {
attr.recycle();
}
}

private TypedArray getTypedArray(Context context, AttributeSet attributeSet, int[] attr) {
return context.obtainStyledAttributes(attributeSet, attr, 0, 0);
}

private Bitmap createShadowBitmap(int shadowWidth, int shadowHeight, float cornerRadius, float shadowRadius,
float dx, float dy, int shadowColor, int fillColor) {

Bitmap output = Bitmap.createBitmap(shadowWidth, shadowHeight, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);

RectF shadowRect = new RectF(
shadowRadius,
shadowRadius,
shadowWidth - shadowRadius,
shadowHeight - shadowRadius);

if (dy > 0) {
shadowRect.top += dy;
shadowRect.bottom -= dy;
} else if (dy < 0) {
shadowRect.top += Math.abs(dy);
shadowRect.bottom -= Math.abs(dy);
}

if (dx > 0) {
shadowRect.left += dx;
shadowRect.right -= dx;
} else if (dx < 0) {
shadowRect.left += Math.abs(dx);
shadowRect.right -= Math.abs(dx);
}

Paint shadowPaint = new Paint();
shadowPaint.setAntiAlias(true);
shadowPaint.setColor(fillColor);
shadowPaint.setStyle(Paint.Style.FILL);

if (!isInEditMode()) {
shadowPaint.setShadowLayer(shadowRadius, dx, dy, shadowColor);
}

canvas.drawRoundRect(shadowRect, cornerRadius, cornerRadius, shadowPaint);

return output;
}

}

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="default_shadow_color">#88757575</color>
<color name="default_fill_color">#ffffff</color>
</resources>

<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="default_corner_radius">4dp</dimen>
<dimen name="default_shadow_radius">4dp</dimen>
</resources>

<resources>

<declare-styleable name="ShadowLayout">
<attr name="sl_cornerRadius" format="dimension"/>
<attr name="sl_shadowRadius" format="dimension"/>
<attr name="sl_shadowColor" format="color"/>
<attr name="sl_dx" format="dimension"/>
<attr name="sl_dy" format="dimension"/>
</declare-styleable>

</resources>

<com.dd.ShadowLayout
android:layout_marginTop="16dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:sl_shadowRadius="4dp"
app:sl_shadowColor="@color/shadow"
app:sl_dx="2dp"
app:sl_dy="2dp"
app:sl_cornerRadius="56dp">

<ImageButton
android:layout_width="56dp"
android:layout_height="56dp"
android:src="@drawable/ic_add_white"
android:background="@drawable/fab_selector"
tools:ignore="ContentDescription"/>

</com.dd.ShadowLayout>

4. 最难受的办法 layer-list 叠加，百度随便copy的

矩形的

<?xmlversion="1.0"encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item>
<shape>
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
<solid android:color="#10CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
<solid android:color="#20CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
<solid android:color="#40CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
<solid android:color="#50CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
<solid android:color="#60CCCCCC" />
</shape>
</item>

<item>
<shape>
<solid android:color="#FFFFFF" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>
原型

<?xmlversion="1.0"encoding="utf-8"?>
<selectorxmlns:android="http://schemas.android.com/apk/res/android">
<itemandroid:state_pressed="true">
<layer-list>

<itemandroid:top="1dp"android:right="1dp">
<layer-list>
<item>
<shape android:shape="oval">
<solid android:color="#08000000"/>
<padding
android:bottom="3px"
android:left="3px"
android:right="3px"
android:top="3px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#09000000"/>
<padding
android:bottom="2px"
android:left="2px"
android:right="2px"
android:top="2px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#10000000"/>
<padding
android:bottom="2px"
android:left="2px"
android:right="2px"
android:top="2px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#11000000"/>
<padding
android:bottom="1px"
android:left="1px"
android:right="1px"
android:top="1px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#12000000"/>
<padding
android:bottom="1px"
android:left="1px"
android:right="1px"
android:top="1px"
/>
               </shape>
               </item>

               <item>
               <shape android:shape="oval">
               <solid android:color="#13000000"/>
               <padding
               android:bottom="1px"
               android:left="1px"
               android:right="1px"
               android:top="1px"
               />
               </shape>
               </item>

               <item>
               <shape android:shape="oval">
               <solid android:color="#14000000"/>
               <padding
               android:bottom="1px"
               android:left="1px"
               android:right="1px"
               android:top="1px"
               />
               </shape>
               </item>

               <item>
               <shape android:shape="oval">
               <solid android:color="#15000000"/>
               <padding
               android:bottom="1px"
               android:left="1px"
               android:right="1px"
               android:top="1px"
               />
               </shape>
               </item>

               <item>
               <shape android:shape="oval">
               <solid android:color="#16000000"/>
               <padding
               android:bottom="1px"
               android:left="1px"
               android:right="1px"
               android:top="1px"
               />
               </shape>
               </item>
               </layer-list>
               </item>

               
               <item>
               <shape android:shape="oval">
               <solid android:color="#90CAF9"/>
               </shape>
               </item>
               </layer-list>
               </item>

               <item android:state_enabled="true">
               <layer-list>
               
               <item android:top="2dp"android:right="1dp">
               <layer-list>
               <item>

               <shape android:shape="oval">
               <solid android:color="#08000000"/>
               <padding
               android:bottom="4px"
               android:left="4px"
               android:right="4px"
               android:top="4px"
               />
               </shape>
               </item>

               <item>
               <shape android:shape="oval">
               <solid android:color="#09000000"/>
               <padding
               android:bottom="2px"
               android:left="2px"
               android:right="2px"
               android:top="2px"
               />
               </shape>
               </item>

               <item>
               <shape android:shape="oval">
               <solid android:color="#10000000"/>
               <padding
               android:bottom="2px"
               android:left="2px"
               android:right="2px"
               android:top="2px"
               />
               </shape>
               </item>

               <item>
               <shape android:shape="oval">
               <solid android:color="#11000000"/>
               <padding
               android:bottom="1px"
               android:left="1px"
               android:right="1px"
               android:top="1px"
               />
               </shape>
               </item>

               <item>
               <shape android:shape="oval">
               <solid android:color="#12000000"/>
               <padding
               android:bottom="1px"
               android:left="1px"
               android:right="1px"
               android:top="1px"
               />
               </shape>
               </item>

               <item>
               <shape android:shape="oval">
               <solid android:color="#13000000"/>
               <padding
               android:bottom="1px"
               android:left="1px"
               android:right="1px"
               android:top="1px"
               />
               </shape>
               </item>

               <item>
               <shape android:shape="oval">
               <solid android:color="#14000000"/>
               <padding
               android:bottom="1px"
               android:left="1px"
               android:right="1px"
               android:top="1px"
               />
               </shape>
               </item>
               <item>
               <shape android:shape="oval">
               <solid android:color="#15000000"/>
               <padding
               android:bottom="1px"
               android:left="1px"
               android:right="1px"
               android:top="1px"
               />
               </shape>
               </item>

               <item>
               <shape android:shape="oval">
               <solid android:color="#16000000"/>
               <padding
               android:bottom="1px"
               android:left="1px"
               android:right="1px"
               android:top="1px"
               />
               </shape>
               </item>
               </layer-list>
               </item>

               
               <item>
               <shape android:shape="oval">
               <solid android:color="#03A9F4"/>
               </shape>

               </item>
               </layer-list>
               </item>
               </selector>

4：

使用CardView

<android.support.v7.widget.CardView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
app:cardCornerRadius="4dp"
app:cardElevation="4dp"
>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="CardView"
android:gravity="center"
android:background="#fff"
/>
</android.support.v7.widget.CardView>

转载至：https://blog.youkuaiyun.com/kongbaidepao/article/details/86484103