لغزنده

می توانید از نوار لغزنده برای نشان دادن بارگیری، پیشرفت یا نوار پیمایش در پایین صفحه استفاده کنید. لغزنده‌ها اجزای 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() را در 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);
    }
}