簡介這是一份面向Android中高級開發(fā)者的UI組件學(xué)習(xí)資源聚焦移動(dòng)端專業(yè)級顏色選擇器的實(shí)現(xiàn)原理與工程實(shí)踐解決移動(dòng)應(yīng)用中缺乏Photoshop式精細(xì)調(diào)色能力的痛點(diǎn)適用于圖像編輯、設(shè)計(jì)工具類App開發(fā)及自定義視圖進(jìn)階學(xué)習(xí)。壓縮包共58個(gè)文件含21個(gè)class字節(jié)碼與8個(gè)java源碼核心為ColorPanel自定義控件、7個(gè)xml布局與資源定義、8個(gè)png圖標(biāo)素材以及APK可運(yùn)行演示、proguard混淆配置、Git工程元數(shù)據(jù)等整體僅330KB輕量易集成。已有831人學(xué)習(xí)下載說明其在小而精的UI組件實(shí)踐中具備較強(qiáng)參考價(jià)值。讀者可直接復(fù)用ColorPanel模塊深入理解HSV色輪交互、RGB/HSV實(shí)時(shí)轉(zhuǎn)換算法、滑塊與觸摸事件協(xié)同響應(yīng)機(jī)制并通過源碼掌握Android自定義View的onDraw與onTouchEvent深度定制技巧是提升色彩處理能力與UI工程化水平的優(yōu)質(zhì)范例。1. 為什么一個(gè)“仿PhotoShop調(diào)色板”的Android組件比寫十個(gè)列表頁更考驗(yàn)工程直覺你有沒有試過在Android App里加一個(gè)「飽和度滑塊」——用戶拖動(dòng)時(shí)UI要實(shí)時(shí)響應(yīng)、數(shù)值要精確映射到圖像處理管線、還要兼容低端機(jī)不卡頓結(jié)果發(fā)現(xiàn)滑塊一動(dòng)預(yù)覽圖延遲半秒換臺舊手機(jī)顏色直接偏綠導(dǎo)出圖片后HSL值和滑塊位置對不上……這不是玄學(xué)是調(diào)色邏輯沒閉環(huán)。“Android 仿PhotoShop調(diào)色板”不是做個(gè)帶紅綠藍(lán)滑塊的ViewGroup就完事。它本質(zhì)是一個(gè)輕量級圖像處理控制中樞前端要承載HSV/HSL/RGB多維參數(shù)交互含色相環(huán)、吸管、預(yù)設(shè)濾鏡入口中層要橋接Android原生ColorMatrix、RenderScript或CameraX的YUV/RGB轉(zhuǎn)換鏈路后端還得確保參數(shù)變更能原子化同步到渲染線程——漏掉任一環(huán)用戶就會覺得“這調(diào)色器不跟手”“顏色不準(zhǔn)”“點(diǎn)一下變?nèi)龢印薄＿m合誰不是剛學(xué)SeekBar的新手而是已做過Camera預(yù)覽、自定義View、至少一次Bitmap內(nèi)存優(yōu)化的開發(fā)者。如果你正為某圖像編輯Demo卡在“調(diào)色功能像PPT翻頁”或想把離線濾鏡能力封裝成可復(fù)用模塊這篇就是你該停下來的實(shí)操筆記。我們不造輪子只拆解怎么讓輪子咬合得嚴(yán)絲合縫。2. 從零搭起調(diào)色板骨架View層級設(shè)計(jì)與參數(shù)模型選型2.1 為什么放棄ConstraintLayout嵌套而用自定義ViewGroup承載所有控件常見誤區(qū)是用一堆SeekBarTextView堆出RGB滑塊再加個(gè)ImageView做預(yù)覽。問題立刻暴露滑塊拖動(dòng)時(shí)onProgressChanged頻繁觸發(fā)若每次都在主線程setImageBitmap()低端機(jī)直接掉幀RGB三通道獨(dú)立滑塊無法表達(dá)色相環(huán)旋轉(zhuǎn)這種極坐標(biāo)操作用戶調(diào)完亮度又去調(diào)對比度兩次ColorMatrix.setScale()疊加順序錯(cuò)亂結(jié)果不可逆。我的做法用繼承ViewGroup的ColorPalettePanel作為根容器內(nèi)部只持有一個(gè)ColorPreviewView繼承SurfaceView或TextureView和一個(gè)ColorControlLayer繼承View負(fù)責(zé)繪制色相環(huán)、滑塊軌道、吸管圖標(biāo)等。所有交互事件觸摸、拖拽、點(diǎn)擊由ColorControlLayer捕獲并轉(zhuǎn)換為統(tǒng)一參數(shù)對象再通過接口回調(diào)通知ColorPreviewView重繪。// ColorPalettePanel.java public class ColorPalettePanel extends ViewGroup { private ColorPreviewView previewView; private ColorControlLayer controlLayer; public ColorPalettePanel(Context context, AttributeSet attrs) { super(context, attrs); init(); } private void init() { // 預(yù)覽視圖必須用SurfaceView/TextureView避免Bitmap頻繁GC previewView new ColorPreviewView(getContext()); controlLayer new ColorControlLayer(getContext()); // 關(guān)鍵預(yù)覽視圖占滿父容器控制層覆蓋其上z-order addView(previewView, new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)); addView(controlLayer, new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)); } Override protected void onLayout(boolean changed, int l, int t, int r, int b) { // 強(qiáng)制兩個(gè)子View尺寸完全一致 int width r - l; int height b - t; previewView.layout(0, 0, width, height); controlLayer.layout(0, 0, width, height); } }提示SurfaceView比TextureView更適合實(shí)時(shí)預(yù)覽——它擁有獨(dú)立Surface渲染線程可直接寫入避免主線程lockCanvas()阻塞。但需手動(dòng)管理SurfaceHolder.Callback生命周期這點(diǎn)后面避坑章節(jié)會深挖。2.2 參數(shù)模型必須用Immutable類而非一堆float字段很多項(xiàng)目用float brightness, float contrast, float saturation...散列字段管理狀態(tài)后果是多線程修改時(shí)需synchronized鎖整個(gè)View拖動(dòng)滑塊瞬間卡死無法做撤銷/重做undo/redo因?yàn)闆]有狀態(tài)快照導(dǎo)出配置時(shí)要手動(dòng)拼JSON字段名硬編碼易錯(cuò)。正確姿勢定義不可變參數(shù)類ColorAdjustment所有調(diào)色操作都生成新實(shí)例// ColorAdjustment.java public final class ColorAdjustment { public final float brightness; // [-100, 100] public final float contrast; // [0.1f, 3.0f] public final float saturation; // [0.0f, 2.0f] public final float hue; // [-180, 180] 度 public final float temperature; // [-100, 100] 色溫偏移 public final float tint; // [-100, 100] 綠品偏移 private ColorAdjustment(Builder builder) { this.brightness clamp(builder.brightness, -100, 100); this.contrast clamp(builder.contrast, 0.1f, 3.0f); this.saturation clamp(builder.saturation, 0.0f, 2.0f); this.hue clamp(builder.hue, -180, 180); this.temperature clamp(builder.temperature, -100, 100); this.tint clamp(builder.tint, -100, 100); } public static Builder newBuilder() { return new Builder(); } public static final class Builder { private float brightness 0; private float contrast 1.0f; private float saturation 1.0f; private float hue 0; private float temperature 0; private float tint 0; public Builder brightness(float v) { this.brightness v; return this; } public Builder contrast(float v) { this.contrast v; return this; } // ... 其他setter public ColorAdjustment build() { return new ColorAdjustment(this); } } private static float clamp(float value, float min, float max) { return Math.max(min, Math.min(max, value)); } }為什么有效ColorAdjustment無setter線程安全每次拖動(dòng)滑塊controlLayer生成新ColorAdjustment實(shí)例通過previewView.updateAdjustment(newAdjustment)傳遞previewView內(nèi)部用AtomicReferenceColorAdjustment存儲當(dāng)前狀態(tài)updateAdjustment()方法內(nèi)僅替換引用毫秒級完成撤銷棧只需存ListColorAdjustmentundo()就是adjustments.get(--index)。2.3 色相環(huán)Hue Wheel的觸摸坐標(biāo)到角度映射別信atan2(y,x)要校準(zhǔn)中心偏移PhotoShop色相環(huán)是圓形用戶手指在圓內(nèi)滑動(dòng)時(shí)需將(x,y)坐標(biāo)轉(zhuǎn)為[0,360)度角。看似Math.toDegrees(Math.atan2(y - centerY, x - centerX))就行但實(shí)際有3個(gè)坑屏幕坐標(biāo)系Y軸向下而數(shù)學(xué)極坐標(biāo)Y軸向上atan2參數(shù)順序易反View可能因padding/margin導(dǎo)致getLeft()/getTop()與實(shí)際繪制區(qū)域中心不重合手指按壓點(diǎn)不在圓心時(shí)初始角度需歸零否則一碰就跳變?？煽糠桨冈贑olorControlLayer.onTouchEvent()中先計(jì)算觸摸點(diǎn)相對于色相環(huán)繪制矩形的相對坐標(biāo)再用atan2并手動(dòng)歸一化// ColorControlLayer.java private RectF hueWheelBounds new RectF(); // 色相環(huán)繪制區(qū)域 private float lastHueAngle 0f; Override public boolean onTouchEvent(MotionEvent event) { float x event.getX(); float y event.getY(); // 1. 判斷是否在色相環(huán)區(qū)域內(nèi) if (!hueWheelBounds.contains(x, y)) return false; // 2. 計(jì)算相對于圓心的向量 float centerX hueWheelBounds.centerX(); float centerY hueWheelBounds.centerY(); float dx x - centerX; float dy centerY - y; // 注意y軸翻轉(zhuǎn)屏幕y向下數(shù)學(xué)y向上 // 3. atan2返回[-π, π]轉(zhuǎn)為[0, 2π)再轉(zhuǎn)為[0,360) double angleRad Math.atan2(dy, dx); if (angleRad 0) angleRad 2 * Math.PI; float angleDeg (float) Math.toDegrees(angleRad); // 4. 首次按下時(shí)記錄初始角度后續(xù)滑動(dòng)以之為基準(zhǔn)防跳變 if (event.getAction() MotionEvent.ACTION_DOWN) { lastHueAngle angleDeg; // 存儲初始偏移用于ACTION_MOVE時(shí)計(jì)算delta initialHueOffset angleDeg; } else if (event.getAction() MotionEvent.ACTION_MOVE) { // 計(jì)算角度差避免跨0度時(shí)突變?nèi)鐝?59°滑到1°應(yīng)為2°而非-358° float delta angleDeg - lastHueAngle; if (delta 180) delta - 360; if (delta -180) delta 360; float newHue currentAdjustment.hue delta; notifyAdjustmentChange(ColorAdjustment.newBuilder() .copyFrom(currentAdjustment) .hue(newHue) .build()); lastHueAngle angleDeg; } return true; }關(guān)鍵細(xì)節(jié)說明dy centerY - y是核心修正不加此行色相環(huán)會鏡像翻轉(zhuǎn)initialHueOffset用于首次按下時(shí)鎖定基準(zhǔn)否則手指剛觸屏就觸發(fā)大角度跳變delta校準(zhǔn)邏輯if (delta 180) delta - 360解決跨0度邊界問題這是PhotoShop級體驗(yàn)的分水嶺。3. 圖像實(shí)時(shí)渲染引擎ColorMatrix vs RenderScript vs GPU Shader選型實(shí)戰(zhàn)3.1 為什么ColorMatrix是入門首選但必須知道它的3個(gè)硬傷ColorMatrix是Android SDK內(nèi)置的CPU圖像處理工具用法簡單// 在ColorPreviewView.draw()中 ColorMatrix matrix new ColorMatrix(); matrix.setSaturation(saturation); // 0灰度1原色2增強(qiáng) matrix.postScale(1f, 1f, 1f, brightness / 100f 1f); // 亮度 // ... 設(shè)置對比度、色相等 Paint paint new Paint(); paint.setColorFilter(new ColorMatrixColorFilter(matrix)); canvas.drawBitmap(sourceBitmap, null, dstRect, paint);但它有3個(gè)致命缺陷必須提前認(rèn)知不支持色相旋轉(zhuǎn)Hue ShiftColorMatrix只能做線性變換縮放、平移而色相是極坐標(biāo)旋轉(zhuǎn)需用Rotate矩陣配合HSV轉(zhuǎn)RGBSDK無現(xiàn)成API精度丟失嚴(yán)重ColorMatrix內(nèi)部用float[20]數(shù)組但Android 7.0以下版本對負(fù)數(shù)處理有bugbrightness-50可能導(dǎo)致綠色通道溢出無法并行加速純CPU執(zhí)行1080p圖單幀處理常超16ms60fps閾值低端機(jī)必掉幀。適用場景僅用于原型驗(yàn)證、小圖480p快速調(diào)試、或作為降級兜底方案。生產(chǎn)環(huán)境必須升級。3.2 RenderScript在Android 5.0上跑出穩(wěn)定60fps的秘訣RenderScript是Android官方推薦的高性能計(jì)算框架專為圖像處理優(yōu)化。它天然支持GPU加速當(dāng)設(shè)備支持時(shí)且API比OpenGL ES友好得多。第一步創(chuàng)建RenderScript實(shí)例與Allocation// ColorPreviewView.java private RenderScript rs; private ScriptC_color_adjust script; private Allocation inAllocation; private Allocation outAllocation; private void initRenderScript() { rs RenderScript.create(getContext()); script new ScriptC_color_adjust(rs); // 自定義腳本見下文 // 創(chuàng)建輸入輸出Allocation內(nèi)存分配 Bitmap.Config config sourceBitmap.getConfig() ! null ? sourceBitmap.getConfig() : Bitmap.Config.ARGB_8888; Type.Builder typeBuilder new Type.Builder(rs, Element.RGBA_8888(rs)); typeBuilder.setX(sourceBitmap.getWidth()).setY(sourceBitmap.getHeight()); inAllocation Allocation.createTyped(rs, typeBuilder.create(), Allocation.MipmapControl.MIPMAP_NONE, Allocation.USAGE_SCRIPT); outAllocation Allocation.createTyped(rs, typeBuilder.create()); // 將Bitmap數(shù)據(jù)拷貝到inAllocation inAllocation.copyFrom(sourceBitmap); }第二步編寫RenderScript內(nèi)核color_adjust.rs// color_adjust.rs #pragma version(1) #pragma rs java_package_name(com.example.colorpalette) // 全局變量由Java端傳入 float3 brightness {0.0f, 0.0f, 0.0f}; float contrast 1.0f; float saturation 1.0f; float hue 0.0f; // degree float temperature 0.0f; float tint 0.0f; // HSV轉(zhuǎn)RGB輔助函數(shù)標(biāo)準(zhǔn)算法 static float3 hsv2rgb(float3 c) { float3 rgb; float h c.x, s c.y, v c.z; float i floor(h * 6.0f); float f h * 6.0f - i; float p v * (1.0f - s); float q v * (1.0f - f * s); float t v * (1.0f - (1.0f - f) * s); if (i 0.0f) rgb (float3){v, t, p}; else if (i 1.0f) rgb (float3){q, v, p}; else if (i 2.0f) rgb (float3){p, v, t}; else if (i 3.0f) rgb (float3){p, q, v}; else if (i 4.0f) rgb (float3){t, p, v}; else rgb (float3){v, p, q}; return rgb; } // RGB轉(zhuǎn)HSV輔助函數(shù) static float3 rgb2hsv(float3 c) { float r c.x, g c.y, b c.z; float min fmin(r, fmin(g, b)); float max fmax(r, fmax(g, b)); float delta max - min; float3 hsv; hsv.y max ! 0.0f ? delta / max : 0.0f; // S hsv.z max; // V if (max min) { hsv.x 0.0f; // H } else if (r max) { hsv.x (g - b) / delta (g b ? 6.0f : 0.0f); } else if (g max) { hsv.x (b - r) / delta 2.0f; } else { hsv.x (r - g) / delta 4.0f; } hsv.x / 6.0f; // 歸一化到[0,1) return hsv; } // 主處理函數(shù)每個(gè)像素調(diào)用一次 void __attribute__((kernel)) root(const uchar4 *in, uchar4 *out) { float4 f4 rsUnpackFloat4(*in); float3 rgb (float3){f4.r, f4.g, f4.b}; // 1. RGB - HSV float3 hsv rgb2hsv(rgb); // 2. 應(yīng)用色相旋轉(zhuǎn)核心ColorMatrix做不到 hsv.x hue / 360.0f; // 轉(zhuǎn)為[0,1)區(qū)間 hsv.x fmod(hsv.x 1.0f, 1.0f); // 處理越界 // 3. 應(yīng)用飽和度 hsv.y saturate(hsv.y * saturation); // 4. 應(yīng)用色溫/色調(diào)簡化模型在HSV空間微調(diào) if (temperature ! 0.0f) { // 溫度值偏黃-值偏藍(lán) → 調(diào)整H和S hsv.x temperature * 0.005f; hsv.y * (1.0f temperature * 0.002f); } if (tint ! 0.0f) { // 色調(diào)值偏綠-值偏品紅 → 調(diào)整H hsv.x tint * 0.003f; } // 5. HSV - RGB rgb hsv2rgb(hsv); // 6. 應(yīng)用亮度、對比度在RGB空間 rgb brightness; rgb (rgb - 0.5f) * contrast 0.5f; // 7. 輸出 *out rsPackColorTo8888(rgb.r, rgb.g, rgb.b, f4.a); }第三步Java端調(diào)用腳本并同步結(jié)果// ColorPreviewView.java public void updateAdjustment(ColorAdjustment adj) { // 更新腳本全局變量 script.set_brightness(new Float3(adj.brightness/100f, adj.brightness/100f, adj.brightness/100f)); script.set_contrast(adj.contrast); script.set_saturation(adj.saturation); script.set_hue(adj.hue); script.set_temperature(adj.temperature); script.set_tint(adj.tint); // 執(zhí)行腳本inAllocation - outAllocation script.forEach_root(inAllocation, outAllocation); // 同步結(jié)果回Bitmap注意必須在主線程調(diào)用 Bitmap result Bitmap.createBitmap(sourceBitmap.getWidth(), sourceBitmap.getHeight(), sourceBitmap.getConfig()); outAllocation.copyTo(result); // 更新預(yù)覽 previewBitmap result; invalidate(); // 觸發(fā)onDraw() }為什么RenderScript能穩(wěn)60fpsforEach_root()自動(dòng)并行化GPU核心數(shù)決定線程數(shù)Allocation內(nèi)存由系統(tǒng)統(tǒng)一管理避免Java層Bitmap頻繁GCrsUnpackFloat4/rsPackColorTo8888是硬件優(yōu)化指令比手動(dòng)位運(yùn)算快3倍以上。血淚經(jīng)驗(yàn)RenderScript在Android 5.0穩(wěn)定但必須在onDetachedFromWindow()中調(diào)用rs.destroy()否則內(nèi)存泄漏。我曾在線上版本漏掉這句導(dǎo)致用戶連續(xù)編輯10張圖后OOM。3.3 GPU Shader進(jìn)階當(dāng)RenderScript也扛不住時(shí)用OpenGL ES 3.0寫Fragment Shader當(dāng)你的App需支持4K視頻實(shí)時(shí)調(diào)色或要接入第三方美顏SDK如某主流美顏庫要求GL紋理輸入RenderScript的Allocation模型就不夠用了。此時(shí)必須切到OpenGL ES 3.0用Fragment Shader直接操作紋理。核心流程創(chuàng)建GLSurfaceView實(shí)現(xiàn)GLSurfaceView.Renderer加載頂點(diǎn)/片元Shader編譯鏈接成Program將原始Bitmap轉(zhuǎn)為GL_TEXTURE_2D綁定到Sampler2D在onDrawFrame()中將ColorAdjustment參數(shù)傳入Shader Uniform繪制全屏四邊形QuadShader對每個(gè)像素采樣并計(jì)算。片元Shader關(guān)鍵代碼color_adjust.frag#version 300 es precision highp float; in vec2 v_TexCoord; out vec4 fragColor; uniform sampler2D s_Texture; uniform vec3 u_Brightness; // r,g,b分量 uniform float u_Contrast; uniform float u_Saturation; uniform float u_Hue; // degree uniform float u_Temperature; uniform float u_Tint; // HSV轉(zhuǎn)換函數(shù)同RenderScript版此處省略 void main() { vec4 color texture(s_Texture, v_TexCoord); vec3 rgb color.rgb; // RGB - HSV vec3 hsv rgb2hsv(rgb); // 色相旋轉(zhuǎn) hsv.x u_Hue / 360.0; hsv.x mod(hsv.x 1.0, 1.0); // 飽和度 hsv.y clamp(hsv.y * u_Saturation, 0.0, 1.0); // 色溫/色調(diào)同RenderScript邏輯 if (u_Temperature ! 0.0) { hsv.x u_Temperature * 0.005; hsv.y * (1.0 u_Temperature * 0.002); } if (u_Tint ! 0.0) { hsv.x u_Tint * 0.003; } // HSV - RGB rgb hsv2rgb(hsv); // 亮度、對比度 rgb u_Brightness; rgb (rgb - 0.5) * u_Contrast 0.5; fragColor vec4(rgb, color.a); }Java端傳參示例// OpenGLRenderer.java private int mBrightnessLoc; private int mContrastLoc; private int mSaturationLoc; private int mHueLoc; private int mTemperatureLoc; private int mTintLoc; Override public void onSurfaceCreated(GL10 gl, EGLConfig config) { // 編譯Shader獲取Uniform位置 mProgram createProgram(vertexShader, fragmentShader); mBrightnessLoc GLES30.glGetUniformLocation(mProgram, u_Brightness); mContrastLoc GLES30.glGetUniformLocation(mProgram, u_Contrast); // ... 其他Uniform } Override public void onDrawFrame(GL10 gl) { GLES30.glUseProgram(mProgram); // 傳入?yún)?shù)注意u_Brightness是vec3需傳3個(gè)float GLES30.glUniform3f(mBrightnessLoc, adj.brightness/100f, adj.brightness/100f, adj.brightness/100f); GLES30.glUniform1f(mContrastLoc, adj.contrast); GLES30.glUniform1f(mSaturationLoc, adj.saturation); GLES30.glUniform1f(mHueLoc, adj.hue); GLES30.glUniform1f(mTemperatureLoc, adj.temperature); GLES30.glUniform1f(mTintLoc, adj.tint); // 綁定紋理、繪制 GLES30.glActiveTexture(GLES30.GL_TEXTURE0); GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, mTextureId); GLES30.glDrawArrays(GLES30.GL_TRIANGLE_STRIP, 0, 4); }何時(shí)必須上GPU Shader輸入源是SurfaceTexture如CameraX預(yù)覽流需疊加多層濾鏡如先銳化再調(diào)色最后加光暈RenderScript難以鏈?zhǔn)秸{(diào)用目標(biāo)設(shè)備明確支持OpenGL ES 3.0市占率95%可放心用。警告OpenGL ES開發(fā)調(diào)試成本高。glGetError()必須每幀檢查否則黑屏無聲。我建議先用RenderScript跑通全部邏輯再用GPU Shader替換性能瓶頸模塊而非一上來就啃OpenGL。4. 避坑指南那些讓調(diào)色器“看起來像PhotoShop”卻“用起來像PPT”的5個(gè)致命細(xì)節(jié)4.1 現(xiàn)象滑塊拖動(dòng)時(shí)預(yù)覽圖閃爍尤其在低端機(jī)上原因Bitmap復(fù)用不當(dāng)導(dǎo)致GC抖動(dòng)解決用BitmapPool預(yù)分配inMutabletrue現(xiàn)象還原用戶拖動(dòng)飽和度滑塊預(yù)覽圖每0.5秒閃一下黑邊Logcat刷GC freed 12MB。根本原因每次updateAdjustment()都調(diào)用Bitmap.createBitmap()新建Bitmap而Android 7.0以下Bitmap內(nèi)存不在Java堆但創(chuàng)建/銷毀仍觸發(fā)底層內(nèi)存管理頻繁GC導(dǎo)致SurfaceView緩沖區(qū)斷連。解決方案預(yù)分配Bitmap池復(fù)用同一塊內(nèi)存// ColorPreviewView.java private LruCacheString, Bitmap bitmapPool; private Bitmap previewBitmap; // 指向池中某Bitmap private void initBitmapPool() { final int maxMemory (int) (Runtime.getRuntime().maxMemory() / 1024); final int cacheSize maxMemory / 8; // 取1/8作緩存 bitmapPool new LruCacheString, Bitmap(cacheSize) { Override protected int sizeOf(String key, Bitmap bitmap) { return bitmap.getByteCount() / 1024; } }; } private Bitmap getOrCreateBitmap(int width, int height, Bitmap.Config config) { String key width x height _ config.name(); Bitmap bitmap bitmapPool.get(key); if (bitmap null) { bitmap Bitmap.createBitmap(width, height, config); bitmapPool.put(key, bitmap); } return bitmap; } // 在updateAdjustment()中 Bitmap result getOrCreateBitmap(sourceBitmap.getWidth(), sourceBitmap.getHeight(), sourceBitmap.getConfig()); outAllocation.copyTo(result); previewBitmap result; // 復(fù)用不新建注意Bitmap.Config.ARGB_8888必須顯式指定否則某些機(jī)型默認(rèn)ARGB_4444已廢棄導(dǎo)致顏色失真。4.2 現(xiàn)象色相環(huán)拖動(dòng)時(shí)角度跳變從10°突然跳到350°原因未處理跨0度邊界解決用模運(yùn)算歸一化delta現(xiàn)象還原手指從色相環(huán)右側(cè)0°順時(shí)針滑到左側(cè)180°再繼續(xù)滑到頂部270°當(dāng)經(jīng)過0°線時(shí)角度從359°跳回0°delta 0 - 359 -359導(dǎo)致色相瘋狂反轉(zhuǎn)。錯(cuò)誤代碼常見于StackOverflow答案float delta newAngle - oldAngle; // 未校準(zhǔn)正確解法已在2.3節(jié)給出此處強(qiáng)調(diào)float delta newAngle - oldAngle; if (delta 180) delta - 360; // 359→1 變成 -2 if (delta -180) delta 360; // 1→359 變成 2原理色相是環(huán)形空間最短路徑距離才是真實(shí)拖動(dòng)量。Math.abs(delta)最小化即為正確方向。4.3 現(xiàn)象導(dǎo)出圖片后用Photoshop打開發(fā)現(xiàn)HSL值與滑塊位置不符原因sRGB與Adobe RGB色彩空間混淆解決強(qiáng)制使用sRGB并禁用ICC配置文件現(xiàn)象還原App里把飽和度調(diào)到150%導(dǎo)出PNG用Photoshop的“信息”面板讀取HSL顯示飽和度僅120%。真相Android默認(rèn)Bitmap是sRGB色彩空間但部分設(shè)備廠商尤其某國產(chǎn)旗艦在BitmapFactory.decodeResource()時(shí)注入了設(shè)備專屬ICC配置文件導(dǎo)致顏色值被二次映射。鐵律所有圖像處理環(huán)節(jié)必須鎖定sRGB創(chuàng)建Bitmap時(shí)指定Bitmap.Config.ARGB_8888隱含sRGBColorMatrix/RenderScript/Shader中所有計(jì)算基于sRGB伽馬曲線無需額外gamma校正導(dǎo)出時(shí)禁用ICC// 導(dǎo)出PNG Bitmap result ...; FileOutputStream fos new FileOutputStream(file); result.compress(Bitmap.CompressFormat.PNG, 100, fos); fos.close(); // 關(guān)鍵不要用BitmapFactory.Options.inPreferredConfig它可能被系統(tǒng)篡改 // 不要調(diào)用bitmap.setHasAlpha(true)這會觸發(fā)ICC重寫提示用adb shell dumpsys SurfaceFlinger可查看當(dāng)前Surface色彩空間確認(rèn)是否為sRGB。4.4 現(xiàn)象開啟硬件加速后ColorPreviewView預(yù)覽圖全黑原因SurfaceView與硬件加速沖突解決為SurfaceView關(guān)閉硬件加速現(xiàn)象還原AppApplication或Activity開啟了android:hardwareAcceleratedtrueColorPreviewViewSurfaceView一片漆黑但Logcat無報(bào)錯(cuò)。原因SurfaceView的Surface是獨(dú)立于View樹的硬件加速的OpenGL上下文無法直接繪制到其Surface必須用SurfaceHolder的lockCanvas()軟件繪制或eglMakeCurrent()手動(dòng)EGL綁定。解決在ColorPreviewView構(gòu)造函數(shù)中強(qiáng)制關(guān)閉硬件加速public ColorPreviewView(Context context, AttributeSet attrs) { super(context, attrs); // 關(guān)鍵SurfaceView必須關(guān)硬件加速 setLayerType(View.LAYER_TYPE_NONE, null); }補(bǔ)充若用TextureView替代SurfaceView則需開啟硬件加速但TextureView的getBitmap()是主線程阻塞調(diào)用性能不如SurfaceView。權(quán)衡取舍。4.5 現(xiàn)象多指操作時(shí)第二個(gè)手指觸發(fā)色相環(huán)誤判原因未過濾非主指針事件解決用MotionEvent.getPointerId()鎖定主指針現(xiàn)象還原用戶左手按住亮度滑塊右手去拖色相環(huán)色相環(huán)突然跳到隨機(jī)角度。原因onTouchEvent()收到的是多指事件event.getX()/getY()默認(rèn)返回第一個(gè)指針I(yè)ndex 0坐標(biāo)但當(dāng)左手先按下滑塊右手再觸屏?xí)r右手成為Index 0坐標(biāo)被誤認(rèn)為色相環(huán)操作。正確做法記錄首個(gè)按下的指針I(yè)D在ACTION_MOVE中只處理該IDprivate int primaryPointerId -1; Override public boolean onTouchEvent(MotionEvent event) { int action event.getActionMasked(); int pointerIndex event.getActionIndex(); if (action MotionEvent.ACTION_DOWN || action MotionEvent.ACTION_POINTER_DOWN) { if (primaryPointerId -1) { primaryPointerId event.getPointerId(pointerIndex); } } else if (action MotionEvent.ACTION_MOVE) { // 只處理主指針 int targetIndex event.findPointerIndex(primaryPointerId); if (targetIndex -1) return false; float x event.getX(targetIndex); float y event.getY(targetIndex); // ... 處理x,y } else if (action MotionEvent.ACTION_UP || action MotionEvent.ACTION_POINTER_UP) { if (event.getPointerId(pointerIndex) primaryPointerId) { primaryPointerId -1; } } return true; }5. 調(diào)色參數(shù)持久化與跨設(shè)備一致性如何讓一張圖在華為Mate60和小米Redmi Note上顏色完全一致5.1 為什么SharedPreferences存float不靠譜用Protocol Buffers序列化ColorAdjustment很多項(xiàng)目把brightness20.5f直接存SharedPreferences上線后發(fā)現(xiàn)Android 12設(shè)備讀取的20.5f在Android 8.0上變成20.499998f多次保存加載后漂移float二進(jìn)制表示在不同CPU架構(gòu)ARMv7 vs ARM64有微小差異無法擴(kuò)展新參數(shù)如新增vignetteIntensity舊版本App讀取新配置會崩潰。終極方案用Protocol Buffers定義.proto文件生成Java類序列化為字節(jié)數(shù)組存儲// color_adjustment.proto syntax proto3; message ColorAdjustment { float brightness 1; // [-100, 100] float contrast 2; // [0.1, 3.0] float saturation 3; // [0.0, 2.0] float hue 4; // [-180, 180] float temperature 5; // [-100, 100] float tint 6; // [-100, 100] int64 timestamp 7; // 保存時(shí)間用于版本追蹤 }生成Java類后存取代碼// 保存 ColorAdjustment proto ColorAdjustment.newBuilder() .setBrightness(adj.brightness) .setContrast(adj.contrast) .setSaturation(adj.saturation) .setHue(adj.hue) .setTemperature(adj.temperature) .setTint(adj.tint) .setTimestamp(System.currentTimeMillis()) .build(); byte[] data proto.toByteArray(); // 存入SharedPreferenceskey為color_config_v1 prefs.edit().putString(color_config_v1, Base64.encodeToString(data, Base64.NO_WRAP)).apply(); // 讀取 String encoded prefs.getString(color_config_v1, ); if (!encoded.isEmpty()) { byte[] decoded Base64.decode(encoded, Base64.NO_WRAP); ColorAdjustment loaded ColorAdjustment.parseFrom(decoded); // 構(gòu)建ColorAdjustment對象 ColorAdjustment adj ColorAdjustment.newBuilder() .brightness(loaded.getBrightness()) .contrast(loaded.getContrast()) p a hrefhttps://download.csdn.net/download/t12x3456/6246509 stylecolor:#ec7500;font-size:14px; 本文還有配套的精品資源點(diǎn)擊獲取 /a img altmenu-r.4af5f7ec.gif srchttps://csdnimg.cn/release/wenkucmsfe/public/img/menu-r.4af5f7ec.gif stylewidth:16px;margin-left:4px;vertical-align:text-bottom;cursor:text; /p