Loading cho Floating Action Button

Giới thiệu

Hiện nay Floating Action Button đang được sử dụng ngày càng nhiều do phù hợp với Material Design guideline. Nó thiết kế cho việc nhấn mạnh cho hành động chính của một màn hình. Đây là một thiết kế phá cách làm nổi bật lên để thu hút người dùng chú ý vào hành động đó.

Loading

Ngày hôm nay mình xin giới thiệu đến các bạn một thư viện để làm cho FAB của các bạn trở nên tuyệt vời hơn.

Điều này làm cho FAB của các bạn trở nên thật sống động và khác biệt.

Sử dụng

Đầu tiên bạn cần compile 'io.saeid:fab-loading:1.0.0'

Tiếp theo bạn include view sau vào trong view của bạn.

    <io.saeid.fabloading.LoadingView
        android:id="@+id/loading_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleX="1.5"
        android:scaleY="1.5"
        app:mfl_onclickLoading="true"
        app:mfl_duration="200"
        app:mfl_repeat="1000"
    />

Note :

1. mfl_repeat : số lần lặp lại việc chuyển động
2. mfl_duration : tốc độ chuyển

Tiếp đến bạn cần thực hiện đoạn mã sau

    private void init() {
        mLoadingView = (LoadingView) findViewById(R.id.loading_view);
        mLoadingView.addAnimation(R.color.colorPrimary,R.drawable.ic_3,LoadingView.FROM_RIGHT);
        mLoadingView.addListener(new LoadingView.LoadingListener() {
            @Override public void onAnimationStart(int currentItemPosition) {
            }

            @Override public void onAnimationRepeat(int nextItemPosition) {
            }

            @Override public void onAnimationEnd(int nextItemPosition) {
            }
        });
    }

Note :

1. Chú ý phương thức addAnimation(colorId,imageId,typeId);

Riêng typeId có 4 loại : LoadingView.FROM_LEFT, LoadingView.FROM_TOP, LoadingView.FROM_RIGHT, LoadingView.FROM_BOTTOM. 2. Bạn có thể add nhiều lần phương thức này với nhiều hình ảnh khác nhau để FAB của bạn chuyển động càng sinh động hơn.

Cuối cùng bạn chỉ cần gọi các phương thức như :

1. mLoadingView.startAnimation();
2. mLoadingView.pauseAnimation();
3. mLoadingView.resumeAnimation();

để sử dụng thư viện này.

Kết thúc

Chúc các bạn một ngày làm việc hiệu quả.