最近項(xiàng)目中需要在一個(gè)功能模塊中使用進(jìn)度條，效果圖如下：
上面圖片從左到右分別是效果一，效果二，效果三
需求： 以下四點(diǎn)需要實(shí)現(xiàn)
1： 當(dāng)沒(méi)有沒(méi)完成進(jìn)度的時(shí)候，顯示效果一
2：當(dāng)進(jìn)度完成了一部分，顯示圖二
3：當(dāng)進(jìn)度全部完成之后，顯示效果三
4：當(dāng)進(jìn)度1到進(jìn)度2需要?jiǎng)赢?huà)，進(jìn)度2到進(jìn)度3需要?jiǎng)赢?huà)； 同樣進(jìn)度3到進(jìn)度2或者進(jìn)度1也需要?jiǎng)赢?huà)。
剛開(kāi)始拿到這個(gè)東西的時(shí)候，考慮了老長(zhǎng)時(shí)間，覺(jué)得還是有技巧的，先說(shuō)一下思路吧
首先我們，寫(xiě)一個(gè)一模一樣的底部布局，如下圖1：
圖一也就是效果一的全部顯示，
圖三不是跟圖一一模一樣嗎？ 是的，但是字體的顏色不一樣的，圖三的顏色的白色的，然后把圖三放進(jìn)圖二中，得到圖四， 因?yàn)閳D二是父布局，圖三是子布局，圖三放在圖二中，只會(huì)顯示部分的視圖。 此時(shí)在把圖四和圖一疊加！
注意：圖一在圖四的下面。
如下圖所示，得到圖五：
上圖是大致的思路，接下來(lái)看下我們用Java代碼應(yīng)該怎樣思考：
接下來(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)畫(huà) 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(); } //開(kāi)啟動(dòng)畫(huà) 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)畫(huà) public void cancelAnimation() { if(valueAnimator != null) { valueAnimator.cancel(); valueAnimator = null; } }}4: 調(diào)用：
mineProgressLinearlayout.setLayoutWidth(widthLayout) .setNowProgress(nowMineProgress) .setTotalProgress(totalMineProgress).build();
實(shí)際上我覺(jué)得，代碼不難，重要的是原理是怎么實(shí)現(xiàn)的，因?yàn)橹啦煌脑頃?huì)寫(xiě)出不同的代碼。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
