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(int value) { mSeekBar.setProgress(value); setIndicator(); } 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值