Android Studio设置颜色拾色器工具Color Picker教程

你可能下载过一些获取颜色值的一些小工具,

这种方式获取颜色,需要先切换窗口转跳到桌面,然后打开拾色器小工具程序,然后去拾取颜色;

你可能也知道Android Studio自带一个颜色拾色器,通过下面这种方式才能找到

这种方式获取颜色值限制性很强,需要特定的窗口,需要点击那么一小块颜色才能弹出窗口,才能使用

那有没有更好的方式? 答案是肯定的,不然这些个干嘛~~

不用向上面那样去打开拾色器小工具程序,不用在特定的窗口点击特定的位置弹出拾色器工具,是用我们最喜欢的快捷键的方式打开

Android Studio自带了颜色拾色器工具,但是它没有设置快捷键,也没有告诉我们, 这才是问题,

不罗嗦了,跟着下面的设置去设置快捷键吧

设置好之后Apply应用 + OK确认下就好了

下面就能愉快的玩耍了,Alt+C~~

补充知识:Android 自定义一个简版的取色器ColorPicker

最近在一个项目中要用到修改颜色功能,于是搜索了一波android自定义取色器,虽然搜索结果很多,但是都不是令人十分满意(可能是用久了AndroidStudio自带取色器的原因,真的是太好用了有没有?)。

既然这么喜欢AS的调色板,何不自己撸一个?心动不如行动,马上动手!

常规操作,先上效果图,简版取色器效果如下:

项目地址:

https://github.com/shixiuwen/colorpicker

布局单位使用的是dp,没有做其他过多适配操作,程序的源码很简单,可以直接clone下来修改成自己想要的效果或者做其他定制操作,直接使用的话,集成参考如下:

Step 1. Add the JitPack repository to your build file

//在根 build.gradle 中添加
allprojects {
 repositories {
 ...
 maven { url 'https://jitpack.io' }
 }
 }

Step 2. Add the dependency

//在模块 build.gradle 中添加
dependencies {
 //v1.0.3是版本号,博客不会经常更新,最新版本见github
   implementation 'com.github.shixiuwen:colorpicker:v1.0.3'
 }

调用示例:

// .xml文件中
<com.shixia.colorpickerview.ColorPickerView
  android:id="@+id/cpv_color"
  android:layout_width="match_parent"
  android:layout_height="wrap_content" />
// Activity中
final TextView tvTest = findViewById(R.id.tv_test);
ColorPickerView colorPicker = findViewById(R.id.cpv_color_picker);
//对控件进行回调监听,获取颜色值color
colorPicker.setOnColorChangeListener(new OnColorChangeListener() {
 @Override
 public void colorChanged(int color) {
 tvTest.setBackgroundColor(color);
 }
});

该控件的颜色变化过程是通过观察AndroidStudio取色板颜色变化规律而得到的,因为项目没有其他要求,所以目前没有提供其他公开方法可以供外部调用,有这方面需求的可以自己把库下载下来自动修改,有修改困难的可以邮件联系。另外,如果后面该库会收到几个start的话会考虑加一些其他功能,比如 布局适配、颜色初始化功能、常用颜色记录功能…… 等等。

以下是关键类代码:

package com.shixia.colorpickerview;

import android.content.Context;
import android.graphics.Color;
import android.graphics.drawable.GradientDrawable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

public class ColorPickerView extends LinearLayout {

 private final View llColorProgress;
 private final View vColorBar;
 private final View rlTransBar;
 private final View vTransBar;
 private final RelativeLayout.LayoutParams transBarLayoutParams;
 private int red = 255, green = 0, blue = 0;
 private int index = 0;
 private ColorPreviewView cpvColorPreview;
 private View vLocation;
 private View vBgColor;
 private final RelativeLayout.LayoutParams colorBarLayoutParams;

 private int transValue = 255; //透明度
 private final ImageView vTransPreview;

 private OnColorChangeListener onColorChangeListener;
 private RelativeLayout.LayoutParams vLocationLayoutParams;

 public ColorPickerView(Context context, AttributeSet attrs) {
  super(context, attrs);
  View view = LayoutInflater.from(context).inflate(R.layout.view_color_picker, this);
  vBgColor = view.findViewById(R.id.fl_color);
  vLocation = view.findViewById(R.id.view_location);
  vLocationLayoutParams = (RelativeLayout.LayoutParams) vLocation.getLayoutParams();

  llColorProgress = findViewById(R.id.ll_color_progress);
  cpvColorPreview = view.findViewById(R.id.cpv_color_preview);
  vColorBar = view.findViewById(R.id.view_color_bar);
  colorBarLayoutParams = (RelativeLayout.LayoutParams) vColorBar.getLayoutParams();

  rlTransBar = view.findViewById(R.id.rl_trans_bar);
  vTransBar = view.findViewById(R.id.view_trans_bar);
  transBarLayoutParams = (RelativeLayout.LayoutParams) vTransBar.getLayoutParams();

  vTransPreview = view.findViewById(R.id.view_trans_preview);

  /*调整颜色*/
  llColorProgress.setOnTouchListener(new OnTouchListener() {
   @Override
   public boolean onTouch(View v, MotionEvent event) {
    int action = event.getAction();
    int width = llColorProgress.getWidth();
    switch (action) {
     case MotionEvent.ACTION_DOWN:
      break;
     case MotionEvent.ACTION_MOVE:
      break;
     case MotionEvent.ACTION_UP:
      break;
    }
    float leftMargin = event.getX();
    float x = 0;
    if (leftMargin < vColorBar.getWidth() / 2) {
     colorBarLayoutParams.leftMargin = 0;
    } else if (leftMargin > width - vColorBar.getWidth() / 2) {
     x = 100;
     colorBarLayoutParams.leftMargin = width - vColorBar.getWidth();
    } else {
     x = event.getX() / width * 100;
     colorBarLayoutParams.leftMargin = (int) (leftMargin - vColorBar.getWidth() / 2);
    }
    vColorBar.setLayoutParams(colorBarLayoutParams);
    onProgressChanged((int) x);
    return true;
   }
  });

  /*调整透明度*/
  rlTransBar.setOnTouchListener(new OnTouchListener() {
   @Override
   public boolean onTouch(View v, MotionEvent event) {
    int action = event.getAction();
    int width = rlTransBar.getWidth();
    switch (action) {
     case MotionEvent.ACTION_DOWN:
      break;
     case MotionEvent.ACTION_MOVE:
      break;
     case MotionEvent.ACTION_UP:
      break;
    }
    float leftMargin = event.getX();
    float x = 0;
    if (leftMargin < vTransBar.getWidth() / 2) {
     transBarLayoutParams.leftMargin = 0;
    } else if (leftMargin > width - vTransBar.getWidth() / 2) {
     x = 100;
     transBarLayoutParams.leftMargin = width - vTransBar.getWidth();
    } else {
     x = event.getX() / width * 100;
     transBarLayoutParams.leftMargin = (int) (leftMargin - vTransBar.getWidth() / 2);
    }
    vTransBar.setLayoutParams(transBarLayoutParams);
    changeTransparency((int) x);
    return true;
   }
  });

  /*调整颜色明暗*/
  vBgColor.setOnTouchListener(new OnTouchListener() {
   @Override
   public boolean onTouch(View v, MotionEvent event) {
    int width = vBgColor.getWidth();
    int height = vBgColor.getHeight();
    int action = event.getAction();
    int leftMargin;
    int topMargin;
    switch (action) {
     case MotionEvent.ACTION_DOWN:
      break;
     case MotionEvent.ACTION_MOVE:
      //防止越界处理
      if (event.getX() > width - vLocation.getWidth() / 2F) {
       leftMargin = width - vLocation.getWidth();
      } else if (event.getX() < vLocation.getWidth() / 2F) {
       leftMargin = 0;
      } else {
       leftMargin = (int) (event.getX() - vLocation.getWidth() / 2F);
      }
      if (event.getY() > height - vLocation.getHeight() / 2F) {
       topMargin = height - vLocation.getHeight();
      } else if (event.getY() <= vLocation.getHeight() / 2F) {
       topMargin = 0;
      } else {
       topMargin = (int) (event.getY() - vLocation.getHeight() / 2F);
      }
      vLocationLayoutParams.leftMargin = leftMargin;
      vLocationLayoutParams.topMargin = topMargin;
      vLocation.setLayoutParams(vLocationLayoutParams);
      changeColor();
      break;
     case MotionEvent.ACTION_UP:
      break;
    }
    return true;
   }
  });
 }

 /**
  * 颜色值调整
  *
  * @param progressColor
  */
 private void onProgressChanged(int progressColor) {
  red = 0;
  green = 0;
  blue = 0;
  index = (int) (progressColor / (100 / 6F));
  float v = progressColor % (100 / 6F) / (100 / 6F);
  switch (index) {
   case 0: //红<-->中--绿
    red = 255;
    green = (int) (255 * v);
    break;
   case 1://红--中<-->绿
    red = (int) (255 * (1 - v));
    green = 255;
    break;
   case 2: //绿<-->中--蓝
    green = 255;
    blue = (int) (255 * v);
    break;
   case 3://绿--中<-->蓝
    green = (int) (255 * (1 - v));
    blue = 255;
    break;
   case 4: //蓝<-->中--红
    blue = 255;
    red = (int) (255 * v);
    break;
   case 5://蓝--中<-->红
    blue = (int) (255 * (1 - v));
    red = 255;
    break;
   default:
    red = 255;
    break;
  }
  vBgColor.setBackgroundColor(Color.rgb(red, green, blue));
  changeColor();
 }

 /**
  * 颜色明暗度调整
  */
 private void changeColor() {
  int tempRed = red;
  int tempGreen = green;
  int tempBlue = blue;
  float hPercent = 1 - (vLocation.getX() / (vBgColor.getWidth() - vLocation.getWidth()));
  float vPercent = vLocation.getY() / (vBgColor.getHeight() - vLocation.getHeight());
  switch (index) {
   case 0:
    tempGreen = (int) (green + hPercent * (255 - green));
    tempBlue = (int) (blue + hPercent * (255 - blue));
    break;
   case 1:
    tempRed = (int) (red + hPercent * (255 - red));
    tempBlue = (int) (blue + hPercent * (255 - blue));
    break;
   case 2:
    tempRed = (int) (red + hPercent * (255 - red));
    tempBlue = (int) (blue + hPercent * (255 - blue));
    break;
   case 3:
    tempRed = (int) (red + hPercent * (255 - red));
    tempGreen = (int) (green + hPercent * (255 - green));
    break;
   case 4:
    tempRed = (int) (red + hPercent * (255 - red));
    tempGreen = (int) (green + hPercent * (255 - green));
    break;
   case 5:
   case 6:
    tempGreen = (int) (green + hPercent * (255 - green));
    tempBlue = (int) (blue + hPercent * (255 - blue));
    break;
  }
  tempRed = (int) (tempRed - tempRed * vPercent);
  tempGreen = (int) (tempGreen - tempGreen * vPercent);
  tempBlue = (int) (tempBlue - tempBlue * vPercent);
  int color = Color.argb(transValue, tempRed, tempGreen, tempBlue);
  cpvColorPreview.setColor(color);
  if (onColorChangeListener != null) {
   onColorChangeListener.colorChanged(color);
  }
  int[] gradientColor = {Color.argb(0, 0, 0, 0), Color.rgb(tempRed, tempGreen, tempBlue)};
  GradientDrawable drawable = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, gradientColor);
  vTransPreview.setBackground(drawable);
 }

 /**
  * 改变透明度
  *
  * @param progress
  */
 private void changeTransparency(int progress) {
  transValue = (int) (progress / 100F * 255);
  int color = Color.argb(transValue, red, green, blue);
  cpvColorPreview.setColor(color);
  if (onColorChangeListener != null) {
   onColorChangeListener.colorChanged(color);
  }
 }

 @Override
 public void onWindowFocusChanged(boolean hasWindowFocus) {
  super.onWindowFocusChanged(hasWindowFocus);
  RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) vLocation.getLayoutParams();
  layoutParams.leftMargin = vBgColor.getWidth() - vLocation.getWidth();
  vLocation.setLayoutParams(layoutParams);

  colorBarLayoutParams.leftMargin = llColorProgress.getWidth() - vColorBar.getWidth();
  vColorBar.setLayoutParams(colorBarLayoutParams);

  transBarLayoutParams.leftMargin = rlTransBar.getWidth() - vTransBar.getWidth();
  vTransBar.setLayoutParams(transBarLayoutParams);

  int[] color = {Color.argb(0, 0, 0, 0), Color.rgb(255, 0, 0)};
  GradientDrawable drawable = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, color);
  vTransPreview.setBackground(drawable);
 }

 /**
  * 设置该方法,颜色改变的时候会回调颜色值
  *
  * @param onColorChangeListener
  */
 public void setOnColorChangeListener(OnColorChangeListener onColorChangeListener) {
  this.onColorChangeListener = onColorChangeListener;
 }
}

以上这篇Android Studio设置颜色拾色器工具Color Picker教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Android Studio自动提取控件Style样式教程

    如题,有时候看见一个布局写上几百行看上去会非常吃力麻烦,这时候抽取控件样式很有必要了, Android Studio提供了抽取Style样式的方式, 可能是藏的太深了, 很少人用 光标放在控件内: 右键 –>Refactor –> Extract –>Style- 选择之后弹出对话框: 如果你用的很多, 也可以为它设置快捷键: 打开Android Studio设置页面, 在Keymap中搜索extract, Style就是了, 然后右键单击Style 为它添加快捷键 弹出窗口, 直接按你

  • 解决android studio卡顿,提升studio运行速度的方法

    mac版本: 点击Finder,在应用程序中找到android studio----->Contents文件夹----->bin文件夹----->studio.vmoptions文件. 如图 以文本形式打开studio.vmoptions文件,会看到如下图 将前三个值改大一些,保存并退出文件,重启android studio即可. window版本: 找到android studio安装路径----->bin文件夹----->studio.exe.vmoptions,打开并修

  • android studio3.3.1代码提示忽略大小写的设置

    跟以往设置有区别,此处为取消红框勾选,设置即可 补充知识:Android Studio高级控件(自动提示文本框) 一.高级控件与低级控件区别? 是否使用适配器 二.适配器种类和作用 种类 1.数组适配器 ArrayAdapter new ArrayAdapter(this,R.layout.actv_style, names); 2.简单适配器 SimpleAdapter 3.自定义适配器 三.高级控件使用步骤 1.获取数据 2.创建适配器 3.绑定适配器 例如: 1.自动提示文本框 独特属性:

  • Android Studio设置颜色拾色器工具Color Picker教程

    你可能下载过一些获取颜色值的一些小工具, 这种方式获取颜色,需要先切换窗口转跳到桌面,然后打开拾色器小工具程序,然后去拾取颜色: 你可能也知道Android Studio自带一个颜色拾色器,通过下面这种方式才能找到 这种方式获取颜色值限制性很强,需要特定的窗口,需要点击那么一小块颜色才能弹出窗口,才能使用 那有没有更好的方式? 答案是肯定的,不然这些个干嘛~~ 不用向上面那样去打开拾色器小工具程序,不用在特定的窗口点击特定的位置弹出拾色器工具,是用我们最喜欢的快捷键的方式打开 Android S

  • JS实现的网页上的颜色拾色器

    使用Js代码编写一个网页上用的颜色拾色器,也就是选择颜色用的,用鼠标单击任意颜色块,将弹出颜色值,当你想使用某种颜色而不知道颜色值的时候,用这个小特效可以告诉你颜色值是多少,比较方便. 颜色拾色器 红 绿 蓝 灰 用鼠标单击下面的颜色块,将弹出颜色值 for(i=0;i '+ishex(i*17) +' ') document.all['Ltd' + i].num=i } function ishex(which){ return which.toString(16); } document.w

  • JQuery 拾色器插件发布-jquery.icolor.js

    以前我一直用的那个(eyecon.ro) 功能完整也简易,但是不尽符合上面的要求,于是 google了N下,结果没找到现成的jquery拾色器插件很好的支持以下功能: 简单易用,仅显示常用的那些色块给用户选择,另外提供一个输入框方便用户输入自定义的色值 于是我写了icolor这个插件,除了支持上面的要求,还有别的一些特性如下: 1,默认提供的色值为"常用的浏览器安全的色值".相当于整合了下面最后一个prototype版本的颜色拾取器.关于浏览器安全色值,可参考维基文档http://en

  • jQuery soColorPacker 网页拾色器

    未采用生僻的jquery特性,能兼容jquery1.2.6以上所有版本 实例预览 引入文件 <link type="text/css" rel="stylesheet" media="all" href="soColorPacker/css/style.css" /> <script type="text/javascript" src="jquery1.8.0.min.js&q

  • js实现拾色器插件(ColorPicker)

    对一个前端来说,颜色选择的插件肯定不陌生,许多小伙伴对这类插件的实现可能会比较好奇,这里奉上原生js版本的拾色器. 效果图: 讲下实现方式: 1.颜色除了RGB跟十六进制的表现外,还有一个HSV的表现形式.H(hue)是色相,值域是0度到360度,这个值控制的是你看到的是什么颜色,通俗点讲就是红橙黄绿...:S(saturation)是饱和度,值域是0到1,这个值控制颜色的鲜艳程度,可以理解为大红跟淡红的差别:V(value)可以理解为亮度,值域也是0到1. 2.rgb颜色跟hsv颜色的相互转化

  • 实现Android studio设置自动导包及自动导包快捷键

    实现Android studio设置自动导包及自动导包快捷键 方式一:Android studio只有导单个包的快捷键:Alt+Enter. 方式二:设置自动导所有的包 点击File→Setting,Setting→Editor→General→Auto Import,勾选Add unambiguous imports on the fly即可自动导包,点击apply→OK 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

  • Android Studio设置主题与字体大小图文教程

    一.Android Studio 主题的设置 1.1 设置Android Studio 自带的主题及包名字体大小 1.2 导入第三方主题: 下载了第三方的主题,然后执行: File-->Import Settings-->下载jar包所在位置 即可 二.Android Studio 字体的设置 2.1 编辑界面字体设置 Appearance-->Editor -->Colors&Fonts-->Font-->Save As - --> 总结 以上就是And

  • Android Studio设置、改变字体和主题的方法

    1.步骤:File >> settings >> Appearance & Behavior >>Appearance >> 来到修改界面 如下图所示:(Theme 主题修改 :Name 字体 :size 字号大小:其他的效果自己设置就可以看到,下图是其中的一种效果) 2.修改代码区域的字体,字号等设置 步骤:File >> settings >> Editor >>Colors & Fonts >&

  • Android studio设置文件头定制代码注释的方法

    一.说明 在下载或者看别人的代码我们常会看见,每一个文件的上方有个所属者的备注.如果要是一个一个备注那就累死了. 二.设置方法 File >>> Setting >>>  File and Code Templates  >>>  File Header在右边的输入框中输入你想要备注的内容即可 总结 以上所述是小编给大家介绍的Android studio设置文件头定制代码注释的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家

  • Android Studio 设置代码提示和代码自动补全快捷键方式

    想必使用过Eclipse的小伙伴们都习惯Eclipse快捷键带来的方便,但是当我们使用Android studio来进行开发的时候也想要这种方便该怎么办呢,当然使用过Android studio的小伙伴可能已经知道了它的方便以及强大之处,接下来我就把我知道的分享给大家,方便和大家一起学习,一起进步. [设置代码提示] 方法步骤如下 1.左上角点击File选项,找到Settings 2.点击Settings后,找到Editor 3.点击Editor后,找到General,点击General,找到C

随机推荐