شريط التمرير

يمكنك استخدام أشرطة التمرير لعرض شريط تقدم أو تقدم أو شريط تنقل في أسفل الشاشة. تُعد أشرطة التمرير مكوّنات 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);
    }
}