CoordinatorLayout คืออะไร?

Question 1

เพิ่งดูแอปสาธิตของไลบรารีการออกแบบการสนับสนุน Android ใหม่ มันให้โดยคริส Banes บนGitHub แอปพลิเคชันCoordinatorLayoutถูกใช้อย่างหนัก นอกจากนี้หลายของการออกแบบการเรียนการสนับสนุนห้องสมุดเช่นFloatingActionButton, SnackBar, AppBarLayoutฯลฯ CoordinatorLayoutทำงานแตกต่างกันเมื่อใช้ภายใน

คนที่สามารถกรุณาหลั่งไฟบางอย่างเกี่ยวกับสิ่งที่เป็นCoordinatorLayoutและวิธีการที่แตกต่างจากคนอื่น ๆในหุ่นยนต์หรืออย่างน้อยให้เส้นทางที่ถูกต้องต่อการเรียนViewGroupCoordinatorLayout

Question 2

ที่นี่คุณกำลังมองหา

จากเอกสาร

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

https://android-developers.googleblog.com/2015/05/android-design-support-library.html

ในลิงค์นี้คุณจะเห็นวิดีโอสาธิตของการดูที่กล่าวถึงข้างต้นทั้งหมด

หวังว่านี่จะช่วยได้ :)

Question 3

CoordinatorLayout คืออะไร? อย่าปล่อยให้ชื่อแฟนซีหลอกคุณมันไม่มีอะไรมากไปกว่า FrameLayout บนเตียรอยด์

เพื่อให้เข้าใจได้ดีที่สุดว่า a CoordinatorLayoutคือ / ทำอะไรก่อนอื่นคุณต้องเข้าใจ / จำไว้ว่าการประสานงานหมายถึงอะไร

หากคุณ Google คำ

ประสานงาน

นี่คือสิ่งที่คุณจะได้รับ:

ฉันคิดว่าคำจำกัดความเหล่านี้ช่วยในการอธิบายสิ่งที่ CoordinatorLayout ทำด้วยตัวเองและมุมมองภายในนั้นทำงานอย่างไร

A CoordinatorLayout (a ViewGroup) นำองค์ประกอบที่แตกต่างกัน (มุมมองเด็ก) ของ (̶a̶̶c̶o̶m̶p̶l̶e̶x̶̶a̶c̶t̶t̶i̶v̶i̶t̶y̶̶o̶r̶̶a̶n̶̶o̶r̶g̶a̶n̶i̶z̶a̶t̶t̶i̶v̶i̶t̶y̶̶o̶r̶̶a̶n̶̶o̶r̶g̶a̶n̶i̶z̶a̶t̶ความสัมพันธ์ที่มีประสิทธิภาพ

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

ลากรูดเหวี่ยงหรือท่าทางอื่น ๆ

มุมมองภายในผู้ประสานงานเค้าโครงเจรจากับผู้อื่นเพื่อทำงานร่วมกันอย่างมีประสิทธิภาพโดยระบุพฤติกรรมเหล่านี้

CoordinatorLayout เป็นคุณสมบัติที่ยอดเยี่ยมของการออกแบบวัสดุที่ช่วยสร้างเลย์เอาต์ที่น่าสนใจและกลมกลืนกัน

สิ่งที่คุณต้องทำคือสรุปมุมมองของบุตรหลานของคุณไว้ใน CoordinatorLayout

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout        
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:fitsSystemWindows="true"
 tools:context="com.byte64.coordinatorlayoutexample.ScollingActivity">

 <android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/app_bar_height"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">



        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<include layout="@layout/content_scolling" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/fab_margin"
    app:layout_anchor="@id/app_bar"
    app:layout_anchorGravity="bottom|end"
    app:srcCompat="@android:drawable/ic_dialog_email" />

 </android.support.design.widget.CoordinatorLayout>

และ content_scrolling:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView     
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:layout_behavior="@string/appbar_scrolling_view_behavior"
 tools:context="com.byte64.coordinatorlayoutexample.ScollingActivity"
 tools:showIn="@layout/activity_scolling">

 <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/text_margin"
    android:text="@string/large_text" />

 </android.support.v4.widget.NestedScrollView>

สิ่งนี้ทำให้เรามีรูปแบบที่สามารถเลื่อนเพื่อยุบ Toolbar และซ่อน FloatingActionButton

เปิด:

ปิด:

Question 4

จุดเพิ่มเติมที่ควรทราบ เนื่องจาก OP ถามเป็นพิเศษ

นอกจากนี้คลาส libabry การออกแบบการสนับสนุนจำนวนมากเช่น FloatingActionButton, SnackBar, AppBarLayout ฯลฯ จะทำงานแตกต่างกันเมื่อใช้ภายใน CoordinatorLayout

และฉันเดาว่าเป็นเพราะเหตุนี้

CoordinatorLayout เป็น FrameLayout ที่ขับเคลื่อนด้วยพลังพิเศษ

ปุ่ม FAB, SnackBar ทำงานบนแนวคิดของ FrameLayout และเนื่องจาก CoordinatorLayout มีฟังก์ชันการทำงานของ FrameLayout จึงอาจทำให้มุมมองอื่น ๆ ทำงานแตกต่างออกไป!

Question 5

CoordinatorLayoutเป็นโครงร่างเฟรมที่มีความสามารถมากมายซึ่งเห็นได้ชัดจากชื่อมันทำให้การประสานงานระหว่างเด็กเป็นไปโดยอัตโนมัติและช่วยสร้างมุมมองที่สวยงาม การใช้งานสามารถดูได้ในแอป Google Play Store แถบเครื่องมือยุบและเปลี่ยนสีอย่างไร

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

Question 6

หากต้องการดูสิ่งที่มีประโยชน์ในเอกสาร Androidอย่างรวดเร็ว:

ใช้ CoordinatorLayout เพื่อควบคุมพฤติกรรมเชิงสัมพันธ์ของมุมมองของคุณ

ตัวอย่างเช่นหากคุณต้องการให้แถบเครื่องมือของคุณยุบหรือซ่อน Google ทำให้มันง่ายมากโดยการแนะนำ AppBarLayout & CollapsingToolbarLayout ซึ่งทั้งสองทำงานได้ดีที่สุดภายใต้ CoordinatorLayout

สถานการณ์อื่น ๆ ที่ใช้มากที่สุดคือเมื่อคุณต้องการให้ FloatingActionButton ติดที่ด้านล่างของ CollapsingToolbar ของคุณและเคลื่อนไปรอบ ๆ โดยวางไว้ใต้ผู้ประสานงานเลย์เอาต์และใช้app:layout_anchor="@id/YourAppBarId"สำหรับกาว (!) และapp:layout_anchorGravity="bottom|end"ตามตำแหน่งจะเพียงพอสำหรับคุณที่จะเห็น งานมายากล!

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

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

ดูเทมเพลตกิจกรรมมุมมอง Google Scrolling

Question 7

สิ่งหนึ่งที่สำคัญที่ควรทราบก็คือ CoordinatorLayout ไม่มีความเข้าใจโดยกำเนิดเกี่ยวกับการทำงานของ FloatingActionButton หรือ AppBarLayout แต่มี API เพิ่มเติมในรูปแบบของผู้ประสานงานพฤติกรรมซึ่งช่วยให้มุมมองของเด็กสามารถควบคุมเหตุการณ์การสัมผัสและท่าทางสัมผัสได้ดีขึ้น รวมทั้งประกาศการพึ่งพาระหว่างกันและรับการติดต่อกลับผ่าน onDependentViewChanged ()

Views สามารถประกาศ Behavior เริ่มต้นโดยใช้คำอธิบายประกอบ CoordinatorLayout.DefaultBehavior (YourViewBehavior.class) หรือตั้งค่าในไฟล์เลย์เอาต์ของคุณโดยใช้แอพ: layout_behavior = "com.example.app.YourView $ Behavior" กรอบงานนี้ทำให้ทุกมุมมองสามารถผสานรวมกับ CoordinatorLayout ได้

ใช้ได้ในขณะนี้! ไลบรารี Design พร้อมใช้งานแล้วดังนั้นอย่าลืมอัปเดต Android Support Repository ใน SDK Manager จากนั้นคุณสามารถเริ่มใช้ไลบรารีการออกแบบด้วยการพึ่งพาใหม่เพียงครั้งเดียว:

คอมไพล์ 'com.android.support:design:22.2.0' โปรดทราบว่าเนื่องจากไลบรารีการออกแบบขึ้นอยู่กับไลบรารี Support v4 และ AppCompat Support ซึ่งจะรวมโดยอัตโนมัติเมื่อคุณเพิ่มการพึ่งพาไลบรารี Design นอกจากนี้เรายังดูแลว่าวิดเจ็ตใหม่เหล่านี้สามารถใช้งานได้ในมุมมองออกแบบของ Android Studio Layout Editor (ค้นหาได้จาก CustomView) ทำให้คุณสามารถดูตัวอย่างส่วนประกอบใหม่ ๆ เหล่านี้ได้ง่ายขึ้น

ไลบรารี Design, AppCompat และ Android Support Library ทั้งหมดเป็นเครื่องมือสำคัญในการจัดเตรียมส่วนประกอบที่จำเป็นในการสร้างแอป Android ที่ทันสมัยและดูดีโดยไม่ต้องสร้างทุกอย่างตั้งแต่เริ่มต้น

Question 8

เป็นซุปเปอร์ขับเคลื่อนCoordinatorLayoutFrameLayout

โดยค่าเริ่มต้นหากคุณเพิ่มลูกหลายลูกลงใน a FrameLayoutลูกเหล่านี้จะซ้อนทับกัน FrameLayoutควรใช้ส่วนใหญ่มักจะถือมุมมองเด็กคนเดียว สิ่งที่ดึงดูดใจหลักCoordinatorLayoutคือความสามารถในการประสานภาพเคลื่อนไหวและการเปลี่ยนมุมมองที่อยู่ภายใน ใช้ XML เท่านั้นคุณสามารถอธิบายเลย์เอาต์ที่ FAB เคลื่อนออกจากทางของ Snackbar ที่เข้ามาได้เช่นหรือมี FAB (หรือ View อื่น ๆ ) ที่เห็นได้ชัดว่าแนบกับวิดเจ็ตอื่นและย้ายบนหน้าจอด้วย วิดเจ็ต

นี่คือแหล่งที่มาหลักกวดวิชา