高级UI-Palette

Google推出的Palette是用来调色的,正如其汉语意思一样,可以用来显示颜色,在显示图片的时候,会配合图片的色调来显示,这样就显得很融合,其实Palette可以分析出图片中的很多特性,例如主色调、鲜艳度、柔和度等

Palette获得的颜色

其主要的获取颜色方法如下:
获取主要颜色:getDominantColor()
获取柔和颜色:getMutedColor()
获取鲜艳颜色:getVibrantColor()
获取亮、柔和颜色:getLightMutedColor()
获取亮、鲜艳颜色:getLightVibrantColor()
获取暗、柔和颜色:getDarkMutedColor()
获取暗、鲜艳颜色:getDarkVibrantColor()

Palette实例

在一张图片中显示出获得的以上颜色,并以Google推荐的颜色显示在图片上
在手机中找到一张以前做的拍黄瓜的图片,还有煎鸡蛋的图片,这里就是用这两张图片来演示,代码没有任何变化,只是改变了ImageView里面的src源
在使用Palette要先导入依赖,25.4.0为版本号

implementation 'com.android.support:palette-v7:25.4.0'

贴出布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="300dp">
        <ImageView
            android:id="@+id/image_view"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_centerInParent="true"
            android:src="@drawable/cuke" />
        <TextView
            android:id="@+id/text_view"
            android:layout_marginTop="5dp"
            android:layout_width="300dp"
            android:layout_height="120dp"
            android:layout_centerHorizontal="true"
            android:layout_alignBottom="@id/image_view"
            android:gravity="center"
            android:textSize="24sp"/>
    </RelativeLayout>

    <TextView
        android:id="@+id/text_view_1"
        android:layout_marginTop="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="24sp"/>
    <TextView
        android:id="@+id/text_view_2"
        android:layout_marginTop="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="24sp"/>
    <TextView
        android:id="@+id/text_view_3"
        android:layout_marginTop="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="24sp"/>
    <TextView
        android:id="@+id/text_view_4"
        android:layout_marginTop="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="24sp"/>
    <TextView
        android:id="@+id/text_view_5"
        android:layout_marginTop="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="24sp"/>
    <TextView
        android:id="@+id/text_view_6"
        android:layout_marginTop="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="24sp" />
    <TextView
        android:id="@+id/text_view_7"
        android:layout_marginTop="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="24sp"/>

</LinearLayout>

然后在活动中使用

public class MainActivity extends AppCompatActivity {

    private ImageView imageView;
    private TextView textView1;
    private TextView textView2;
    private TextView textView3;
    private TextView textView4;
    private TextView textView5;
    private TextView textView6;
    private TextView textView7;
    private TextView textView;

    @Override
    protected void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = (ImageView) findViewById(R.id.image_view);
        textView1 = (TextView) findViewById(R.id.text_view_1);
        textView2 = (TextView) findViewById(R.id.text_view_2);
        textView3 = (TextView) findViewById(R.id.text_view_3);
        textView4 = (TextView) findViewById(R.id.text_view_4);
        textView5 = (TextView) findViewById(R.id.text_view_5);
        textView6 = (TextView) findViewById(R.id.text_view_6);
        textView7 = (TextView) findViewById(R.id.text_view_7);
        textView = (TextView) findViewById(R.id.text_view);

        BitmapDrawable bitmapDrawable = (BitmapDrawable) imageView.getDrawable();
        Bitmap bitmap = bitmapDrawable.getBitmap();
        //同步方法,已弃用,可能造成线程阻塞
        //Palette palette = Palette.generate(bitmap);
        //异步
        Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(Palette palette) {
                int dominantColor = palette.getDominantColor(Color.GRAY);
                textView1.setBackgroundColor(dominantColor);
                textView1.setText("DominantColor");
                int mutedColor = palette.getMutedColor(Color.GRAY);
                textView2.setBackgroundColor(mutedColor);
                textView2.setText("MutedColor");
                int vibrantColor = palette.getVibrantColor(Color.GRAY);
                textView3.setBackgroundColor(vibrantColor);
                textView3.setText("VibrantColor");
                int lightMutedColor = palette.getLightMutedColor(Color.GRAY);
                textView4.setBackgroundColor(lightMutedColor);
                textView4.setText("LightMutedColor");
                int lightVibrantColor = palette.getLightVibrantColor(Color.GRAY);
                textView5.setBackgroundColor(lightVibrantColor);
                textView5.setText("LightVibrantColor");
                int darkMutedColor = palette.getDarkMutedColor(Color.GRAY);
                textView6.setBackgroundColor(darkMutedColor);
                textView6.setText("DarkMutedColor");
                int darkVibrantColor = palette.getDarkVibrantColor(Color.GRAY);
                textView7.setBackgroundColor(darkVibrantColor);
                textView7.setText("DarkVibrantColor");
                //推荐颜色获取
                Palette.Swatch swatch = palette.getLightVibrantSwatch();
                //推荐的主色调
                int rgb = swatch.getRgb();
                //推荐的主体文字颜色
                int bodyTextColor = swatch.getBodyTextColor();
                //推荐的标题文字颜色
                int titleTextColor = swatch.getTitleTextColor();
                //颜色向量
                float[] hsl = swatch.getHsl();
                //得到该颜色在图片中的值
                int population = swatch.getPopulation();

                textView.setBackgroundColor(getTranslucentColor(0.7F, rgb));
                textView.setTextColor(bodyTextColor);
                textView.setText("这是一道我做的菜");
            }
        });
    }

    private int getTranslucentColor(float persent, int rgb) {
        //转化透明度
        int blue = rgb & 0xFF;
        int green = rgb >>> 8 & 0xFF;
        int red = rgb >>> 16 & 0xFF;
        int alpha = rgb >>> 24;
        alpha = Math.round(alpha * persent);
        return Color.argb(alpha, red, green, blue);
    }
}

运行结果如下
Palette-煎鸡蛋图例
Palette-拍黄瓜图例

原文地址:https://www.cnblogs.com/cj5785/p/10664596.html