andorid自定義progress

原創

feiyangxiaomi

2020-02-22 16:27

一直覺得android的progress不太好看，想改造一下，參考了github上https://github.com/feiyangxiaomi/ProgressWheel/

第一個圖是改造前的android自帶的progress，後面的三個是改造後的progress，顯然改造後的progress更加的靈活，同時也展現的比較美觀。具體實現方法非常的簡單，這裏從界面到程序的介紹流程。

在我們的界面中我們使用ProgressWheel實現後面三個效果（只寫一個）：

<com.todddavies.components.progressbar.ProgressWheel
    android:id="@+id/progressBarThree"
    android:layout_width="150dp"
    android:layout_height="150dp"
    ProgressWheel:text=""
    ProgressWheel:textColor="#222222"
    ProgressWheel:textSize="14sp"
    ProgressWheel:rimColor="#44000000"
    ProgressWheel:circleColor="#2E9121"
    ProgressWheel:barLength="20dp" 
    ProgressWheel:barColor="#8000"
    ProgressWheel:barWidth="25dp"
    ProgressWheel:rimWidth="25dp" 
    ProgressWheel:spinSpeed="-1dp" />

其中的屬性意思，我下面介紹一下，在value/attars.xml 中有定義：

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<declare-styleable name="ProgressWheel">
        <attr name="text" format="string" />
        <attr name="textColor" format="color" />
        <attr name="textSize" format="dimension" />
        <attr name="barColor" format="color" />
        <attr name="rimColor" format="color" />
        <attr name="rimWidth" format="dimension" />
        <attr name="spinSpeed" format="dimension" />
        <attr name="delayMillis" format="integer" />
        <attr name="circleColor" format="color" />
        <attr name="radius" format="dimension" />
        <attr name="barWidth" format="dimension" />
        <attr name="barLength" format="dimension" />
        <attr name="contourColor" format="color"/>
        <attr name="contourSize" format="dimension"/>
    </declare-styleable>   
</resources>

1.text、textColor、textSize爲文字樣式設置，位置見上圖中的loading所示。

2.barColor、barWidth、barLength爲外層的圈，也稱bar，顏色、寬度、總共一圈分爲多少等份，位置間上圖中loading外的那一層。

3.rimColor、rimWidth是在bar上滑塊滑動的顏色、寬度，這裏沒有長度，位置見上圖中所示。

4.spinSpeed滑塊滑動速度，delayMillis每次滑完一圈的延時，circleColor爲progress中心顏色，radius爲中心半徑。

5.contourColor和ContourSize爲bar的輪廓顏色、大小。

Java程序：

main.java程序爲:

package com.todddavies.components.progressbar;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Shader;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.RectShape;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

/**
 * A sample activity showing some of the functions of the progress bar 
 */
public class main extends Activity {
	boolean running;
	ProgressWheel pw_two;
	ProgressWheel pw_three;
	ProgressWheel pw_four;
	//ProgressWheel pw_five;
	int progress = 0;
	
	@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.progress_wheel_activity);
        pw_two = (ProgressWheel) findViewById(R.id.progressBarTwo);
        pw_three = (ProgressWheel) findViewById(R.id.progressBarThree);
        pw_four = (ProgressWheel) findViewById(R.id.progressBarFour);
        //pw_five = (ProgressWheel) findViewById(R.id.progressBarFive);
        
        int[] pixels = new int[] { 0xFF2E9121, 0xFF2E9121, 0xFF2E9121,
            0xFF2E9121, 0xFF2E9121, 0xFF2E9121, 0xFFFFFFFF, 0xFFFFFFFF};
        Bitmap bm = Bitmap.createBitmap(pixels, 8, 1, Bitmap.Config.ARGB_8888);
        Shader shader = new BitmapShader(bm,Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
        pw_three.setRimShader(shader);
        
        pw_three.spin();
        pw_four.spin();
        pw_two.setText("Loading...");
		pw_two.spin();
        
        final Runnable r = new Runnable() {
			public void run() {
				running = true;
				while(progress<361) {
					pw_two.incrementProgress();
					progress++;
					try {
						Thread.sleep(15);
					} catch (InterruptedException e) {
						// TODO Auto-generated catch block
						e.printStackTrace();
					}
				}
				running = false;
			}
        };
        
        Button spin = (Button) findViewById(R.id.btn_spin);
        spin.setOnClickListener(new OnClickListener() {
			public void onClick(View v) {
				if(!running) {
					if(pw_two.isSpinning) {
						pw_two.stopSpinning();
					}
					pw_two.resetCount();
					pw_two.setText("Loading...");
					pw_two.spin();
				}
			}
        });
        
        Button increment = (Button) findViewById(R.id.btn_increment);
        increment.setOnClickListener(new OnClickListener() {
			public void onClick(View v) {
				if(!running) {
					progress = 0;
					pw_two.resetCount();
					Thread s = new Thread(r);
					s.start();
				}
			}
        });
	}
	
	@Override
	public void onPause() {
		super.onPause();
		progress = 361;
		pw_two.stopSpinning();
		pw_two.resetCount();
		pw_two.setText("Click\none of the\nbuttons");
	}
}

看着很多，其實實際我們用的時候就用pw_two.spin，其他的是改變背景，如圖所示的第三個圖形，也還有就是顯示加載百分比的效果，這裏我沒有貼圖。

主要使用了ProgressWheel.java

源碼地址：https://github.com/feiyangxiaomi/ProgressWheel/