[UI]抽屜菜單DrawerLayout分析（一）

      側拉菜單作為常見的導航互動控制項，最開始在沒有沒有android官方控制項時，很多時候都是使用開源的SlidingMenu，一直沒機會分析側拉菜單的實現機理，本文將分析android.support.v4.widget.DrawerLayout的使用及實現。

    官方介紹

DrawerLayout acts as a top-level container for window content that allows for interactive "drawer" views to be pulled out from the edge of the window.

Drawer positioning and layout is controlled using the android:layout_gravity attribute on child views corresponding to which side of the view you want the drawer to emerge from: left or right. (Or start/end on platform versions that support layout direction.)

To use a DrawerLayout, position your primary content view as the first child with a width and height of match_parent. Add drawers as child views after the main content view and set the layout_gravity appropriately. Drawers commonly use match_parent for height with a fixed width.

DrawerLayout.DrawerListener can be used to monitor the state and motion of drawer views. Avoid performing expensive operations such as layout during animation as it can cause stuttering; try to perform expensive operations during the STATE_IDLE state. DrawerLayout.SimpleDrawerListener offers default/no-op implementations of each callback method.

As per the Android Design guide, any drawers positioned to the left/start should always contain content for navigating around the application, whereas any drawers positioned to the right/end should always contain actions to take on the current content. This preserves the same navigation left, actions right structure present in the Action Bar and elsewhere

DrawerLayout直譯的事抽屜布局的意思，作為視窗內的頂層容器，它允許使用者通過抽屜式的推拉操作，從而把視圖視窗外邊緣拉到螢幕內，如右圖：

抽屜菜單的擺放和布局通過android:layout_gravity屬性來控制，可選值為left、right或start、end。通過xml來布局的話，需要把DrawerLayout作為父容器，組介面布局作為其第一個子節點，抽屜布局則緊隨其後作為第二個子節點，這樣就做就已經把內容展示框和抽屜菜單區獨立開來，只需要分別非兩個地區設定內容即可。android提供了一些實用的監聽器，重載相關的回調方法可以在菜單的互動過程中書寫邏輯業務。下面是一個demo布局:

<!-- A DrawerLayout is intended to be used as the top-level content view using match_parent for both width and height to consume the full space available. -->

<android.support.v4.widget.DrawerLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/drawer_layout"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context="com.aven.weather.app.MainActivity">

 

    <!-- As the main content view, the view below consumes the entire

         space available using match_parent in both dimensions. -->

    <FrameLayout

        android:id="@+id/container"

        android:layout_width="match_parent"

        android:layout_height="match_parent"/>

 

    <!-- android:layout_gravity="start" tells DrawerLayout to treat

         this as a sliding drawer on the left side for left-to-right

         languages and on the right side for right-to-left languages.

         If you're not building against API 17 or higher, use

         android:layout_gravity="left" instead. -->

    <!-- The drawer is given a fixed width in dp and extends the full height of

         the container. -->

    <fragmentandroid:id="@+id/navigation_drawer"

        android:layout_width="@dimen/navigation_drawer_width"

        android:layout_height="match_parent"

        android:layout_gravity="start"

        android:name="com.aven.weather.app.NavigationDrawerFragment"/>

 

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

 所以DrawerLayout的使用非常簡單，和很多容器類布局一樣，它本身也繼承自ViewGroup，只是在內部實現中會預設將第一個子節點作為內容區，第二個作為抽屜菜單，所以寫布局的事後必須牢記，好在現在的IDE已經非常智能，通過引導來建立Drawerlayout時,會自動產生Activity和xml layout布局，比如使用AndroidStudio就非常方便。

Source：

git clone https://github.com/avenwu/DrawerDemo.git