Android實(shí)現(xiàn)歌詞漸變色和進(jìn)度的效果
更新時(shí)間：2016年03月14日 10:13:36 作者：Losileeya
這篇文章主要介紹了Android實(shí)現(xiàn)歌詞漸變色和進(jìn)度的效果的相關(guān)資料,需要的朋友可以參考下
要用TextView使用漸變色，那我們就必須要了解LinearGradient（線性漸變）的用法。
LinearGradient的參數(shù)解釋
LinearGradient也稱作線性渲染，LinearGradient的作用是實(shí)現(xiàn)某一區(qū)域內(nèi)顏色的線性漸變效果，看源碼你就知道他是shader的子類。
它有兩個(gè)構(gòu)造函數(shù)
public LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1, Shader.TileMode tile) public LinearGradient (float x0, float y0, float x1, float y1, int[] colors, float[] positions, Shader.TileMode tile);
其中，參數(shù)x0表示漸變的起始點(diǎn)x坐標(biāo)；參數(shù)y0表示漸變的起始點(diǎn)y坐標(biāo)；參數(shù)x1表示漸變的終點(diǎn)x坐標(biāo)；參數(shù)y1表示漸變的終點(diǎn)y坐標(biāo)??；color0表示漸變開始顏色；color1表示漸變結(jié)束顏色；參數(shù)tile表示平鋪方式。
Shader.TileMode有3種參數(shù)可供選擇，分別為CLAMP、REPEAT和MIRROR：
CLAMP的作用是如果渲染器超出原始邊界范圍，則會(huì)復(fù)制邊緣顏色對(duì)超出范圍的區(qū)域進(jìn)行著色
REPEAT的作用是在橫向和縱向上以平鋪的形式重復(fù)渲染位圖
MIRROR的作用是在橫向和縱向上以鏡像的方式重復(fù)渲染位圖
LinearGradient的簡單使用
先實(shí)現(xiàn)文字效果的水平漸變：
Shader shader_horizontal= new LinearGradient(btWidth/4, 0, btWidth, 0, Color.RED, Color.GREEN, Shader.TileMode.CLAMP); tv_text_horizontal.getPaint().setShader(shader_horizontal);
再實(shí)現(xiàn)文字的垂直漸變效果：
Shader shader_vertical=new LinearGradient(0, btHeight/4, 0, btHeight, Color.RED, Color.GREEN, Shader.TileMode.CLAMP); tv_text_vertical.getPaint().setShader(shader_vertical);
接下來來實(shí)現(xiàn)文字的顏色動(dòng)態(tài)漸變效果：
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.widget.TextView;
/**
* Created on 2016/3/13.
*/
public class GradientHorizontalTextView extends TextView {
private LinearGradient mLinearGradient;
private Matrix mGradientMatrix;//漸變矩陣
private Paint mPaint;//畫筆
private int mViewWidth = 0;//textView的寬
private int mTranslate = 0;//平移量
private boolean mAnimating = true;//是否動(dòng)畫
private int delta = 15;//移動(dòng)增量
public GradientHorizontalTextView(Context ctx)
{
this(ctx,null);
}
public GradientHorizontalTextView(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
if (mViewWidth == 0) {
mViewWidth = getMeasuredWidth();
if (mViewWidth > 0) {
mPaint = getPaint();
String text = getText().toString();
int size;
if(text.length()>0)
{
size = mViewWidth*2/text.length();
}else{
size = mViewWidth;
}
mLinearGradient = new LinearGradient(-size, 0, 0, 0,
new int[] { 0x33ffffff, 0xffffffff, 0x33ffffff },
new float[] { 0, 0.5f, 1 }, Shader.TileMode.CLAMP); //邊緣融合
mPaint.setShader(mLinearGradient);//設(shè)置漸變
mGradientMatrix = new Matrix();
}
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (mAnimating && mGradientMatrix != null) {
float mTextWidth = getPaint().measureText(getText().toString());//獲得文字寬
mTranslate += delta;//默認(rèn)向右移動(dòng)
if (mTranslate > mTextWidth+1 || mTranslate<1) {
delta = -delta;//向左移動(dòng)
}
mGradientMatrix.setTranslate(mTranslate, 0);
mLinearGradient.setLocalMatrix(mGradientMatrix);
postInvalidateDelayed(30);//刷新
}
}
}
實(shí)現(xiàn)歌詞進(jìn)度效果
Canvas 作為繪制文本時(shí)，使用FontMetrics對(duì)象，計(jì)算位置的坐標(biāo)。它的思路和java.awt.FontMetrics的基本相同。
FontMetrics對(duì)象它以四個(gè)基本坐標(biāo)為基準(zhǔn)，分別為：
FontMetrics.top
FontMetrics.ascent
FontMetrics.descent
FontMetrics.bottom
// FontMetrics對(duì)象 FontMetrics fontMetrics = textPaint.getFontMetrics(); String text = "abcdefghijklmnopqrstu"; // 計(jì)算每一個(gè)坐標(biāo) float baseX = 0; float baseY = 100; float topY = baseY + fontMetrics.top; float ascentY = baseY + fontMetrics.ascent; float descentY = baseY + fontMetrics.descent; float bottomY = baseY + fontMetrics.bottom;
下面是具體實(shí)現(xiàn)代碼：
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
/**
* Created on 2016/3/13.
*/
public class SongTextView extends View {
private int postIndex;
private Paint mPaint;
private int delta = 15;
private float mTextHeight;
private float mTextWidth;
private String mText="夢 里 面 看 我 七 十 二 變";
private PorterDuffXfermode xformode;
public SongTextView(Context ctx)
{
this(ctx,null);
}
public SongTextView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public SongTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
public void init()
{
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
xformode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
mPaint.setColor(Color.CYAN);
mPaint.setTextSize(60.0f);
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
mPaint.setXfermode(null);
mPaint.setTextAlign(Paint.Align.LEFT);
//文字精確高度
Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
mTextHeight = fontMetrics.bottom-fontMetrics.descent-fontMetrics.ascent;
mTextWidth = mPaint.measureText(mText);
}
/**
*計(jì)算 控件的寬高
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
final int mWidth;
final int mHeight;
/**
* 設(shè)置寬度
*/
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
if (widthMode == MeasureSpec.EXACTLY)// match_parent , accurate
mWidth = widthSize;
else
{
// 由圖片決定的寬
int desireByImg = getPaddingLeft() + getPaddingRight()
+ getMeasuredWidth();
if (widthMode == MeasureSpec.AT_MOST)// wrap_content
mWidth = Math.min(desireByImg, widthSize);
else
mWidth = desireByImg;
}
/***
* 設(shè)置高度
*/
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
if (heightMode == MeasureSpec.EXACTLY)// match_parent , accurate
mHeight = heightSize;
else
{
int desire = getPaddingTop() + getPaddingBottom()
+ getMeasuredHeight();
if (heightMode == MeasureSpec.AT_MOST)// wrap_content
mHeight = Math.min(desire, heightSize);
else
mHeight = desire;
}
setMeasuredDimension( mWidth, mHeight);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Bitmap srcBitmap = Bitmap.createBitmap(getMeasuredWidth(),getMeasuredHeight(), Bitmap.Config.ARGB_8888);
Canvas srcCanvas = new Canvas(srcBitmap);
srcCanvas.drawText(mText, 0, mTextHeight, mPaint);
mPaint.setXfermode(xformode);
mPaint.setColor(Color.RED);
RectF rectF = new RectF(0,0,postIndex,getMeasuredHeight());
srcCanvas.drawRect(rectF, mPaint);
canvas.drawBitmap(srcBitmap, 0, 0, null);
init();
if(postIndex<mTextWidth)
{
postIndex+=10;
}else{
postIndex=0;
}
postInvalidateDelayed(30);
}
}
ProgressBar實(shí)現(xiàn)歌詞播放效果
然后接下來的這種歌詞播放進(jìn)度效果是2張圖片實(shí)現(xiàn)的，忘記是哪個(gè)那里看來的，壓根以前也沒有想過還可以這么樣的實(shí)現(xiàn)。
只需要準(zhǔn)備2張圖即可：
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background" android:drawable="@drawable/normal" /> <item android:id="@android:id/progress" android:drawable="@drawable/grandient" /> </layer-list>
看見沒就是2張圖片，一張作為背景圖一張作為進(jìn)度圖，是不是感覺很神奇，然后放入ProgressBar
<ProgressBar android:id="@+id/pb1" style="@android:style/Widget.ProgressBar.Horizontal" android:layout_width="300dp" android:layout_height="40dp" android:max="100" android:maxHeight="2dp" android:minHeight="2dp" android:progress="20" android:progressDrawable="@drawable/m_progress_horizontal" android:secondaryProgress="30" android:visibility="gone"/>
再加上代碼動(dòng)態(tài)改變progress就能實(shí)現(xiàn)進(jìn)度的變化了：
ProgressBar pb1= (ProgressBar) findViewById(R.id.pb1);
//設(shè)置滾動(dòng)條可見
setProgressBarIndeterminateVisibility(true);
progress=pb1.getProgress();//獲取初始進(jìn)度
timer=new Timer();
task=new TimerTask() {
@Override
public void run() {
progress+=10;
if(progress>100){
progress=0;
}
handler.sendEmptyMessage(0);
}
};
timer.schedule(task,1000,300);
實(shí)現(xiàn)及進(jìn)度的改變：
Handler handler=new Handler(){
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
pb1.setProgress(progress);
}
};
@Override
protected void onDestroy() {
super.onDestroy();
timer=null;
task=null;
handler.removeCallbacksAndMessages(null);
}
效果也是不錯(cuò)的：
能力有限，感覺寫一篇博客要弄好久，網(wǎng)速卡的一筆，就寫到這了，其實(shí)項(xiàng)目里面也沒有用到，休息2天了也寫點(diǎn)東西，就覺得還是要學(xué)一點(diǎn)東西作為備用知識(shí)。
以上內(nèi)容是小編給大家介紹的Android實(shí)現(xiàn)歌詞漸變色和進(jìn)度的效果，希望對(duì)大家有所幫助！
相關(guān)文章
本文主要介紹了Android中AsyncTask的相關(guān)知識(shí)。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了Android控件之Gallery用法,以完整實(shí)例形式較為詳細(xì)的分析了Gallery控件實(shí)現(xiàn)圖像顯示的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
Android Studio 合并module到統(tǒng)一文件夾的方法
這篇文章主要介紹了Android Studio 合并module到統(tǒng)一文件夾的方法，補(bǔ)充介紹了android studio關(guān)于同名資源文件的合并技巧,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了Android自定義組件ListPopWindow的相關(guān)資料,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了Android仿微信滑動(dòng)退出Activity的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2016-12-12
Android自定義View實(shí)現(xiàn)繪制虛線的方法詳解
這篇文章主要給大家介紹了Android自定義View實(shí)現(xiàn)繪制虛線的方法，在繪制過程中走了一些彎路才實(shí)現(xiàn)了虛線的效果，所以想著總結(jié)分享出來，方便有需要的朋友和自己在需要的時(shí)候參考學(xué)習(xí)，下面來一起看看吧。2017-04-04
這篇文章主要介紹了淺談Android的Lifecycle源碼分析，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
Android UI設(shè)計(jì)系列之ImageView實(shí)現(xiàn)ProgressBar旋轉(zhuǎn)效果（1）
這篇文章主要為大家詳細(xì)介紹了Android UI設(shè)計(jì)之ImageView實(shí)現(xiàn)ProgressBar旋轉(zhuǎn)效果，具有一定的實(shí)用性和參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
現(xiàn)在程序都是通過事件實(shí)現(xiàn)人機(jī)交互的。事件：用于對(duì)圖形界面的操作，有物理按鍵事件和觸摸屏事件兩大類。在Android組件中提供了事件處理的相關(guān)方法，如在View類中提供onTouchEvent()方法重寫觸摸屏事件，setOnTouchListener()方法為組件設(shè)置監(jiān)聽器來處理觸摸屏事件2022-12-12
這篇文章主要為大家詳細(xì)介紹了Android自定義控件之日期選擇控件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06