Android自定義進(jìn)度條效果
最近項(xiàng)目中需要在一個(gè)功能模塊中使用進(jìn)度條,效果圖如下:
上面圖片從左到右分別是效果一,效果二,效果三
需求: 以下四點(diǎn)需要實(shí)現(xiàn)
1: 當(dāng)沒有沒完成進(jìn)度的時(shí)候,顯示效果一
2:當(dāng)進(jìn)度完成了一部分,顯示圖二
3:當(dāng)進(jìn)度全部完成之后,顯示效果三
4:當(dāng)進(jìn)度1到進(jìn)度2需要?jiǎng)赢?,進(jìn)度2到進(jìn)度3需要?jiǎng)赢嫞?同樣進(jìn)度3到進(jìn)度2或者進(jìn)度1也需要?jiǎng)赢嫛?/p>
剛開始拿到這個(gè)東西的時(shí)候,考慮了老長(zhǎng)時(shí)間,覺得還是有技巧的,先說一下思路吧
首先我們,寫一個(gè)一模一樣的底部布局,如下圖1:
圖一也就是效果一的全部顯示,
圖三不是跟圖一一模一樣嗎? 是的,但是字體的顏色不一樣的,圖三的顏色的白色的,然后把圖三放進(jìn)圖二中,得到圖四, 因?yàn)閳D二是父布局,圖三是子布局,圖三放在圖二中,只會(huì)顯示部分的視圖。 此時(shí)在把圖四和圖一疊加!
注意:圖一在圖四的下面。
如下圖所示,得到圖五:
上圖是大致的思路,接下來(lái)看下我們用Java代碼應(yīng)該怎樣思考:
- XML中首先最外層是RelativeLayout,
- 然后父布局里面有兩個(gè),分別是圖一和圖四的布局,圖一的布局可以使RelativeLayout,圖四的布局我們需要自定義GroupView,需要繼承自LinearLayout,至于為什么不是繼承自RelativeLayout,實(shí)驗(yàn)是不行的,這是一個(gè)疑惑點(diǎn)。
- 在XML中,靜態(tài)在自定義GroupView中添加跟圖一一樣的布局,但是需要注意的是,顏色不能一致!
- 在自定義的布局中,我們需要?jiǎng)討B(tài)更改自定義ViewGroup的寬度,也就是動(dòng)態(tài)更改圖二的寬度。
接下來(lái)看下具體的代碼實(shí)現(xiàn):
1:drawable文件的shape文件:
drawable_rectangle_raduis_50_color_0a3f6d_to_fc6f54.xml 圖二的shape
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <!-- 漸變色 --> <gradient android:endColor="#FC6F54" android:startColor="#0A3F6D" android:type="linear"/> <corners android:radius="50dp" /> </shape>
drawable_rectangle_raduis_50_color_f0eff4.xml 圖一的shape
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="@color/color_f0eff4"/> <corners android:radius="50dp" /> </shape>
2:xml文件:
<RelativeLayout android:id="@+id/mine_progress_bottom_relayout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="@dimen/margin_20" android:layout_marginEnd="@dimen/margin_20"> <RelativeLayout android:layout_width="match_parent" android:layout_height="50dp" android:paddingEnd="@dimen/margin_16" android:background="@drawable/drawable_rectangle_raduis_50_color_f0eff4"> <TextView android:id="@+id/mine_progress_bottom_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="體制數(shù)據(jù)完善度2/5" android:textSize="15dp" android:textColor="@color/color_0A3F6D"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_mine_progress" android:layout_alignParentEnd="true" android:layout_centerVertical="true"/> </RelativeLayout> <com.bluetown.health.mine.MineProgressLinearLayout android:id="@+id/mine_progress_relayout" android:layout_width="match_parent" android:layout_height="50dp" android:visibility="gone"> <RelativeLayout android:layout_width="wrap_content" android:layout_height="50dp" android:paddingEnd="@dimen/margin_16"> <TextView android:id="@+id/mine_progress_top_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="體制數(shù)據(jù)完善度2/5" android:textSize="15dp" android:textColor="@color/color_ffffff"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_mine_white" android:layout_alignParentEnd="true" android:layout_centerVertical="true"/> </RelativeLayout> </com.bluetown.health.mine.MineProgressLinearLayout> </RelativeLayout>
3: MineProgressLinearLayout.java:
package com.bluetown.health.mine; import android.animation.ValueAnimator; import android.content.Context; import android.util.AttributeSet; import android.view.View; import android.widget.LinearLayout; import android.widget.RelativeLayout; import com.bluetown.health.R; /** * Created by ${liumengqiang} on 2018/3/20. */ public class MineProgressLinearLayout extends LinearLayout { private int widthRelative; //控件的寬度 private int spaceInterval; //每個(gè)進(jìn)度的寬度 private int progressIntervalWidth; //相應(yīng)進(jìn)度占的寬度 private ValueAnimator valueAnimator; //動(dòng)畫 private RelativeLayout.LayoutParams parentLayoutParams; //該ViewGroup的LP private int preProgress; private int nowProgress; private int totalProgress; public MineProgressLinearLayout(Context context) { super(context); } public MineProgressLinearLayout(Context context, AttributeSet attrs) { super(context, attrs); } public MineProgressLinearLayout(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } /** * @param width 最大寬度 * @return */ public MineProgressLinearLayout setLayoutWidth(int width) { widthRelative = width; return MineProgressLinearLayout.this; } /** * * @param nowProgress 本次進(jìn)度 * @return */ public MineProgressLinearLayout setNowProgress(int nowProgress) { this.nowProgress = nowProgress; return MineProgressLinearLayout.this; } /** * * @param totalProgress 總進(jìn)度 * @return */ public MineProgressLinearLayout setTotalProgress(int totalProgress) { this.totalProgress = totalProgress; return MineProgressLinearLayout.this; } public void build() { reSetWidthData(); } private void reSetWidthData() { if(totalProgress == 0) { // setVisibility(View.GONE); return; } if(totalProgress < nowProgress) { //現(xiàn)有進(jìn)度不能大于總進(jìn)度 nowProgress = totalProgress; } if(totalProgress < preProgress) { //上一個(gè)進(jìn)度不能大于總進(jìn)度 preProgress = totalProgress; } spaceInterval = widthRelative / totalProgress; progressIntervalWidth = spaceInterval * nowProgress; //設(shè)置父View的寬度 parentLayoutParams = (RelativeLayout.LayoutParams) getLayoutParams(); //如果傳入的進(jìn)度為0 或者 之前的進(jìn)度等于progressCount的進(jìn)度 則不用更改寬度 if (nowProgress == 0 || preProgress == nowProgress) { parentLayoutParams.width = progressIntervalWidth; setLayoutParams(parentLayoutParams); return; } //設(shè)置子View的寬度 RelativeLayout childAt = (RelativeLayout) getChildAt(0); LinearLayout.LayoutParams childAtLp = (LayoutParams) childAt.getLayoutParams(); childAtLp.width = widthRelative; childAt.setLayoutParams(childAtLp); //設(shè)置父View的背景色 setBackgroundResource(R.drawable.drawable_rectangle_raduis_50_color_0a3f6d_to_fc6f54); startAnimation(); } //開啟動(dòng)畫 private void startAnimation() { valueAnimator = ValueAnimator.ofInt(preProgress * spaceInterval, nowProgress * spaceInterval); valueAnimator.setDuration(1000); valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { parentLayoutParams.width = (int) animation.getAnimatedValue(); setLayoutParams(parentLayoutParams); preProgress = nowProgress; } }); valueAnimator.start(); } // 退出Activity時(shí),關(guān)閉動(dòng)畫 public void cancelAnimation() { if(valueAnimator != null) { valueAnimator.cancel(); valueAnimator = null; } } }
4: 調(diào)用:
mineProgressLinearlayout.setLayoutWidth(widthLayout) .setNowProgress(nowMineProgress) .setTotalProgress(totalMineProgress).build();
實(shí)際上我覺得,代碼不難,重要的是原理是怎么實(shí)現(xiàn)的,因?yàn)橹啦煌脑頃?huì)寫出不同的代碼。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android 七種進(jìn)度條的樣式
- Android中實(shí)現(xiàn)Webview頂部帶進(jìn)度條的方法
- android自定義進(jìn)度條漸變色View的實(shí)例代碼
- Android文件下載進(jìn)度條的實(shí)現(xiàn)代碼
- android ListView和ProgressBar(進(jìn)度條控件)的使用方法
- Android中自定義進(jìn)度條詳解
- 實(shí)例詳解Android自定義ProgressDialog進(jìn)度條對(duì)話框的實(shí)現(xiàn)
- Android編程之ProgressBar圓形進(jìn)度條顏色設(shè)置方法
- Android三種方式實(shí)現(xiàn)ProgressBar自定義圓形進(jìn)度條
- Android ProgressBar進(jìn)度條使用詳解
相關(guān)文章
詳解Android使用CoordinatorLayout+AppBarLayout+CollapsingToolbarL
這篇文章主要為大家詳細(xì)介紹了Android使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayou實(shí)現(xiàn)手指滑動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-05-05Android自定義TextView實(shí)現(xiàn)drawableLeft內(nèi)容居中
這篇文章主要介紹了Android自定義TextView實(shí)現(xiàn)drawableLeft內(nèi)容居中的相關(guān)資料,需要的朋友可以參考下2017-06-06解析Android開發(fā)優(yōu)化之:軟引用與弱引用的應(yīng)用
Java從JDK1.2版本開始,就把對(duì)象的引用分為四種級(jí)別,從而使程序能更加靈活的控制對(duì)象的生命周期。這四種級(jí)別由高到低依次為:強(qiáng)引用、軟引用、弱引用和虛引用,本篇文章重點(diǎn)介紹一下軟引用和弱引用2013-05-05Android動(dòng)畫工具類的封裝實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于一次Android動(dòng)畫工具類的封裝實(shí)戰(zhàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)各位Android開發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04Android應(yīng)用圖標(biāo)上的小紅點(diǎn)Badge實(shí)踐代碼
本篇文章主要介紹了Android應(yīng)用圖標(biāo)上的小紅點(diǎn)Badge實(shí)踐代碼,具有一定的參考價(jià)值,有興趣的可以了解一下2017-07-07Android實(shí)現(xiàn)qq列表式的分類懸浮提示
工作中遇到了一個(gè)需求,讓應(yīng)用中的一個(gè)列表按照分類顯示,并且能提示當(dāng)前是在哪個(gè)分類,度娘了一番,參考了前輩們的博客后實(shí)現(xiàn)了,現(xiàn)在分享給大家,有需要的可以參考借鑒。2016-09-09Android實(shí)現(xiàn)氣泡布局/彈窗效果 氣泡尖角方向及偏移量可控
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)氣泡布局/彈窗效果,可控制氣泡尖角方向及偏移量,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08