滑块

您可以使用滑块在屏幕底部显示加载、进度或导航栏。滑块是全局用户体验组件,因此在 Glassware 中实现这些组件时应小心谨慎。


滚动条

当您滚动浏览多张卡片时,滚动条用于指示卡片的位置。您可以使用 Slider.Scroller 创建相同类型的效果。

  1. 使用 Slider.from() 创建一个使用 View 显示滑块的 Slider
  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();
    }
}

宽限期滑块

宽限期滑块适用于对用户有用的通知,但不需要用户互动的 activity。您可以使用 Slider.GracePeriod 添加此动画。

  1. 使用 Slider.from() 创建一个使用 View 显示滑块的 Slider
  2. 创建 GracePeriod.Listener 并实现 onGracePeriodEnd()onGracePeriodCancel() 来处理这些事件。
  3. 创建 Slider.GracePeriod 并通过将 GracePeriod.Listener 传递给 startGracePeriod() 方法启动动画。
  4. 替换 activity 的 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() 创建一个使用 View 显示滑块的 Slider
  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() 创建一个使用 View 显示滑块的 Slider
  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);
    }
}