Android 사용자 정의 View 로 딩 진행 막대 효과 구현
다음은 수준의 진도 항목 을 열 로 설명 한다.
1.우선 attrs.xml 파일 에서 우리 가 필요 로 하 는 속성 을 정의 합 니 다.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="GradientProgressBar">
<attr name="textSize" format="dimension" />
<attr name="textColor" format="color" />
<attr name="bgColor" format="color" />
<attr name="startColor" format="color" />
<attr name="endColor" format="color" />
<attr name="rectRadius" format="dimension" />
<attr name="loadSpeed" format="integer" />
<attr name="lineWidth" format="dimension" />
</declare-styleable>
<declare-styleable name="RoundProgressBar">
<attr name="textSizeRound" format="dimension" />
<attr name="textColorRound" format="color" />
<attr name="bgColorRound" format="color" />
<attr name="currentColorRound" format="color" />
<attr name="circleWidthRound" format="dimension" />
<attr name="loadSpeedRound" format="integer" />
</declare-styleable>
</resources>
2.사용자 정의 속성 가 져 오기:
/**
*
*/
private int mTextSize;
/**
*
*/
private int mTextColor;
/**
*
*/
private int mStartColor;
/**
*
*/
private int mEndColor;
/**
*
*/
private int mProgressWidth;
/**
*
*/
private int mRadius;
/**
*
*/
private int mBgColor;
/**
*
*/
private float mCurrentProgress;
/**
*
*/
private int mLoadSpeed;
private String mContent="0%";
private Rect mBounds;
private Paint mPaint;
public GradientProgressBar(Context context) {
this(context, null);
}
public GradientProgressBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public GradientProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.GradientProgressBar, defStyleAttr, 0);
int count = array.getIndexCount();
for (int i = 0; i < count; i++) {
int index = array.getIndex(i);
switch (index) {
case R.styleable.GradientProgressBar_textSize:
/**
* 16sp,TypeValue sp px
*/
mTextSize = array.getDimensionPixelSize(index, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
break;
case R.styleable.GradientProgressBar_textColor:
/**
*
*/
mTextColor = array.getColor(index, Color.BLACK);
break;
case R.styleable.GradientProgressBar_startColor:
mStartColor = array.getColor(index, Color.BLACK);
break;
case R.styleable.GradientProgressBar_endColor:
mEndColor = array.getColor(index, Color.BLACK);
break;
case R.styleable.GradientProgressBar_bgColor:
mBgColor = array.getColor(index, Color.BLACK);
break;
case R.styleable.GradientProgressBar_rectRadius:
mRadius = array.getDimensionPixelSize(index, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 10, getResources().getDisplayMetrics()
));
break;
case R.styleable.GradientProgressBar_lineWidth:
mProgressWidth=array.getDimensionPixelSize(index,(int)TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP,200,getResources().getDisplayMetrics()));
break;
case R.styleable.GradientProgressBar_loadSpeed:
mLoadSpeed=array.getInt(index,10);
break;
}
}
array.recycle();
init();
}
init()방법 은 다음 과 같 습 니 다.
private void init(){
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setAntiAlias(true);
mBounds = new Rect();
new Thread(new Runnable() {
@Override
public void run() {
while (mCurrentProgress < mProgressWidth) {
mCurrentProgress = mCurrentProgress + 1;
mContent = Math.round((mCurrentProgress / mProgressWidth) * 100) + "%";
try {
postInvalidate();
Thread.sleep(mLoadSpeed);
} catch (Exception e) {
e.printStackTrace();
}
}
}
}).start();
}
3.OnDraw()재 작성 방법
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
/**
*
*/
mPaint.setColor(mBgColor);
mPaint.setStyle(Paint.Style.FILL);
/**
*
*/
canvas.drawRoundRect(0, 0, mProgressWidth, getHeight(), mRadius, mRadius, mPaint);
/**
* , , ,
* google ,
*/
LinearGradient gradient = new LinearGradient(0, getHeight() / 2, mProgressWidth, getHeight() / 2,
mStartColor, mEndColor, Shader.TileMode.MIRROR);
mPaint.setShader(gradient);
/**
*
*/
canvas.drawRoundRect(0, 0, mCurrentProgress, getHeight(), mRadius, mRadius, mPaint);
mPaint.reset();
mPaint.setAntiAlias(true);
mPaint.setColor(mTextColor);
mPaint.setTextSize(mTextSize);
/**
*
*/
mPaint.getTextBounds(mContent, 0, mContent.length(), mBounds);
canvas.drawText(mContent, getWidth() / 2 - mBounds.width() / 2, getHeight() / 2 + mBounds.height() / 2, mPaint);
}
자,이렇게 해서 우리 의 수평 그 라 데 이 션 로드 진도 바 를 완 성 했 습 니 다.아래 에 원형 진도 바 의 소스 코드 를 붙 입 니 다.
public class RoundProgressBar extends View {
/**
*
*/
private int mTextSize;
private int mTextColor;
private int mCircleWidth;
private int mBgColor;
private int mCurrentColor;
private int mLoadSpeed;
private float mCurrentProgress;
private String mContent = "0%";
private Rect mBounds;
private Paint mPaint;
public RoundProgressBar(Context context) {
this(context, null);
}
public RoundProgressBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public RoundProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.RoundProgressBar, defStyleAttr, 0);
int count = array.getIndexCount();
for (int i = 0; i < count; i++) {
int index = array.getIndex(i);
switch (index) {
case R.styleable.RoundProgressBar_textSizeRound:
/**
* 16sp,TypeValue sp px
*/
mTextSize = array.getDimensionPixelSize(index, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
break;
case R.styleable.RoundProgressBar_textColorRound:
/**
*
*/
mTextColor = array.getColor(index, Color.BLACK);
break;
case R.styleable.RoundProgressBar_bgColorRound:
mBgColor = array.getColor(index, Color.BLACK);
break;
case R.styleable.RoundProgressBar_circleWidthRound:
mCircleWidth = array.getDimensionPixelSize(index, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 1, getResources().getDisplayMetrics()
));
break;
case R.styleable.RoundProgressBar_currentColorRound:
mCurrentColor = array.getColor(index, Color.BLACK);
break;
case R.styleable.RoundProgressBar_loadSpeedRound:
mLoadSpeed=array.getInt(index,10);
break;
}
}
array.recycle();
init();
}
private void init() {
mBounds = new Rect();
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setAntiAlias(true);
new Thread(new Runnable() {
@Override
public void run() {
while (mCurrentProgress < 360) {
mCurrentProgress = mCurrentProgress + 1;
mContent = Math.round((mCurrentProgress / 360) * 100) + "%";
postInvalidate();
try {
Thread.sleep(mLoadSpeed);
} catch (Exception e) {
e.printStackTrace();
}
}
}
}).start();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
/**
*
*/
mPaint.setColor(mBgColor);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(mCircleWidth);
/**
*
*/
int xPoint = getWidth() / 2;// x
int radius = xPoint - mCircleWidth;//
canvas.drawCircle(xPoint, xPoint, radius, mPaint);//
/**
*
*/
mPaint.setColor(mCurrentColor);
RectF oval = new RectF(xPoint - radius, xPoint - radius, radius + xPoint, radius + xPoint);
canvas.drawArc(oval, -90, mCurrentProgress, false, mPaint);
/**
*
*/
mPaint.reset();
mPaint.setAntiAlias(true);
mPaint.setColor(mTextColor);
mPaint.setTextSize(mTextSize);
mPaint.getTextBounds(mContent, 0, mContent.length(), mBounds);
canvas.drawText(mContent, xPoint - mBounds.width() / 2, xPoint + mBounds.height() / 2, mPaint);
}
}
4.xml 파일 에 사용자 정의 View 를 표시 합 니 다.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:gravity="center_horizontal"
android:orientation="vertical">
<com.customeview2.GradientProgressBar
android:id="@+id/gradientProgressBar"
android:layout_width="300dp"
android:layout_height="15dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="200dp"
app:bgColor="#C3C3C3"
app:endColor="#25B7FA"
app:lineWidth="300dp"
app:loadSpeed="10"
app:rectRadius="20dp"
app:startColor="#D2EEFB"
app:textColor="@android:color/holo_red_light"
app:textSize="12sp" />
<com.customeview2.RoundProgressBar
android:id="@+id/roundProgressBar"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_below="@+id/gradientProgressBar"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="40dp"
app:bgColorRound="#C3C3C3"
app:circleWidthRound="3dp"
app:currentColorRound="#25B7FA"
app:loadSpeedRound="10"
app:textColor="@android:color/holo_red_light"
app:textColorRound="@android:color/holo_red_light"
app:textSizeRound="11sp" />
</LinearLayout>
자,이렇게 해서 우리 의 수평 로드 진도 바 와 원형 로드 진도 바 효 과 를 완 성 했 습 니 다.괜 찮 은 것 같 지 않 습 니까?소스 코드
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Bitrise에서 배포 어플리케이션 설정 테스트하기이 글은 Bitrise 광고 달력의 23일째 글입니다. 자체 또는 당사 등에서 Bitrise 구축 서비스를 사용합니다. 그나저나 며칠 전 Bitrise User Group Meetup #3에서 아래 슬라이드를 발표했...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.