Android开发-各种各样好看漂亮的进度条，指示器，加载提示汇总
导读：之前项目中用到一些进度条，找了不少，打算写个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(