之前一個朋友問我一個類似於廣播電臺頻率的進度條，可能很多人看到圖的第一時間就是 自定義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 來設定圖片進行鋪開，來給你造成一種進度條效果的錯覺。當然，因為是圖片實現的，所以豎線的高度是不可變的，這只是突然想到了這種方式，來嘗試一下。

系統的很多基礎東西因為我們開發過程中不怎麼用到，所以漸漸的就忽略了。