แถบเลื่อน

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