슬라이더를 사용하여 화면 하단에 로드, 진행률 또는 탐색 메뉴를 표시할 수 있습니다. 슬라이더는 전역 UX 구성요소이므로 Glass 소프트웨어에서 구현할 때는 주의해야 합니다.
스크롤 슬라이더
여러 카드를 스와이프할 때 스크롤 슬라이더가 카드 위치를 나타내는 데 사용됩니다. 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();
}
}
유예 기간 슬라이더
유예 기간 슬라이더는 사용자가 알림을 보는 데 유용하지만 사용자 상호작용이 필요하지 않은 활동에서 작동합니다. 이 애니메이션은 Slider.GracePeriod를 사용하여 추가할 수 있습니다.
Slider.from()를 사용하여View를 사용하여 슬라이더를 표시하는Slider를 만듭니다.GracePeriod.Listener를 만들고onGracePeriodEnd()및onGracePeriodCancel()를 구현하여 이러한 이벤트를 처리합니다.Slider.GracePeriod를 만들고GracePeriod.Listener를startGracePeriod()메서드에 전달하여 애니메이션을 시작합니다.- 아래로 스와이프하는 동작을 처리하도록 활동의
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);
}
}