Android自定义带有阴影效果的按钮Demo

今天研究了一个Demo，这个Demo是来自一个叫：dmytrodanylyk的人分享的案例 网

址：http://android-arsenal.com/details/1/1640，感觉这种效果还不错，所以分享给

大家。

一、首先看看运行的效果图：



仔细看，你会发现按钮的周围的阴影效果还是比较明显的。

主要文件ShadowLayout.java，这个类是继承于FrameLayout的，从而扩展了功能。

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;
/** 阴影偏离原位置x坐标多少 **/
private float mDx;
/** 阴影偏离原位置y坐标多少 **/
private float mDy;

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 void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
if(w > 0 && h > 0) {
setBackgroundCompat(w, h);
}
}

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));
/** 设置偏离量，分别为left,top,right,bottom **/
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);
}
}

/**
* 初始化 initAttributes
* @param context
* @param attrs
*/
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();
}
}

/**
* 获取TypedArray
* @param context
* @param attributeSet
* @param attr
* @return
*/
private TypedArray getTypedArray(Context context, AttributeSet attributeSet, int[] attr) {
return context.obtainStyledAttributes(attributeSet, attr, 0, 0);
}

/**
* 产生阴影Bitmap
* @param shadowWidth
* @param shadowHeight
* @param cornerRadius
* @param shadowRadius
* @param dx
* @param dy
* @param shadowColor
* @param fillColor
* @return
*/
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.ALPHA_8);
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;
}
}

styles.xml:自定义属性

<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>

activity_main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
android:background="@color/background"
tools:context="${relativePackage}.${activityClass}">

<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="0dp"
app:sl_dy="0dp"
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>

<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>

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

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="88dp"
android:minHeight="36dp"
android:gravity="center"
android:textColor="@android:color/white"
android:background="@drawable/raised_selector"
android:textAppearance="@style/TextAppearance.AppCompat.Button"
android:text="@string/Button"/>

</com.dd.ShadowLayout>

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

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="88dp"
android:minHeight="36dp"
android:gravity="center"
android:textColor="@android:color/white"
android:background="@drawable/raised_selector"
android:textAppearance="@style/TextAppearance.AppCompat.Button"
android:text="@string/Button"/>

</com.dd.ShadowLayout>

</LinearLayout>

ps:这里就是把你要有阴影效果的按钮放到自定义类ShadowLayout里面即可，然后设置

一些属性，也就是我们在styles.xml里面自定义的属性，属性的意思

在ShadowLayout.java里面有注释。

项目源代码下载：

http://download.csdn.net/detail/su_tianbiao/8523475