Android颜色选择器

来源：互联网发布：树莓派安装unity3d 编辑：程序博客网时间：2024/05/24 00:48

最近要做画板的软件，需要为画笔选择颜色，然后根据滑动的轨迹进行画图，本着不重复早轮子的精神（主要是不会），在GitHub上搜了一下，找到了一个不错的今天记录一下。
先看效果图：
这里写图片描述
动态的：

我是用弹出Dialog的形式进行颜色选择，也可用其他方式使用。
github链接：
https://github.com/LarsWerkman/HoloColorPicker

首先在app 下gradle添加依赖。

compile 'com.larswerkman:HoloColorPicker:1.5'

主要的代码

import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.DialogFragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.view.Window;import android.widget.ImageButton;import android.widget.TextView;import com.larswerkman.holocolorpicker.ColorPicker;import com.larswerkman.holocolorpicker.OpacityBar;import com.larswerkman.holocolorpicker.SVBar;import com.tianzl.photofilter.R;/** * 颜色选择器Dialog * Created by tianzl on 2017/9/1. */public class ColorPickerDialog extends DialogFragment {    private ImageButton ibBack;    private ImageButton ibEnsure;    private TextView tvTitle;    private ColorPicker colorPicker;    private SVBar svBar;    private OpacityBar opacityBar;    private TextView tvExamples;    private int color;    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        getDialog().requestWindowFeature(Window.FEATURE_NO_TITLE);        View view=inflater.inflate(R.layout.dialog_color_picker,container,false);        initView(view);        initData();        initEvent();        return view;    }    private void initData() {        colorPicker.addSVBar(svBar);        colorPicker.addOpacityBar(opacityBar);        tvTitle.setText("颜色选择器");    }    private void initView(View view) {        ibBack=view.findViewById(R.id.bar_title_left);        ibEnsure=view.findViewById(R.id.bar_title_right);        tvTitle=view.findViewById(R.id.bar_title_title);        colorPicker=view.findViewById(R.id.dialog_color_picker_colorPicker);        svBar=view.findViewById(R.id.dialog_color_picker_svbar);        opacityBar=view.findViewById(R.id.dialog_color_picker_opacity);        tvExamples=view.findViewById(R.id.dialog_color_picker_examples);    }    private void initEvent() {        colorPicker.setOnColorChangedListener(new ColorPicker.OnColorChangedListener() {            @Override            public void onColorChanged(int colors) {                tvExamples.setTextColor(colors);                color=colors;            }        });        ibBack.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                listener.onBack();                dismiss();            }        });        ibEnsure.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                listener.onEnsure(color);                dismiss();            }        });    }    public interface OnColorListener{        void onBack();        void onEnsure(int color);    }    private OnColorListener listener;    public void setOnColorChangeListenter(OnColorListener listener){        this.listener=listener;    }}

我只添加了两个控制器一个是颜色的深度一个是颜色的透明度：其他的还有几个就不全部演示了，用法都一样，github链接上都有。

布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:paddingLeft="10dp"    android:paddingRight="10dp"    android:layout_width="match_parent"    android:layout_height="wrap_content">    <include        android:id="@+id/dialog_color_picker_title"        android:layout_height="50dp"        layout="@layout/title_bar"        android:layout_width="match_parent" />    <View        android:layout_below="@+id/dialog_color_picker_title"        style="@style/horizontal_divider_e3"/>    <com.larswerkman.holocolorpicker.ColorPicker        android:id="@+id/dialog_color_picker_colorPicker"        android:layout_below="@+id/dialog_color_picker_title"        android:layout_centerInParent="true"        android:layout_width="match_parent"        android:layout_height="wrap_content" />    <TextView        android:id="@+id/dialog_color_picker_tv_sv"        android:text="@string/color_depth"        android:layout_below="@+id/dialog_color_picker_colorPicker"        android:gravity="center_vertical"        android:layout_width="100dp"        android:layout_height="30dp" />    <com.larswerkman.holocolorpicker.SVBar        android:id="@+id/dialog_color_picker_svbar"        android:layout_toRightOf="@+id/dialog_color_picker_tv_sv"        android:layout_below="@+id/dialog_color_picker_colorPicker"        android:layout_width="match_parent"        android:layout_height="30dp"/>    <TextView        android:id="@+id/dialog_color_picker_tv_opacity"        android:text="@string/transparency"        android:layout_below="@+id/dialog_color_picker_svbar"        android:gravity="center_vertical"        android:layout_width="100dp"        android:layout_height="30dp" />    <com.larswerkman.holocolorpicker.OpacityBar        android:id="@+id/dialog_color_picker_opacity"        android:layout_toRightOf="@+id/dialog_color_picker_tv_opacity"        android:layout_below="@+id/dialog_color_picker_svbar"        android:layout_width="match_parent"        android:layout_height="30dp"/>    <TextView        android:id="@+id/dialog_color_picker_examples"        android:text="@string/examples_text"        android:textSize="40dp"        android:layout_marginTop="5dp"        android:layout_below="@+id/dialog_color_picker_opacity"        android:layout_centerHorizontal="true"        android:layout_width="wrap_content"        android:layout_height="wrap_content" /></RelativeLayout>

title_bar.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="horizontal"    android:layout_width="match_parent"    android:layout_height="80dp">    <ImageButton        android:id="@+id/bar_title_left"        android:src="@mipmap/back_1"        android:background="@android:color/transparent"        style="@style/horizontal_mean" />    <TextView        android:id="@+id/bar_title_title"        android:text="@string/dialog_folder_title"        android:gravity="center"        android:textSize="20sp"        style="@style/horizontal_mean"        android:layout_weight="5"/>    <ImageButton        android:id="@+id/bar_title_right"        android:src="@mipmap/ensure"        android:background="@android:color/transparent"        style="@style/horizontal_mean" /></LinearLayout>

最后在Activity中调用一下方法即可：

 /**     * 选择颜色的dialog     */    public void showPaintColorDialog(){        ColorPickerDialog colorPickerDialog=new ColorPickerDialog();        colorPickerDialog.show(getSupportFragmentManager(),"dialog_color");        colorPickerDialog.setOnColorChangeListenter(new ColorPickerDialog.OnColorListener() {            @Override            public void onEnsure(int color) {                if (color==0){                    surfaceView.setColor(Color.BLACK);                }                surfaceView.setColor(color);                paintColor=color;            }            @Override            public void onBack() {            }        });    }

OK，结束！

阅读全文

0 0