Android 는 가사 그 라 데 이 션 과 진행 효 과 를 실현 합 니 다.

TextView 로 그 라 데 이 션 색 을 사용 하려 면 LinearGradient(선형 그 라 데 이 션)의 용법 을 알 아야 합 니 다.
Linear Gradient 의 매개 변수 설명
LinearGradient 는 선형 렌 더 링 이 라 고도 부 릅 니 다.LinearGradient 의 역할 은 특정한 지역 내 색채 의 선형 그 라 데 이 션 효 과 를 실현 하 는 것 입 니 다.소스 코드 를 보면 그 가 shader 의 하위 클래스 라 는 것 을 알 수 있 습 니 다.

그것 은 두 개의 구조 함수 가 있다.

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);

그 중에서 매개 변수 x0 은 그 라 데 이 션 의 시작 점 x 좌 표를 나타 낸다.매개 변수 y0 은 그 라 데 이 션 의 시작 점 y 좌 표를 표시 합 니 다.매개 변수 x1 은 그 라 데 이 션 의 종점 x 좌 표를 표시 합 니 다.매개 변수 y1 은 그 라 데 이 션 의 종점 y 좌 표를 표시 합 니 다.color 0 은 그 라 데 이 션 시작 색상 을 표시 합 니 다.color 1 은 그 라 데 이 션 종료 색상 을 표시 합 니 다.매개 변수 tile 은 평평 한 포장 방식 을 표시 합 니 다.
Shader.TileMode 는 CLAMP,REPEAT,MIRROR 등 3 가지 매개 변 수 를 선택 할 수 있 습 니 다.
CLAMP 는 렌 더러 가 원래 경계 범 위 를 넘 으 면 테두리 색 을 복사 하여 범 위 를 넘 는 영역 에 착색 하 는 역할 을 합 니 다.
REPEAT 의 역할 은 가로 와 세로 로 평평 하 게 펴 서 비트 맵 을 반복 하 는 것 입 니 다.
MIRROR 의 역할 은 가로 와 세로 로 거울 로 비트 맵 을 반복 하 는 것 이다.
LinearGradient 의 간단 한 사용
먼저 문자 효과 의 수평 그 라 데 이 션 을 실현 합 니 다.

Shader shader_horizontal= new LinearGradient(btWidth/4, 0, btWidth, 0, Color.RED, Color.GREEN, Shader.TileMode.CLAMP);
tv_text_horizontal.getPaint().setShader(shader_horizontal);

 
텍스트 의 수직 그 라 데 이 션 효 과 를 실현 합 니 다:

Shader shader_vertical=new LinearGradient(0, btHeight/4, 0, btHeight, Color.RED, Color.GREEN, Shader.TileMode.CLAMP);
tv_text_vertical.getPaint().setShader(shader_vertical);

 
다음은 문자 의 색상 동적 그 라 데 이 션 효 과 를 실현 합 니 다.

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;//    
private int delta = 15;//    
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);//    
mGradientMatrix = new Matrix();
}
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (mAnimating && mGradientMatrix != null) {
float mTextWidth = getPaint().measureText(getText().toString());//     
mTranslate += delta;//      
if (mTranslate > mTextWidth+1 || mTranslate<1) {
delta = -delta;//    
}
mGradientMatrix.setTranslate(mTranslate, 0);
mLinearGradient.setLocalMatrix(mGradientMatrix);
postInvalidateDelayed(30);//  
}
}
}

가사 진행 효과 구현
Canvas 는 텍스트 를 그 릴 때 FontMetrics 대상 으로 위 치 를 계산 하 는 좌 표를 사용 합 니 다.그것 의 사고방식 은 java.awt.FontMetrics 와 기본적으로 같다.
FontMetrics 대상 은 네 개의 기본 좌 표를 기준 으로 하 는데 각각 다음 과 같다.
FontMetrics.top
FontMetrics.ascent
FontMetrics.descent
FontMetrics.bottom

// FontMetrics  
FontMetrics fontMetrics = textPaint.getFontMetrics(); 
String text = "abcdefghijklmnopqrstu"; 
//        
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; 

다음은 구체 적 인 실현 코드 입 니 다.

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);
}
/**
*        
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
final int mWidth;
final int mHeight;
/**
*     
*/
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;
}
/***
*     
*/
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 가사 재생 효과 구현
그리고 다음 가사 재생 진도 효 과 는 2 장의 그림 으로 이 루어 졌 다.어느 곳 에서 보 았 는 지 잊 어 버 리 고 이렇게 이 루어 질 줄 은 전혀 생각 하지 못 했다.
그림 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 장의 그림 입 니 다.하 나 는 배경 그림 이 고 하 나 는 진도 그림 입 니 다.신기 하지 않 습 니까?그리고 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"/>

게다가 코드 동적 변화 progress 는 진도 의 변 화 를 실현 할 수 있 습 니 다.

ProgressBar pb1= (ProgressBar) findViewById(R.id.pb1);
//       
setProgressBarIndeterminateVisibility(true);
progress=pb1.getProgress();//      
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);

실현 및 진도 의 변화:

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);
}

효과 도 좋 은 데:

능력 에 한계 가 있 습 니 다.블 로 그 를 쓰 는 데 오래 걸 릴 것 같 습 니 다.인터넷 속도 카드 의 한 획 은 여기까지 썼 습 니 다.사실 프로젝트 에 도 사용 되 지 않 았 습 니 다.이틀 쉬 었 을 때 도 글 을 쓰 면 예비 지식 으로 뭔 가 를 배 워 야 한다 고 생각 합 니 다.
이상 의 내용 은 소 편 이 소개 한 안 드 로 이 드 가 가사 그 라 데 이 션 과 진 도 를 실현 하 는 효과 입 니 다.도움 이 되 셨 으 면 좋 겠 습 니 다!