Слайдер

Вы можете использовать ползунки, чтобы показать загрузку, прогресс или панель навигации в нижней части экрана. Слайдеры — это глобальные компоненты UX, и к ним следует относиться с осторожностью при их реализации в Glassware.


Ползунок прокрутки

Ползунки прокрутки используются для указания положения карты при пролистывании нескольких карт. Вы можете создать такой же эффект, используя Slider.Scroller .

  1. Используйте Slider.from() для создания Slider , который использует View для отображения слайдера.
  2. Создайте Slider.Scroller с помощью startScroller() и установите максимальную и начальную позиции.

Вот простая реализация, которая анимирует прокрутку до следующей позиции, когда пользователь нажимает:

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.Listener методу startGracePeriod() .
  4. Переопределите onBackPressed() действия для обработки жеста прокрутки вниз.
  5. Если пользователь проводит пальцем вниз, вызовите метод cancel() для Slider.GracePeriod , чтобы закрыть ползунок.

В следующем примере скроллер льготного периода инициируется слушателем, который воспроизводит звук успеха, когда период заканчивается, и звук закрытия, если ползунок льготного периода отменен:

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. Создайте Slider.Determinate с помощью startScroller() и установите максимальную и начальную позиции.
  3. Когда анимация завершится, вызовите метод hide() для Slider.Determinate , чтобы скрыть ползунок.

Вот простая реализация, которая анимирует скроллер в заданное положение, когда пользователь нажимает:

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. Когда вы будете готовы остановить анимацию, вызовите метод hide() для Slider.Indeterminate .

Вот простая реализация, которая создает неопределенный скроллер, когда пользователь нажимает на карту, и скрывает его, когда пользователь нажимает снова:

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

Вы можете использовать ползунки, чтобы показать загрузку, прогресс или панель навигации в нижней части экрана. Слайдеры — это глобальные компоненты UX, и к ним следует относиться с осторожностью при их реализации в Glassware.


Ползунок прокрутки

Ползунки прокрутки используются для указания положения карты при пролистывании нескольких карт. Вы можете создать такой же эффект, используя Slider.Scroller .

  1. Используйте Slider.from() для создания Slider , который использует View для отображения слайдера.
  2. Создайте Slider.Scroller с помощью startScroller() и установите максимальную и начальную позиции.

Вот простая реализация, которая анимирует прокрутку до следующей позиции, когда пользователь нажимает:

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.Listener методу startGracePeriod() .
  4. Переопределите onBackPressed() действия для обработки жеста прокрутки вниз.
  5. Если пользователь проводит пальцем вниз, вызовите метод cancel() для Slider.GracePeriod , чтобы закрыть ползунок.

В следующем примере скроллер льготного периода инициируется слушателем, который воспроизводит звук успеха, когда период заканчивается, и звук закрытия, если ползунок льготного периода отменен:

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. Создайте Slider.Determinate с помощью startScroller() и установите максимальную и начальную позиции.
  3. Когда анимация завершится, вызовите метод hide() для Slider.Determinate , чтобы скрыть ползунок.

Вот простая реализация, которая анимирует скроллер в заданное положение, когда пользователь нажимает:

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. Когда вы будете готовы остановить анимацию, вызовите метод hide() для Slider.Indeterminate .

Вот простая реализация, которая создает неопределенный скроллер, когда пользователь нажимает на карту, и скрывает его, когда пользователь нажимает снова:

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