スライダーを使用すると、画面下部に読み込み、進行状況、ナビゲーション バーを表示できます。スライダーはグローバルな UX コンポーネントであり、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();
}
}
猶予期間スライダー
猶予期間スライダーは、ユーザーが通知を確認しやすくなるものの、ユーザーによる操作が不要なアクティビティで機能します。このアニメーションを追加するには、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);
}
}