Reprint please indicate the source: blog.csdn.net/lv_fq/artic… — [Blogging]

Before, a friend asked me about a progress bar similar to the frequency of a radio station. Probably many people will customize the View the first time they see the picture. When I talked with him about the implementation of H5, IT occurred to me that Android could be implemented in a similar way.

rendering:

Can you think of a way to do that? Custom View? It doesn’t take that much trouble. Here’s the miracle:

layout:


       
<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="Start" />

</LinearLayout>Copy the code
  • clip_img_pro.xml

       
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:clipOrientation="horizontal"
    android:drawable="@drawable/pro_sel"
    android:gravity="left" />Copy the code

Note: PRO_NOR, pro_sel are two pictures which are exactly the same except for different colors

The main interface

/**
 * ClipDrawableActivity
 *
 * @author lvfq
 * @Github: https://github.com/lvfaqiang
 * @Blog: http://blog.csdn.net/lv_fq
 * @date2017/9/5 1:34 PM * @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."Load complete", Toast.LENGTH_SHORT).show(); }}}};@Override
            public void run() {

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

Then we have our progress bar effect. Is it a surprise? Are you surprised? Ha, ha, ha

ClipDrawable is used to set the image to spread out to give the illusion of a progress bar effect. Of course, the height of the vertical line is immutable because it’s graphically implemented, so it’s just a sudden idea to try it out.

Many of the basic things of the system are gradually ignored because we don’t use them very much in the development process.

The code is sorted out – > GitHub