Thanh trượt

Bạn có thể sử dụng thanh trượt để hiển thị thanh tải, tiến trình hoặc điều hướng ở 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ầu và cần được xử lý cẩn thận khi triển khai chúng trong Glassware.

Lưu ý quan trọng:

• Thanh trượt được chia sẻ giữa các hoạt động khác nhau trong Glass. Ví dụ: nếu bạn khởi chạy một thanh trượt trong hoạt động và người dùng tạm dừng hoạt động để bắt đầu một hoạt động mới khởi chạy thanh trượt riêng, thì khi hoạt động đó tiếp tục, thanh trượt sẽ không tiếp tục. Nếu muốn thanh trượt của mình xuất hiện trở lại, bạn phải xử lý trường hợp này.
• Bạn phải liên kết các yêu cầu thanh trượt với một chế độ xem và những yêu cầu đó chỉ được áp dụng khi cửa sổ chứa chế độ xem đó có tiêu điểm. Nếu một cửa sổ khác lấy tiêu điểm trên Glass, hệ thống sẽ ẩn thanh trượt.

Thanh trượt

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

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

Dưới đây là một cách triển khai đơn giản giúp tạo hiệu ứng cho trình cuộn sang 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 gia hạn hoạt động trong các hoạt động mà người dùng thấy hữu ích, nhưng không bắt buộc phải tương tác. Bạn có thể thêm ảnh động này bằng cách sử dụng Slider.GracePeriod.

1. Sử dụng Slider.from() để tạo Slider sử dụng View nhằm hiển thị thanh trượt.
2. Tạo GracePeriod.Listener và triển khai onGracePeriodEnd() và onGracePeriodCancel() để xử lý các sự kiện đó.
3. Tạo Slider.GracePeriod và bắt đầu ảnh động bằng cách chuyển GracePeriod.Listener vào phương thức startGracePeriod().
4. Ghi đè onBackPressed() của hoạt động để 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 khởi tạo bằng một trình nghe có chức năng phát âm thanh thành công khi thời gian kết thúc và một âm thanh bị loại bỏ nếu thanh trượt thời gian gia 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();
        }
    }
}

Thanh trượt xác định

Thanh trượt xác định chủ yếu được dùng để hiển thị tiến trình nơi bạn có thể tính toán thời điểm hoàn thành một tác vụ. 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 Slider sử dụng View nhằm hiển thị thanh trượt.
2. Tạo Slider.Determinate bằng startScroller() và đặt vị trí tối đa và ban đầu.
3. Khi ảnh động kết thúc, hãy gọi phương thức hide() trên Slider.Determinate để ẩn thanh trượt.

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

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

Bạn có thể sử dụng thanh trượt không xác định để tải các màn hình, nơi khó tính toán khi nhiệm vụ kết thúc. Bạn có thể thêm ảnh động này bằng cách sử dụng Slider.Indeterminate.

1. Sử dụng Slider.from() để tạo Slider sử dụng View nhằm hiển thị 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 hide() trên Slider.Indeterminate.

Dưới đây là một cách triển khai đơn giản giúp tạo cuộn 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);
    }
}