自定义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。

相关文章

Vite 打包目录结构自定义配置小结

Vite 打包目录结构自定义配置小结

《Vite打包目录结构自定义配置小结》在Vite工程开发中,默认打包后的dist目录资源常集中在asset目录下,不利于资源管理,本文基于Rollup配置原理,本文就来介绍一下通过Vite配置自定义... 目录一、实现原理二、具体配置步骤1. 基础配置文件2. 配置说明（1）js 资源分离（2）非 JS 资
阅读更多...
聊聊springboot中如何自定义消息转换器

聊聊springboot中如何自定义消息转换器

《聊聊springboot中如何自定义消息转换器》SpringBoot通过HttpMessageConverter处理HTTP数据转换,支持多种媒体类型,接下来通过本文给大家介绍springboot中... 目录核心接口springboot默认提供的转换器如何自定义消息转换器Spring Boot 中的消息
阅读更多...
Python利用GeoPandas打造一个交互式中国地图选择器

Python利用GeoPandas打造一个交互式中国地图选择器

《Python利用GeoPandas打造一个交互式中国地图选择器》在数据分析和可视化领域,地图是展示地理信息的强大工具,被将使用Python、wxPython和GeoPandas构建的交互式中国地图行... 目录技术栈概览代码结构分析1. __init__ 方法：初始化与状态管理2. init_ui 方法：
阅读更多...
Python自定义异常的全面指南(入门到实践)

Python自定义异常的全面指南(入门到实践)

《Python自定义异常的全面指南(入门到实践)》想象你正在开发一个银行系统,用户转账时余额不足,如果直接抛出ValueError,调用方很难区分是金额格式错误还是余额不足,这正是Python自定义异... 目录引言：为什么需要自定义异常一、异常基础：先搞懂python的异常体系1.1 异常是什么？1.2
阅读更多...
Linux中的自定义协议+序列反序列化用法

Linux中的自定义协议+序列反序列化用法

《Linux中的自定义协议+序列反序列化用法》文章探讨网络程序在应用层的实现,涉及TCP协议的数据传输机制、结构化数据的序列化与反序列化方法,以及通过JSON和自定义协议构建网络计算器的思路,强调分层... 目录一，再次理解协议二，序列化和反序列化三，实现网络计算器3.1 日志文件3.2Socket.hpp
阅读更多...
C语言自定义类型之联合和枚举解读

C语言自定义类型之联合和枚举解读

《C语言自定义类型之联合和枚举解读》联合体共享内存,大小由最大成员决定,遵循对齐规则；枚举类型列举可能值,提升可读性和类型安全性,两者在C语言中用于优化内存和程序效率... 目录一、联合体1.1 联合体类型的声明1.2 联合体的特点1.2.1 特点11.2.2 特点21.2.3 特点31.3 联合体的大小1
阅读更多...
springboot自定义注解RateLimiter限流注解技术文档详解

springboot自定义注解RateLimiter限流注解技术文档详解

《springboot自定义注解RateLimiter限流注解技术文档详解》文章介绍了限流技术的概念、作用及实现方式,通过SpringAOP拦截方法、缓存存储计数器,结合注解、枚举、异常类等核心组件,... 目录什么是限流系统架构核心组件详解1. 限流注解 (@RateLimiter)2. 限流类型枚举 (
阅读更多...
SpringBoot 异常处理/自定义格式校验的问题实例详解

SpringBoot 异常处理/自定义格式校验的问题实例详解

《SpringBoot异常处理/自定义格式校验的问题实例详解》文章探讨SpringBoot中自定义注解校验问题,区分参数级与类级约束触发的异常类型,建议通过@RestControllerAdvice... 目录1. 问题简要描述2. 异常触发1) 参数级别约束2) 类级别约束3. 异常处理1) 字段级别约束
阅读更多...
SpringBoot+EasyExcel实现自定义复杂样式导入导出

SpringBoot+EasyExcel实现自定义复杂样式导入导出

《SpringBoot+EasyExcel实现自定义复杂样式导入导出》这篇文章主要为大家详细介绍了SpringBoot如何结果EasyExcel实现自定义复杂样式导入导出功能,文中的示例代码讲解详细,... 目录安装处理自定义导出复杂场景1、列不固定，动态列2、动态下拉3、自定义锁定行/列，添加密码4、合并
阅读更多...
在Linux中改变echo输出颜色的实现方法

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2