TShopping

標題: Android 如何加入調色盤模組colorPickerView [打印本頁]

---

作者: woff    時間: 2020-5-13 22:20
標題: Android 如何加入調色盤模組colorPickerView
看了一些APP後，自己也想做一個有調色盤的APP

這模組名稱為ColorPickerView

原文說明網站，模組原始碼下載

二話不說馬上來實驗看看module先引入colorPickerView



首先先在
build.gradle裡, dependency下加入

1. compile 'com.github.skydoves:colorpickerpreference:1.0.2'

複製代碼

ColorPickerView


layout 加入ColorPickerView 元件

1. <com.skydoves.colorpickerpreference.ColorPickerView
   
2.         android:id="@+id/colorPickerView"
   
3.         android:layout_width="300dp"
   
4.         android:layout_height="300dp"
   
5.         app:palette="@drawable/palette"
   
6.         app:selector="@drawable/wheel" />

複製代碼

在colorPickerView 加入 ColorListener

1. colorPickerView.setColorListener(new ColorListener() {
   
2.             @Override
   
3.             public void onColorSelected(ColorEnvelope colorEnvelope) {
   
4.                 LinearLayout linearLayout = findViewById(R.id.linearLayout);
   
5.                 linearLayout.setBackgroundColor(colorEnvelope.getColor());
   
6.             }
   
7.         });

複製代碼

得到顏色數值

1. colorEnvelope.getColor(); // int
   
2. colorEnvelope.getColorHtml(); //color code String
   
3. colorEnvelope.getColorRGB(); // int[3]

複製代碼

如果你要儲存選擇器的顏色色碼

1. colorPickerView.setPreferenceName("MyColorPickerView");

複製代碼

當你要使用上次的記錄位置顏色色碼

1. @Override
   
2. protected void onDestroy() {
   
3.    super.onDestroy();
   
4.    colorPickerView.saveData();
   
5. }

複製代碼

預設顏色初始化

1. int color = colorPickerView.getSavedColor(Color.WHITE);
   
2. String htmlColor = colorPickerView.getSavedColorHtml(Color.WHITE);
   
3. int[] colorRGB = colorPickerView.getSavedColorRGB(Color.WHITE);

複製代碼

ColorPickerDialog

[attach]221271[/attach]



如果要執行[color=rgba(0, 0, 0, 0.84)]ColorPicker對話視窗

1. ColorPickerDialog.Builder builder = new ColorPickerDialog.Builder(this, AlertDialog.THEME_DEVICE_DEFAULT_DARK);
   
2. builder.setTitle("ColorPicker Dialog");
   
3. builder.setPreferenceName("MyColorPickerDialog");
   
4. builder.setFlagView(new CustomFlag(this, R.layout.layout_flag));
   
5. builder.setPositiveButton(getString(R.string.confirm), new ColorListener() {
   
6.    @Override
   
7.    public void onColorSelected(ColorEnvelope colorEnvelope) {
   
8.       TextView textView = findViewById(R.id.textView);
   
9.       textView.setText("#" + colorEnvelope.getHtmlCode());
   
10. 
    
11.       LinearLayout linearLayout = findViewById(R.id.linearLayout);
    
12.       linearLayout.setBackgroundColor(colorEnvelope.getColor());
    
13.      }
    
14.    });
    
15.    builder.setNegativeButton(getString(R.string.cancel), new DialogInterface.OnClickListener() {
    
16.       @Override
    
17.       public void onClick(DialogInterface dialogInterface, int i) {
    
18.       dialogInterface.dismiss();
    
19.    }
    
20. });
    
21. builder.show();

複製代碼

如果你要儲存位置

1. ColorPickerView colorPickerView = builder.getColorPickerView();
   
2. colorPickerView.setPreferenceName("MyColorPickerDialog");

複製代碼

ColorPickerPreference



如果要執行PreferenceScreen
在layout 加入ColorPickerView 元件

1. <com.skydoves.colorpickerpreference.ColorPickerView
   
2.         android:id="@+id/colorPickerView"
   
3.         android:layout_width="300dp"
   
4.         android:layout_height="300dp"
   
5.         app:palette="@drawable/palette"
   
6.         app:selector="@drawable/wheel" />

複製代碼

在colorPickerView 加入 ColorListener

1. colorPickerView.setColorListener(new ColorListener() {
   
2.             @Override
   
3.             public void onColorSelected(ColorEnvelope colorEnvelope) {
   
4.                 LinearLayout linearLayout = findViewById(R.id.linearLayout);
   
5.                 linearLayout.setBackgroundColor(colorEnvelope.getColor());
   
6.             }
   
7.         });

複製代碼

儲存色碼及重置方式跟ColorPickerView上述一樣

1.png (139.72 KB, 下載次數: 8)

下載附件  保存到相冊

2020-5-13 22:18 上傳

colorPickerView

---

歡迎光臨 TShopping (http://www.tshopping.com.tw/)

Powered by Discuz! X3.2