滑桿

您可以使用滑桿,在畫面底部顯示載入、進度或導覽列。滑桿是全域使用者體驗元件,在 Glassware 中實作時,請謹慎處理。


滾輪滑桿

捲動滑桿時,系統會在您滑動資訊卡時,指出資訊卡的位置。您可以使用 Slider.Scroller 建立相同類型的效果。

  1. 使用 Slider.from() 建立 Slider,以使用 View 來顯示滑桿。
  2. 使用 startScroller() 建立 Slider.Scroller,並設定最大和初始位置。

以下這個簡單的實作方式,可在使用者輕觸動畫時,將捲動動畫移到下一個位置:

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();
    }
}

寬限期滑桿

寬限期滑桿適合用於向使用者顯示通知的活動,但使用者互動功能並非必要。您可以使用 Slider.GracePeriod 新增這個動畫。

  1. 使用 Slider.from() 建立 Slider,以使用 View 來顯示滑桿。
  2. 建立 GracePeriod.Listener 並實作 onGracePeriodEnd()onGracePeriodCancel() 來處理這些事件。
  3. 建立 Slider.GracePeriod 並傳入 GracePeriod.ListenerstartGracePeriod() 方法,開始執行動畫。
  4. 覆寫活動的 onBackPressed() 來處理向下手勢。
  5. 如果使用者向下滑動,請呼叫 Slider.GracePeriod 上的 cancel() 以關閉滑桿。

在以下範例中,寬限期捲動器會加載事件監聽器,以便在該週期結束時播放成功音效,並在寬限期期間滑桿關閉時,關閉音效。

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();
        }
    }
}

確定滑桿

主要的滑桿主要用於顯示進度,您可以在工作完成時計算進度。您可以使用 Slider.Determinate 新增這個動畫。

  1. 使用 Slider.from() 建立 Slider,以使用 View 來顯示滑桿。
  2. 使用 startScroller() 建立 Slider.Determinate,並設定最大和初始位置。
  3. 動畫播放完畢後,請在 Slider.Determinate 上呼叫 hide() 方法來隱藏滑桿。

以下這個簡單的實作方式,可在使用者輕觸動畫時,將捲動動畫置於設定的位置:

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);
    }
}

不確定的滑桿

不確定的滑桿可用於載入工作不易計算的螢幕。您可以使用 Slider.Indeterminate 新增這個動畫。

  1. 使用 Slider.from() 建立 Slider,以使用 View 來顯示滑桿。
  2. 使用 Slider.startIndeterminate() 方法開始執行動畫。
  3. 準備好停止動畫時,請在 Slider.Indeterminate 上呼叫 hide() 方法。

以下這個簡單的實作方式會在使用者輕觸資訊卡時建立不確定性的捲動式網頁,並在使用者再次輕觸資訊卡時隱藏。

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);
    }
}