android 사용자 정의 파도 로 딩 애니메이션 구현 코드
효과 도
1.사용자 정의 컨트롤 WaveView
package com.example.wh.myapplication;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.view.View;
import java.text.DecimalFormat;
public class WaveView extends View {
/**
* 1
*/
private final int WAVE_LENGTH1 = 600;
/**
* 1
*/
private final int WAVE_HEIGHT1 = 30;
/**
* 1
*/
private int mWaveHeight1 = WAVE_HEIGHT1;
/**
* 1
*/
private int mWaveLenght1 = WAVE_LENGTH1;
/**
* 1
*/
private final int WAVE_COLOR1 = Color.parseColor("#0000ff");
/**
*
*/
private final int BORDER_COLOR = Color.parseColor("#800000ff");
/**
*
*/
private final int DEFAULT_TEXT_COLOR = Color.parseColor("#ff0000");
/**
*
*/
private final int DEFAULT_TEXT_SIZE = 30;
/**
*
*/
private int mTextColor = DEFAULT_TEXT_COLOR;
/**
*
*/
private int mTextSize = DEFAULT_TEXT_SIZE;
/**
* 1
*/
private int mWaveColor1 = WAVE_COLOR1;
/**
* 1 ,
*/
private final int WAVE_OFFSET1 = 8;
/**
* 1 ,
*/
private int mOffset1 = WAVE_OFFSET1;
/**
*
*/
private final int BORDER_WIDTH = 2;
/**
*
*/
private int mBorderColor = BORDER_COLOR;
/**
*
*/
private int mBorderWidth = BORDER_WIDTH;
/**
* , 。0 ,1
*/
private float mPrecent = 0.5f;
/**
* , ,
*/
public enum ShowShape {
RECT
}
/**
*
*/
private ShowShape mShape = ShowShape.RECT;
/**
* ,5
*/
private final int DEFAULT_TIME = 5;
/**
* , 。
*/
private int mTime = DEFAULT_TIME;
/**
* ,
*
* @param time
* @return
*/
public WaveView setTime(int time) {
this.mTime = time;
return this;
}
/**
* 1
*/
private Paint mWavePaint1;
/**
*
*/
private Paint mBorderPaint;
/**
*
*/
private Paint mTextPaint;
/**
* 1
*/
private Path mWavePath1;
/**
*
*/
private DecimalFormat mFormat;
/**
*
*/
private int mWidth;
/**
*
*/
private int mHeight;
/**
* y
*/
private float mChangeY;
/**
* ,
*/
private float mFinalY;
/**
*
*/
private int mWaveCount = 8;
/**
* ,
*/
private boolean isReset = true;
/**
*
*/
private float mCurrentPrecent = 0.0f;
/**
*
*/
private int mMoveSum1;
/**
* ,
*/
private boolean invalidateFlag = false;
/**
*
*/
private PrecentChangeListener mPrecentChangeListener;
/**
*
*/
public interface PrecentChangeListener {
/**
*
*
* @param precent , 0.00 [0.00 , 1.00]
*/
void precentChange(double precent);
}
public WaveView(Context context) {
this(context, null);
}
public WaveView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initAttrs(context, attrs); // dingy9i
init();
}
//
private void initAttrs(Context context, AttributeSet attrs) {
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.WaveView);
mWaveLenght1 = typedArray.getInteger(R.styleable.WaveView_wave1Length, WAVE_LENGTH1);
mWaveHeight1 = typedArray.getInteger(R.styleable.WaveView_wave1Height, WAVE_HEIGHT1);
mWaveColor1 = typedArray.getColor(R.styleable.WaveView_wave1Color, WAVE_COLOR1);
mOffset1 = typedArray.getInteger(R.styleable.WaveView_wave1Offset, WAVE_OFFSET1);
mBorderWidth = typedArray.getDimensionPixelSize(R.styleable.WaveView_borderWidth, BORDER_WIDTH);
mBorderColor = typedArray.getColor(R.styleable.WaveView_borderColor, BORDER_COLOR);
mTime = typedArray.getInteger(R.styleable.WaveView_intervalTime, DEFAULT_TIME);
mPrecent = typedArray.getFloat(R.styleable.WaveView_precent, 0.5f);
/**
* , 。0 ,1
*/
int shapeValue = typedArray.getInteger(R.styleable.WaveView_showShape, 0);
mShape = ShowShape.RECT;
typedArray.recycle();
}
private void init() {
mWavePaint1 = new Paint(Paint.ANTI_ALIAS_FLAG);
mBorderPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mWavePath1 = new Path();
mWavePaint1.setColor(mWaveColor1);
mWavePaint1.setStyle(Paint.Style.FILL);
mBorderPaint.setColor(mBorderColor);
mBorderPaint.setStrokeWidth(mBorderWidth);
mBorderPaint.setStyle(Paint.Style.STROKE);
mTextPaint.setColor(mTextColor);
mTextPaint.setTextSize(mTextSize);
//
mFormat = new DecimalFormat("###,###,##0.00");
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mWidth = w;
mHeight = h;
mChangeY = mHeight;
// , ,
mFinalY = (1 - mPrecent) * mHeight; //
}
@Override
protected void onDraw(Canvas canvas) {
mWavePath1.reset();
if (mBorderWidth > 0) {
// 0,
if(mShape == ShowShape.RECT) {
canvas.drawRect(0, 0, mWidth, mHeight, mBorderPaint);
}
}
mWavePath1.moveTo(-mWaveLenght1, mChangeY);
if (!isReset) { //
//
for (int i = 0; i < mWaveCount; i++) {
// 1
mWavePath1.quadTo((-mWaveLenght1 * 3 / 4) + (i * mWaveLenght1) + mMoveSum1, mChangeY + mWaveHeight1, (-mWaveLenght1 / 2) + (i * mWaveLenght1) + mMoveSum1, mChangeY);
mWavePath1.quadTo((-mWaveLenght1 * 1 / 4) + (i * mWaveLenght1) + mMoveSum1, mChangeY - mWaveHeight1, (i * mWaveLenght1) + mMoveSum1, mChangeY);
}
// ,
mChangeY -= 1;
if (mChangeY < mFinalY) mChangeY = mFinalY;
// 1 , 2
mMoveSum1 += mOffset1;
if (mMoveSum1 >= mWaveLenght1) mMoveSum1 = 0;
// ,
mWavePath1.lineTo(mWidth, mHeight);
mWavePath1.lineTo(0, mHeight);
mWavePath1.close();
canvas.drawPath(mWavePath1, mWavePaint1);
} else {
//
canvas.drawColor(Color.TRANSPARENT);
}
//
mCurrentPrecent = 1 - mChangeY / mHeight;
//
String format1 = mFormat.format(mCurrentPrecent);
// , 。 "50%" ,
double parseDouble = Double.parseDouble(format1);
canvas.drawText((int) (parseDouble * 100) + " %", (mWidth - mTextPaint.measureText(format1)) / 2, mHeight / 5, mTextPaint);
// null ,
if (mPrecentChangeListener != null && mChangeY != mFinalY) {
mPrecentChangeListener.precentChange(parseDouble);
}
//
if (mChangeY == mFinalY){
canvas.drawColor(ContextCompat.getColor(getContext(), R.color.bowencolor));
}
//
if (invalidateFlag) postInvalidateDelayed(mTime);
}
/**
*
*
* @param borderWidth
* @return
*/
public WaveView setBorderWidth(int borderWidth) {
this.mBorderWidth = borderWidth;
return this;
}
/**
* 1
*
* @param waveColor1
* @return
*/
public WaveView setWaveColor1(int waveColor1) {
this.mWaveColor1 = waveColor1;
return this;
}
/**
*
*
* @param borderColor
* @return
*/
public WaveView setBorderColor(int borderColor) {
this.mBorderColor = borderColor;
return this;
}
/**
*
*
* @param textColor
* @return
*/
public WaveView setTextColor(int textColor) {
this.mTextColor = textColor;
return this;
}
/**
*
*
* @param precent
* @return
*/
public WaveView setPrecent(float precent) {
this.mPrecent = precent;
return this;
}
/**
*
*
* @param textSize
* @return
*/
public WaveView setTextSize(int textSize) {
this.mTextSize = textSize;
return this;
}
/**
*
*
* @param shape
* @return
*/
public WaveView setShape(ShowShape shape) {
this.mShape = shape;
return this;
}
/**
*
*/
public void start() {
invalidateFlag = true;
isReset = false;
postInvalidateDelayed(mTime);
}
/**
*
*/
public void stop() {
invalidateFlag = false;
isReset = false;
}
/**
*
*/
public void reset() {
invalidateFlag = false;
isReset = true;
mChangeY = mHeight;
postInvalidate();
}
}
2.attrs
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- -->
<declare-styleable name="WaveView">
<!-- 1 、 、 -->
<attr name="wave1Length" format="integer" />
<attr name="wave1Height" format="integer" />
<attr name="wave1Color" format="color" />
<attr name="wave1Offset" format="integer" />
<!-- -->
<attr name="borderWidth" format="dimension" />
<attr name="borderColor" format="color" />
<!-- -->
<attr name="textColor" format="color" />
<attr name="textSize" format="dimension" />
<!-- -->
<attr name="precent" format="float" />
<!-- -->
<attr name="intervalTime" format="integer" />
<!-- ,rect 、circle -->
<attr name="showShape" format="enum">
<enum name="rect" value="0" />
<enum name="circle" value="1" />
</attr>
</declare-styleable>
</resources>
3.배치
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.wh.myapplication.MainActivity">
<com.example.wh.myapplication.WaveView
android:id="@+id/waveview1"
android:layout_width="200dp"
android:layout_height="200dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:orientation="horizontal">
<Button
android:id="@+id/bt_start"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=" "/>
<Button
android:id="@+id/bt_stop"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=" "/>
<Button
android:id="@+id/bt_reset"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=" "/>
</LinearLayout>
</LinearLayout>
4.MainActivity
package com.example.wh.myapplication;
import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
private WaveView waveview1;
private Button btStart;
private Button btStop;
private Button btReset;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
waveview1 = (WaveView) findViewById(R.id.waveview1);
btStart = (Button) findViewById(R.id.bt_start);
btStop = (Button) findViewById(R.id.bt_stop);
btReset = (Button) findViewById(R.id.bt_reset);
//
waveview1.setBorderWidth(2)
.setWaveColor1(Color.RED)
.setBorderColor(Color.GREEN)
.setTextColor(Color.BLUE)
.setShape(WaveView.ShowShape.RECT)
.setTextSize(36)
.setPrecent(1f)//
.setTime(2);
btStart.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
waveview1.start();
}
});
btStop.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
waveview1.stop();
}
});
btReset.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
waveview1.reset();
}
});
}
}
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Kotlin의 기초 - 2부지난 글에서는 Kotlin이 무엇인지, Kotlin의 특징, Kotlin에서 변수 및 데이터 유형을 선언하는 방법과 같은 Kotlin의 기본 개념에 대해 배웠습니다. 유형 변환은 데이터 변수의 한 유형을 다른 데이터...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.