前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android--利用Palette实现根据图标自动设置背景颜色的组件(银行卡背景)

Android--利用Palette实现根据图标自动设置背景颜色的组件(银行卡背景)

作者头像
aruba
发布2020-07-02 15:24:25
1.4K0
发布2020-07-02 15:24:25
举报
文章被收录于专栏:android技术
先放效果图:

银行卡背景.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);
    }
}
项目地址:https://gitee.com/aruba/PaletteApplication.git
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 先放效果图:
    • 首先看下布局文件
      • 这边使用了CardView实现卡片效果,然后自定义组件继承至LinearLayout
        • 最后在Activity中调用attachImage方法
          • 项目地址:https://gitee.com/aruba/PaletteApplication.git
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档