Android 一个另类的 '进度条' 效果

转载请注明出处：http://blog.csdn.net/lv_fq/article/details/77851958 – [发强博客]

之前一个朋友问我一个类似于广播电台频率的进度条，可能很多人看到图的第一时间就是 自定义View 。 跟他聊天的过程中提到了 H5 的实现方式，我突然想起来，Android 端好像也可以用类似的方式去实现一下。

效果图：

这个你能否想到是什么实现方式 ? 自定义View ? No 根本用不了那么麻烦。

下面来见证奇迹：

布局：

<?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="match_parent"
android:gravity="center_vertical"
android:orientation="vertical"
android:padding="@dimen/dp_10">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">

<TextView
android:id="@+id/tv_start"
android:layout_width="35dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="0"
android:textSize="@dimen/sp_15" />

<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">

<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:scaleType="centerCrop"
android:src="@drawable/pro_nor" />

<ImageView
android:id="@+id/iv_clip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:scaleType="centerCrop"
android:src="@drawable/clip_img_pro" />

</FrameLayout>

<TextView
android:id="@+id/tv_end"
android:layout_width="35dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="@dimen/sp_15" />
</LinearLayout>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="@dimen/dp_20"
android:onClick="start"
android:text="开始" />

</LinearLayout>

clip_img_pro.xml

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
android:clipOrientation="horizontal"
android:drawable="@drawable/pro_sel"
android:gravity="left" />

注：pro_nor , pro_sel 是两张除了颜色不同，其他一模一样的图片

主界面

/**
* ClipDrawableActivity
*
* @author lvfq
* @Github: https://github.com/lvfaqiang * @Blog: http://blog.csdn.net/lv_fq * @date 2017/9/5 下午1:34
* @desc :
*/

public class ClipDrawableActivity extends AppCompatActivity {

private TextView tv_start;
private TextView tv_end;
private ImageView iv_clip;
private ClipDrawable clipDrawable;
private static final int MAX = 100;

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

tv_start = LvV.find(this, R.id.tv_start);
tv_end = LvV.find(this, R.id.tv_end);
iv_clip = LvV.find(this, R.id.iv_clip);

clipDrawable = (ClipDrawable) iv_clip.getDrawable();
clipDrawable.setLevel(0);

tv_end.setText(MAX + "");

}

public void start(View view) {
new Thread() {
Handler handler = new Handler(getMainLooper()) {
@Override
public void handleMessage(Message msg) {
if (msg.what == 1) {
int level = clipDrawable.getLevel();
int pro = (int) ((level / 10000d) * MAX);
tv_start.setText(pro + "");
if (pro < MAX) {
clipDrawable.setLevel(clipDrawable.getLevel() + 200);
} else {
Toast.makeText(ClipDrawableActivity.this, "加载完成", Toast.LENGTH_SHORT).show();
}
}
}
};

@Override
public void run() {

while (clipDrawable.getLevel() < 10000) {
try {
sleep(300);
handler.sendEmptyMessage(1);
} catch (InterruptedException e) {
e.printStackTrace();
}
}

}
}.start();
}
}

然后我们的 “进度条” 效果就有了。。 惊不惊喜 ? 意不意外 ? 哈哈哈

无非就是利用 ClipDrawable 来设置图片进行铺开，来给你造成一种进度条效果的错觉。当然，因为是图片实现的，所以竖线的高度是不可变的，这只是突然想到了这种方式，来尝试一下。

系统的很多基础东西因为我们开发过程中不怎么用到，所以渐渐的就忽略了。

代码已整理好 –> GitHub