ลิ้นชักการนำทาง (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.