Android調色盤——Palette的使用

鋸齒流沙發表於2018-01-08
Android

簡介

Palette是Android的調色盤，能夠從影象中提取圖片的顏色。使用Palette提取的顏色融入到UI設計當中，使app更加美觀，增加使用者體驗。如：根據滑動的頁面的整體風格，通過Palette獲取得到的顏色值，設定不同的actionbar底色，使整體頁面更加精美。

新增Palette依賴

Android的API中目前還沒有加入Palette，需要手動新增Palette依賴，在Project Structure中新增。

palette.png

使用

新增了依賴之後，專案中就可以使用Palette了，那麼接下來就直接上程式碼吧。

簡單佈局：

<?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:orientation="vertical"
    tools:context="com.main.palette.PaletteActivity">

    <TextView
        android:id="@+id/palette_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="20dp"
        android:text="調色盤"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="10dp"
        android:scaleType="centerCrop"
        android:src="@drawable/aa"/>

</LinearLayout>

複製程式碼

在Activity中使用：

public class PaletteActivity extends AppCompatActivity {

    private TextView mTextView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_palette);
        mTextView = (TextView)this.findViewById(R.id.palette_text);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.aa);
        // Synchronous同步
        //Palette p = Palette.from(bitmap).generate();

        // Asynchronous非同步
        Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            public void onGenerated(Palette p) {

                // Use generated instance

                //暗、柔和的顏色
                int darkMutedColor = p.getDarkMutedColor(Color.BLUE);//如果分析不出來，則返回預設顏色
                //暗、柔和
                int lightMutedColor = p.getLightMutedColor(Color.BLUE);
                //暗、鮮豔
                int darkVibrantColor = p.getDarkVibrantColor(Color.BLUE);
                //亮、鮮豔
                int lightVibrantColor = p.getLightVibrantColor(Color.BLUE);
                //柔和
                int mutedColor = p.getMutedColor(Color.BLUE);
                //柔和
                int vibrantColor = p.getVibrantColor(Color.BLUE);

                mTextView.setBackgroundColor(getTranslucentColor(0.5f,darkMutedColor));

            }
        });
    }


    /**
     * 返回argb的格式
     * @param percent
     * @param rgb
     * @return
     */
    protected int getTranslucentColor(float percent, int rgb) {
        int blue = Color.blue(rgb);
        int green = Color.green(rgb);
        int red = Color.red(rgb);
        int alpha = Color.alpha(rgb);

        alpha = Math.round(alpha*percent);
        return Color.argb(alpha, red, green, blue);
    }
複製程式碼

首先要獲取圖片的bitmap，然後Palette會從bitmap中分析圖片的色彩，並且Palette會提供方法給開發者獲取圖片的色彩。

根據提供的bitmap，有兩種方式可以獲取得到Palette物件：

1）同步：Palette.from(bitmap).generate()；

2）非同步：Palette.from(bitmap).generate(new Palette.PaletteAsyncListener())

一般的在主執行緒執行比較耗時的任務會出現ANR，所有如果是比較耗時的操作還是選擇使用非同步來獲取比較好。

得到Palette物件就可以根據方法獲取得到自己需要的顏色值，如在以上程式碼中列出來的方法可以獲取得到不同的顏色值，開發者根據自己的需要做出精美的UI。關於Palette的更多方法，可以檢視其API。

注意

Palette物件獲取得到的顏色值有可能為null，所以最好做一個判空的操作，防止程式crash。

效果圖

palette.png

這裡設定的title的背景顏色是：通過Palette獲取得到bitmap的暗、柔和的顏色。

相關文章