Làm cách nào để giữ nút hành động nổi của tôi chặn các thành phần khác?

Thiết kế Vật liệu mới của Google khuyến nghị sử dụng các nút hành động nổi để thu hút sự chú ý đến người dùng cho hành động chính trên màn hình đó. Có khá nhiều ví dụ về điều này trong chế độ xem danh sách.

Bây giờ, giả sử chế độ xem danh sách của bạn có đủ các mục để lấp đầy màn hình, khiến cho việc cuộn không thể thực hiện được. Nếu các mục danh sách của bạn có một thành phần nhất định mà người dùng có thể tương tác, ví dụ: công tắc hoặc ngôi sao yêu thích, có thể nút hành động nổi đang chặn thành phần này. Làm thế nào chúng ta nên xử lý trường hợp này?

EDIT: Điều này thực sự luôn xảy ra với mục cuối cùng của danh sách. Đây là một ví dụ trong đó 'ngôi sao yêu thích' không thể được sử dụng đúng cách. Nó cũng chặn nội dung, chẳng hạn như thời gian trong ví dụ này.

Có một số cách khác nhau bạn có thể xử lý này.

1. Không đặt nội dung quan trọng bên dưới nút

   Đây là cách tiếp cận rõ ràng nhất, và có lẽ là chung nhất. Bất cứ khi nào có thể, hãy cấu trúc thiết kế của bạn để đảm bảo rằng không có gì quan trọng nằm dưới nút hành động như các nút khác, nội dung chính, v.v.

   Bạn có thể thêm không gian bổ sung bằng cách sử dụng phần đệm hoặc mục nhập trống, định dạng nội dung để những thứ không quan trọng không phải là nút sẽ ở đâu, hoặc một số thứ khác - nó phụ thuộc vào nội dung và thiết kế bạn muốn.

2. Di dời nút

   Nút hành động không phải ở dưới cùng bên phải. Tùy thuộc vào thiết kế của bạn, nó có thể có ý nghĩa hơn để đặt nó ở một vị trí khác. Tôi nghĩ rằng các ví dụ dưới đây làm điều đó khá tốt.

   Google vừa cập nhật hướng dẫn thiết kế vật liệu của họ và tạo một trang chỉ cho nút hành động nổi cho thấy nó đang được sử dụng ở các vị trí khác nhau và kích thước ngoài hình động (nói về bên dưới).

_{Hình ảnh đầu tiên từ Reddit News Pro . Hình ảnh thứ hai từ Mark DiSciullo .}

3. Đừng hiển thị nút mọi lúc

   Đôi khi nút hành động không đủ quan trọng mà nó cần phải được nhìn thấy mọi lúc. Trong trường hợp như thế này, ẩn nó trên cuộn hoặc trong khi cuộn xuống có thể có ý nghĩa. Nếu và cách bạn làm như vậy phụ thuộc vào nội dung và thiết kế, không ai trả lời đúng cho tất cả các ứng dụng.

   Các hướng dẫn được cập nhật của Google hiển thị phiên bản hoạt hình của nút vào và ra bằng cách thu nhỏ toàn bộ thay vì trượt như hình ảnh bên dưới.

_{Hình ảnh từ hành động nổi .}

Có thể hơi đơn giản và không phải là giải pháp tao nhã nhất, nhưng: thêm mục nhập 'hình nộm' trống vào cuối danh sách, để người dùng có thể cuộn xa hơn mục nhập cuối cùng.

Điều này làm việc cho tôi. Thêm phần đệm dưới vào 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"/>

Tham chiếu: /programming/27768495/not-able-to-add-empty-view-below-recyclerview

Thoát khỏi ý tưởng "Định vị lại nút" trong câu trả lời được chấp nhận, phần kỹ thuật cuộn trong hướng dẫn thiết kế vật liệu có thể thực hiện ý tưởng đó.

Cụ thể, nút hành động nổi phá vỡ cạnh giữa nội dung và thanh ứng dụng với không gian linh hoạt. Khi cuộn:

Không gian linh hoạt co lại cho đến khi chỉ còn lại thanh công cụ. Khi cuộn lên đầu trang, không gian linh hoạt sẽ phát triển trở lại.

Nút hành động nổi hoạt hình trên màn hình như một phần mở rộng của vật liệu.

https: // m Material.io/guferences/components/buttons-floating-action-button.html#buttons-floating-action-button-behavior

Tôi đã sử dụng điều này trong phương thức onBindViewHolder của RecyclerView.Ad CHƯƠNG để đặt lề dưới của mục cuối cùng trong danh sách thành 72dp để nó sẽ cuộn lên phía trên nút hành động nổi.

Điều này không yêu cầu một mục giả trong danh sách.

@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();
    }
}