Android自定義進度條效果
更新時間：2018年08月06日 08:36:25 作者：迅捷斥候電腦
這篇文章主要為大家詳細介紹了Android自定義進度條效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
最近項目中需要在一個功能模塊中使用進度條，效果圖如下：
上面圖片從左到右分別是效果一，效果二，效果三
需求： 以下四點需要實現
1： 當沒有沒完成進度的時候，顯示效果一
2：當進度完成了一部分，顯示圖二
3：當進度全部完成之后，顯示效果三
4：當進度1到進度2需要動畫，進度2到進度3需要動畫； 同樣進度3到進度2或者進度1也需要動畫。
剛開始拿到這個東西的時候，考慮了老長時間，覺得還是有技巧的，先說一下思路吧
首先我們，寫一個一模一樣的底部布局，如下圖1：
圖一也就是效果一的全部顯示，
圖三不是跟圖一一模一樣嗎？ 是的，但是字體的顏色不一樣的，圖三的顏色的白色的，然后把圖三放進圖二中，得到圖四， 因為圖二是父布局，圖三是子布局，圖三放在圖二中，只會顯示部分的視圖。 此時在把圖四和圖一疊加！
注意：圖一在圖四的下面。
如下圖所示，得到圖五：
上圖是大致的思路，接下來看下我們用Java代碼應該怎樣思考：
- XML中首先最外層是RelativeLayout，
- 然后父布局里面有兩個，分別是圖一和圖四的布局，圖一的布局可以使RelativeLayout，圖四的布局我們需要自定義GroupView，需要繼承自LinearLayout，至于為什么不是繼承自RelativeLayout，實驗是不行的，這是一個疑惑點。
- 在XML中，靜態(tài)在自定義GroupView中添加跟圖一一樣的布局，但是需要注意的是，顏色不能一致！
- 在自定義的布局中，我們需要動態(tài)更改自定義ViewGroup的寬度，也就是動態(tài)更改圖二的寬度。
接下來看下具體的代碼實現：
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="體制數據完善度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="體制數據完善度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; //每個進度的寬度
private int progressIntervalWidth; //相應進度占的寬度
private ValueAnimator valueAnimator; //動畫
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 本次進度
* @return
*/
public MineProgressLinearLayout setNowProgress(int nowProgress) {
this.nowProgress = nowProgress;
return MineProgressLinearLayout.this;
}
/**
*
* @param totalProgress 總進度
* @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) { //現有進度不能大于總進度
nowProgress = totalProgress;
}
if(totalProgress < preProgress) { //上一個進度不能大于總進度
preProgress = totalProgress;
}
spaceInterval = widthRelative / totalProgress;
progressIntervalWidth = spaceInterval * nowProgress;
//設置父View的寬度
parentLayoutParams = (RelativeLayout.LayoutParams) getLayoutParams();
//如果傳入的進度為0 或者 之前的進度等于progressCount的進度 則不用更改寬度
if (nowProgress == 0 || preProgress == nowProgress) {
parentLayoutParams.width = progressIntervalWidth;
setLayoutParams(parentLayoutParams);
return;
}
//設置子View的寬度
RelativeLayout childAt = (RelativeLayout) getChildAt(0);
LinearLayout.LayoutParams childAtLp = (LayoutParams) childAt.getLayoutParams();
childAtLp.width = widthRelative;
childAt.setLayoutParams(childAtLp);
//設置父View的背景色
setBackgroundResource(R.drawable.drawable_rectangle_raduis_50_color_0a3f6d_to_fc6f54);
startAnimation();
}
//開啟動畫
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時，關閉動畫
public void cancelAnimation() {
if(valueAnimator != null) {
valueAnimator.cancel();
valueAnimator = null;
}
}
}
4: 調用：
mineProgressLinearlayout.setLayoutWidth(widthLayout) .setNowProgress(nowMineProgress) .setTotalProgress(totalMineProgress).build();
實際上我覺得，代碼不難，重要的是原理是怎么實現的，因為知道不同的原理會寫出不同的代碼。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
詳解Android使用CoordinatorLayout+AppBarLayout+CollapsingToolbarL
這篇文章主要為大家詳細介紹了Android使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayou實現手指滑動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
Android自定義TextView實現drawableLeft內容居中
這篇文章主要介紹了Android自定義TextView實現drawableLeft內容居中的相關資料,需要的朋友可以參考下2017-06-06
解析Android開發(fā)優(yōu)化之:軟引用與弱引用的應用
Java從JDK1.2版本開始，就把對象的引用分為四種級別，從而使程序能更加靈活的控制對象的生命周期。這四種級別由高到低依次為：強引用、軟引用、弱引用和虛引用，本篇文章重點介紹一下軟引用和弱引用2013-05-05
本文詳細講解了Android中CountDownTimer類，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-12-12
這篇文章主要給大家介紹了關于一次Android動畫工具類的封裝實戰(zhàn)，文中通過示例代碼介紹的非常詳細，對各位Android開發(fā)者們具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-04-04
這篇文章主要介紹了Android 沉浸式狀態(tài)欄及懸浮效果的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-11-11
本篇文章主要介紹了Android應用圖標上的小紅點Badge實踐代碼，具有一定的參考價值，有興趣的可以了解一下2017-07-07
工作中遇到了一個需求，讓應用中的一個列表按照分類顯示，并且能提示當前是在哪個分類，度娘了一番，參考了前輩們的博客后實現了，現在分享給大家，有需要的可以參考借鑒。2016-09-09
這篇文章主要為大家介紹了拯救強迫癥Android Builder模式的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
Android實現氣泡布局/彈窗效果 氣泡尖角方向及偏移量可控
這篇文章主要為大家詳細介紹了Android實現氣泡布局/彈窗效果，可控制氣泡尖角方向及偏移量，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08