【前端】进度条样式实现

Posted 2023-05-11

参考技术A 进度条的本质是两个div层的嵌套，内层的width是外层的百分比，样式如图：

外层div样式如下：
.outDiv
float: left;
width: 60%;
background: rgba(255, 255, 255, 0.2);
height: 15px;
overflow: hidden;
display: inline;
position: relative;
border-radius: 8px;

.innerDiv
width: 64.8%;
text-align: center;

.font-color
background: #FFFFFF;
height: 15px;
border-radius: 8px;
color: #FD8814;

安卓开发中的各种进度条样式

Android开发中我们经常会用到各种各样的loading，于是自己总结了常用的loading并分享出来。首先来看下具体效果图：

完整源码参见：stormzhang / CustomLoading

下面主要说下代码的关键部分：

1. Frame Loading

第一个就是在app中常见的loading效果，主要是用帧动画实现的，所谓帧动画就是一组组图片顺序播放； 下面直接看下代码实现:

首先在drawable文件夹下建立一个xml文件，内容如下：

frame_loading.xml
<?xml version="1.0" encoding="UTF-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false" >

    <item android:duration="150">
        <clip
            android:clipOrientation="horizontal"
            android:drawable="@drawable/loading_01"
            android:gravity="left" />
    </item>
    <item android:duration="150">
        <clip
            android:clipOrientation="horizontal"
            android:drawable="@drawable/loading_02"
            android:gravity="left" />
    </item>
    <item android:duration="150">
        <clip
            android:clipOrientation="horizontal"
            android:drawable="@drawable/loading_03"
            android:gravity="left" />
    </item>
    <item android:duration="150">
        <clip
            android:clipOrientation="horizontal"
            android:drawable="@drawable/loading_04"
            android:gravity="left" />
    </item>
    <item android:duration="150">
        <clip
            android:clipOrientation="horizontal"
            android:drawable="@drawable/loading_05"
            android:gravity="left" />
    </item>
    <item android:duration="150">
        <clip
            android:clipOrientation="horizontal"
            android:drawable="@drawable/loading_06"
            android:gravity="left" />
    </item>
    <item android:duration="150">
        <clip
            android:clipOrientation="horizontal"
            android:drawable="@drawable/loading_07"
            android:gravity="left" />
    </item>
    <item android:duration="150">
        <clip
            android:clipOrientation="horizontal"
            android:drawable="@drawable/loading_08"
            android:gravity="left" />
    </item>
    <item android:duration="150">
        <clip
            android:clipOrientation="horizontal"
            android:drawable="@drawable/loading_09"
            android:gravity="left" />
    </item>
    <item android:duration="150">
        <clip
            android:clipOrientation="horizontal"
            android:drawable="@drawable/loading_10"
            android:gravity="left" />
    </item>
    <item android:duration="150">
        <clip
            android:clipOrientation="horizontal"
            android:drawable="@drawable/loading_11"
            android:gravity="left" />
    </item>
    <item android:duration="150">
        <clip
            android:clipOrientation="horizontal"
            android:drawable="@drawable/loading_12"
            android:gravity="left" />
    </item>

</animation-list>

注意上面item下得clip标签，这个是必须的，不然不同的屏幕尺寸适配会有问题。然后在布局文件里这样调用：

<ProgressBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:indeterminateDrawable="@drawable/frame_loading" />

2. Rotate Loading

第二种主要是用rotate动画来实现的，具体代码如下：

rotate_loading.xml
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="360" >

    <bitmap
        android:antialias="true"
        android:filter="true"
        android:src="@drawable/loading_360" />

</rotate>

然后调用方法和第一种一样。

<ProgressBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:indeterminateDrawable="@drawable/rotate_loading" />

3. Clip Loading

第三种loading的是自定义了一个组件，主要用到了ClipDrawable的setLevel()方法，代码如下：

public class CustomClipLoading extends FrameLayout {

	private static final int MAX_PROGRESS = 10000;
	private ClipDrawable mClipDrawable;
	private int mProgress = 0;
	private boolean running;
	private Handler handler = new Handler() {
		@Override
		public void handleMessage(Message msg) {
			// 如果消息是本程序发送的
			if (msg.what == 0x123) {
				mClipDrawable.setLevel(mProgress);
			}
		}
	};

	
	public CustomClipLoading(Context context) {
		this(context, null, 0);
	}

	public CustomClipLoading(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}

	public CustomClipLoading(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		init(context);
	}

	private void init(Context context) {
		View view = LayoutInflater.from(context).inflate(layout.custom_loading, null);
		addView(view);
		ImageView imageView = (ImageView) findViewById(id.iv_progress);
		mClipDrawable = (ClipDrawable) imageView.getDrawable();
		
		Thread s = new Thread(r);
		s.start();
	}

	public void stop() {
		mProgress = 0;
		running = false;
	}

	Runnable r = new Runnable() {
		@Override
		public void run() {
			running = true;
			while (running) {
				handler.sendEmptyMessage(0x123);
				if (mProgress > MAX_PROGRESS) {
					mProgress = 0;
				}
				mProgress += 100;
				try {
					Thread.sleep(18);
				} catch (InterruptedException e) {
					e.printStackTrace();
				}
			}
		}
	};
}

其中custom_loading布局文件的内容如下：

custom_loading.xml
<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/iv_progress"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/loading_bg"
    android:paddingLeft="3dp"
    android:paddingTop="3dp"
    android:scaleType="centerInside"
    android:src="@drawable/clip_loading" />

然后clip_loading的内容如下：

clip_loading.xml
<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:clipOrientation="vertical"
    android:drawable="@drawable/loading_progress"
    android:gravity="bottom" >
</clip>

至此这个组件就定义好了，那么接下来就是在avtivity布局文件的使用了：

<com.storm.ui.CustomClipLoading
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

4. Progress Wheel

第四和第五种loading只要是用到了一个开源的项目ProgressWheel,使用方法也很简单，具体见项目说明。