Laci Navigasi (Google+ vs. YouTube)

403

Adakah yang tahu cara menerapkan menu geser seperti beberapa aplikasi teratas saat ini?

Pertanyaan Stack Overflow lainnya belum memiliki jawaban tentang bagaimana melakukan ini, jadi saya mencoba mengumpulkan sebanyak mungkin info untuk membantu orang lain. Semua aplikasi yang saya sebutkan di bawah melakukan pekerjaan yang baik untuk mengimplementasikan menu slide

1. Google Plus (per 7/7/12)

Tangkapan layar menu geser keluar Google+

Anda hanya dapat pergi dari layar pertama ke layar kedua dengan mengklik logo G + di sudut kiri atas. Perhatikan bahwa seluruh layar bergerak dari posisi itu dan didorong ke sisi kanan layar (termasuk bilah tindakan). Untuk kembali ke layar pertama Anda dapat menggeser sisi kanan kembali ke fokus atau Anda dapat mengklik ikon G + lagi.

2. YouTube (per 7/7/12)

Tangkapan layar menu slide YouTube keluar

Anda dapat beralih dari layar pertama ke layar kedua menggunakan dua metode. Klik logo YouTube di kiri atas, atau Anda dapat menggunakan gerakan gesek untuk memindahkannya ke kanan. Ini sudah berbeda dari aplikasi G +. Kedua, Anda dapat melihat bahwa bilah tindakan tetap diletakkan (Tidak seperti G +). Terakhir, untuk mendapatkan layar asli kembali berfungsi seperti G +.

EGHDK
sumber
1
Dari kelihatannya, tidak banyak orang memiliki pengalaman dengan mengerjakan sesuatu seperti ini. Saya sarankan mencoba menerapkan sesuatu sendiri dan datang ke SO dengan masalah khusus yang mungkin Anda temui.
David Titarenco
7
Ya, itu sebabnya saya memposting pertanyaan SO di lain yang saya percaya layak mendapat perhatian lebih. Saya hanya ingin tahu apakah ada seseorang di luar sana yang telah berhasil menyelesaikan ini dan ingin berbagi kebijaksanaan mereka.
EGHDK
1
@EGHDK Lihat seri artikel ini: android.cyrilmottier.com/?p=658
Alex Lockwood
2
Saya menjawab pertanyaan ini beberapa waktu lalu, tetapi saya kembali menekankan bahwa Prixing memiliki menu fly-out terbaik di luar sana ... sejauh ini. Ini benar-benar indah, sangat halus, dan membuat Facebook, Google+, dan YouTube menjadi malu. EverNote juga cukup bagus ... tapi masih tidak sesempurna Prixing. Lihatlah serangkaian posting ini tentang bagaimana menu flyout dilaksanakan (tidak lain dari kepala pengembang di Prixing sendiri!).
Alex Lockwood
2
Dengan revisi paket dukungan Android 13 (Mei 2013), ada DrawerLayout untuk membuat Drawer Navigasi yang dapat ditarik dari tepi jendela. Dan, laci navigasi adalah pola desain sekarang. developer.android.com/tools/extras/support-library.html
Wubao Li

Jawaban:

152

Edit # 3:

Pola Navigasi Drawer secara resmi dijelaskan dalam dokumentasi Android!

masukkan deskripsi gambar di sini Lihat tautan berikut:

  • Dokumen desain dapat ditemukan di sini .
  • Dokumen pengembang dapat ditemukan di sini .

Edit # 2:

Roman Nurik (seorang insinyur desain Android di Google) telah mengkonfirmasi bahwa perilaku yang disarankan adalah untuk tidak memindahkan Bilah Tindakan saat membuka laci (seperti aplikasi YouTube). Lihat pos Google+ ini .


Edit # 1:

Saya menjawab pertanyaan ini beberapa waktu lalu, tetapi saya kembali menekankan bahwa Prixing memiliki menu fly-out terbaik di luar sana ... sejauh ini . Ini benar-benar indah, sangat halus, dan membuat Facebook, Google+, dan YouTube menjadi malu. EverNote juga cukup bagus ... tapi masih tidak sesempurna Prixing. Lihatlah serangkaian posting ini tentang bagaimana menu flyout dilaksanakan (tidak lain dari kepala pengembang di Prixing sendiri!).


Jawaban asli:

Adam Powell dan Richard Fulcher membicarakan hal ini di 49:47 - 52:50 dalam pembicaraan Google I / O berjudul "Navigasi di Android".

Untuk meringkas jawaban mereka, pada tanggal posting ini menu navigasi geser tidak secara resmi menjadi bagian dari standar desain aplikasi Android. Seperti yang mungkin telah Anda temukan, saat ini tidak ada dukungan asli untuk fitur ini, tetapi ada pembicaraan tentang menjadikan ini sebagai tambahan untuk revisi mendatang dari paket dukungan.

Sehubungan dengan aplikasi YouTube dan G +, tampaknya aneh bahwa mereka berperilaku berbeda. Tebakan terbaik saya adalah alasan aplikasi YouTube memperbaiki posisi bilah tindakan adalah,

  1. Salah satu opsi navigasi yang paling penting bagi pengguna yang menggunakan aplikasi YouTube adalah pencarian, yang dilakukan di SearchViewbilah tindakan. Masuk akal untuk membuat bilah tindakan statis dalam hal ini, karena akan memungkinkan pengguna untuk selalu memiliki opsi untuk mencari video baru.

  2. Aplikasi G + menggunakan a ViewPager untuk menampilkan kontennya, jadi membuat menu tarik khusus untuk konten tata letak (yaitu semua yang ada di bawah bilah tindakan) tidak akan masuk akal. Menggesek seharusnya menyediakan sarana navigasi antar halaman, bukan sarana navigasi global. Ini mungkin mengapa mereka memutuskan untuk melakukannya secara berbeda di aplikasi G + daripada yang mereka lakukan di aplikasi YouTube.

    Pada catatan lain, periksa aplikasi Google Play untuk versi lain dari menu "tarik keluar" (ketika Anda berada di halaman paling kiri, geser ke kiri dan tarik keluar, "setengah halaman" menu akan muncul).

Anda benar karena ini bukan perilaku yang sangat konsisten, tetapi sepertinya tidak ada konsensus 100% dalam tim Android tentang bagaimana perilaku ini harus diimplementasikan. Saya tidak akan terkejut jika di masa depan aplikasi diperbarui sehingga navigasi di kedua aplikasi identik (mereka tampak sangat tertarik untuk membuat navigasi konsisten di semua aplikasi buatan Google dalam pembicaraan).

Alex Lockwood
sumber
73
Prixing, Evernote, dan Spotify semua memiliki tim yang cukup besar menulis aplikasi mereka. Saya adalah CEO Prixing, dan saya ingin memastikan bahwa kami hanya memiliki satu pengembang Android nyata (tapi yang sangat berbakat, Cyril Mottier)
EricLarch
Dengan revisi paket dukungan Android 13 (Mei 2013), ada DrawerLayout untuk membuat Drawer Navigasi yang dapat ditarik dari tepi jendela. Dan, laci navigasi adalah pola desain sekarang. developer.android.com/tools/extras/support-library.html
Wubao Li
meskipun NavigasiDrawer hadir di V4 perlu ActionBar yang belum disediakan dalam V4 sehingga tidak dapat menggunakannya di aplikasi yang memiliki tingkat API di bawah 11.
Nayanesh Gupte
1
@NayAneshGupte Anda selalu dapat menggunakan ActionBarSherlock untuk menggunakan ActionBar di bawah API level 11.
tasomaniac
Sepertinya tidak ada jalan lain untuk memperkenalkan penundaan buatan jika Anda ingin animasi yang dekat menjadi lancar?
theblang
15

Baru-baru ini saya memotong proyek Github saat ini yang disebut "RibbonMenu" dan mengeditnya agar sesuai dengan kebutuhan saya:

https://github.com/jaredsburrows/RibbonMenu

Apa Tujuannya?

  • Kemudahan Akses: Memungkinkan akses mudah ke menu yang meluncur masuk dan keluar
  • Kemudahan Implementasi: Perbarui layar yang sama menggunakan jumlah kode minimal
  • Independensi: Tidak memerlukan pustaka dukungan seperti ActionBarSherlock
  • Kustomisasi: Mudah untuk mengubah warna dan menu

Apa yang baru

  • Mengubah animasi geser agar sesuai dengan aplikasi Facebook dan Google+
  • Menambahkan ActionBar standar (Anda dapat memilih untuk menggunakan ActionBarSherlock)
  • Menuitem yang digunakan untuk membuka Menu
  • Menambahkan kemampuan untuk memperbarui ListView pada Aktivitas utama
  • Menambahkan 2 ListViews ke Menu, serupa dengan aplikasi Facebook dan Google+
  • Menambahkan AutoCompleteTextView dan Tombol juga untuk menunjukkan contoh implementasi
  • Metode yang ditambahkan untuk memungkinkan pengguna menekan 'tombol kembali' untuk menyembunyikan menu saat terbuka
  • Mengizinkan pengguna berinteraksi dengan latar belakang (ListView utama) dan menu pada saat yang sama tidak seperti aplikasi Facebook dan Google+!

ActionBar dengan Menu keluar

ActionBar dengan Menu keluar

ActionBar dengan Menu out dan cari yang dipilih

ActionBar dengan Menu out dan cari yang dipilih

Jared Burrows
sumber
5

Ada implementasi hebat NavigationDraweryang mengikuti Pedoman Desain Bahan Google (dan kompatibel hingga API 10) - Pustaka MaterialDrawer (tautan ke GitHub) . Pada saat penulisan, Mei 2017, ini didukung secara aktif.

Ini tersedia di repo Maven Central . Penyiapan dependensi gradle:

compile 'com.mikepenz:materialdrawer:5.9.1'

Penyiapan ketergantungan Maven:

<dependency>
    <groupId>com.mikepenz</groupId>
    <artifactId>materialdrawer</artifactId>
    <version>5.9.1</version>
</dependency>

masukkan deskripsi gambar di sini masukkan deskripsi gambar di sini

naXa
sumber
@lmiguelvargasf bagaimana Anda membayangkan mencocokkan proyek GitHub menjadi jawabannya ?! Silakan bagikan ide Anda.
naXa
2

Saya tahu ini adalah pertanyaan lama tetapi jawaban paling baru adalah dengan menggunakan pustaka Desain Dukungan Android yang akan membuat hidup Anda mudah.

Sotti
sumber
2

Secara pribadi saya suka navigationDrawerdi aplikasi resmi Google Drive. Itu hanya bekerja dan bekerja dengan baik. Saya setuju bahwa laci navigasi tidak boleh memindahkan bilah tindakan karena merupakan titik kunci untuk membuka dan menutup laci navigasi.

Jika Anda masih berusaha untuk mendapatkan perilaku itu, saya baru-baru ini membuat sebuah proyek yang disebut SherlockNavigationDrawerdan seperti yang Anda harapkan adalah penerapan Laci Navigasi denganActionBarSherlock dan berfungsi untuk perangkat pra Honeycomb. Periksa:

SherlockNavigationDrawer github

Nicolas Jafelle
sumber