您可以使用滑块在屏幕底部显示加载、进度或导航栏。滑块是全局用户体验组件,因此在 Glassware 中实现这些组件时应小心谨慎。
滚动条
当您滚动浏览多张卡片时,滚动条用于指示卡片的位置。您可以使用 Slider.Scroller
创建相同类型的效果。
- 使用
Slider.from()
创建一个使用View
显示滑块的Slider
。 - 使用
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
添加此动画。
- 使用
Slider.from()
创建一个使用View
显示滑块的Slider
。 - 创建
GracePeriod.Listener
并实现onGracePeriodEnd()
和onGracePeriodCancel()
来处理这些事件。 - 创建
Slider.GracePeriod
并通过将GracePeriod.Listener
传递给startGracePeriod()
方法启动动画。 - 替换 activity 的
onBackPressed()
以处理向下滑动手势。 - 如果用户向下滑动,在
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
添加此动画。
- 使用
Slider.from()
创建一个使用View
显示滑块的Slider
。 - 使用
startScroller()
创建Slider.Determinate
,并设置最大位置和初始位置。 - 动画播放完毕后,对
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
添加此动画。
- 使用
Slider.from()
创建一个使用View
显示滑块的Slider
。 - 使用
Slider.startIndeterminate()
方法启动动画。 - 当您准备好停止动画时,请在
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);
}
}