Slider

คุณสามารถใช้แถบเลื่อนเพื่อแสดงการโหลด ความคืบหน้า หรือแถบนำทางบน ด้านล่างของหน้าจอ แถบเลื่อนเป็นคอมโพเนนต์ UX ที่ครอบคลุมซึ่งควรได้รับการจัดการ ด้วยความระมัดระวังเมื่อนำไปใช้ใน Glassware ของคุณ

สำคัญ

• ระบบจะแชร์แถบเลื่อนระหว่างกิจกรรมต่างๆ ใน Glass ตัวอย่างเช่น หากคุณ เปิดตัวแถบเลื่อนในกิจกรรม แล้วผู้ใช้หยุด ที่จะเริ่มกิจกรรมใหม่ ซึ่งจะเปิดตัวแถบเลื่อนของตัวเอง เมื่อ กิจกรรมกลับมาทำงานอีกครั้ง แถบเลื่อนไม่ทำงาน หากคุณต้องการให้แถบเลื่อนเป็น ปรากฏขึ้นอีกครั้ง คุณต้องจัดการกับสถานการณ์นี้
• คำขอแถบเลื่อนต้องเชื่อมโยงกับข้อมูลพร็อพเพอร์ตี้ และคำขอดังกล่าวเป็นเพียง เมื่อหน้าต่างที่มีมุมมองนั้นอยู่ในโฟกัส หากหน้าต่างอื่น จะโฟกัสไปที่ Glass ระบบจะซ่อนแถบเลื่อนไว้

แถบเลื่อนแถบเลื่อน

แถบเลื่อนแถบเลื่อนใช้เพื่อระบุตําแหน่งของการ์ดขณะที่คุณปัด ผ่านการ์ดหลายใบ คุณสามารถสร้างเอฟเฟกต์ประเภทเดียวกันได้โดยใช้ 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);
    }
}