A personalized click can turn into a Loading button

This time, a personalized button will be brought. After clicking it, it will become Loading. After Loading, you can stretch the meeting button. I won't say much. Let's start.


First, define several resource files.

button_main_color_up.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <corners android:radius="20dp" />

    <solid android:color="#45a8ca" />

    <gradient
        android:endColor="#45a8ca"
        android:startColor="#6fd1e7" />

</shape>

button_main_color_down.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <corners android:radius="20dp" />

    <solid android:color="#45a8aa" />

    <gradient
        android:endColor="#45a8aa"
        android:startColor="#6fd1c7" />

</shape>

button_main_color_selector:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/button_main_color_up" android:state_pressed="false"></item>
    <item android:drawable="@drawable/button_main_color_down" android:state_pressed="true"></item>

</selector>

circle_loading.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="18dp"
    android:shape="ring"
    android:thickness="2dp"
    android:useLevel="false">

    <solid android:color="#45a8ca" />

    <gradient
        android:endColor="#45a8ca"
        android:startColor="#0000"
        android:type="sweep" />

</shape>


Then you can go to Ontology:

LoadingButton.java:

public class LoadingButton extends Button {
    private Context context;

    // Callback when starting Loading
    private OnStartListener startListener;

    // Callback at end of Loading
    private OnFinishListener finishListener;

    // Callbacks at start and end of Loading
    private OnLoadingListener listener;

    // Loading animation rotation cycle
    private int rotateDuration = 1000;

    // Time for button to be reduced to Loading animation
    private int reduceDuration = 350;

    // Loading rotation animation controller
    private Interpolator rotateInterpolator;

    // Button to load animation controller
    private Interpolator reduceInterpolator;

    private int width;
    private int height;

    private String text;

    // Is it in Loading
    private boolean isLoading = false;

    public LoadingButton(Context context) {
        this(context, null);
    }

    public LoadingButton(Context context, AttributeSet attrs) {
        this(context, attrs, -1);
    }

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

    private void init(Context context) {
        this.context = context;

        setGravity(Gravity.CENTER);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        if (width == 0) width = getMeasuredWidth();
        if (height == 0) height = getMeasuredHeight();
    }

    /**
     * Play button reduced to Loading animation
     */
    private void showStartLoadAnimation() {
        ValueAnimator animator = new ValueAnimator().ofInt(width, height);
        animator.setDuration(reduceDuration);
        if (reduceInterpolator != null) animator.setInterpolator(reduceInterpolator);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                getLayoutParams().width = (int) animation.getAnimatedValue();
                requestLayout();
            }
        });
        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationStart(Animator animation) {
                setBackgroundDrawable(context.getResources().getDrawable(R.drawable.button_main_color_selector));
                setEnabled(false);
                text = getText().toString();
                setText("");
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                showLoadingAnimation();
            }
        });
        animator.start();
    }

    /**
     * Play Loading animation
     */
    private void showLoadingAnimation() {
        RotateAnimation animation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        animation.setDuration(rotateDuration);
        animation.setInterpolator(rotateInterpolator != null ? rotateInterpolator : new LinearInterpolator());
        animation.setRepeatCount(-1);
        setBackgroundDrawable(context.getResources().getDrawable(R.drawable.circle_loading));
        if (startListener != null) {
            startListener.onStart();
        } else if (listener != null) {
            listener.onStart();
        }
        startAnimation(animation);
        isLoading = true;
    }

    /**
     * Play Loading stretch to button animation
     */
    private void showFinishLoadAnimation() {
        ValueAnimator animator = new ValueAnimator().ofInt(height, width);
        animator.setDuration(reduceDuration);
        if (reduceInterpolator != null) animator.setInterpolator(reduceInterpolator);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                getLayoutParams().width = (int) animation.getAnimatedValue();
                requestLayout();
            }
        });
        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationStart(Animator animation) {
                setBackgroundDrawable(context.getResources().getDrawable(R.drawable.button_main_color_selector));
                setEnabled(false);
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                setText(text);
                setEnabled(true);
                if (finishListener != null) {
                    finishListener.onFinish();
                } else if (listener != null) {
                    listener.onFinish();
                }
            }
        });
        animator.start();
        isLoading = false;
    }

    /**
     * Starting Loading
     */
    public void startLoading() {
        if (!isLoading) {
            clearAnimation();
            showStartLoadAnimation();
        }
    }

    /**
     * Starting Loading
     *
     * @param listener Loading Callback at start
     */
    public void startLoading(OnStartListener listener) {
        if (!isLoading) {
            this.startListener = listener;
            clearAnimation();
            showStartLoadAnimation();
        }
    }

    /**
     * End Loading
     */
    public void finishLoading() {
        if (isLoading) {
            clearAnimation();
            showFinishLoadAnimation();
        }
    }

    /**
     * End Loading
     *
     * @param listener Loading Callback at end
     */
    public void finishLoading(OnFinishListener listener) {
        if (isLoading) {
            this.finishListener = listener;
            clearAnimation();
            showFinishLoadAnimation();
        }
    }

    /**
     * Set the callback interface at the beginning and end of Loading
     *
     * @param listener
     */
    public void setOnLoadingListener(OnLoadingListener listener) {
        this.listener = listener;
    }

    /**
     * Set the time for the button to shrink to Loading animation
     *
     * @param reduceDuration Time in milliseconds
     */
    public void setReduceDuration(int reduceDuration) {
        this.reduceDuration = reduceDuration;
    }

    /**
     * Set Loading animation rotation cycle
     *
     * @param rotateDuration Rotation period in milliseconds
     */
    public void setRotateDuration(int rotateDuration) {
        this.rotateDuration = rotateDuration;
    }

    /**
     * Get whether Loading
     *
     * @return
     */
    public boolean isLoading() {
        return isLoading;
    }

    /**
     * Set Loading rotation animation controller
     *
     * @param rotateInterpolator
     */
    public void setRotateInterpolator(Interpolator rotateInterpolator) {
        this.rotateInterpolator = rotateInterpolator;
    }

    /**
     * Button to load animation controller
     *
     * @param reduceInterpolator
     */
    public void setReduceInterpolator(Interpolator reduceInterpolator) {
        this.reduceInterpolator = reduceInterpolator;
    }

    /**
     * Loading Callback interface at start
     */
    public interface OnStartListener {
        void onStart();
    }

    /**
     * Loading Callback interface at end
     */
    public interface OnFinishListener {
        void onFinish();
    }

    /**
     * Loading Callback interface at start and end
     */
    public interface OnLoadingListener {
        void onStart();

        void onFinish();
    }
}

For one file, copy is available. On main activity.class and activity main.xml:

MainActivity.class:

public class MainActivity extends Activity {
    private LoadingButton button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initData();
        initView();
    }

    private void initData() {

    }

    private void initView() {
        button = (LoadingButton) findViewById(R.id.button);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startLoading();
            }
        });
    }

    private void startLoading() {
        button.startLoading(new LoadingButton.OnStartListener() {
            @Override
            public void onStart() {
                Toast.makeText(MainActivity.this, "LOADING START", Toast.LENGTH_SHORT).show();
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        finishLoading();
                    }
                }, 5000);
            }
        });
    }

    private void finishLoading() {
        button.finishLoading(new LoadingButton.OnFinishListener() {
            @Override
            public void onFinish() {
                Toast.makeText(MainActivity.this, "LOADING FINISH", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

activity_main.xml:

<?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_horizontal"
    android:orientation="vertical">

    <com.min.loadingbutton.LoadingButton
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_margin="10dp"
        android:background="@drawable/button_main_color_selector"
        android:text="CLICK"
        android:textColor="#ffffff" />

</LinearLayout 


The usage is very simple. The startLoading() method starts Loading, and the finishLoading method ends Loading. The start and end callbacks can be received in the corresponding interface.

Take a look at the effect:

                                                                 

Control support some of the parameters set in the source code Notes have been written very clearly, you can try your own.


Finally, the source address is attached: Click to open the link

 

This time we'll see you next time.








Tags: Android xml encoding Java

Posted on Tue, 05 May 2020 02:14:46 -0400 by quak