TShopping

 找回密碼
 註冊
搜索
查看: 408|回復: 0

[教學] Android 如何加入調色盤模組colorPickerView

[複製鏈接]
發表於 2020-5-13 22:20:10 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk  
看了一些APP後,自己也想做一個有調色盤的APP

這模組名稱為ColorPickerView

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

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

colorPickerView

colorPickerView



首先先在
build.gradle裡, dependency下加入
  1. compile 'com.github.skydoves:colorpickerpreference:1.0.2'
複製代碼

ColorPickerView

colorPickerView

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





如果要執行[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.       LinearLayout linearLayout = findViewById(R.id.linearLayout);
  11.       linearLayout.setBackgroundColor(colorEnvelope.getColor());
  12.      }
  13.    });
  14.    builder.setNegativeButton(getString(R.string.cancel), new DialogInterface.OnClickListener() {
  15.       @Override
  16.       public void onClick(DialogInterface dialogInterface, int i) {
  17.       dialogInterface.dismiss();
  18.    }
  19. });
  20. builder.show();
複製代碼


如果你要儲存位置
  1. ColorPickerView colorPickerView = builder.getColorPickerView();
  2. colorPickerView.setPreferenceName("MyColorPickerDialog");
複製代碼

ColorPickerPreference

colorPickerView

colorPickerView


如果要執行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上述一樣




 

臉書網友討論

colorPickerView

colorPickerView
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2020-8-4 09:44 , Processed in 0.062205 second(s), 24 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表