สไลด์สไตล์ Facebook Android

แอปพลิเคชั่น Facebook ใหม่และการนำทางของมันยอดเยี่ยมมาก ฉันแค่พยายามที่จะดูว่ามันสามารถเลียนแบบในใบสมัครของฉันได้อย่างไร

ทุกคนมีเงื่อนงำว่ามันสามารถทำได้?

เมื่อคลิกปุ่มซ้ายบนสไลด์หน้าและหน้าจอต่อไปนี้จะแสดง:

วิดีโอ YouTube

ฉันเล่นด้วยตัวเองและวิธีที่ดีที่สุดที่ฉันสามารถหาได้คือใช้ FrameLayout และวาง HorizontalScrollView (HSV) ที่กำหนดเองไว้ด้านบนของเมนู ภายใน HSV เป็นแอปพลิเคชั่นของคุณแต่มีมุมมองที่โปร่งใสเหมือนลูกคนแรก ซึ่งหมายความว่าเมื่อ HSV มีออฟเซ็ตเลื่อนเป็นศูนย์เมนูจะแสดงผ่าน (และยังสามารถคลิกได้อย่างน่าประหลาดใจ)

เมื่อแอปเริ่มทำงานเราเลื่อน HSV ไปที่ออฟเซ็ตของมุมมองแอปพลิเคชั่นแรกที่มองเห็นและเมื่อเราต้องการแสดงเมนูที่เราเลื่อนกลับเพื่อแสดงเมนูผ่านมุมมองแบบโปร่งใส

รหัสอยู่ที่นี่และปุ่มสองปุ่มด้านล่าง (เรียกว่า HorzScrollWithListMenu และ HorzScrollWithImageMenu) ในกิจกรรมการเปิดตัวแสดงเมนูที่ดีที่สุดที่ฉันจะได้รับ:

การสาธิตเมนูเลื่อนบน Android

ภาพหน้าจอจากโปรแกรมจำลอง (เลื่อนกลาง):

สกรีนช็อตจากอุปกรณ์ (full-scroll) โปรดทราบว่าไอคอนของฉันไม่กว้างเท่ากับไอคอนเมนู Facebook ดังนั้นมุมมองเมนูและมุมมอง 'แอป' จะไม่จัดแนว

ฉันใช้การนำทางแบบสไลด์ไลค์เหมือน Facebook ในโครงการห้องสมุดนี้

คุณสามารถติดตั้งไว้ในแอปพลิเคชัน UI และการนำทางของคุณได้อย่างง่ายดาย คุณจะต้องดำเนินการเพียงกิจกรรมเดียวและส่วนเดียวแจ้งให้ห้องสมุดทราบ - และห้องสมุดจะให้ภาพเคลื่อนไหวและการนำทางที่ต้องการทั้งหมด

ภายใน repo คุณสามารถค้นหาโครงการตัวอย่างพร้อมวิธีใช้ lib เพื่อสร้างการนำทางแบบ Facebook นี่คือวิดีโอสั้น ๆ ที่มีการบันทึกของโครงการสาธิต

นอกจากนี้ lib นี้ควรเข้ากันได้กับรูปแบบ ActionBar นี้เพราะจะขึ้นอยู่กับธุรกรรมของกิจกรรมและ TranslateAnimations (ไม่ใช่ธุรกรรมชิ้นส่วนและมุมมองที่กำหนดเอง)

ตอนนี้ปัญหาที่พบบ่อยที่สุดคือการทำให้แอปพลิเคชั่นทำงานได้ดีซึ่งรองรับทั้งแนวตั้งและแนวนอน หากคุณมีข้อเสนอแนะใด ๆ โปรดให้มันผ่าน GitHub

ทั้งหมดที่ดีที่สุดของ
อเล็กซ์

นี่คือlib อื่นและดูเหมือนว่าจะดีที่สุดในความคิดของฉัน ฉันไม่ได้เขียนมัน ..

UPDATE:

ดูเหมือนว่ารหัสนี้จะทำงานได้ดีที่สุดสำหรับฉันและจะย้ายทั้ง Actionbar ที่คล้ายกับแอพ G +

Google จัดการเรื่องนี้ได้อย่างไร Slide ActionBar ในแอปพลิเคชัน Android

ฉันคิดว่า app Facebook ไม่ได้เขียนในรหัสพื้นเมือง (โดยรหัสพื้นเมืองผมหมายถึงการใช้รูปแบบใน Android) แต่พวกเขามีมุมมองเว็บที่ใช้สำหรับมันและได้ใช้ห้องสมุด JavaScript UI บางอย่างเช่นSencha มันสามารถทำได้อย่างง่ายดายโดยใช้กรอบ Sencha

ที่นี่เป็นอีกหนึ่งไลบรารีโอเพนซอร์ส (ดีมาก)!

คุณสมบัติที่ดีเกี่ยวกับอันนี้คือมันรวมเข้ากับ ActionBarSherlock ได้อย่างง่ายดาย

นี่คือลิงค์โครงการGitHub

นี่คือลิงค์ดาวน์โหลดของGoogle Play

ฉันเพิ่งใช้มุมมองที่คล้ายกันสำหรับโครงการของฉันเอง คุณสามารถตรวจสอบได้ที่นี่

นี่คือหน้าจอของตัวอย่างแอปพลิเคชันที่อ้างอิงไลบรารีที่ฉันเขียน

มันง่ายต่อการใช้มุมมองที่กำหนดเองนี้เป็นองค์ประกอบของเค้าโครง XML นี่คือตัวอย่าง:

    <shared.ui.actionscontentview.ActionsContentView
      android:id="@+id/content"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:actions_layout="@layout/actions"
      app:content_layout="@layout/content" />

ฉันจะมีคำถามเกี่ยวกับการใช้งานห้องสมุด ActionsContentView ฉันสามารถเขียนบทความเล็ก ๆ ที่โครงการ Wiki

ข้อดีบางประการของห้องสมุดนี้:

• ความสามารถในการเลื่อนดูด้วยการสัมผัส
• มันง่ายในการปรับขนาดของแถบการกระทำใน XML
• รองรับ Android SDK ทุกรุ่นตั้งแต่ 2.0 ขึ้นไป

ข้อ จำกัด หนึ่งข้อ:

• มุมมองการเลื่อนแนวนอนทั้งหมดจะไม่ทำงานในขอบเขตของมุมมองนี้

ขอแสดงความนับถือสตีเว่น

ด้วยการแก้ไขแพคเกจการสนับสนุน android 13 (พฤษภาคม 2556) มี DrawerLayout สำหรับการสร้าง Navigation Drawer ที่สามารถดึงเข้ามาจากขอบหน้าต่าง และลิ้นชักการนำทางเป็นรูปแบบการออกแบบในขณะนี้

ห้องสมุดสนับสนุน v4

รูปแบบการออกแบบการนำทางลิ้นชัก

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

อันนี้ก็เลื่อนแถบแอ็คชั่นออกไป!

สิ่งที่ทั้งเป็นโครงการห้องสมุดพร้อมกับตัวอย่างของแอปและมีการอธิบายมากกว่าที่เลื่อนเมนูสำหรับ Android เช่น Google และ Facebook ปพลิเคชัน ขอบคุณsciroccoสำหรับแนวคิดเริ่มต้นและโค้ด!

นี่คือเรียบง่ายและสง่างาม: https://github.com/akotoe/android-slide-out-menu.git

ภาพรวม:

ฉันคิดว่าห้องสมุดไม่ได้กล่าวถึง:

jfeinstein10 / SlidingMenu

github url:https://github.com/jfeinstein10/SlidingMenu

• ทำงานได้ดีกับActionBarSherlockซึ่งเป็นแถบแอ็คชั่นที่ช่วยในการทำงานร่วมกันได้แบบย้อนหลัง !
• รองรับสไลด์ที่ถูกต้องและไม่เพียงเลื่อนผ่านปุ่มเท่านั้น!

ยังไม่สามารถออกความเห็นเกี่ยวกับคำตอบที่ได้รับจาก @Paul Grime ได้หรือไม่ฉันได้ส่งโครงการ github ของเขาเพื่อแก้ไขปัญหาการสั่นไหว ....

ผมจะโพสต์แก้ไขที่นี่อาจจะมีคนต้องการมัน คุณเพียงแค่ต้องเพิ่มโค้ดสองบรรทัด คนแรกที่ด้านล่างโทร anim.setAnimationListener นี้:

anim.setFillAfter(true);

และเป็นคนที่สองหลังจาก app.layout () โทร:

app.clearAnimation();

หวังว่าจะช่วย :)

ฉันได้ดำเนินการนี้กับ AbsoluteLayout และควบคุมสไลด์ง่ายที่จะย้ายมุมมองเชิงลบเพื่อชดเชยซ่อน

หากใครสนใจฉันสามารถล้างรหัส / เลย์เอาต์และโพสต์ได้ ฉันรู้ว่า AbsoluteLayout นั้นเลิกใช้แล้ว แต่มันก็เป็นการนำไปปฏิบัติได้อย่างตรงไปตรงมามาก มุมมองด้านซ้าย / มุมมองขวาและเมื่อ "เลื่อนเปิด" ให้เลื่อนมุมมองด้านซ้ายออกจาก -X ออฟเซ็ตไปที่ความกว้างของอุปกรณ์ - สิ่งที่คุณต้องการแสดงมุมมองด้านขวา

สวัสดีนี้ app สาธิตตัวอย่างที่ดีที่สุดคือซึ่งมี Facebook เช่นเมนูสไลด์ ตรวจสอบรหัสที่นี่

ในฐานะที่เป็นส่วนหนึ่งของ Android Common Library (ACL) ฉันได้ติดตั้ง SideBar ของตัวเอง ข้อได้เปรียบหลัก:

1. แถบด้านข้างสามารถตั้งค่าเป็นตำแหน่งใดก็ได้: ซ้าย, บน, ล่าง, ขวา
2. ทั้งมุมมองหลักและมุมมองแบบเลื่อนสามารถคลิกได้
3. แถบด้านข้างสามารถแสดงบางส่วนได้
4. แอตทริบิวต์ Stylable สำหรับ SideBar ช่วยให้เปลี่ยนสไตล์ได้ง่ายขึ้น
5. สิ่งประดิษฐ์ใน repo Maven
6. ส่วนหนึ่งของห้องสมุดขนาดใหญ่

รหัสที่มา: https://github.com/serso/android-common/tree/master/views/src/main/java/org/solovyev/android/view/sidebar

การใช้งาน: https://github.com/serso/android-common/blob/master/samples/res/layout/acl_view_layout.xml

เมื่อเร็ว ๆ นี้ฉันได้ทำงานกับเวอร์ชันการนำไปใช้เมนูแบบเลื่อน จะใช้เป็นที่นิยมห้องสมุด J.Feinstein Android SlidingMenu

โปรดตรวจสอบซอร์สโค้ดที่ GitHub:

https://github.com/baruckis/Android-SlidingMenuImplementation

ดาวน์โหลดแอปโดยตรงไปยังอุปกรณ์เพื่อลอง:

https://play.google.com/store/apps/details?id=com.baruckis.SlidingMenuImplementation

รหัสควรอธิบายตนเองเนื่องจากความคิดเห็น ฉันหวังว่ามันจะเป็นประโยชน์! ;)

ฉันพบวิธีที่ง่ายที่สุดสำหรับมันและการทำงานของมัน ใช้การนำทางลิ้นชักอย่างง่ายและการเรียก drawer.setdrawerListner () และใช้ mainView.setX () วิธีการในวิธี drawerSlide ด้านล่างหรือคัดลอกรหัสของฉัน

ไฟล์ xml

 <android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000" >

<RelativeLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">

  <ImageView
      android:layout_width="40dp"
      android:layout_height="40dp"
      android:id="@+id/menu"
      android:layout_alignParentTop="true"
      android:layout_alignParentLeft="true"
      android:layout_marginTop="10dp"
      android:layout_marginLeft="10dp"
      android:src="@drawable/black_line"
      />
</RelativeLayout>


<RelativeLayout
    android:id="@+id/left_drawer"
    android:layout_width="200dp"
    android:background="#181D21"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    >
    </RelativeLayout>
 </android.support.v4.widget.DrawerLayout>

ไฟล์ java

   public class MainActivity extends AppCompatActivity {
DrawerLayout drawerLayout;
RelativeLayout mainView;
ImageView menu;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    menu=(ImageView)findViewById(R.id.menu);
    drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    mainView=(RelativeLayout)findViewById(R.id.content_frame);

    menu.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            drawerLayout.openDrawer(Gravity.LEFT);
        }
    });

    drawerLayout.setDrawerListener(new DrawerLayout.DrawerListener() {
        @Override
        public void onDrawerSlide(View drawerView, float slideOffset) {
            mainView.setX(slideOffset * 300);
        }

        @Override
        public void onDrawerOpened(View drawerView) {

        }

        @Override
        public void onDrawerClosed(View drawerView) {

        }

        @Override
        public void onDrawerStateChanged(int newState) {

        }
    });
 }
}

ขอบคุณ

ฉันจะเดาตัวหนาที่นี่ ...

ฉันคิดว่าพวกเขามีรูปแบบที่แสดงถึงเมนูที่มองไม่เห็น เมื่อแตะปุ่มเมนูปุ่มเหล่านั้นจะเคลื่อนไหวเค้าโครง / มุมมองด้านบนเพื่อเลื่อนออกไปให้พ้นทางและเปิดใช้งานการมองเห็นเค้าโครงเมนูได้อย่างง่ายดาย ฉันไม่ได้คิดเกี่ยวกับสิ่งนี้ทำให้เกิดปัญหา z-index ใด ๆ ในมุมมองหรือวิธีที่พวกเขาควบคุม

Android เพิ่มลิ้นชักการนำทาง แนะนำสิ่งนี้

ลิงค์

นี่คือคู่มือการออกแบบและการพัฒนาที่พบในเอกสาร Android อย่างเป็นทางการไม่จำเป็นต้องเพิ่มไลบรารี่ภายนอกที่ไม่เป็นทางการ ห้องสมุดสนับสนุน android เท่านั้นที่จะทำ ค้นหาลิงค์ได้ที่นี่

การออกแบบและพัฒนา

แอพ Facebook Android อาจสร้างด้วยแฟรกเมนต์ เมนูเป็นหนึ่งส่วนกิจกรรมในเชิงลึก (ฟีดข่าว / กิจกรรม / เพื่อน ฯลฯ ) เป็นส่วนอื่น ๆ โดยทั่วไปแล้วเค้าโครง 'ต้นแบบ & รายละเอียด' แท็บเล็ตบนโทรศัพท์

สำหรับข้อมูลเช่นห้องสมุดความเข้ากันได้เริ่มต้นด้วย 1.6 และนี้ app Facebook ยังทำงานบนอุปกรณ์ที่มี Android 1.5 ก็ไม่สามารถทำได้ด้วยเศษเล็กเศษน้อย

วิธีที่คุณสามารถทำได้คือ: สร้างกิจกรรม "ฐาน" BaseMenuActivity ที่คุณใส่ตรรกะทั้งหมดสำหรับ onItemClickListener สำหรับรายการเมนูของคุณและกำหนด 2 ภาพเคลื่อนไหว ("เปิด" และ "ปิด") ในตอนท้าย / เริ่มต้นของภาพเคลื่อนไหวคุณแสดง / ซ่อนเค้าโครงของ BaseMenuActivity (ให้เรียกมันว่า menu_layout) เลย์เอาต์สำหรับกิจกรรมนี้เป็นเรื่องง่ายมีเพียงรายการที่มีรายการ + ส่วนโปร่งใสที่ด้านขวาของรายการของคุณ ส่วนนี้จะสามารถคลิกได้และความกว้างจะเป็นความกว้างเดียวกับ "ปุ่มย้าย" ของคุณ ด้วยสิ่งนี้คุณจะสามารถคลิกที่เค้าโครงนี้เพื่อเริ่มต้นการเคลื่อนไหวเพื่อให้ content_layout เลื่อนไปทางซ้ายและเข้าสู่หน้าจอทั้งหมด สำหรับแต่ละตัวเลือก (เช่นรายการของรายการเมนู) คุณสร้าง "ContentActivity" ซึ่งขยาย BaseMenuActivity จากนั้นเมื่อคุณคลิกที่รายการใดรายการหนึ่งคุณจะเริ่มต้น ItemSelectedContentActivity ของคุณด้วยเมนูที่มองเห็น (ซึ่งคุณจะปิดทันทีที่กิจกรรมของคุณเริ่มต้น) เค้าโครงสำหรับแต่ละ ContentActivity คือ FrameLayout และรวมถึงและ คุณเพียงแค่ต้องย้าย content_layout และทำให้ menu_layout ปรากฏเมื่อคุณต้องการ

นั่นเป็นวิธีที่จะทำและฉันหวังว่าฉันจะชัดเจนพอ

ฉันได้เล่นกับเรื่องนี้เมื่อไม่กี่วันที่ผ่านมาและฉันก็ได้วิธีการแก้ปัญหาที่ค่อนข้างตรงไปตรงมาในที่สุดและใช้งานได้ล่วงหน้ากับ Honeycomb วิธีแก้ปัญหาของฉันคือทำให้ภาพเคลื่อนไหวที่ฉันต้องการเลื่อน ( FrameLayoutสำหรับฉัน) และฟังตอนท้ายของภาพเคลื่อนไหว (ตรงจุดที่จะชดเชยตำแหน่งซ้าย / ขวาของมุมมอง) ฉันได้วางวิธีแก้ปัญหาของฉันที่นี่: จะทำให้การแปลมุมมองเป็นอย่างไร

หลังจากค้นหาเป็นเวลาหลายชั่วโมงฉันพบว่าทางออกของ Paul Grime น่าจะดีที่สุด แต่มันมีฟังก์ชั่นการใช้งานมากเกินไป ดังนั้นอาจเป็นการยากสำหรับผู้เริ่มต้นศึกษา ดังนั้นฉันจึงต้องการให้การใช้งานของฉันซึ่งมาจากแนวคิดของ Paul แต่มันง่ายกว่าและควรอ่านได้ง่าย

การใช้งานแถบเมนูด้านข้างโดยใช้รหัส java โดยไม่มี XML

ฉันไม่เห็น SimonVT / android-menudrawer ที่น่าอัศจรรย์พูดถึงทุกที่ในคำตอบข้างต้น ดังนั้นนี่คือลิงค์

https://github.com/SimonVT/android-menudrawer

มันใช้งานง่ายสุด ๆ และคุณสามารถวางไว้บนซ้ายขวาบนหรือล่าง จัดทำเอกสารอย่างดีพร้อมรหัสตัวอย่างและใบอนุญาต Apache 2.0

ในเดือนมิถุนายน 2012 Google ได้เพิ่ม "เทมเพลต" ในปลั๊กอิน Eclipse ADTและมีเทมเพลตที่เรียกว่า "การไหลของข้อมูลหลัก / รายละเอียด" ซึ่งทำสิ่งนั้นอย่างแน่นอน