自定义view：颜色选择器\drawBitmap / seekbar

2023-12-23 03:38
文章标签 自定义 view 选择器 颜色 seekbar drawbitmap

本文主要是介绍自定义view：颜色选择器\drawBitmap / seekbar，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、seekbar简单的实现方式：

  • 背景使用色带图片
  • 进度条设置透明
  • 滑块按正常设置
<SeekBarandroid:id="@+id/colorPickerSeekbar"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_centerVertical="true"android:background="@drawable/color_background"android:max="30"android:progress="5"android:progressDrawable="@android:color/transparent"android:thumb="@drawable/slider_bar" />

二、自定义view：

attrs.xml ：

<?xml version="1.0" encoding="utf-8"?>
<resources><declare-styleable name="ColorPickerView"><attr name="indicatorSrc" format="reference" /><!--指示器资源--><attr name="rx" format="dimension" /><!--rx--><attr name="ry" format="dimension" /><!--ry--></declare-styleable></resources>

ColorPickerView：

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.PaintFlagsDrawFilter;
import android.graphics.RectF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;import androidx.annotation.Nullable;public class ColorPickerView extends View {private static final String TAG = ColorPickerView.class.getSimpleName();private static final int DEFAULT_WIDTH = 100;private static final int DEFAULT_HEIGHT = 100;private final float mRx, mRy;private final Paint mBgPaint;private final Paint mPointerPaint;private RectF mRect;private Bitmap mBitmap;private LinearGradient mLinearGradient;private int[] mColors = new int[]{Color.parseColor("#FFB620E0"),Color.parseColor("#FF6236FF"),Color.parseColor("#FF0091FF"),Color.parseColor("#FF6DD400"),Color.parseColor("#FFF7B500"),Color.parseColor("#FFFA6400"),Color.parseColor("#FFE02020")};private Canvas mBitmapCanvas;private Bitmap mSlideBitmap;private RectF mSlideRect;private int mSlideSize;private final PaintFlagsDrawFilter mPaintFlagsDrawFilter;private int mSlideResId;public ColorPickerView(Context context) {this(context, null);}public ColorPickerView(Context context, @Nullable AttributeSet attrs) {this(context, attrs, -1);}public ColorPickerView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);final TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.ColorPickerView);mRx = array.getDimension(R.styleable.ColorPickerView_rx, 4);mRy = array.getDimension(R.styleable.ColorPickerView_ry, 4);mSlideResId = array.getResourceId(R.styleable.ColorPickerView_indicatorSrc,R.drawable.img_carsetting_ambient_light_slider_bar);array.recycle();mBgPaint = new Paint();mBgPaint.setAntiAlias(true);mBgPaint.setFilterBitmap(true);mPointerPaint = new Paint();mPointerPaint.setAntiAlias(true);mPointerPaint.setFilterBitmap(true);mPaintFlagsDrawFilter = new PaintFlagsDrawFilter(0,Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {int width = getProperSize(DEFAULT_WIDTH, widthMeasureSpec);int height = getProperSize(DEFAULT_HEIGHT, heightMeasureSpec);setMeasuredDimension(width, height);}private int getProperSize(int defaultSize, int measureSpec) {int result;int mode = MeasureSpec.getMode(measureSpec);int size = MeasureSpec.getSize(measureSpec);if (mode == MeasureSpec.EXACTLY) {result = size;} else {result = defaultSize;if (mode == MeasureSpec.AT_MOST) {result = Math.min(result, size);}}return result;}@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);mRect = new RectF(0, 0, w, h);mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);mBitmapCanvas = new Canvas(mBitmap);mLinearGradient = new LinearGradient(mRect.left, mRect.top + (mRect.bottom - mRect.top) / 2,mRect.right, mRect.top + (mRect.bottom - mRect.top) / 2,mColors,null,Shader.TileMode.CLAMP);mSlideBitmap = BitmapFactory.decodeResource(getResources(), mSlideResId);mSlideSize = Math.min(w, h);mSlideRect = new RectF(0, 0, mSlideSize, mSlideSize);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.setDrawFilter(mPaintFlagsDrawFilter);//绘制颜色条背景mBgPaint.setShader(mLinearGradient);mBitmapCanvas.drawRoundRect(mRect, mRx, mRy, mBgPaint);mBgPaint.setShader(null);canvas.drawBitmap(mBitmap, mRect.left, mRect.top, mBgPaint);//绘制指示器canvas.drawBitmap(mSlideBitmap, null, mSlideRect, mPointerPaint);}@Overridepublic boolean onTouchEvent(MotionEvent event) {float ex = event.getX();float bitmapX;float bitmapY;if (ex <= mRect.left + mSlideSize / 2.0f) {bitmapX = mSlideSize / 2.0f;mSlideRect.set(mRect.left, mRect.top, mRect.left + mSlideSize, mRect.bottom);} else if (ex >= mRect.right - mSlideSize / 2.0f) {bitmapX = mBitmap.getWidth() - mSlideSize / 2.0f;mSlideRect.set(mRect.right - mSlideSize, mRect.top, mRect.right, mRect.bottom);} else {bitmapX = ex;mSlideRect.set(ex - mSlideSize / 2.0f, mRect.top, ex + mSlideSize / 2.0f, mRect.bottom);}bitmapY = mRect.top + (mRect.bottom - mRect.top) / 2;int pixel = mBitmap.getPixel((int) bitmapX, (int) bitmapY);int a = Color.alpha(pixel);int r = Color.red(pixel);int g = Color.green(pixel);int b = Color.blue(pixel);int currentColor = Color.argb(a, r, g, b);if (event.getActionMasked() == MotionEvent.ACTION_DOWN) {if (mOnColorPickerChangeListener != null) {mOnColorPickerChangeListener.onColorChanged(this, currentColor);mOnColorPickerChangeListener.onStartTrackingTouch(this);}} else if (event.getActionMasked() == MotionEvent.ACTION_UP) {if (mOnColorPickerChangeListener != null) {mOnColorPickerChangeListener.onColorChanged(this, currentColor);mOnColorPickerChangeListener.onStopTrackingTouch(this);}} else {if (mOnColorPickerChangeListener != null) {mOnColorPickerChangeListener.onColorChanged(this, currentColor);}}invalidate();return true;}private OnColorPickerChangeListener mOnColorPickerChangeListener;public void setOnColorPickerChangeListener(OnColorPickerChangeListener l) {this.mOnColorPickerChangeListener = l;}public interface OnColorPickerChangeListener {void onColorChanged(ColorPickerView picker, int color);void onStartTrackingTouch(ColorPickerView picker);void onStopTrackingTouch(ColorPickerView picker);}public void setSliderResource(int slideResId) {this.mSlideResId = slideResId;invalidate();}public void setColors(int... colors) {this.mColors = colors;invalidate();}
}

布局使用：

<ColorPickerViewandroid:id="@+id/colorPickerView"android:layout_width="match_parent"android:layout_height="@dimen/dimen_30"android:layout_centerVertical="true"app:indicatorSrc="@drawable/img_carsetting_ambient_light_slider_bar"app:rx="@dimen/dimen_4"app:ry="@dimen/dimen_4" />

代码使用：

mRoot = view.findViewById(R.id.root);
mColorPickerView = view.findViewById(R.id.colorPickerView);
mColorPickerView.setSliderResource(R.drawable.radio_checked);
mColorPickerView.setColors(new int[]{Color.RED, Color.GREEN, Color.BLUE});
mColorPickerView.setOnColorPickerChangeListener(new ColorPickerView.OnColorPickerChangeListener() {@Overridepublic void onColorChanged(ColorPickerView picker, int color) {mRoot.setBackgroundColor(color);}@Overridepublic void onStartTrackingTouch(ColorPickerView picker) {Log.e(TAG, "onStartTrackingTouch: ");}@Overridepublic void onStopTrackingTouch(ColorPickerView picker) {Log.e(TAG, "onStopTrackingTouch: ");mRoot.setBackgroundColor(Color.BLACK);}
});

这篇关于自定义view：颜色选择器\drawBitmap / seekbar的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/526579。

相关文章

SpringBoot 自定义消息转换器使用详解

SpringBoot 自定义消息转换器使用详解

《SpringBoot自定义消息转换器使用详解》本文详细介绍了SpringBoot消息转换器的知识,并通过案例操作演示了如何进行自定义消息转换器的定制开发和使用,感兴趣的朋友一起看看吧... 目录一、前言二、SpringBoot 内容协商介绍2.1 什么是内容协商2.2 内容协商机制深入理解2.2.1 内容
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
自定义类型：结构体(续)

自定义类型：结构体(续)

目录 一. 结构体的内存对齐 1.1 为什么存在内存对齐？ 1.2 修改默认对齐数 二. 结构体传参 三. 结构体实现位段 一. 结构体的内存对齐 在前面的文章里我们已经讲过一部分的内存对齐的知识，并举出了两个例子，我们再举出两个例子继续说明： struct S3{double a;int b;char c;};int mian(){printf("%zd\n",s
阅读更多...
Spring 源码解读：自定义实现Bean定义的注册与解析

Spring 源码解读：自定义实现Bean定义的注册与解析

引言 在Spring框架中，Bean的注册与解析是整个依赖注入流程的核心步骤。通过Bean定义，Spring容器知道如何创建、配置和管理每个Bean实例。本篇文章将通过实现一个简化版的Bean定义注册与解析机制，帮助你理解Spring框架背后的设计逻辑。我们还将对比Spring中的BeanDefinition和BeanDefinitionRegistry，以全面掌握Bean注册和解析的核心原理。
阅读更多...
Oracle type （自定义类型的使用）

Oracle type （自定义类型的使用）

oracle - type   type定义： oracle中自定义数据类型 oracle中有基本的数据类型，如number，varchar2，date，numeric，float....但有时候我们需要特殊的格式， 如将name定义为（firstname,lastname）的形式，我们想把这个作为一个表的一列看待，这时候就要我们自己定义一个数据类型 格式 ：create or repla
阅读更多...
MVC（Model-View-Controller）和MVVM（Model-View-ViewModel）

MVC（Model-View-Controller）和MVVM（Model-View-ViewModel）

1、MVC MVC（Model-View-Controller） 是一种常用的架构模式，用于分离应用程序的逻辑、数据和展示。它通过三个核心组件（模型、视图和控制器）将应用程序的业务逻辑与用户界面隔离，促进代码的可维护性、可扩展性和模块化。在 MVC 模式中，各组件可以与多种设计模式结合使用，以增强灵活性和可维护性。以下是 MVC 各组件与常见设计模式的关系和作用： 1. Model（模型）
阅读更多...
HTML5自定义属性对象Dataset

HTML5自定义属性对象Dataset

原文转自HTML5自定义属性对象Dataset简介 一、html5 自定义属性介绍 之前翻译的“你必须知道的28个HTML5特征、窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍，就是在HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放，例如我们要在一个文字按钮上存放相对应的id： <a href="javascript:" d
阅读更多...
一步一步将PlantUML类图导出为自定义格式的XMI文件

一步一步将PlantUML类图导出为自定义格式的XMI文件

一步一步将PlantUML类图导出为自定义格式的XMI文件 说明： 首次发表日期：2024-09-08PlantUML官网： https://plantuml.com/zh/PlantUML命令行文档： https://plantuml.com/zh/command-line#6a26f548831e6a8cPlantUML XMI文档: https://plantuml.com/zh/xmi
阅读更多...
argodb自定义函数读取hdfs文件的注意点，避免FileSystem已关闭异常

argodb自定义函数读取hdfs文件的注意点，避免FileSystem已关闭异常

一、问题描述 一位同学反馈，他写的argo存过中调用了一个自定义函数，函数会加载hdfs上的一个文件，但有些节点会报FileSystem closed异常，同时有时任务会成功，有时会失败。 二、问题分析 argodb的计算引擎是基于spark的定制化引擎，对于自定义函数的调用跟hive on spark的是一致的。udf要通过反射生成实例，然后迭代调用evaluate。通过代码分析，udf在
阅读更多...
鸿蒙开发中实现自定义弹窗 (CustomDialog)

鸿蒙开发中实现自定义弹窗 (CustomDialog)

效果图 #思路 创建带有 @CustomDialog 修饰的组件 ，并且在组件内部定义controller: CustomDialogController 实例化CustomDialogController，加载组件，open()-> 打开对话框 ， close() -> 关闭对话框 #定义弹窗 (CustomDialog)是什么？ CustomDialog是自定义弹窗，可用于广告、中
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2