פס הזזה

תוכלו להשתמש בפסי ההזזה כדי להציג טעינה, התקדמות או סרגל ניווט בתחתית המסך. מחוונים הם רכיבי UX גלובליים ויש לטפל בהם בזהירות במהלך ההטמעה שלהם ב-Glassware.


פס הזזה

פסי ההזזה של גלילת המסך משמשים לציון המיקום של כרטיס בזמן ההחלקה. דרך כמה כרטיסים. אפשר ליצור את אותו סוג של אפקט באמצעות Slider.Scroller

  1. כדאי להשתמש Slider.from() כדי ליצור Slider שמשתמשת View כדי להציג את פס ההזזה.
  2. יוצרים את Slider.Scroller באמצעות startScroller() ולהגדיר את המיקומים המקסימליים וההתחלתיים.

הנה הטמעה פשוטה שהופכת אנימציה למיקום הבא של גלילה כשהמשתמש מקיש על: 

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

  1. כדאי להשתמש Slider.from() כדי ליצור Slider שמשתמשת View כדי להציג את פס ההזזה.
  2. לכתוב GracePeriod.Listener וליישם את onGracePeriodEnd() והקבוצה onGracePeriodCancel() כדי לטפל באירועים האלה.
  3. לכתוב Slider.GracePeriod ולהתחיל את האנימציה באמצעות העברה GracePeriod.Listener אל startGracePeriod().
  4. ביטול הפעילות onBackPressed() כדי להתמודד עם תנועת ההחלקה למטה.
  5. אם המשתמש מחליק למטה, cancel() ב Slider.GracePeriod כדי לסגור את פס ההזזה.

בדוגמה הבאה, הגלילה של תקופת החסד מופעלת עם מאזינים מושמע צליל הצלחה בסיום התקופה, וצליל מבוטל אם פס ההזזה של תקופת החסד בוטל: 

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() כדי ליצור Slider שמשתמשת View כדי להציג את פס ההזזה.
  2. יוצרים את Slider.Determinate באמצעות startScroller() ולהגדיר את המיקומים המקסימליים וההתחלתיים.
  3. כשהאנימציה מסתיימת, קוראים לפונקציה hide() ב-method Slider.Determinate כדי להסתיר את פס ההזזה.

הנה הטמעה פשוטה שהופכת את פס הגלילה למיקום מוגדר כאשר הקשות של משתמשים: 

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() כדי ליצור Slider שמשתמשת View כדי להציג את פס ההזזה.
  2. מתחילים את האנימציה עם Slider.startIndeterminate().
  3. כשתהיו מוכנים להפסיק את האנימציה, קראו hide() Slider.Indeterminate

הנה הטמעה פשוטה, שיוצרת את גלילת הגלילה הפנימית כאשר משתמש מקיש על הכרטיס ומסתיר אותו כשמקישים שוב על הכרטיס: 

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