最近抽了點(diǎn)時間學(xué)習(xí)了Android自定義view，然后花了大概幾天時間搞了個自己的一個款開源。讓我們先來看看效果：
總體效果
本開源主要實現(xiàn)了一款精美、優(yōu)雅的加載控件。她目前有兩種類型：弧形加載（CircleProgressView）和水平加載（HorizontalProgressView），同時，你可以為她設(shè)置顏色漸變效果。
傳送門地址：https://github.com/Moosphan/Material-ProgressView
歡迎大家獻(xiàn)上寶貴的star和issue，我將繼續(xù)努力完善它，也歡迎大家和我一起來優(yōu)化它的功能，剛學(xué)習(xí)自定義view，有很多處理不當(dāng)?shù)牡胤较Ｍ赋鰜恚x謝，后續(xù)將提升它的定制性和動畫等效果。
再來看看細(xì)節(jié)的效果圖：
細(xì)節(jié)效果
下面我們來看看該如何使用這款控件。
快速開始
-
Gradle:
build.gradle:
compile 'com.moos:Material-ProgressView:1.0.4'?
-
Maven:
<dependency> <groupId>com.moos</groupId> <artifactId>Material-ProgressView</artifactId> <version>1.0.4</version> <type>pom</type> </dependency>
-
通過xml文件來設(shè)置:
<com.moos.library.CircleProgressView android:id="@+id/progressView_circle" android:layout_width="240dp" android:layout_height="240dp" android:layout_marginTop="12dp" app:start_progress="0" app:end_progress="60" app:start_color="@color/purple_end" app:end_color="@color/purple_start" app:circleBroken="true" app:isTracked="true" app:track_width="26dp"/> <com.moos.library.HorizontalProgressView android:id="@+id/progressView_horizontal" android:layout_width="320dp" android:layout_height="100dp" android:layout_marginBottom="40dp" android:layout_marginTop="36dp" app:start_color="@color/red_start" app:end_color="@color/red_end" app:track_width="12dp" app:end_progress="60" app:progressTextColor="#696969" app:corner_radius="12dp" app:isTracked="true" app:trackColor="#f4f4f4"/>?
-
通過java代碼動態(tài)初始化屬性:
//CircleProgressView CircleProgressView circleProgressView = (CircleProgressView) view.findViewById(R.id.progressView_circle); circleProgressView.setStartProgress(0); circleProgressView.setEndProgress(80); circleProgressView.setStartColor(Color.parseColor("#FF8F5D")); circleProgressView.setEndColor(Color.parseColor("#F54EA2")); circleProgressView.setCircleBroken(true); circleProgressView.setTrackWidth(20); circleProgressView.setProgressDuration(2000); circleProgressView.setTrackEnabled(true); circleProgressView.setFillEnabled(false); circleProgressView.startProgressAnimation(); //HorizontalProgressView HorizontalProgressView circleProgressView = (HorizontalProgressView) view.findViewById(R.id.progressView_horizontal); horizontalProgressView.setStartProgress(0); horizontalProgressView.setEndProgress(80); horizontalProgressView.setStartColor(Color.parseColor("#FF8F5D")); horizontalProgressView.setEndColor(Color.parseColor("#F54EA2")); horizontalProgressView.setTrackWidth(30); horizontalProgressView.setProgressDuration(2000); horizontalProgressView.setTrackEnabled(true); horizontalProgressView.setProgressCornerRadius(20); horizontalProgressView.setProgressTextPaddingBottom(12); horizontalProgressView.startProgressAnimation(); -
此外，如果你想要讓水平加載控件上方的百分比數(shù)值跟隨其運(yùn)動，可以這樣設(shè)置：
- 通過xml設(shè)置:
app:textMovedEnable="true"- 通過java代碼:
horizontalProgressView.setProgressTextMoved(true);然后你會看到如下效果：
?文字跟隨 -
如果想要根據(jù)給定值來動態(tài)設(shè)置加載控件的進(jìn)度值（如加載進(jìn)度和上傳進(jìn)度等），可以通過方法
setProgress，如：...... //上傳或者下載的回調(diào) @Override public void onDownloading(float progress) { // 由于是動態(tài)設(shè)置進(jìn)度值，無需再調(diào)用`startProgressAnimation`方法來啟動進(jìn)度的刷新了 horizontalProgressView.setProgress(progress); } ......
相關(guān)文檔
- 控件屬性
-
共有屬性:
Attribute Description start_progress 起始進(jìn)度 end_progress 終止進(jìn)度 start_color 漸變效果的起始顏色 end_color 漸變效果的終止顏色 isTracked 是否顯示軌跡背景 track_width 進(jìn)度條的寬度（邊界寬度） trackColor 軌跡背景的顏色 progressTextVisibility 是否顯示進(jìn)度值文本 progressTextColor 進(jìn)度值的顏色 progressTextSize 進(jìn)度值的文本字體大小 progressDuration 動畫時長 animateType 動畫類型（可以參考屬性動畫的TimeInterpolator） -
CircleProgressView的特有屬性:
Attribute Description isFilled 是否內(nèi)部填充 circleBroken 是選擇圓形還是弧形進(jìn)度條 -
HorizontalProgressView的特有屬性:
Attribute Description corner_radius 圓角半徑 text_padding_bottom 文字距離view的padding textMovedEnable 設(shè)置進(jìn)度值是否跟隨控件動畫移動
-
回調(diào)
/** * 你可以利用該回調(diào)來定制自己的progress值的UI展示 */ circleProgressView.setProgressViewUpdateListener(new CircleProgressView.CircleProgressUpdateListener() { @Override public void onCircleProgressStart(View view) { } @Override public void onCircleProgressUpdate(View view,float progress) { int progressInt = (int) progress; textView.setText(String.valueOf(progress)+"%"); } @Override public void onCircleProgressFinished(View view) { } }); horizontalProgressView.setProgressViewUpdateListener(new HorizontalProgressView.HorizontalProgressUpdateListener() { @Override public void onHorizontalProgressStart(View view) { } @Override public void onHorizontalProgressUpdate(View view,float progress) { int progressInt = (int) progress; textView.setText(String.valueOf(progress)+"%"); } @Override public void onHorizontalProgressFinished(View view) { } }); -
Methods
//共有的方法 void setAnimateType(@AnimateType int type); void setStartProgress(float startProgress); void setEndProgress(float endProgress); void setStartColor(@ColorInt int startColor); void setEndColor(@ColorInt int endColor); void setTrackWidth(int width); void setProgressTextSize(int size); void setProgressTextColor(@ColorInt int textColor); void setProgressDuration(int duration); void setTrackEnabled(boolean trackAble); void setTrackColor(@ColorInt int color); void setProgressTextVisibility(boolean visibility); void startProgressAnimation(); void stopProgressAnimation(); //CircleProgressView的特有方法 void setCircleBroken(boolean isBroken); void setFillEnabled(boolean fillEnabled); //HorizontalProgressView的特有方法 void setProgressCornerRadius(int radius); void setProgressTextPaddingBottom(int offset);
demo下載地址
更新記錄
- V1.0.1(2018-03-16):為加載控件提供進(jìn)度回調(diào)
- V1.0.2(2018-03-22):為水平進(jìn)度條提供進(jìn)度值的跟隨動畫
- V1.0.3(2018-04-12):增加弧形加載控件的刻度效果
- V1.0.4(2018-05-03):支持動態(tài)設(shè)置加載控件的進(jìn)度值(下載/上傳進(jìn)度等)
