Android开发-各种各样好看漂亮的进度条，指示器，加载提示汇总-优快云博客

本文介绍了三种不同类型的进度条实现方法，包括固定不可拖动的进度条、可拖动的进度条及自定义SeekBar进度条。每种进度条都详细展示了XML布局代码和Java实现代码，帮助开发者快速实现进度条的定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导读：之前项目中用到一些进度条，找了不少，打算写个demo自己总结一下，留着以后用，有些是自己写的，有些是github上找的别人的库，如果大家觉得好看可以用，直接下载复制代码到项目里就可以用，ok 废话少说，先上图

1.绿色进度条，可以固定的

布局；

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:textSize="20sp"
        android:layout_marginTop="30dp"
        android:layout_centerHorizontal="true"
        android:text="设置当前进度固定不可拖动"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:id="@+id/full"
        android:layout_centerInParent="true"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="60dp">

        <TextView
            android:id="@+id/progesss_value1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/percentage"
            android:gravity="center"
            android:paddingBottom="8dp"
            android:paddingLeft="4dp"
            android:paddingRight="4dp"
            android:paddingTop="2dp"
            android:textColor="@android:color/white"
            android:textSize="12sp"
            android:text="20%" />
        <ProgressBar
            android:layout_gravity="center_horizontal"
            android:id="@+id/progesss1"
            style="@style/Widget.AppCompat.ProgressBar.Horizontal"
            android:layout_width="330dp"
            android:layout_height="wrap_content"
            android:background="@drawable/myprogressbar"
            android:indeterminateDrawable="@android:drawable/progress_indeterminate_horizontal"
            android:indeterminateOnly="false"
            android:max="100"
            android:maxHeight="50dp"
            android:minHeight="16dp"
            android:progress="20"
            android:progressDrawable="@drawable/myprogressbar" />
    </LinearLayout>

</RelativeLayout>

其实就是普通的进度条改了样式而已通过设置一个父view包裹progress和textview
通过计算距离父view偏移量，把textview设置距离数值的位置，然后数值就是直接得到进度条的进度然后添加就ok了
代码；

public class Loading1 extends Activity {
    private ProgressBar progesss;
    private TextView progesssValue;
    private LinearLayout full;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.loading1);

        progesss = (ProgressBar) findViewById(R.id.progesss1);
        progesssValue = (TextView) findViewById(R.id.progesss_value1);
        full = (LinearLayout) findViewById(R.id.full);

        initview();

    }

    private void initview() {

        progesss.setProgress(66);
        progesssValue.setText(new StringBuffer().append(progesss.getProgress()).append("%"));

        setPosWay1();
//        ToastUtil.showToast("进度为66");
//        Toast.makeText(this,"进度为:--66",Toast.LENGTH_SHORT).show();

        //        full.setOnTouchListener(new View.OnTouchListener() {
//
//            @Override
//            public boolean onTouch(View v, MotionEvent event) {
//                int w = getWindowManager().getDefaultDisplay().getWidth();
//                switch (event.getAction()) {
//                    case MotionEvent.ACTION_DOWN:
//                        x1 = (int) event.getRawX();
//                        progesss.setProgress(100 * x1 / w);
//                        setPos();
//                        break;
//                    case MotionEvent.ACTION_MOVE:
//                        x2 = (int) event.getRawX();
//                        dx = x2 - x1;
//                        if (Math.abs(dx) > w / 100) { //改变条件 调整进度改变速度
//                            x1 = x2; // 去掉已经用掉的距离， 去掉这句 运行看看会出现效果
//                            progesss.setProgress(progesss.getProgress() + dx * 100 / w);
//                            setPos();
//                        }
//                        break;
//                    case MotionEvent.ACTION_UP:
//                        break;
//                }
//                return true;
//            }
//        });


    }


    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if (hasFocus) {
            setPos();
        }
    }
    private void setPosWay1() {
        progesssValue.post(new Runnable() {
            @Override
            public void run() {
                setPos();
            }
        });
    }

    /**
     * 设置进度显示在对应的位置
     */
    public void setPos() {
        int w = getWindowManager().getDefaultDisplay().getWidth();
        Log.e("w=====", "" + w);
        ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) progesssValue.getLayoutParams();
        int pro = progesss.getProgress();
        int tW = progesssValue.getWidth();
        if (w * pro / 100 + tW * 0.3 > w) {
            params.leftMargin = (int) (w - tW * 1.1);
        } else if (w * pro / 100 < tW * 0.7) {
            params.leftMargin = 0;
        } else {
            params.leftMargin = (int) (w * pro / 100 - tW * 0.7);
        }
        progesssValue.setLayoutParams(params);

    }
}

2.可拖动的绿色进度条

布局；

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:textSize="20sp"
        android:layout_marginTop="30dp"
        android:layout_centerHorizontal="true"
        android:text="横向滑动调整当前进度"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:id="@+id/full"
        android:layout_centerInParent="true"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="60dp">

        <TextView
            android:id="@+id/progesss_value1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/percentage"
            android:gravity="center"
            android:paddingBottom="8dp"
            android:paddingLeft="4dp"
            android:paddingRight="4dp"
            android:paddingTop="2dp"
            android:textColor="@android:color/white"
            android:textSize="12sp"
            android:text="20%" />
        <ProgressBar
            android:layout_gravity="center_horizontal"
            android:id="@+id/progesss1"
            style="@style/Widget.AppCompat.ProgressBar.Horizontal"
            android:layout_width="330dp"
            android:layout_height="wrap_content"
            android:background="@drawable/myprogressbar"
            android:indeterminateDrawable="@android:drawable/progress_indeterminate_horizontal"
            android:indeterminateOnly="false"
            android:max="100"
            android:maxHeight="50dp"
            android:minHeight="16dp"
            android:progress="20"
            android:progressDrawable="@drawable/myprogressbar" />
    </LinearLayout>

    <TextView
        android:id="@+id/numjd"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp"
        android:text="当前进度：0"
        android:textColor="#FF9966"
        android:textSize="50sp"
        android:layout_alignParentBottom="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

代码；设置外层group的触摸监听事件，判断手势，按下，移动，抬起然后设置进度变化，最主要就是文本要对应在进度条数值位置上

public class Loading11 extends Activity {

    private ProgressBar progesss;
    private TextView progesssValue,textnum;
    private LinearLayout full;

    private int x0,x1, x2, dx;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.loading11);

        progesss = (ProgressBar) findViewById(R.id.progesss1);
        progesssValue = (TextView) findViewById(R.id.progesss_value1);
        full = (LinearLayout) findViewById(R.id.full);
        textnum = (TextView) findViewById(R.id.numjd);
        initview();
    }

    private void initview() {

        //外面的父view设置触摸监听事件
                full.setOnTouchListener(new View.OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                int w = getWindowManager().getDefaultDisplay().getWidth();
                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        x1 = (int) event.getRawX();
                        progesss.setProgress(100 * x1 / w);
                        setPos();
                        break;
                    case MotionEvent.ACTION_MOVE:
                        x2 = (int) event.getRawX();
                        dx = x2 - x1;
                        if (Math.abs(dx) > w / 100) { //改变条件 调整进度改变速度
                            x1 = x2; // 去掉已经用掉的距离， 去掉这句 运行看看会出现效果
                            progesss.setProgress(progesss.getProgress() + dx * 100 / w);
                            setPos();
                        }
                        break;
                    case MotionEvent.ACTION_UP:
                        break;
                }
                return true;
            }
        });


    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if (hasFocus) {
            setPos();
        }
    }
    private void setPosWay1() {
        progesssValue.post(new Runnable() {
            @Override
            public void run() {
                setPos();
            }
        });
    }

    /**
     * 设置进度显示在对应的位置
     */
    public void setPos() {
        int w = getWindowManager().getDefaultDisplay().getWidth();
        Log.e("w=====", "" + w);
        ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) progesssValue.getLayoutParams();
        int pro = progesss.getProgress();
        int tW = progesssValue.getWidth();
        if (w * pro / 100 + tW * 0.3 > w) {
            params.leftMargin = (int) (w - tW * 1.1);
        } else if (w * pro / 100 < tW * 0.7) {
            params.leftMargin = 0;
        } else {
            params.leftMargin = (int) (w * pro / 100 - tW * 0.7);
        }
        progesssValue.setLayoutParams(params);
        progesssValue.setText(new StringBuffer().append(progesss.getProgress()).append("%"));
//        ToastUtil.showToast("进度为:--"+progesss.getProgress());
//        Toast.makeText(this,"进度为:--"+progesss.getProgress(),Toast.LENGTH_SHORT).show();
        textnum.setText("当前进度："+progesss.getProgress());
    }

3.简易seekbar进度条

布局；

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:background="#93b3d7"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:text="seekbar进度条\n在onStopTrackingTouch方法里修改\n//通过修改这里显示隐藏滑动后的进度数\nmWrapperIndicator.setVisibility\n(View.VISIBLE);"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:textSize="20sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <RelativeLayout
        android:layout_centerInParent="true"
        android:layout_width="match_parent"
        android:layout_height="60dp">
        <com.mylibrary.SeekBarIndicated
            android:id="@+id/mSeekBarIndicated"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:layout_width="340dp"
            android:layout_height="match_parent"
            app:indicator_paddingBottom="2dp"
            app:seekbar_marginBottom="10dp"
            app:indicator_textMarginTop="8dp"
            app:seekbar_progressDrawable="@drawable/myprogressbar"
            />
    </RelativeLayout>


    <TextView
        android:id="@+id/numjd"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp"
        android:text="当前进度：0"
        android:textColor="#FF9966"
        android:textSize="50sp"
        android:layout_alignParentBottom="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />


</RelativeLayout>

代码；自定义view 实现seekbar的监听 ui界面比原生的好看

package com.mylibrary;

import android.annotation.SuppressLint;
import android.annotation.TargetApi;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.graphics.Rect;
import android.os.Build;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.SeekBar;
import android.widget.TextView;


@SuppressLint("NewApi")
public class SeekBarIndicated extends FrameLayout implements
      SeekBar.OnSeekBarChangeListener {

   private ViewGroup mWrapperIndicator;
   private ImageView mImageViewIndicator;    //显示图片
   private TextView mTextViewProgress;          //显示文字
   private SeekBar mSeekBar;              //滑动

   private int mSeekBarMarginLeft = 0;
   private int mSeekBarMarginTop = 0;
   private int mSeekBarMarginBottom = 0;
   private int mSeekBarMarginRight = 0;

   private String mIndicatorText;
   private int mSeekBarMin = 0;

   private SeekBar.OnSeekBarChangeListener mOnSeekBarChangeListener;
   private TextProvider mTextProviderIndicator;

   private int mMeasuredWidth;

   public SeekBarIndicated(Context context) {
      super(context);
      if (!isInEditMode())
         init(context);
   }

   public SeekBarIndicated(Context context, AttributeSet attrs) {
      super(context, attrs);
      if (!isInEditMode())
         init(context, attrs, 0);
   }

   public SeekBarIndicated(Context context, AttributeSet attrs,
                     int defStyleAttr) {
      super(context, attrs, defStyleAttr);
      if (!isInEditMode())
         init(context, attrs, defStyleAttr);
   }

   private void init(Context context) {
      init(context, null, 0);
   }

   private void init(Context context, AttributeSet attrs, int defStyle) {
      View view = LayoutInflater.from(context).inflate(
            R.layout.view_seekbar_indicated, this);
      bindViews(view);

      if (attrs != null)
         setAttributes(context, attrs, defStyle);
      mSeekBar.setOnSeekBarChangeListener(this);
      mTextViewProgress.setText(String.valueOf(mSeekBar.getProgress()));

      getViewTreeObserver().addOnGlobalLayoutListener(
            new ViewTreeObserver.OnGlobalLayoutListener() {
               @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
               @Override
               public void onGlobalLayout() {
                  mMeasuredWidth = mSeekBar.getWidth()
                        - mSeekBar.getPaddingLeft()
                        - mSeekBar.getPaddingRight();
                  mSeekBar.setPadding(
                        mSeekBar.getPaddingLeft(),
                        mSeekBar.getPaddingTop()
                              + mWrapperIndicator.getHeight(),
                        mSeekBar.getPaddingRight(),
                        mSeekBar.getPaddingBottom());
                  setIndicator();
                  getViewTreeObserver()
                        .removeOnGlobalLayoutListener(this);
               }
            });
      // mWrapperIndicator.setVisibility(View.GONE);
   }

   private void bindViews(View view) {
      mWrapperIndicator = (ViewGroup) view
            .findViewById(R.id.wrapper_seekbar_indicator);
      mImageViewIndicator = (ImageView) view
            .findViewById(R.id.img_seekbar_indicator);
      mTextViewProgress = (TextView) view
            .findViewById(R.id.txt_seekbar_indicated_progress);
      mSeekBar = (SeekBar) view.findViewById(R.id.seekbar);
      mTextViewProgress.setGravity(1);
   }

   @Override
   public void onProgressChanged(SeekBar seekBar, int progress,
                          boolean fromUser) {
      setIndicator();
      if (mOnSeekBarChangeListener != null)
         mOnSeekBarChangeListener.onProgressChanged(seekBar, progress,
               fromUser);
   }

   @Override
   public void onStartTrackingTouch(SeekBar seekBar) {
      if (mOnSeekBarChangeListener != null) {
         mOnSeekBarChangeListener.onStartTrackingTouch(seekBar);
         mWrapperIndicator.setVisibility(View.VISIBLE);
      }
   }

   @Override
   public void onStopTrackingTouch(SeekBar seekBar) {
      if (mOnSeekBarChangeListener != null) {
         mOnSeekBarChangeListener.onStopTrackingTouch(seekBar);
         //通过修改这里显示隐藏滑动后的进度数
         mWrapperIndicator.setVisibility(View.VISIBLE);
      }
   }

   @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
   private void setIndicator() {
      if (mTextProviderIndicator != null) {
         mTextViewProgress.setText(mTextProviderIndicator
               .provideText(getProgress()));
      } else {
         if (mIndicatorText != null) {
            try {
               mTextViewProgress.setText(String.valueOf(String.format(
                     mIndicatorText, getProgress())));
            } catch (Exception e) {
               mTextViewProgress.setText(String.valueOf(getProgress()));
            }
         } else {
            mTextViewProgress.setText(String.valueOf(getProgress()));
         }
      }
      Rect padding = new Rect();
      mSeekBar.getThumb().getPadding(padding);

      int thumbPos = mSeekBar.getPaddingLeft() + mMeasuredWidth
            * mSeekBar.getProgress() / mSeekBar.getMax();
      thumbPos = (int) Math.ceil(thumbPos);
      mWrapperIndicator.setX(thumbPos
            - (int) Math.ceil(mWrapperIndicator.getWidth() / 2));
   }

   private void setAttributes(Context context, AttributeSet attrs, int defStyle) {
      // then obtain typed array
      TypedArray arr = context.obtainStyledAttributes(attrs,
            R.styleable.SeekBarIndicated, defStyle, 0);

      // and get values you need by indexes from your array attributes defined
      // above
      mSeekBarMarginLeft = arr.getDimensionPixelSize(
            R.styleable.SeekBarIndicated_seekbar_marginLeft, 0);
      mSeekBarMarginTop = arr.getDimensionPixelSize(
            R.styleable.SeekBarIndicated_seekbar_marginTop, 0);
      mSeekBarMarginRight = arr.getDimensionPixelSize(
            R.styleable.SeekBarIndicated_seekbar_marginRight, 0);
      mSeekBarMarginBottom = arr.getDimensionPixelSize(
            R.styleable.SeekBarIndicated_seekbar_marginBottom, 0);
      mSeekBarMin = arr.getInt(R.styleable.SeekBarIndicated_seekbar_min, 0);
      int seekBarMax = arr.getInt(R.styleable.SeekBarIndicated_seekbar_max,
            100);
      int seekBarThumbId = arr.getResourceId(
            R.styleable.SeekBarIndicated_seekbar_thumb, 0);
      int seekBarProgressDrawableId = arr.getResourceId(
            R.styleable.SeekBarIndicated_seekbar_progressDrawable, 0);
      int indicatorTextStyle = arr.getInt(
            R.styleable.SeekBarIndicated_indicator_textStyle, 0);
      int indicatorPaddingLeft = arr.getDimensionPixelSize(
            R.styleable.SeekBarIndicated_indicator_paddingLeft, 0);
      int indicatorPaddingTop = arr.getDimensionPixelSize(
            R.styleable.SeekBarIndicated_indicator_paddingTop, 0);
      int indicatorPaddingRight = arr.getDimensionPixelSize(
            R.styleable.SeekBarIndicated_indicator_paddingRight, 0);
      int indicatorPaddingBottom = arr.getDimensionPixelSize(
            R.styleable.SeekBarIndicated_indicator_paddingBottom, 0);

      mWrapperIndicator.setPadding(indicatorPaddingLeft, indicatorPaddingTop,
            indicatorPaddingRight, indicatorPaddingBottom);

      setMin(mSeekBarMin);
      setMax(seekBarMax);
      if (seekBarThumbId > 0) {
         if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP)
            mSeekBar.setThumb(getResources().getDrawable(seekBarThumbId));
         else
            mSeekBar.setThumb(getResources().getDrawable(seekBarThumbId,
                  null));
      }

      if (seekBarProgressDrawableId > 0) {
         if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP)
            mSeekBar.setProgressDrawable(getResources().getDrawable(
                  seekBarProgressDrawableId));
         else
            mSeekBar.setProgressDrawable(getResources().getDrawable(
                  seekBarProgressDrawableId, null));
      }

      mIndicatorText = arr
            .getString(R.styleable.SeekBarIndicated_indicator_text);
      mTextViewProgress.setTypeface(mTextViewProgress.getTypeface(),
            indicatorTextStyle);

      mSeekBar.setPadding(mSeekBar.getPaddingLeft() + mSeekBarMarginLeft,
            mSeekBar.getPaddingTop() + mSeekBarMarginTop,
            mSeekBar.getPaddingRight() + mSeekBarMarginRight,
            mSeekBar.getPaddingBottom() + mSeekBarMarginBottom);
      setIndicatorImage(arr);
      setIndicatorTextAttributes(arr);
      arr.recycle();

   }

   private void setIndicatorTextAttributes(TypedArray arr) {
      RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) mTextViewProgress
            .getLayoutParams();
      int indicatorTextMarginLeft = arr.getDimensionPixelSize(
            R.styleable.SeekBarIndicated_indicator_textMarginLeft,
            layoutParams.leftMargin);
      int indicatorTextMarginTop = arr.getDimensionPixelSize(
            R.styleable.SeekBarIndicated_indicator_textMarginTop,
            getContext().getResources().getDimensionPixelSize(
                  R.dimen.indicator_txt_margin_top));
      int indicatorTextMarginRight = arr.getDimensionPixelSize(
            R.styleable.SeekBarIndicated_indicator_textMarginRight,
            layoutParams.rightMargin);
      int indicatorTextMarginBottom = arr.getDimensionPixelSize(
            R.styleable.SeekBarIndicated_indicator_textMarginBottom,
            layoutParams.bottomMargin);

      int indicatorTextColor = arr.getColor(
            R.styleable.SeekBarIndicated_indicator_textColor, Color.WHITE);

      if (arr.hasValue(R.styleable.SeekBarIndicated_indicator_textCenterHorizontal)) {
         boolean centerHorizontal = arr
               .getBoolean(
                     R.styleable.SeekBarIndicated_indicator_textCenterHorizontal,
                     false);
         if (centerHorizontal) {
            layoutParams.addRule(RelativeLayout.CENTER_HORIZONTAL);
            if (!arr.hasValue(R.styleable.SeekBarIndicated_indicator_textMarginTop))
               indicatorTextMarginTop = 0;
         }
      } else {
         layoutParams.addRule(RelativeLayout.CENTER_HORIZONTAL);
      }
      if (arr.hasValue(R.styleable.SeekBarIndicated_indicator_textCenterVertical)) {
         boolean centerVertical = arr.getBoolean(
               R.styleable.SeekBarIndicated_indicator_textCenterVertical,
               false);
         if (centerVertical)
            layoutParams.addRule(RelativeLayout.CENTER_VERTICAL);
      }

      // mTextViewProgress.setTextColor(indicatorTextColor);

      layoutParams.setMargins(indicatorTextMarginLeft,
            indicatorTextMarginTop, indicatorTextMarginBottom,
            indicatorTextMarginRight);

      mTextViewProgress.setLayoutParams(layoutParams);
   }

   private void setIndicatorImage(TypedArray arr) {
      int imageResourceId = arr.getResourceId(
            R.styleable.SeekBarIndicated_indicator_src,
            R.drawable.color_seekbar_pop_bg);
      mImageViewIndicator.setImageResource(imageResourceId);

   }

   public void setMax(int max) {
      mSeekBar.setMax(max - mSeekBarMin);
   }

   public void setMin(int min) {
      mSeekBarMin = min;
   }

   public void setValue(int value) {
      mSeekBar.setProgress(value);
      setIndicator();
   }