פס הזזה

אפשר להשתמש בפסי הזזה כדי להציג סרגל טעינה, התקדמות או סרגל ניווט בתחתית המסך. מחוונים הם רכיבי 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 כדי לסגור את פס ההזזה.

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

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