Suwak

Za pomocą suwaków możesz wyświetlić pasek wczytywania, postępu lub nawigacji na do dołu ekranu. Suwaki to globalne komponenty UX i należy je traktować. w Google Glassware, w miarę ostrożności przy wdrażaniu.


Suwak przewijania

Suwaki przewijania służą do określania pozycji karty podczas przesuwania na wielu kartach. Ten sam rodzaj efektu możesz uzyskać za pomocą funkcji Slider.Scroller

  1. Używaj Slider.from() aby utworzyć Slider wykorzystujący View aby wyświetlić suwak.
  2. Utwórz Slider.Scroller za pomocą startScroller() i ustaw pozycję maksymalną i początkową.

Oto prosta implementacja, która animuje przewijak do następnej pozycji gdy użytkownik kliknie:

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

Suwak okresu prolongaty

Suwaki okresu prolongaty działają w aktywnościach, w których użytkownik może zobaczą powiadomienie, ale interakcja użytkownika nie jest wymagana. Możesz to dodać za pomocą funkcji Slider.GracePeriod

  1. Używaj Slider.from() aby utworzyć Slider wykorzystujący View aby wyświetlić suwak.
  2. Utwórz GracePeriod.Listener i zaimplementuj tag onGracePeriodEnd() i onGracePeriodCancel() do obsługi tych zdarzeń.
  3. Utwórz Slider.GracePeriod i rozpocznij animację, przekazując klucz GracePeriod.Listener na startGracePeriod().
  4. Zastąp ustawienia aktywności onBackPressed() aby obsługiwać gest przesuwania w dół.
  5. Jeśli użytkownik przesunie palcem w dół, wywołaj cancel() w Slider.GracePeriod aby zamknąć suwak.

W poniższym przykładzie przewijak z okresem prolongaty jest inicjowany przez detektor który po zakończeniu okresu jest odtwarzany, a dźwięk zakończony, jeśli Suwak okresu prolongaty jest anulowany:

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

Suwak określania

Suwaki określania służą głównie do wskazywania postępu, podczas którego można obliczyć, kiedy dane zadanie może zostać ukończone. Możesz dodać tę animację za pomocą: Slider.Determinate

  1. Używaj Slider.from() aby utworzyć Slider wykorzystujący View aby wyświetlić suwak.
  2. Utwórz Slider.Determinate za pomocą startScroller() i ustaw pozycję maksymalną i początkową.
  3. Po zakończeniu animacji wywołaj funkcję hide() na Slider.Determinate aby ukryć suwak.

Oto prosta implementacja, która animuje przewijak do ustawionego położenia, gdy do kliknięć:

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

Suwak nieokreślony

Nieokreślone suwaki można stosować do wczytywania ekranów, gdzie trudno jest je wczytać. aby obliczyć jego zakończenie. Możesz to dodać za pomocą funkcji Slider.Indeterminate

  1. Używaj Slider.from() aby utworzyć Slider wykorzystujący View aby wyświetlić suwak.
  2. Rozpocznij animację od Slider.startIndeterminate().
  3. Aby zatrzymać animację, wywołaj funkcję hide() na Slider.Indeterminate

Oto prosta implementacja, która tworzy nieokreślony element przewijający, gdy użytkownik klika kartę i ukrywa ją, gdy dotknie ją jeszcze raz:

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