DrawerLayout、CoordinatorLayout、CollapsingToolbarLayout的使用--AndroidSupportDesign練手

先po一張效果圖html

 

PS:原諒題主的懶惰吧..java

看着是否是很酷炫,那是由於5.0的動畫作得好,代碼其實沒有多少,搞清楚這個佈局的層次關係很重要。android

廢話很少說了,先來看佈局文件web

最外層是一個DrawerLayout,它裏面能夠嵌套(一個?)container和多個drawerapp

 

在這個demo中DrawerLayout包含了一個CoordinatorLayout , ListView , NavigationViewide

CoordinatorLayout  做爲 container的根佈局模塊化

listView和navigationview做爲DarwerLayout中的darwer源碼分析

 

在container中用CoordinatorLayout目的是爲了咱們在滑動recyclerview時,讓頂部的appbarlayout中的組件產生響應佈局

appbarlayout中的CollapsingToolbarLayout是用來控制toolbar和banner圖片的響應效果測試

特別注意:爲了使得Toolbar能夠滑動,咱們必須還得有個條件,就是CoordinatorLayout佈局下包裹一個能夠滑動的佈局,好比 RecyclerView,NestedScrollView(通過測試,ListView,ScrollView不支持)具備滑動效果的組件。

 

下面的就是drawerLayout的使用注意事項了:

按情理來講,一個drawerLayout添加一個drawer就夠了,但是腦洞一開,想着多加一個會怎樣,嘗試以後發現很好玩,之後能夠各類亂入drawer了,哈哈哈。

由於作畢設的時候用的DrawerLayout還不是這樣方便的,那會使用這個佈局,設置起來麻煩不少,而如今的實現這個佈局,佈局文件設置好以後,只用三句話就搞定了,簡單的可怕。

下面貼上源碼,各位看官就自行分析吧:

 

主佈局文件:

  1 <?xml version="1.0" encoding="utf-8"?>
  2 <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3     xmlns:app="http://schemas.android.com/apk/res-auto"
  4     android:id="@+id/drawer_layout"
  5     android:layout_width="match_parent"
  6     android:layout_height="match_parent"
  7     android:orientation="vertical">
  8 
  9     <android.support.design.widget.CoordinatorLayout
 10         android:id="@+id/main_content"
 11         android:layout_width="match_parent"
 12         android:layout_height="match_parent">
 13 
 14         <android.support.design.widget.AppBarLayout
 15             android:id="@+id/app_bar_layout"
 16             android:layout_width="match_parent"
 17             android:layout_height="wrap_content"
 18             android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
 19 
 20             <android.support.design.widget.CollapsingToolbarLayout
 21                 android:id="@+id/collapsing_toolbar_layout"
 22                 android:layout_width="match_parent"
 23                 android:layout_height="match_parent"
 24                 app:contentScrim="@android:color/transparent"
 25                 app:layout_scrollFlags="scroll|exitUntilCollapsed">
 26 
 27                 <ImageView
 28                     android:id="@+id/banner"
 29                     android:layout_width="match_parent"
 30                     android:layout_height="match_parent"
 31                     android:contentDescription="banner"
 32                     android:scaleType="fitXY"
 33                     android:src="@mipmap/banner"
 34                     app:layout_collapseMode="parallax"
 35                     app:layout_collapseParallaxMultiplier="0.5" />
 36 
 37                 <android.support.v7.widget.Toolbar
 38                     android:id="@+id/tool_bar"
 39                     android:layout_width="match_parent"
 40                     android:layout_height="?attr/actionBarSize"
 41                     android:background="@android:color/transparent"
 42                     app:layout_collapseMode="pin" />
 43             </android.support.design.widget.CollapsingToolbarLayout>
 44         </android.support.design.widget.AppBarLayout>
 45 
 46         <android.support.v7.widget.RecyclerView
 47             android:id="@+id/recycler_view"
 48             android:layout_width="match_parent"
 49             android:layout_height="wrap_content"
 50             app:layout_behavior="@string/appbar_scrolling_view_behavior" />
 51 
 52         <android.support.design.widget.FloatingActionButton
 53             android:id="@+id/fab"
 54             android:layout_width="wrap_content"
 55             android:layout_height="wrap_content"
 56             android:layout_margin="@dimen/activity_vertical_margin"
 57             android:src="@mipmap/ic_action_web_site"
 58             app:borderWidth="0dp"
 59             app:elevation="@dimen/fab_elevation"
 60             app:layout_anchor="@id/app_bar_layout"
 61             app:layout_anchorGravity="end|bottom"
 62             app:layout_collapseMode="parallax"
 63             app:layout_collapseParallaxMultiplier="0.7"
 64             app:pressedTranslationZ="@dimen/fab_translation_z_pressed"
 65             app:rippleColor="?attr/colorPrimary" />
 66     </android.support.design.widget.CoordinatorLayout>
 67 
 68 
 69     <ListView
 70         android:id="@+id/id_lv_left_menu"
 71         android:layout_width="match_parent"
 72         android:layout_height="match_parent"
 73         android:layout_gravity="end"
 74         android:paddingTop="0dp"
 75         android:background="#ffffffff"
 76         android:clipToPadding="false"
 77         android:divider="@null"
 78         android:listSelector="?attr/selectableItemBackground"
 79         />
 80 
 81     <!--<include-->
 82         <!--android:layout_width="match_parent"-->
 83         <!--android:layout_height="match_parent"-->
 84         <!--android:layout_gravity="start"-->
 85         <!--android:paddingTop="0dp"-->
 86         <!--android:background="#ffffffff"-->
 87         <!--android:clipToPadding="false"-->
 88         <!--android:id="@+id/custom_drawer"-->
 89         <!--layout="@layout/layout_listview_drawer" />-->
 90 
 91 
 92     <android.support.design.widget.NavigationView
 93         android:id="@+id/navigation_view"
 94         android:layout_width="wrap_content"
 95         android:layout_height="match_parent"
 96         android:layout_gravity="start"
 97         app:headerLayout="@layout/drawer_header"
 98         app:menu="@menu/menu_navigation_items" />
 99 
100 </android.support.v4.widget.DrawerLayout>
View Code

Activity文件:

  1 package com.anhry.hcol.support.design.activity;
  2 
  3 import android.os.Bundle;
  4 import android.support.design.widget.AppBarLayout;
  5 import android.support.design.widget.CollapsingToolbarLayout;
  6 import android.support.design.widget.CoordinatorLayout;
  7 import android.support.design.widget.FloatingActionButton;
  8 import android.support.design.widget.NavigationView;
  9 import android.support.design.widget.Snackbar;
 10 import android.support.v4.view.GravityCompat;
 11 import android.support.v4.widget.DrawerLayout;
 12 import android.support.v7.app.AppCompatActivity;
 13 import android.support.v7.widget.LinearLayoutManager;
 14 import android.support.v7.widget.RecyclerView;
 15 import android.support.v7.widget.Toolbar;
 16 import android.view.Gravity;
 17 import android.view.LayoutInflater;
 18 import android.view.MenuItem;
 19 import android.view.View;
 20 import android.widget.AdapterView;
 21 import android.widget.ImageButton;
 22 import android.widget.ImageView;
 23 import android.widget.ListView;
 24 
 25 import com.anhry.hcol.support.design.adapter.LeftMenuListAdapter;
 26 import com.anhry.hcol.support.design.adapter.MenuItemAdapter;
 27 import com.anhry.hcol.support.design.module.LvMenuItem;
 28 import com.yanbober.support_library_demo.R;
 29 import com.yanbober.support_library_demo.RecyclerViewAdapter;
 30 
 31 import java.util.ArrayList;
 32 import java.util.Arrays;
 33 import java.util.List;
 34 
 35 /**
 36  * @author HCol
 37  * @email 282386589@qq.com
 38  * @create 2015/8/25
 39  * @modify 2015年8月29日17:29:04
 40  */
 41 public class DesignDemoActivity extends AppCompatActivity {
 42 
 43     /**
 44      * views
 45      */
 46     private DrawerLayout mDrawerLayout;
 47     private CoordinatorLayout mCoordinatorLayout;
 48     private AppBarLayout mAppBarLayout;
 49     private CollapsingToolbarLayout mCollapsingToolbarLayout;
 50     private ImageView mImageView;
 51     private Toolbar mToolbar;
 52     private RecyclerView mRecyclerView;
 53     private NavigationView mNavigationView;
 54     private FloatingActionButton mFloatingActionButton;
 55     private ImageView mRightNavigationBtn;
 56 
 57     private CoordinatorLayout mCustomDrawer;
 58     private RecyclerView leftMenuList;
 59 
 60     private ListView mLvLeftMenu;
 61     /**
 62      * members
 63      */
 64     private RecyclerViewAdapter mAdapter;
 65     private LinearLayoutManager mRecyclerLayoutManager;
 66     private LeftMenuListAdapter mLeftMenuListAdapter;
 67     private List<LvMenuItem> dataSource;
 68     private static final String BTN_RIGHT_MENU_TAG = "tag";
 69 
 70     @Override
 71     protected void onCreate(Bundle savedInstanceState) {
 72         super.onCreate(savedInstanceState);
 73 
 74         initViews();
 75     }
 76 
 77     /**
 78      * init views
 79      */
 80     private void initViews() {
 81         setContentView(R.layout.activity_my_design);
 82         /* 抽屜形式界面的的兩個佈局控件
 83         *
 84         * DrawerLayout 作根佈局使用
 85         * 由於要顯示的內容界面和抽屜視圖(NavigationView)是包含在此layout之下的
 86         *
 87         * NavigationView 抽屜佈局中的抽屜視圖,有源碼分析他的實現其實就是一個ListView
 88         * 而這裏用的是原生的組件,因此在Menu目錄下配置好要顯示的條目,引用便可,很是方便.
 89         *
 90         * ref:http://blog.csdn.net/lmj623565791/article/details/46405409
 91         *
 92         * */
 93 //        原生DrawerLayout
 94         mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
 95 
 96 //        利用ListView仿製的Drawer
 97         mLvLeftMenu = (ListView) findViewById(R.id.id_lv_left_menu);
 98         setUpDrawer();
 99 
100 //        不用在乎這一塊
101 //        mCustomDrawer = (CoordinatorLayout) findViewById(R.id.custom_drawer);
102 //        leftMenuList = (RecyclerView) findViewById(R.id.rv_left_menu);
103 //        dataSource = new ArrayList<>(
104 //                Arrays.asList(
105 //                        new LvMenuItem(R.mipmap.ic_action_web_site, "Home"),
106 //                        new LvMenuItem(R.mipmap.ic_action_web_site, "Messages"),
107 //                        new LvMenuItem(R.mipmap.ic_action_web_site, "Friends"),
108 //                        new LvMenuItem(R.mipmap.ic_action_web_site, "Discussion"),
109 //                        new LvMenuItem(R.mipmap.ic_action_web_site, "Discussion"),
110 //                        new LvMenuItem(R.mipmap.ic_action_web_site, "Discussion"),
111 //                        new LvMenuItem(R.mipmap.ic_action_web_site, "Discussion"),
112 //                        new LvMenuItem(R.mipmap.ic_action_web_site, "Discussion"),
113 //                        new LvMenuItem(),
114 //                        new LvMenuItem("Sub Items"),
115 //                        new LvMenuItem(R.mipmap.ic_action_web_site, "Sub Item 1"),
116 //                        new LvMenuItem(R.mipmap.ic_action_web_site, "Sub Item 2")
117 //                ));
118 //        mLeftMenuListAdapter = new LeftMenuListAdapter(this, dataSource);
119 //        mRecyclerLayoutManager = new LinearLayoutManager(this);
120 //        leftMenuList.setAdapter(mLeftMenuListAdapter);
121 //        leftMenuList.setLayoutManager(mRecyclerLayoutManager);
122 
123         mNavigationView = (NavigationView) findViewById(R.id.navigation_view);
124         mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
125             @Override
126             public boolean onNavigationItemSelected(MenuItem menuItem) {
127                 mDrawerLayout.closeDrawers();
128                 return true;
129             }
130         });
131         /* 下面就是抽屜佈局中[內容佈局]的重點了
132          *
133          * CoordinatorLayout            協調者佈局
134          * AppBarLayout                 導航欄佈局
135          * CollapsingToolbarLayout      ToolBar的可坍塌佈局
136          *
137          * 首先,這三個佈局有什麼用呢?
138          *
139          * CoordinatorLayout
140          * 官方文檔介紹說是一個加強版的FrameLayout
141          * 有兩種主要的用途:
142          * 1. 做爲一個頂層佈局文件來使用
143          * 2. 做爲一個有[多個互動視圖]的容器
144          * 就是當某一視圖有特殊行爲動做時,其餘子視圖會進行相應的動做反應。INTERACTION
145          *
146          * AppBarLayout
147          * 一個模塊化的佈局文件,能夠用來裝載一切屬於AppBar的組件
148          *
149          * CollapsingToolbarLayout
150          *
151          * CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar.
152          * It is designed to be used as a direct child of a AppBarLayout.
153          *
154          * 官方說,它的誕生主要是用來爲toolbar錦上添花用的
155          * 被設計來做爲AppBarLayout的親兒子來使用
156          *
157          * */
158         mCoordinatorLayout = (CoordinatorLayout) findViewById(R.id.main_content);
159         mAppBarLayout = (AppBarLayout) findViewById(R.id.app_bar_layout);
160         mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);
161         mImageView = (ImageView) findViewById(R.id.banner);
162         mToolbar = (Toolbar) findViewById(R.id.tool_bar);
163 
164         // 建立右邊導航按鈕
165         ensureRightButtonView();
166         mToolbar.setNavigationIcon(R.mipmap.ic_drawer);
167         mToolbar.addView(mRightNavigationBtn);
168         mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
169             @Override
170             public void onClick(View v) {
171                 mDrawerLayout.openDrawer(GravityCompat.START);
172             }
173         });
174         mCollapsingToolbarLayout.setTitle("CollapsingTitle");
175         /* init RecyclerView */
176         mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view);
177         mAdapter = new RecyclerViewAdapter(this);
178         mRecyclerView.setAdapter(mAdapter);
179         mRecyclerLayoutManager = new LinearLayoutManager(this);
180         mRecyclerView.setLayoutManager(mRecyclerLayoutManager);
181 
182         mFloatingActionButton = (FloatingActionButton)findViewById(R.id.fab);
183         mFloatingActionButton.setOnClickListener(new View.OnClickListener() {
184             @Override
185             public void onClick(View v) {
186                 Snackbar.make(mRecyclerView , "papa i'm here" , Snackbar.LENGTH_LONG).show();
187             }
188         });
189     }
190 
191     private void setUpDrawer() {
192         LayoutInflater inflater = LayoutInflater.from(this);
193         mLvLeftMenu.addHeaderView(inflater.inflate(R.layout.drawer_header, mLvLeftMenu, false));
194         mLvLeftMenu.setAdapter(new MenuItemAdapter(this));
195         mLvLeftMenu.setOnItemClickListener(new AdapterView.OnItemClickListener() {
196             @Override
197             public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
198                 mDrawerLayout.closeDrawers();
199             }
200         });
201     }
202 
203     private void ensureRightButtonView() {
204         if (mRightNavigationBtn == null) {
205             mRightNavigationBtn = new ImageButton(this, null,
206                     android.support.v7.appcompat.R.attr.toolbarNavigationButtonStyle);
207             final Toolbar.LayoutParams lp = generateDefaultLayoutParams();
208             lp.gravity = GravityCompat.END | (Gravity.TOP & Gravity.VERTICAL_GRAVITY_MASK);
209             mRightNavigationBtn.setImageResource(R.mipmap.ic_drawer);
210             mRightNavigationBtn.setLayoutParams(lp);
211             mRightNavigationBtn.setTag(BTN_RIGHT_MENU_TAG);
212             mRightNavigationBtn.setOnClickListener(new View.OnClickListener() {
213                 @Override
214                 public void onClick(View v) {
215                     mDrawerLayout.openDrawer(GravityCompat.END);
216                 }
217             });
218         }
219     }
220 
221     private Toolbar.LayoutParams generateDefaultLayoutParams() {
222         return new Toolbar.LayoutParams(Toolbar.LayoutParams.WRAP_CONTENT, Toolbar.LayoutParams.WRAP_CONTENT);
223     }
224 }
View Code

drawer head:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="wrap_content"
 5     android:background="#000000"
 6     android:gravity="center_horizontal"
 7     android:orientation="vertical"
 8     android:padding="13dp">
 9 
10     <ImageView
11         android:layout_width="wrap_content"
12         android:layout_height="wrap_content"
13         android:src="@drawable/icon_people" />
14 
15     <TextView
16         android:layout_width="wrap_content"
17         android:layout_height="wrap_content"
18         android:layout_marginTop="15dp"
19         android:text="UserName"
20         android:textColor="?attr/colorAccent"
21         android:textSize="24sp" />
22 </LinearLayout>
View Code

ListViewAdapter:

  1 public class MenuItemAdapter extends BaseAdapter {
  2     private final int mIconSize;
  3     private LayoutInflater mInflater;
  4     private Context mContext;
  5 
  6     public MenuItemAdapter(Context context) {
  7         mInflater = LayoutInflater.from(context);
  8         mContext = context;
  9 
 10         mIconSize = context.getResources().getDimensionPixelSize(R.dimen.abc_dialog_padding_material);//24dp
 11     }
 12 
 13     private List<LvMenuItem> mItems = new ArrayList<LvMenuItem>(
 14             Arrays.asList(
 15                     new LvMenuItem(R.mipmap.ic_action_web_site, "Home"),
 16                     new LvMenuItem(R.mipmap.ic_action_web_site, "Messages"),
 17                     new LvMenuItem(R.mipmap.ic_action_web_site, "Friends"),
 18                     new LvMenuItem(R.mipmap.ic_action_web_site, "Discussion"),
 19                     new LvMenuItem(),
 20                     new LvMenuItem("Sub Items"),
 21                     new LvMenuItem(R.mipmap.ic_action_web_site, "Sub Item 1"),
 22                     new LvMenuItem(R.mipmap.ic_action_web_site, "Sub Item 2")
 23             ));
 24 
 25 
 26     @Override
 27     public int getCount() {
 28         return mItems.size();
 29     }
 30 
 31 
 32     @Override
 33     public Object getItem(int position) {
 34         return mItems.get(position);
 35     }
 36 
 37 
 38     @Override
 39     public long getItemId(int position) {
 40         return position;
 41     }
 42 
 43     @Override
 44     public int getViewTypeCount() {
 45         return 3;
 46     }
 47 
 48     @Override
 49     public int getItemViewType(int position) {
 50         return mItems.get(position).type;
 51     }
 52 
 53     @Override
 54     public View getView(int position, View convertView, ViewGroup parent) {
 55         LvMenuItem item = mItems.get(position);
 56         switch (item.type) {
 57             case LvMenuItem.TYPE_NORMAL:
 58                 if (convertView == null) {
 59                     convertView = mInflater.inflate(R.layout.design_drawer_item, parent,
 60                             false);
 61                 }
 62                 TextView itemView = (TextView) convertView;
 63                 itemView.setText(item.name);
 64                 Drawable icon = mContext.getResources().getDrawable(item.icon);
 65                 setIconColor(icon);
 66                 if (icon != null) {
 67                     icon.setBounds(0, 0, mIconSize, mIconSize);
 68                     TextViewCompat.setCompoundDrawablesRelative(itemView, icon, null, null, null);
 69                 }
 70 
 71                 break;
 72             case LvMenuItem.TYPE_NO_ICON:
 73                 if (convertView == null) {
 74                     convertView = mInflater.inflate(R.layout.design_drawer_item_subheader,
 75                             parent, false);
 76                 }
 77                 TextView subHeader = (TextView) convertView;
 78                 subHeader.setText(item.name);
 79                 break;
 80             case LvMenuItem.TYPE_SEPARATOR:
 81                 if (convertView == null) {
 82                     convertView = mInflater.inflate(R.layout.design_drawer_item_separator,
 83                             parent, false);
 84                 }
 85                 break;
 86         }
 87 
 88         return convertView;
 89     }
 90 
 91     public void setIconColor(Drawable icon) {
 92         int textColorSecondary = android.R.attr.textColorSecondary;
 93         TypedValue value = new TypedValue();
 94         if (!mContext.getTheme().resolveAttribute(textColorSecondary, value, true)) {
 95             return;
 96         }
 97         int baseColor = mContext.getResources().getColor(value.resourceId);
 98         icon.setColorFilter(baseColor, PorterDuff.Mode.MULTIPLY);
 99     }
100 }
View Code

Item:

 1 public class LvMenuItem {
 2 
 3     public LvMenuItem(int icon, String name) {
 4         this.icon = icon;
 5         this.name = name;
 6 
 7         if (icon == NO_ICON && TextUtils.isEmpty(name)) {
 8             type = TYPE_SEPARATOR;
 9         } else if (icon == NO_ICON) {
10             type = TYPE_NO_ICON;
11         } else {
12             type = TYPE_NORMAL;
13         }
14 
15         if (type != TYPE_SEPARATOR && TextUtils.isEmpty(name)) {
16             throw new IllegalArgumentException("you need set a name for a non-SEPARATOR item");
17         }
18     }
19 
20     public LvMenuItem(String name) {
21         this(NO_ICON, name);
22     }
23 
24     public LvMenuItem() {
25         this(null);
26     }
27 
28     public static final int NO_ICON = 0;
29     public static final int TYPE_NORMAL = 0;
30     public static final int TYPE_NO_ICON = 1;
31     public static final int TYPE_SEPARATOR = 2;
32 
33     public int type;
34     public String name;
35     public int icon;
36 }
View Code

Item的資源文件:

design_drawer_item_separator:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="wrap_content">
 5 
 6     <View android:layout_width="match_parent"
 7         android:layout_height="1dp"
 8         android:background="?android:attr/listDivider"/>
 9 
10 </FrameLayout>
View Code

design_drawer_item_subheader:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <TextView xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="?attr/listPreferredItemHeightSmall"
 5     android:gravity="center_vertical|start"
 6     android:maxLines="1"
 7     android:paddingLeft="?attr/listPreferredItemPaddingLeft"
 8     android:paddingRight="?attr/listPreferredItemPaddingRight"
 9     android:textAppearance="?attr/textAppearanceListItem"
10     android:textColor="?android:textColorSecondary"/>
View Code

design_drawer_item:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <TextView
 3     xmlns:android="http://schemas.android.com/apk/res/android"
 4     android:layout_width="match_parent"
 5     android:layout_height="?attr/listPreferredItemHeightSmall"
 6     android:paddingLeft="?attr/listPreferredItemPaddingLeft"
 7     android:paddingRight="?attr/listPreferredItemPaddingRight"
 8     android:drawablePadding="32dp"
 9     android:gravity="center_vertical|start"
10     android:maxLines="1"
11     android:textAppearance="?attr/textAppearanceListItem"
12     android:textColor="?android:attr/textColorPrimary"/>
View Code

 

參考資料:

http://www.2cto.com/kf/201506/409067.html

http://www.open-open.com/lib/view/open1433385856119.html#_label8

http://blog.csdn.net/lmj623565791/article/details/46405409

 

PS:爲何放多個drawer,而drawerLayout打開drawer的時候不會混亂呢?

沒事就看看源碼,反正又不要錢..

相關文章
相關標籤/搜索