Bagaimana cara menjaga tombol tindakan mengambang saya dari memblokir komponen lain?


22

Desain Material baru Google merekomendasikan untuk menggunakan tombol tindakan mengambang untuk menarik perhatian pengguna untuk tindakan utama pada layar itu. Ada cukup banyak contoh tentang hal ini dalam tampilan daftar.

Sekarang, anggaplah tampilan daftar Anda memiliki cukup item untuk mengisi layar, membuat pengguliran tidak mungkin. Jika item daftar Anda memiliki komponen tertentu yang dapat berinteraksi dengan pengguna, misalnya sakelar atau bintang favorit, mungkin bahwa tombol tindakan mengambang memblokir komponen ini. Bagaimana kita menangani kasus ini?

EDIT: Ini sebenarnya selalu terjadi dengan item terakhir dari daftar. Berikut ini contoh di mana 'bintang favorit' tidak dapat digunakan dengan benar. Itu juga memblokir konten, seperti waktu dalam contoh ini.

contoh tombol tindakan mengambang yang memblokir UI

Jawaban:


14

Ada beberapa cara berbeda untuk menangani ini.

  1. Jangan letakkan konten vital di bawah tombol

    Ini adalah pendekatan yang paling jelas, dan mungkin yang paling umum. Jika memungkinkan, susun desain Anda untuk memastikan tidak ada yang penting di bawah tombol aksi seperti tombol lain, konten utama, dll.

    Anda dapat menambahkan ruang tambahan dengan menggunakan padding atau entri kosong, memformat konten sehingga hal-hal yang tidak penting tidak berada di tempat tombolnya berada, atau hal lain - itu tergantung pada konten dan desain yang Anda inginkan.

  2. Pindahkan tombolnya

    Tombol tindakan tidak harus berada di kanan bawah. Tergantung pada desain Anda, mungkin lebih masuk akal untuk menempatkannya di lokasi lain. Saya pikir contoh di bawah ini melakukannya dengan cukup baik.

    Google baru saja memperbarui panduan desain bahan mereka dan membuat halaman hanya untuk tombol tindakan mengambang yang menunjukkan itu digunakan di berbagai lokasi dan ukuran selain animasi (dibicarakan di bawah).

Gambar pertama dari Reddit News Pro . Gambar kedua dari Mark DiSciullo .

  1. Jangan tampilkan tombol sepanjang waktu

    Terkadang tombol aksi tidak cukup vital sehingga perlu dilihat sepanjang waktu. Dalam kasus seperti ini, menyembunyikannya di gulir atau saat menggulir ke bawah mungkin masuk akal. Jika dan bagaimana Anda melakukannya tergantung pada konten dan desain, tidak ada jawaban yang benar untuk semua aplikasi.

    Pedoman Google yang diperbarui menunjukkan versi menggerakkan tombol masuk dan keluar dengan menskalakan semuanya alih-alih meluncur seperti gambar di bawah ini.

Gambar dari Aksi Mengambang .


8

Mungkin sedikit sederhana dan bukan solusi yang paling elegan, tetapi: tambahkan entri 'dummy' kosong di akhir daftar, sehingga pengguna dapat menggulir lebih jauh dari entri terakhir.


1
Ini dapat dianggap sebagai solusi "resmi", karena aplikasi Gmail menggunakannya.
Vicky Chijwani

1
Anda juga dapat menyebutnya "padding di bagian bawah daftar" daripada entri dummy (yang, seperti yang Anda tunjukkan, kedengarannya tidak bagus).
Vicky Chijwani


2

Memantul gagasan "Relokasi tombol" dalam jawaban yang diterima, bagian teknik Pengguliran dari pedoman desain bahan memiliki satu kemungkinan implementasi gagasan itu.

Yaitu, tombol tindakan mengambang memecah tepi antara konten dan bilah aplikasi dengan ruang yang fleksibel. Saat menggulir:

Ruang fleksibel menyusut hingga hanya bilah alat yang tersisa. Saat menggulir ke bagian atas halaman, ruang fleksibel tumbuh ke tempatnya lagi.

Tombol aksi mengambang menjulang ke layar sebagai bagian materi yang mengembang.

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

hebat antara bilah aplikasi dan konten


1

Saya menggunakan ini dalam metode onBindViewHolder RecyclerView.Adapter untuk mengatur margin bawah dari item terakhir dalam daftar untuk 72dp sehingga akan menggulir ke atas di atas tombol tindakan mengambang.

Ini tidak memerlukan entri dummy dalam daftar.

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

Bekerja untuk saya :).
OWADVL
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.