1. 程式人生 > >Android 自定義橫向進度條(可動態設定最大值)

Android 自定義橫向進度條(可動態設定最大值)

自定義橫向進度條

      主佈局檔案中包 含         

<LinearLayout
    android:id="@+id/linearlayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/color_white_real"
    android:orientation="vertical"
    android:paddingBottom="@dimen/x5"
    android:paddingLeft="@dimen/x15"
    android:paddingTop="@dimen/y15"></LinearLayout>

進度條佈局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="@dimen/x10"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/lin_coma"
        android:layout_width="@dimen/x75"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:maxEms="5"
            android:singleLine="true"
            android:ellipsize="end"
            android:text="哈/哈/哈啊啊啊啊啊"
            android:textColor="#ff969696"
            android:textSize="12sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/bar_container"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_marginRight="@dimen/x10"
        android:gravity="left|center_vertical"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/bar"
            android:layout_width="wrap_content"
            android:layout_height="@dimen/y12"
            android:background="#0CD3F4" />

        <TextView
            android:id="@+id/percent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="0.00%"
            android:layout_marginLeft="@dimen/x10"
            android:layout_marginRight="@dimen/x10"
            android:textColor="@color/color_light_bule"
            android:textSize="12sp" />
    </LinearLayout>

</LinearLayout>

通過往linnarlayout中迴圈添加布局實現進度條

//獲取data集合中包含的進圖條資料,迴圈新增到一個新的double集合中,
  private void showColumnar(List<SuccessCaseMyMainlistBean.DataBean> data) {
        doubles = new ArrayList<>();
        for (int i = 0; i < data.size(); i++) {
            int progress = data.get(i).getArticleNumber();
            doubles.add(progress);
        }
//切記在每次開始載入時清空linearlayout的UI
        linearlayout.removeAllViews();
        //賦值
        for (int i = 0; i < data.size(); i++) {
            //隨機產生一個進度
//            final double ranNum = Math.random() * 100;
            int ranNum = data.get(i).getArticleNumber();
            if (ranNum <= 0) {
                ranNum = 0;
            }
            //設定最大值
            final int finalMaxScale = Collections.max(doubles);

            item = LayoutInflater.from(context).inflate(R.layout.success_columnar_item, linearlayout, false);
            LinearLayout lincoma = item.findViewById(R.id.lin_coma);
            TextView name = item.findViewById(R.id.name);
            TextView percent = item.findViewById(R.id.percent);
            final View bar = item.findViewById(R.id.bar);
            LinearLayout container = item.findViewById(R.id.bar_container);
            name.setText(data.get(i).getJobTitle());
            bar.setBackgroundResource(R.mipmap.line_porgess);
            percent.setText(NumberUtil.formatString(new BigDecimal(ranNum)));
            final double finalRanNum = ranNum;
            //計算出進度條應該顯示的寬度
            final LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) bar.getLayoutParams();
//            lp.width = (int) ((width - width / 3) * finalRanNum / finalMaxScale);
//用你的螢幕寬度-你的佈局中除進度條外其他佈局的寬度*進度/最大值
//其中PxUtils是把dp轉換為px,確保在不同螢幕下的適配
            lp.width = (int) ((this.width - PxUtils.dpToPx(170, context)) * finalRanNum / finalMaxScale);
            //設定動畫,1.5秒內從0.0寬度變成1.0寬度(1.0代表100%)
            final ObjectAnimator anim = ObjectAnimator.ofFloat(bar, "alpha", 0.0F, 1.0F).setDuration(500);
            //動畫監聽
            anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator valueAnimator) {
                    //事實計算寬度,應該顯示的寬度乘以當前進度,再事實設定給bar
                    bar.setLayoutParams(lp);
                }
            });
            //動畫開始
            anim.start();
            //設定/隔斷並新增隔斷到linearlayout
            TextView textView = new TextView(context);
            textView.setHeight(PxUtils.dpToPx(10, context));
            linearlayout.addView(textView);
            //新增item到新增隔斷到linearlayout
            linearlayout.addView(item);
        }

    }