Android中顏色選擇器和改變字體顏色的實(shí)例教程
更新時(shí)間：2016年04月28日 15:39:17 作者：by2n
這篇文章主要介紹了Android中顏色選擇器和改變字體顏色的實(shí)例教程,其中改變字體顏色用到了ColorPicker顏色選擇器,需要的朋友可以參考下
1.構(gòu)建一張七彩圖:
我們經(jīng)常看到這種樣子的顏色選擇器吧..
然后其實(shí)右邊的亮度選擇是:
這樣我們的代碼就可以進(jìn)行啦...
// 創(chuàng)建七彩圖片
private void init() {
int[] oc = { 0xffff0000, 0xffffff00, 0xff00ff00, 0xff00ffff,
0xff0000ff, 0xffff00ff, 0xffff0000 };
float[] op = { 0, 0.16667f, 0.33333f, 0.5f, 0.66667f, 0.83333f, 1 };
LinearGradient lg = new LinearGradient(0, 0, ORIWIDTH, 0, oc, op,
TileMode.MIRROR);
LinearGradient lg2 = new LinearGradient(0, 0, 0, ORIHEIGHT, 0x00808080,
0xff808080, TileMode.MIRROR);
oriColor = Bitmap.createBitmap(ORIWIDTH, ORIHEIGHT, Config.ARGB_8888);
Canvas c = new Canvas(oriColor);
paint.setShader(lg);
c.drawRect(0, 0, ORIWIDTH, ORIHEIGHT, paint);
paint.setShader(lg2);
c.drawRect(0, 0, ORIWIDTH, ORIHEIGHT, paint);
}
// 右邊的亮度欄
private void drawABar(Canvas c) {
int x, y;
x = (roundColor & 0x00ffffff);
y = (x | 0xff000000);
LinearGradient lg = new LinearGradient(0, 0, layoutWidth, 0, x, y,
TileMode.MIRROR);
// 初始化 x 240 + 6 * 2
y = ORIHEIGHT + (GAP << 2) - GAP + BARHEIGHT;
paint.setColor(0xffffffff);
c.drawBitmap(aBk, 0, y, paint);
paint.setShader(lg);
c.drawRect(0, y, layoutWidth, y + BARHEIGHT, paint);
}
其他屏幕事件什么的就不貼代碼啦...
2.ColorPicker顏色選擇器改變字體顏色實(shí)例：
（1）測(cè)試界面
（2）調(diào)色板對(duì)話(huà)框
（3）改變字體顏色
嗯好，來(lái)看代碼：
package com.xsl.colorpicker;
import android.app.Dialog;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.SweepGradient;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.WindowManager;
public class ColorPickerDialog extends Dialog {
private final boolean debug = true;
private final String TAG = "ColorPicker";
Context context;
private String title; //標(biāo)題
private int mInitialColor; //初始顏色
private OnColorChangedListener mListener;
/**
* 初始顏色黑色
* @param context
* @param title 對(duì)話(huà)框標(biāo)題
* @param listener 回調(diào)
*/
public ColorPickerDialog(Context context, String title,
OnColorChangedListener listener) {
this(context, Color.BLACK, title, listener);
}
/**
*
* @param context
* @param initialColor 初始顏色
* @param title 標(biāo)題
* @param listener 回調(diào)
*/
public ColorPickerDialog(Context context, int initialColor,
String title, OnColorChangedListener listener) {
super(context);
this.context = context;
mListener = listener;
mInitialColor = initialColor;
this.title = title;
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
WindowManager manager = getWindow().getWindowManager();
int height = (int) (manager.getDefaultDisplay().getHeight() * 0.38f); //0.5
int width = (int) (manager.getDefaultDisplay().getWidth() * 0.5f); //0.7
ColorPickerView myView = new ColorPickerView(context, height, width);
setContentView(myView);
setTitle(title);
}
private class ColorPickerView extends View {
private Paint mPaint; //漸變色環(huán)畫(huà)筆
private Paint mCenterPaint; //中間圓畫(huà)筆
private Paint mLinePaint; //分隔線(xiàn)畫(huà)筆
private Paint mRectPaint; //漸變方塊畫(huà)筆
private Shader rectShader; //漸變方塊漸變圖像
private float rectLeft; //漸變方塊左x坐標(biāo)
private float rectTop; //漸變方塊右x坐標(biāo)
private float rectRight; //漸變方塊上y坐標(biāo)
private float rectBottom; //漸變方塊下y坐標(biāo)
private final int[] mCircleColors; //漸變色環(huán)顏色
private final int[] mRectColors; //漸變方塊顏色
private int mHeight; //View高
private int mWidth; //View寬
private float r; //色環(huán)半徑(paint中部)
private float centerRadius; //中心圓半徑
private boolean downInCircle = true; //按在漸變環(huán)上
private boolean downInRect; //按在漸變方塊上
private boolean highlightCenter; //高亮
private boolean highlightCenterLittle; //微亮
public ColorPickerView(Context context, int height, int width) {
super(context);
this.mHeight = height - 36;
this.mWidth = width;
setMinimumHeight(height - 36);
setMinimumWidth(width);
//漸變色環(huán)參數(shù)
mCircleColors = new int[] {0xFFFF0000, 0xFFFF00FF, 0xFF0000FF,
0xFF00FFFF, 0xFF00FF00,0xFFFFFF00, 0xFFFF0000};
Shader s = new SweepGradient(0, 0, mCircleColors, null);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setShader(s);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(50);
r = width / 2 * 0.7f - mPaint.getStrokeWidth() * 0.5f;
//中心圓參數(shù)
mCenterPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mCenterPaint.setColor(mInitialColor);
mCenterPaint.setStrokeWidth(5);
centerRadius = (r - mPaint.getStrokeWidth() / 2 ) * 0.7f;
//邊框參數(shù)
mLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mLinePaint.setColor(Color.parseColor("#72A1D1"));
mLinePaint.setStrokeWidth(4);
//黑白漸變參數(shù)
mRectColors = new int[]{0xFF000000, mCenterPaint.getColor(), 0xFFFFFFFF};
mRectPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mRectPaint.setStrokeWidth(5);
rectLeft = -r - mPaint.getStrokeWidth() * 0.5f;
rectTop = r + mPaint.getStrokeWidth() * 0.5f +
mLinePaint.getStrokeMiter() * 0.5f + 15;
rectRight = r + mPaint.getStrokeWidth() * 0.5f;
rectBottom = rectTop + 50;
}
@Override
protected void onDraw(Canvas canvas) {
//移動(dòng)中心
canvas.translate(mWidth / 2, mHeight / 2 - 50);
//畫(huà)中心圓
canvas.drawCircle(0, 0, centerRadius, mCenterPaint);
//是否顯示中心圓外的小圓環(huán)
if (highlightCenter || highlightCenterLittle) {
int c = mCenterPaint.getColor();
mCenterPaint.setStyle(Paint.Style.STROKE);
if(highlightCenter) {
mCenterPaint.setAlpha(0xFF);
}else if(highlightCenterLittle) {
mCenterPaint.setAlpha(0x90);
}
canvas.drawCircle(0, 0,
centerRadius + mCenterPaint.getStrokeWidth(), mCenterPaint);
mCenterPaint.setStyle(Paint.Style.FILL);
mCenterPaint.setColor(c);
}
//畫(huà)色環(huán)
canvas.drawOval(new RectF(-r, -r, r, r), mPaint);
//畫(huà)黑白漸變塊
if(downInCircle) {
mRectColors[1] = mCenterPaint.getColor();
}
rectShader = new LinearGradient(rectLeft, 0, rectRight, 0, mRectColors, null, Shader.TileMode.MIRROR);
mRectPaint.setShader(rectShader);
canvas.drawRect(rectLeft, rectTop, rectRight, rectBottom, mRectPaint);
float offset = mLinePaint.getStrokeWidth() / 2;
canvas.drawLine(rectLeft - offset, rectTop - offset * 2,
rectLeft - offset, rectBottom + offset * 2, mLinePaint);//左
canvas.drawLine(rectLeft - offset * 2, rectTop - offset,
rectRight + offset * 2, rectTop - offset, mLinePaint);//上
canvas.drawLine(rectRight + offset, rectTop - offset * 2,
rectRight + offset, rectBottom + offset * 2, mLinePaint);//右
canvas.drawLine(rectLeft - offset * 2, rectBottom + offset,
rectRight + offset * 2, rectBottom + offset, mLinePaint);//下
super.onDraw(canvas);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX() - mWidth / 2;
float y = event.getY() - mHeight / 2 + 50;
boolean inCircle = inColorCircle(x, y,
r + mPaint.getStrokeWidth() / 2, r - mPaint.getStrokeWidth() / 2);
boolean inCenter = inCenter(x, y, centerRadius);
boolean inRect = inRect(x, y);
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
downInCircle = inCircle;
downInRect = inRect;
highlightCenter = inCenter;
case MotionEvent.ACTION_MOVE:
if(downInCircle && inCircle) {//down按在漸變色環(huán)內(nèi), 且move也在漸變色環(huán)內(nèi)
float angle = (float) Math.atan2(y, x);
float unit = (float) (angle / (2 * Math.PI));
if (unit < 0) {
unit += 1;
}
mCenterPaint.setColor(interpCircleColor(mCircleColors, unit));
if(debug) Log.v(TAG, "色環(huán)內(nèi), 坐標(biāo): " + x + "," + y);
}else if(downInRect && inRect) {//down在漸變方塊內(nèi), 且move也在漸變方塊內(nèi)
mCenterPaint.setColor(interpRectColor(mRectColors, x));
}
if(debug) Log.v(TAG, "[MOVE] 高亮: " + highlightCenter + "微亮: " + highlightCenterLittle + " 中心: " + inCenter);
if((highlightCenter && inCenter) || (highlightCenterLittle && inCenter)) {//點(diǎn)擊中心圓, 當(dāng)前移動(dòng)在中心圓
highlightCenter = true;
highlightCenterLittle = false;
} else if(highlightCenter || highlightCenterLittle) {//點(diǎn)擊在中心圓, 當(dāng)前移出中心圓
highlightCenter = false;
highlightCenterLittle = true;
} else {
highlightCenter = false;
highlightCenterLittle = false;
}
invalidate();
break;
case MotionEvent.ACTION_UP:
if(highlightCenter && inCenter) {//點(diǎn)擊在中心圓, 且當(dāng)前啟動(dòng)在中心圓
if(mListener != null) {
mListener.colorChanged(mCenterPaint.getColor());
ColorPickerDialog.this.dismiss();
}
}
if(downInCircle) {
downInCircle = false;
}
if(downInRect) {
downInRect = false;
}
if(highlightCenter) {
highlightCenter = false;
}
if(highlightCenterLittle) {
highlightCenterLittle = false;
}
invalidate();
break;
}
return true;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(mWidth, mHeight);
}
/**
* 坐標(biāo)是否在色環(huán)上
* @param x 坐標(biāo)
* @param y 坐標(biāo)
* @param outRadius 色環(huán)外半徑
* @param inRadius 色環(huán)內(nèi)半徑
* @return
*/
private boolean inColorCircle(float x, float y, float outRadius, float inRadius) {
double outCircle = Math.PI * outRadius * outRadius;
double inCircle = Math.PI * inRadius * inRadius;
double fingerCircle = Math.PI * (x * x + y * y);
if(fingerCircle < outCircle && fingerCircle > inCircle) {
return true;
}else {
return false;
}
}
/**
* 坐標(biāo)是否在中心圓上
* @param x 坐標(biāo)
* @param y 坐標(biāo)
* @param centerRadius 圓半徑
* @return
*/
private boolean inCenter(float x, float y, float centerRadius) {
double centerCircle = Math.PI * centerRadius * centerRadius;
double fingerCircle = Math.PI * (x * x + y * y);
if(fingerCircle < centerCircle) {
return true;
}else {
return false;
}
}
/**
* 坐標(biāo)是否在漸變色中
* @param x
* @param y
* @return
*/
private boolean inRect(float x, float y) {
if( x <= rectRight && x >=rectLeft && y <= rectBottom && y >=rectTop) {
return true;
} else {
return false;
}
}
/**
* 獲取圓環(huán)上顏色
* @param colors
* @param unit
* @return
*/
private int interpCircleColor(int colors[], float unit) {
if (unit <= 0) {
return colors[0];
}
if (unit >= 1) {
return colors[colors.length - 1];
}
float p = unit * (colors.length - 1);
int i = (int)p;
p -= i;
// now p is just the fractional part [0...1) and i is the index
int c0 = colors[i];
int c1 = colors[i+1];
int a = ave(Color.alpha(c0), Color.alpha(c1), p);
int r = ave(Color.red(c0), Color.red(c1), p);
int g = ave(Color.green(c0), Color.green(c1), p);
int b = ave(Color.blue(c0), Color.blue(c1), p);
return Color.argb(a, r, g, b);
}
/**
* 獲取漸變塊上顏色
* @param colors
* @param x
* @return
*/
private int interpRectColor(int colors[], float x) {
int a, r, g, b, c0, c1;
float p;
if (x < 0) {
c0 = colors[0];
c1 = colors[1];
p = (x + rectRight) / rectRight;
} else {
c0 = colors[1];
c1 = colors[2];
p = x / rectRight;
}
a = ave(Color.alpha(c0), Color.alpha(c1), p);
r = ave(Color.red(c0), Color.red(c1), p);
g = ave(Color.green(c0), Color.green(c1), p);
b = ave(Color.blue(c0), Color.blue(c1), p);
return Color.argb(a, r, g, b);
}
private int ave(int s, int d, float p) {
return s + Math.round(p * (d - s));
}
}
/**
* 回調(diào)接口
*/
public interface OnColorChangedListener {
/**
* 回調(diào)函數(shù)
* @param color 選中的顏色
*/
void colorChanged(int color);
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public int getmInitialColor() {
return mInitialColor;
}
public void setmInitialColor(int mInitialColor) {
this.mInitialColor = mInitialColor;
}
public OnColorChangedListener getmListener() {
return mListener;
}
public void setmListener(OnColorChangedListener mListener) {
this.mListener = mListener;
}
}
測(cè)試界面
PaintDemoActivity.java
package com.xsl.colorpicker;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
public class PaintDemoActivity extends Activity {
Context context;
private Button btnColorPicker;
private TextView tvText;
private ColorPickerDialog dialog;
@Override
public void onCreate(Bundle savedInstanceState) {
context = this;
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
initViews();
}
/**
* 初始化UI
*/
private void initViews() {
btnColorPicker = (Button) findViewById(R.id.button1);
btnColorPicker.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
dialog = new ColorPickerDialog(context, tvText.getTextColors().getDefaultColor(),
getResources().getString(R.string.app_name),
new ColorPickerDialog.OnColorChangedListener() {
public void colorChanged(int color) {
tvText.setTextColor(color);
}
});
dialog.show();
}
});
tvText = (TextView) findViewById(R.id.tv);
}
}
您可能感興趣的文章:
- Android selector背景選擇器的使用詳解
- Android時(shí)間選擇器、日期選擇器實(shí)現(xiàn)代碼
- 淺談?wù)凙ndroid 圖片選擇器
- Android自定義可循環(huán)的滾動(dòng)選擇器CycleWheelView
- android 字體顏色選擇器(ColorPicker)介紹
- Android仿微信照片選擇器實(shí)現(xiàn)預(yù)覽查看圖片
- Android開(kāi)發(fā)中實(shí)現(xiàn)IOS風(fēng)格底部選擇器（支持時(shí)間 日期 自定義）
- 基于android背景選擇器selector的用法匯總
- Android PickerView滾動(dòng)選擇器的使用方法
- android自定義滾軸選擇器
相關(guān)文章
FFmpeg-Android 是一個(gè)基于 FFmpeg n4.0 版本編譯運(yùn)行在 Android 平臺(tái)上的音視頻處理框架,本文為大家整理了使用FFmpeg-Android進(jìn)行音視頻處理的詳細(xì)操作,需要的可以了解下2025-03-03
Android 安全加密：非對(duì)稱(chēng)加密詳解
本文主要介紹Android 安全加密,非對(duì)稱(chēng)加密的知識(shí)，這里整理了詳細(xì)的資料，及使用方法，有需要的小伙伴可以參考下2016-09-09
實(shí)例講解Android應(yīng)用開(kāi)發(fā)中Fragment生命周期的控制
這篇文章主要介紹了Android應(yīng)用開(kāi)發(fā)中Fragment生命周期的控制,Fragment依賴(lài)于Activity,所以生命周期方面也受Activity的影響,需要的朋友可以參考下2016-02-02
這篇文章主要介紹了android module解耦組件化總體概述(推薦)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
主要摘要關(guān)鍵知識(shí)點(diǎn)和記錄我的學(xué)習(xí)思路及驗(yàn)證結(jié)論，可以幫助讀者比較全面的認(rèn)識(shí)FileProvider，F(xiàn)ileProvider是特殊的ContentProvider，目標(biāo)是在為保護(hù)隱私和數(shù)據(jù)安全而加強(qiáng)應(yīng)用沙箱機(jī)制的同時(shí)，支持在應(yīng)用間共享文件2023-03-03
這篇文章主要介紹了Volley源碼之使用方式和使用場(chǎng)景詳解，具有一定參考價(jià)值，需要的朋友可以了解下。2017-11-11
Kotlin之自定義 Live Templates詳解(模板代碼)
這篇文章主要介紹了Kotlin之自定義 Live Templates詳解(模板代碼)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-03-03
在Android開(kāi)發(fā)中滑動(dòng)沖突可以說(shuō)是比較常見(jiàn)的一類(lèi)問(wèn)題，也是比較讓人頭疼的一類(lèi)問(wèn)題，兩個(gè)原本完美的控件，組合在一起之后，忽然發(fā)現(xiàn)整個(gè)世界都不好了?；瑒?dòng)沖突主要分為同方向滑動(dòng)沖突和不同方向滑動(dòng)沖突，下面本文將詳細(xì)說(shuō)明兩種滑動(dòng)沖突如何解決。2016-08-08
Choreographer作為Android系統(tǒng)中重要的組件,負(fù)責(zé)協(xié)調(diào)App進(jìn)程的UI渲染與SurfaceFlinger進(jìn)程的數(shù)據(jù)合成,本文詳細(xì)分析了Choreographer的創(chuàng)建流程、VSYNC信號(hào)的調(diào)度和處理機(jī)制,揭示了其在UI渲染過(guò)程中的核心作用2024-10-10
從0快速搭建一個(gè)實(shí)用的MVVM框架(超詳細(xì))
這篇文章主要介紹了從0搭建一個(gè)實(shí)用的MVVM框架,結(jié)合Jetpack，構(gòu)建快速開(kāi)發(fā)的MVVM框架，支持快速生成ListActivity、ListFragment，主要是基于MVVM進(jìn)行快速開(kāi)發(fā)上手即用，需要的朋友可以參考下2022-03-03