如何使用色轮和滑块在Android中创建拾色器工具？

在上一篇文章如何在Android中创建基本的颜色选择器工具中，我们讨论了如何创建基本的颜色选择器工具。在本文中，我们将使用色轮和Slider创建相同的颜色选择器工具。这是拾色器的另一种类型，它允许用户选择颜色的亮度级别和颜色强度。这也是开源库之一。因此，在本文中讨论了实现以下类型的颜色选择器工具。

下面的样本GIF给出得到什么我们将在本文中做的想法。注意，我们将使用Java语言实现该项目。

实施拾色器工具的步骤

步骤1：创建一个新项目

• 要在Android Studio中创建新项目，请参阅如何在Android Studio中创建/启动新项目。
• 请注意，选择Java作为编程语言。

步骤2：添加ColorPicker库依赖项

• 现在，将颜色选择器库的依赖项添加为(到应用程序级gradle文件中)：

implementation ‘com.github.duanhong169:colorpicker:1.1.6’

• 确保系统应连接到网络(以便下载所需的文件)，并在调用依赖项后，单击“立即同步”按钮。
• 如果无法找到应用程序级gradle文件并调用依赖项，请参考下图。

步骤3：使用activity_main.xml文件

• 接下来，转到activity_main.xml文件，该文件代表项目的UI。
• 以下是activity_main.xml文件的代码。在代码内部添加了注释，以更详细地了解代码。

输出界面：

在处理颜色选择器工具对话框功能之前，必须了解对话框的各个部分，以便在使用Java代码处理对话框的各个部分时可以变得更加容易。

步骤4：使用MainActivity。 Java文件

• 最后，转到MainActivity。 Java文件，并参考以下代码。
• 下面是MainActivity的代码。 Java文件。在代码内部添加了注释，以更详细地了解代码。

Java

import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import top.defaults.colorpicker.ColorPickerPopup;
  
public class MainActivity extends AppCompatActivity {
  
    // text view variable to set the color for GFG text
    private TextView gfgTextView;
  
    // two buttons to open color picker dialog and one to
    // set the color for GFG text
    private Button mSetColorButton, mPickColorButton;
  
    // view box to preview the selected color
    private View mColorPreview;
  
    // this is the default color of the preview box
    private int mDefaultColor;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // register the GFG text with appropriate ID
        gfgTextView = findViewById(R.id.gfg_heading);
  
        // register two of the buttons with their
        // appropriate IDs
        mPickColorButton = findViewById(R.id.pick_color_button);
        mSetColorButton = findViewById(R.id.set_color_button);
  
        // and also register the view which shows the
        // preview of the color chosen by the user
        mColorPreview = findViewById(R.id.preview_selected_color);
  
        // set the default color to 0 as it is black
        mDefaultColor = 0;
  
        // handling the Pick Color Button to open color
        // picker dialog
        mPickColorButton.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(final View v) {
                        new ColorPickerPopup.Builder(MainActivity.this).initialColor(
                                Color.RED) // set initial color
                                // of the color
                                // picker dialog
                                .enableBrightness(
                                        true) // enable color brightness
                                // slider or not
                                .enableAlpha(
                                        true) // enable color alpha
                                // changer on slider or
                                // not
                                .okTitle(
                                        "Choose") // this is top right
                                // Choose button
                                .cancelTitle(
                                        "Cancel") // this is top left
                                // Cancel button which
                                // closes the
                                .showIndicator(
                                        true) // this is the small box
                                // which shows the chosen
                                // color by user at the
                                // bottom of the cancel
                                // button
                                .showValue(
                                        true) // this is the value which
                                // shows the selected
                                // color hex code
                                // the above all values can be made
                                // false to disable them on the
                                // color picker dialog.
                                .build()
                                .show(
                                        v,
                                        new ColorPickerPopup.ColorPickerObserver() {
                                            @Override
                                            public void
                                            onColorPicked(int color) {
                                                // set the color
                                                // which is returned
                                                // by the color
                                                // picker
                                                mDefaultColor = color;
  
                                                // now as soon as
                                                // the dialog closes
                                                // set the preview
                                                // box to returned
                                                // color
                                                mColorPreview.setBackgroundColor(mDefaultColor);
                                            }
                                        });
                    }
                });
  
        // handling the Set Color button to set the selected
        // color for the GFG text.
        mSetColorButton.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // now change the value of the GFG text
                        // as well.
                        gfgTextView.setTextColor(mDefaultColor);
                    }
                });
    }
}

输出：在模拟器上运行

想要一个节奏更快，更具竞争性的环境来学习Android的基础知识吗?

单击此处，前往由我们的专家精心策划的指南，以使您立即做好行业准备！