Thanh trượt

Bạn có thể sử dụng thanh trượt để hiển thị thanh đang tải, tiến trình hoặc điều hướng trên cuối màn hình. Thanh trượt là thành phần trải nghiệm người dùng toàn cục và cần được xử lý khi triển khai chúng trong Đồ thuỷ tinh của bạn.


Thanh trượt cuộn

Thanh trượt cuộn dùng để cho biết vị trí của thẻ khi bạn vuốt thông qua nhiều thẻ. Bạn có thể tạo cùng loại hiệu ứng bằng cách sử dụng Slider.Scroller.

  1. Sử dụng Slider.from() để tạo một Slider sử dụng View để hiện thanh trượt.
  2. Tạo Slider.Scroller đang sử dụng startScroller() và đặt vị trí tối đa và vị trí ban đầu.

Dưới đây là cách triển khai đơn giản sẽ tạo hiệu ứng ảnh động cho trình cuộn đến vị trí tiếp theo khi người dùng nhấn vào:

public final class SliderActivity extends Activity {

    private static final int MAX_SLIDER_VALUE = 5;
    private static final long ANIMATION_DURATION_MILLIS = 5000;

    private CardScrollView mCardScroller;
    private Slider mSlider;

    @Override
    protected void onCreate(Bundle bundle) {
        super.onCreate(bundle);

        // Create the cards for the view
        mCardScroller = new CardScrollView(this);
        mCardScroller.setAdapter(new CardAdapter(createCards()));

        // Set the view for the Slider
        mSlider = Slider.from(mCardScroller);

        mCardScroller.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                    int position, long id) {
                processSliderRequest(position+1);
            }
        });

        setContentView(mCardScroller);
    }

    private void processSliderRequest(position) {
        Slider.Scroller scroller = mSlider.startScroller(MAX_SLIDER_VALUE, 0);

        // Animate the slider to the next position. The slider
        // automatically hides after the duration has elapsed
        ObjectAnimator.ofFloat(scroller, "position", 0, position)
            .setDuration(ANIMATION_DURATION_MILLIS)
            .start();
    }
}

Thanh trượt thời gian gia hạn

Thanh trượt thời gian ân hạn hoạt động trong các hoạt động hữu ích cho người dùng thấy thông báo nhưng không cần có sự tương tác của người dùng. Bạn có thể thêm đoạn mã này hoạt ảnh bằng cách sử dụng Slider.GracePeriod.

  1. Sử dụng Slider.from() để tạo một Slider sử dụng View để hiện thanh trượt.
  2. Tạo một GracePeriod.Listener và triển khai onGracePeriodEnd()onGracePeriodCancel() xử lý các sự kiện đó.
  3. Tạo một Slider.GracePeriod và bắt đầu ảnh động bằng cách truyền vào GracePeriod.Listener vào startGracePeriod().
  4. Ghi đè thuộc tính của hoạt động onBackPressed() để xử lý cử chỉ vuốt xuống.
  5. Nếu người dùng vuốt xuống, hãy gọi cancel() trên Slider.GracePeriod để đóng thanh trượt.

Trong ví dụ sau, trình cuộn thời gian gia hạn được kích hoạt với một trình nghe phát ra âm thanh thành công khi khoảng thời gian kết thúc và âm thanh bị bỏ qua nếu Thanh trượt thời gian ân hạn đã bị huỷ:

public final class SliderActivity extends Activity {

    ...
    private Slider.GracePeriod mGracePeriod;

    private final GracePeriod.Listener mGracePeriodListener =
        new GracePeriod.Listener() {

        @Override
        public void onGracePeriodEnd() {
            // Play a SUCCESS sound to indicate the end of the grace period.
            AudioManager am = (AudioManager) getSystemService(Context.AUDIO_SERVICE);
            am.playSoundEffect(Sounds.SUCCESS);
            mGracePeriod = null;
        }

        @Override
        public void onGracePeriodCancel() {
            // Play a DIMISS sound to indicate the cancellation of the grace period.
            AudioManager am = (AudioManager) getSystemService(Context.AUDIO_SERVICE);
            am.playSoundEffect(Sounds.DISMISSED);
            mGracePeriod = null;
        }
    };

    @Override
    protected void onCreate(Bundle bundle) {
        super.onCreate(bundle);

        // Create the cards for the view
        mCardScroller = new CardScrollView(this);
        mCardScroller.setAdapter(new CardAdapter(createCards()));

        // Set the view for the Slider
        mSlider = Slider.from(mCardScroller);

        mCardScroller.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                    int position, long id) {
                mGracePeriod = mSlider.startGracePeriod(mGracePeriodListener);
            }
        });

        setContentView(mCardScroller);
    }

    @Override
    public void onBackPressed() {
        // If the Grace Period is running,
        // cancel it instead of finishing the Activity.
        if (mGracePeriod != null) {
            mGracePeriod.cancel();
        } else {
            super.onBackPressed();
        }
    }
}

Xác định thanh trượt

Thanh trượt xác định chủ yếu được dùng để hiển thị tiến trình mà bạn có thể tính toán thời điểm một tác vụ kết thúc. Bạn có thể thêm ảnh động này bằng cách sử dụng Slider.Determinate.

  1. Sử dụng Slider.from() để tạo một Slider sử dụng View để hiện thanh trượt.
  2. Tạo Slider.Determinate đang sử dụng startScroller() và đặt vị trí tối đa và vị trí ban đầu.
  3. Khi ảnh động kết thúc, hãy gọi hide() trên Slider.Determinate để ẩn thanh trượt.

Dưới đây là cách triển khai đơn giản sẽ tạo hiệu ứng ảnh động cho trình cuộn đến một vị trí đã đặt khi người dùng nhấn:

public final class SliderActivity extends Activity {

    ...
    private Slider.Determinate mDeterminate;

    @Override
    protected void onCreate(Bundle bundle) {
        super.onCreate(bundle);

        // Create the cards for the view
        mCardScroller = new CardScrollView(this);
        mCardScroller.setAdapter(new CardAdapter(createCards()));

        // Set the view for the Slider
        mSlider = Slider.from(mCardScroller);

        mCardScroller.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                   int position, long id) {
                mDeterminate = mSlider.startDeterminate(MAX_SLIDER_VALUE, 0);
                ObjectAnimator animator = ObjectAnimator.ofFloat(mDeterminate,
                    "position", 0, MAX_SLIDER_VALUE);

                // Hide the slider when the animation stops.
                animator.addListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        mDeterminate.hide();
                    }
                });

                // Start an animation showing the different positions of the slider.
                animator.setDuration(ANIMATION_DURATION_MILLIS).start();
            }
        });

        setContentView(mCardScroller);
    }
}

Thanh trượt không xác định

Có thể dùng thanh trượt không xác định để tải màn hình khi gặp khó khăn để tính toán thời điểm kết thúc tác vụ. Bạn có thể thêm đoạn mã này hoạt ảnh bằng cách sử dụng Slider.Indeterminate.

  1. Sử dụng Slider.from() để tạo một Slider sử dụng View để hiện thanh trượt.
  2. Bắt đầu ảnh động bằng Phương thức Slider.startIndeterminate().
  3. Khi bạn đã sẵn sàng dừng ảnh động, hãy gọi phương thức Phương thức hide() trên Slider.Indeterminate.

Dưới đây là cách triển khai đơn giản để tạo trình cuộn không xác định khi người dùng nhấn vào thẻ và ẩn thẻ khi người dùng nhấn lại:

public final class SliderActivity extends Activity {

    ...
    private Slider.Indeterminate mIndeterminate;

    @Override
    protected void onCreate(Bundle bundle) {
        super.onCreate(bundle);

        // Create the cards for the view
        mCardScroller = new CardScrollView(this);
        mCardScroller.setAdapter(new CardAdapter(createCards()));

        // Set the view for the Slider
        mSlider = Slider.from(mCardScroller);

        mCardScroller.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                   int position, long id) {
                // Toggle between showing/hiding the indeterminate slider.
                if (mIndeterminate != null) {
                    mIndeterminate.hide();
                    mIndeterminate = null;
                } else {
                    mIndeterminate = mSlider.startIndeterminate();
                }
        });

        setContentView(mCardScroller);
    }
}