先放效果图:
银行卡背景.jpg
首先看下布局文件
代码语言:javascript复制<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="vertical"
tools:context=".CardActivity">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp">
<com.aruba.paletteapplication.MyCardLinearLayout
android:id="@ id/ll_card"
android:layout_width="match_parent"
android:layout_height="200dp"
android:orientation="horizontal">
<ImageView
android:id="@ id/iv_card"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:src="@drawable/icon_seven" />
</com.aruba.paletteapplication.MyCardLinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
这边使用了CardView实现卡片效果,然后自定义组件继承至LinearLayout
代码语言:javascript复制public class MyCardLinearLayout extends LinearLayout {
private Bitmap bitmap;
public MyCardLinearLayout(Context context) {
this(context, null);
}
public MyCardLinearLayout(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public MyCardLinearLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public void attachImage(ImageView imageView) {
if (imageView.getDrawable() instanceof BitmapDrawable) {
BitmapDrawable bitmapDrawable = (BitmapDrawable) imageView.getDrawable();
bitmap = bitmapDrawable.getBitmap();
}
generateShader();
}
private void generateShader() {
if (bitmap == null) {
return;
}
Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(@Nullable Palette palette) {
//柔和而暗的颜色
Palette.Swatch swatch = palette.getDarkMutedSwatch();
if (swatch == null) {
for (Palette.Swatch swatchTemp : palette.getSwatches()) {
swatch = swatchTemp;
break;
}
}
//渐变颜色,由深色变浅色
int colors[] = new int[]{swatch.getRgb(), blurColor(swatch.getRgb())};
setBackground(new ShaderDrawable(colors));
invalidate();
}
});
}
/**
* 将颜色变浅
*
* @param rgb
* @return
*/
private int blurColor(int rgb) {
//三原色,每个原色站8个bit
int red = rgb >> 16 & 0xff;
int green = rgb >> 8 & 0xff;
int bule = rgb & 0xff;
//#000000为黑色,#FFFFFF为白色,所以值越小,颜色越深,反之,颜色越浅
float ratdio = 1.5f;
red = (int) Math.min(255, red * ratdio);
green = (int) Math.min(255, green * ratdio);
bule = (int) Math.min(255, bule * ratdio);
return Color.argb(255, red, green, bule);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
}
class ShaderDrawable extends Drawable {
private int colors[];
private Paint mPaint = new Paint();
public ShaderDrawable(int[] colors) {
this.colors = colors;
mPaint.setAntiAlias(true);
}
@Override
public void draw(@NonNull Canvas canvas) {
//画背景
if (colors != null) {
RectF rectF = new RectF(0, 0, canvas.getWidth(), canvas.getHeight());
LinearGradient linearGradient = new LinearGradient(rectF.left, 0, rectF.right, 0, colors, null, Shader.TileMode.CLAMP);
mPaint.setShader(linearGradient);
canvas.drawRect(rectF, mPaint);
}
}
@Override
public void setAlpha(int alpha) {
}
@Override
public void setColorFilter(@Nullable ColorFilter colorFilter) {
}
/**
* ~OPAQUE:便是完全不透明,遮盖在他下面的所有内容
* ~TRANSPARENT:透明,完全不显示任何东西
* ~TRANSLUCENT:只有绘制的地方才覆盖底下的内容。
*
* @return
*/
@Override
public int getOpacity() {
return PixelFormat.OPAQUE;
}
}
}
最后在Activity中调用attachImage方法
代码语言:javascript复制public class CardActivity extends AppCompatActivity {
private ImageView ivCard;
private MyCardLinearLayout llCard;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_card);
llCard = findViewById(R.id.ll_card);
ivCard = findViewById(R.id.iv_card);
llCard.attachImage(ivCard);
}
}