Controle deslizante

Você pode usar controles deslizantes para mostrar uma barra de carregamento, de progresso ou de navegação no parte inferior da tela. Os controles deslizantes são componentes globais de UX e precisam ser tratados com cuidado ao implementá-los em seu Glassware.


Controle deslizante de rolagem

Os controles deslizantes de rolagem são usados para indicar a posição de um card quando você desliza. em vários cartões. Você pode criar o mesmo tipo de efeito usando Slider.Scroller

  1. Usar Slider.from() para criar Slider que usa um View para exibir o controle deslizante.
  2. Crie o Slider.Scroller usando startScroller() e defina as posições inicial e máxima.

Confira uma implementação simples que anima um botão de rolagem para a próxima posição quando o usuário toca:

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

Controle deslizante do período de carência

Os controles deslizantes do período de carência funcionam em atividades em que é útil para o usuário receber uma notificação, mas a interação do usuário não é necessária. Você pode adicionar isso animação usando Slider.GracePeriod

  1. Usar Slider.from() para criar Slider que usa um View para exibir o controle deslizante.
  2. Crie um GracePeriod.Listener e implementar onGracePeriodEnd() e onGracePeriodCancel() para lidar com esses eventos.
  3. Crie um Slider.GracePeriod e inicie a animação transmitindo o GracePeriod.Listener ao startGracePeriod().
  4. Substitua as informações onBackPressed() para processar o gesto de deslizar para baixo.
  5. Se o usuário deslizar para baixo, chame cancel() no(a) Slider.GracePeriod para dispensar o controle deslizante.

No exemplo a seguir, o botão de rolagem do período de carência é iniciado com um listener que emite um som de sucesso quando o período termina e um som dispensado se o o controle deslizante do período de carência foi cancelado:

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

Controle deslizante para determinar

Controles deslizantes determinados são usados principalmente para mostrar o progresso, em que é possível calcular quando até que uma tarefa seja concluída. É possível adicionar essa animação usando Slider.Determinate

  1. Usar Slider.from() para criar Slider que usa um View para exibir o controle deslizante.
  2. Crie o Slider.Determinate usando startScroller() e defina as posições inicial e máxima.
  3. Quando a animação terminar, chame o método hide() na classe Slider.Determinate para ocultar o controle deslizante.

Veja aqui uma implementação simples que anima o botão de rolagem para uma posição definida quando o o usuário toca em:

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

Controle deslizante indeterminado

Controles deslizantes indeterminados podem ser usados para telas de carregamento em que é difícil a calcular quando a tarefa terminar. Você pode adicionar isso animação usando Slider.Indeterminate

  1. Usar Slider.from() para criar Slider que usa um View para exibir o controle deslizante.
  2. Inicie a animação com o método Slider.startIndeterminate().
  3. Quando estiver pronto para parar a animação, chame o método método hide() na Slider.Indeterminate

Veja aqui uma implementação simples que cria o botão de rolagem indeterminado quando o o usuário toca no card e o oculta quando toca novamente:

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