ลิ้นชักการนำทาง (Google+ เทียบกับ YouTube)


403

ไม่มีใครรู้วิธีการใช้เมนูแบบเลื่อนเช่นแอพยอดนิยมในปัจจุบัน

คำถาม Stack Overflow อื่น ๆยังไม่มีคำตอบใด ๆ เกี่ยวกับวิธีการทำเช่นนี้ดังนั้นฉันจึงพยายามรวบรวมข้อมูลเพื่อช่วยผู้อื่น แอพพลิเคชั่นทั้งหมดที่ฉันพูดถึงด้านล่างนี้ทำได้ดีมากในการใช้เมนูสไลด์

1. Google Plus (ลงวันที่ 7/7/12)

Google+ ภาพหน้าจอเมนูเลื่อนออก

คุณสามารถไปจากหน้าจอแรกไปยังหน้าจอที่สองได้โดยคลิกโลโก้ G + ที่มุมซ้ายบน ขอให้สังเกตว่าหน้าจอทั้งหมดย้ายจากตำแหน่งและรับของถูกเลื่อนไปทางด้านขวาของหน้าจอ (รวมถึงแถบการกระทำ) หากต้องการกลับไปที่หน้าจอแรกคุณสามารถเลื่อนด้านขวากลับเข้าสู่การโฟกัสหรือคุณสามารถคลิกที่ไอคอน G + อีกครั้ง

2. YouTube (จนถึง 7/7/12)

ภาพหน้าจอเมนูเลื่อนออกจาก YouTube

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


1
จากลักษณะของมันมีคนไม่มากนักที่เคยมีประสบการณ์เกี่ยวกับการทำสิ่งนี้ ฉันขอแนะนำให้พยายามใช้บางสิ่งบางอย่างด้วยตัวเองและมาถึงปัญหาที่คุณอาจพบเจอ
— David Titarenco

7
ใช่นั่นเป็นเหตุผลที่ฉันโพสต์คำถาม SO ในอื่น ๆ ที่ฉันเชื่อว่าสมควรได้รับความสนใจมากขึ้น ฉันแค่สงสัยว่ามีคนที่ประสบความสำเร็จในเรื่องนี้และอยากจะแบ่งปันภูมิปัญญาของพวกเขาหรือไม่
— EGHDK

1
@EGHDK ลองดูบทความซีรีส์นี้: android.cyrilmottier.com/?p=658
— Alex Lockwood

2
ฉันตอบคำถามนี้เมื่อไม่นานมานี้ แต่ฉันกลับมาเน้นย้ำอีกครั้งว่าPrixingมีเมนู fly-out ที่ดีที่สุดที่นั่น ... โดยไกล มันมีความสวยงามเรียบเนียนอย่างสมบูรณ์แบบและทำให้ Facebook, Google+ และ YouTube น่าอับอาย EverNote ก็ค่อนข้างดีเช่นกัน ... แต่ก็ยังไม่สมบูรณ์แบบเท่ากับ Prixing ลองดูโพสต์ชุดนี้เกี่ยวกับวิธีการใช้งานเมนู flyout (จากไม่มีใครอื่นนอกจากหัวหน้านักพัฒนาของ Prixing!)
— Alex Lockwood

2
ด้วยการแก้ไขแพคเกจการสนับสนุน android 13 (พฤษภาคม 2013) มี DrawerLayout สำหรับการสร้าง Navigation Drawer ที่สามารถดึงเข้ามาจากขอบหน้าต่าง และลิ้นชักการนำทางเป็นรูปแบบการออกแบบในขณะนี้ developer.android.com/tools/extras/support-library.html
— Wubao Li

คำตอบ:


152

แก้ไข # 3:

รูปแบบการนำทางลิ้นชักถูกอธิบายอย่างเป็นทางการในเอกสาร Android!

ป้อนคำอธิบายรูปภาพที่นี่ ลองดูลิงค์ต่อไปนี้:

  • เอกสารการออกแบบที่สามารถพบได้ที่นี่
  • เอกสารสำหรับนักพัฒนาสามารถพบได้ที่นี่

แก้ไข # 2:

Roman Nurik (วิศวกรออกแบบ Android ของ Google) ยืนยันว่าพฤติกรรมที่แนะนำคือไม่ย้ายแถบคำสั่งเมื่อเปิดลิ้นชัก (เช่นแอป YouTube) ดูโพสต์ Google+นี้


แก้ไข # 1:

ผมตอบคำถามนี้ในขณะที่ผ่านมา แต่ฉันกลับไปอีกครั้งเน้นว่าPrixing มีเมนูบินออกมาดีที่สุดออกมี ... โดยไกล มันมีความสวยงามเรียบเนียนอย่างสมบูรณ์แบบและทำให้ Facebook, Google+ และ YouTube น่าอับอาย EverNote ก็ค่อนข้างดีเช่นกัน ... แต่ก็ยังไม่สมบูรณ์แบบเท่ากับ Prixing ลองดูโพสต์ชุดนี้เกี่ยวกับวิธีการใช้งานเมนู flyout (จากไม่มีใครอื่นนอกจากหัวหน้านักพัฒนาของ Prixing!)


คำตอบเดิม:

Adam Powell และ Richard Fulcher พูดคุยเกี่ยวกับเรื่องนี้ได้ที่49:47 - 52:50ในการพูดคุยของ Google I / O เรื่อง "การนำทางใน Android"

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

ในส่วนที่เกี่ยวกับแอป YouTube และ G + ดูเหมือนว่าแปลก ๆ ที่พวกเขาทำงานแตกต่างกัน ฉันเดาได้ดีที่สุดว่าเหตุผลที่แอป YouTube แก้ไขตำแหน่งของแถบการกระทำคือ

  1. หนึ่งในตัวเลือกการนำทางที่สำคัญที่สุดสำหรับผู้ใช้ที่ใช้แอพ YouTube คือการค้นหาซึ่งดำเนินการSearchViewในแถบการกระทำ มันจะทำให้รู้สึกที่จะทำให้แถบการกระทำแบบคงที่ในเรื่องนี้เพราะมันจะช่วยให้ผู้ใช้มักจะมีตัวเลือกในการค้นหาวิดีโอใหม่

  2. แอป G + ใช้ViewPagerเพื่อแสดงเนื้อหาดังนั้นการสร้างเมนูแบบดึงออกเฉพาะสำหรับเนื้อหาเลย์เอาต์ (เช่นทุกอย่างภายใต้แถบการกระทำ) จะไม่สมเหตุสมผลนัก การกวาดควรให้วิธีการนำทางระหว่างหน้าไม่ใช่วิธีการนำทางทั่วโลก นี่อาจเป็นสาเหตุที่พวกเขาตัดสินใจทำต่างกันในแอป G + มากกว่าที่พวกเขาทำในแอป YouTube

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

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


73
Prixing, Evernote และ Spotify ทุกคนมีทีมใหญ่ที่เขียนแอพของพวกเขาฉันเป็น CEO ของ Prixing และฉันต้องการที่แม่นยำเรามีนักพัฒนา Android ตัวจริงเพียงคนเดียว (แต่ Cyril Mottier ที่มีพรสวรรค์มาก)
— EricLarch

ด้วยการแก้ไขแพคเกจการสนับสนุน android 13 (พฤษภาคม 2013) มี DrawerLayout สำหรับการสร้าง Navigation Drawer ที่สามารถดึงเข้ามาจากขอบหน้าต่าง และลิ้นชักการนำทางเป็นรูปแบบการออกแบบในขณะนี้ developer.android.com/tools/extras/support-library.html
— Wubao Li

แม้ว่า NavigationDrawer จะมีอยู่ใน V4 แต่ก็ต้องมี ActionBar ซึ่งยังไม่ได้จัดเตรียมไว้ใน V4 ดังนั้นจึงไม่สามารถใช้งานได้ในแอปที่มีระดับ API ต่ำกว่า 11
— Nayanesh Gupte

1
@NayAneshGupte คุณสามารถใช้ ActionBarSherlock เพื่อใช้ ActionBar ต่ำกว่าระดับ API 11
— tasomaniac

ดูเหมือนว่าไม่มีทางที่จะแนะนำการหน่วงเวลาประดิษฐ์หากคุณต้องการให้อนิเมชั่นที่ใกล้เคียงราบรื่น
— theblang

15

เมื่อไม่นานมานี้ฉันได้แยกโครงการ Github ที่เรียกว่า "RibbonMenu" และแก้ไขให้เหมาะสมกับความต้องการของฉัน:

https://github.com/jaredsburrows/RibbonMenu

วัตถุประสงค์คืออะไร

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

มีอะไรใหม่

  • เปลี่ยนแอนิเมชั่นเลื่อนเพื่อให้เข้ากับแอพ Facebook และ Google+
  • เพิ่ม ActionBar มาตรฐาน (คุณสามารถเลือกที่จะใช้ ActionBarSherlock)
  • ใช้ menuitem เพื่อเปิดเมนู
  • เพิ่มความสามารถในการอัปเดต ListView ในกิจกรรมหลัก
  • เพิ่ม 2 รายการชมไปที่เมนูซึ่งคล้ายกับแอป Facebook และ Google+
  • เพิ่ม AutoCompleteTextView และปุ่มเพื่อแสดงตัวอย่างการดำเนินการ
  • เพิ่มวิธีการเพื่อให้ผู้ใช้กดปุ่ม 'ย้อนกลับ' เพื่อซ่อนเมนูเมื่อเปิด
  • อนุญาตให้ผู้ใช้โต้ตอบกับพื้นหลัง (ListView หลัก) และเมนูในเวลาเดียวกันซึ่งแตกต่างจากแอพ Facebook และ Google+!

ActionBar พร้อมเมนูออก

ActionBar พร้อมเมนูออก

ActionBar พร้อมเมนูออกและค้นหาที่เลือก

ActionBar พร้อมเมนูออกและค้นหาที่เลือก


5

มีการดำเนินงานที่ดีของการNavigationDrawerที่เป็นไปตามหลักเกณฑ์ของ Google วัสดุการออกแบบ (และลงเข้ากันได้กับ API 10) - ห้องสมุด MaterialDrawer (เชื่อมโยงไปยัง GitHub) เมื่อถึงเวลาของการเขียนพฤษภาคม 2017 มันได้รับการสนับสนุนอย่างแข็งขัน

มันมีอยู่ในMaven กลาง repo การตั้งค่าการพึ่งพา Gradle:

compile 'com.mikepenz:materialdrawer:5.9.1'

การตั้งค่าการพึ่งพา Maven:

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

ป้อนคำอธิบายรูปภาพที่นี่ ป้อนคำอธิบายรูปภาพที่นี่


@lmiguelvargasf คุณถ่ายภาพให้เหมาะสมกับโครงการ GitHub ในคำตอบได้อย่างไร! กรุณาแบ่งปันความคิดของคุณ
— naXa


2

โดยส่วนตัวแล้วฉันชอบnavigationDrawerแอปอย่างเป็นทางการใน Google Drive มันใช้งานได้ดี ฉันยอมรับว่าลิ้นชักการนำทางไม่ควรย้ายแถบการกระทำเนื่องจากเป็นจุดสำคัญในการเปิดและปิดลิ้นชักการนำทาง

หากคุณยังคงพยายามที่จะรับพฤติกรรมนั้นเมื่อเร็ว ๆ นี้ฉันได้สร้างโครงการที่เรียกว่าSherlockNavigationDrawerและตามที่คุณคาดหวังคือการใช้งานลิ้นชักนำทางด้วยActionBarSherlockและทำงานกับอุปกรณ์ Honeycomb ก่อน ตรวจสอบ:

SherlockNavigationDrawer github

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.