شريط التمرير

يمكنك استخدام أشرطة التمرير لإظهار شريط التحميل أو مستوى التقدم أو التنقل في أسفل الشاشة. تُعد أشرطة التمرير مكونات عالمية لتجربة المستخدم ويجب التعامل معها بعناية عند تنفيذها في 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);
    }
}