ฉันจะป้องกันไม่ให้ปุ่มการดำเนินการลอยตัวปิดกั้นส่วนประกอบอื่น ๆ ได้อย่างไร

การออกแบบวัสดุใหม่ของ Google แนะนำให้ใช้ปุ่มการกระทำแบบลอยตัวเพื่อดึงดูดความสนใจของผู้ใช้สำหรับการทำงานหลักบนหน้าจอนั้น มีตัวอย่างค่อนข้างมากในมุมมองรายการ

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

แก้ไข: สิ่งนี้จะเกิดขึ้นกับรายการสุดท้ายของรายการเสมอ นี่คือตัวอย่างที่ไม่สามารถใช้ 'ดาวดวงโปรด' ได้อย่างถูกต้อง นอกจากนี้ยังบล็อกเนื้อหาเช่นเวลาในตัวอย่างนี้

มีวิธีการต่าง ๆ ที่คุณสามารถจัดการได้

1. อย่าวางเนื้อหาที่สำคัญไว้ใต้ปุ่ม

   นี่เป็นวิธีที่ชัดเจนที่สุดและอาจเป็นเรื่องทั่วไปที่สุด เมื่อใดก็ตามที่เป็นไปได้จัดโครงสร้างการออกแบบของคุณเพื่อให้แน่ใจว่าไม่มีสิ่งใดสำคัญด้านล่างปุ่มการกระทำเช่นปุ่มอื่น ๆ เนื้อหาหลัก ฯลฯ

   คุณสามารถเพิ่มพื้นที่พิเศษโดยใช้ช่องว่างภายในหรือรายการว่างเปล่าการจัดรูปแบบเนื้อหาดังนั้นสิ่งที่ไม่สำคัญไม่ได้อยู่ที่ปุ่มจะเป็นหรือสิ่งอื่น ๆ - ขึ้นอยู่กับเนื้อหาและการออกแบบที่คุณต้องการ

2. เปลี่ยนตำแหน่งปุ่ม

   ปุ่มการกระทำไม่จำเป็นต้องอยู่ที่ด้านล่างขวา ขึ้นอยู่กับการออกแบบของคุณมันอาจเหมาะสมกว่าที่จะวางไว้ในที่อื่น ฉันคิดว่าตัวอย่างด้านล่างทำได้ค่อนข้างดี

   Google เพิ่งอัปเดตคู่มือการออกแบบวัสดุและสร้างหน้าสำหรับปุ่มการกระทำแบบลอยซึ่งแสดงว่ามันถูกใช้ในสถานที่ต่าง ๆ และปรับขนาดเพิ่มเติมจากภาพเคลื่อนไหว (พูดถึงด้านล่าง)

_{ภาพแรกจากReddit News Pro ภาพที่สองจากมาร์ค DiSciullo}

3. อย่าแสดงปุ่มนี้ตลอดเวลา

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

   หลักเกณฑ์ที่อัปเดตของ Google จะแสดงเวอร์ชันของการเคลื่อนไหวปุ่มเข้าและออกโดยปรับขนาดสิ่งทั้งหมดแทนที่จะเลื่อนเหมือนภาพด้านล่าง

_{ภาพจากFloating การดำเนินการ}

อาจเป็นบิตที่ง่ายและไม่ใช่โซลูชันที่หรูหราที่สุด แต่: เพิ่มรายการ 'ดัมมี่' ที่ว่างลงในส่วนท้ายของรายการเพื่อให้ผู้ใช้สามารถเลื่อนไปไกลกว่ารายการสุดท้าย

มันใช้งานได้สำหรับฉัน เพิ่มช่องว่างด้านล่างเพื่อ RecyclerView

<android.support.v7.widget.RecyclerView 
android:id="@+id/my_recycler_view" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:clipToPadding="false" 
android:paddingBottom="30dp" 
android:scrollbars="vertical"/>

Ref: /programming/27768495/not-able-to-add-empty-view-below-recyclerview

ตีกลับออกจากแนวคิด "ย้ายที่ปุ่ม" ในคำตอบที่ยอมรับส่วนเทคนิคการเลื่อนของแนวทางการออกแบบวัสดุมีการนำไปใช้ที่เป็นไปได้ของแนวคิดนั้น

ปุ่มการทำงานแบบลอยตัวแบ่งขอบระหว่างเนื้อหาและแถบแอพที่มีพื้นที่ยืดหยุ่น เมื่อเลื่อน:

พื้นที่ที่มีความยืดหยุ่นจะลดลงจนกระทั่งเหลือเพียงแถบเครื่องมือ เมื่อเลื่อนไปที่ด้านบนของหน้าพื้นที่ที่มีความยืดหยุ่นจะขยายตัวขึ้นอีกครั้ง

ปุ่มการกระทำลอยตัวเคลื่อนไหวบนหน้าจอเป็นชิ้นส่วนที่ขยายของวัสดุ

https://material.io/guidelines/components/buttons-floating-action-button.html#buttons-floating-action-button-behavior

ฉันใช้สิ่งนี้ในวิธีการ onBindViewHolder ของ RecyclerView.Adapter เพื่อตั้งค่าระยะขอบด้านล่างของรายการสุดท้ายในรายการเป็น 72dp เพื่อที่จะเลื่อนขึ้นเหนือปุ่มการดำเนินการลอยตัว

สิ่งนี้ไม่ต้องการรายการจำลองในรายการ

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    // other binding code goes here.

    if (position + 1 == getItemCount()) {
        // set bottom margin to 72dp.
        setBottomMargin(holder.itemView, (int) (72 * Resources.getSystem().getDisplayMetrics().density));
    } else {
        // reset bottom margin back to zero. (your value may be different)
        setBottomMargin(holder.itemView, 0);
    }
}

public static void setBottomMargin(View view, int bottomMargin) {
    if (view.getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
        ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) view.getLayoutParams();
        params.setMargins(params.leftMargin, params.topMargin, params.rightMargin, bottomMargin);
        view.requestLayout();
    }
}