Drawer Layout

http://developer.android.com/training/implementing-navigation/nav-drawer.html#DrawerLayout

 1 <menu xmlns:android="http://schemas.android.com/apk/res/android" >  2 <!--  3  R.menu.main  4  android:showAsAction="ifRoom|withText"  5  如果有空间的话，就实现图标和文字。  6 -->  7 <item  8 android:id="@+id/action_websearch"  9  android:icon="@drawable/action_search" 10  android:showAsAction="ifRoom|withText" 11  android:title="@string/action_websearch"/> 12 </menu>

 

 1 <resources>  2  3 <string name="app_name">左侧菜单</string>  4  5 <string-array name="planets_array">  6 <item>Mercury</item>  7 <item>Venus</item>  8 <item>Earth</item>  9 <item>Mars</item> 10 <item>Jupiter</item> 11 <item>Saturn</item> 12 <item>Uranus</item> 13 <item>Neptune</item> 14 </string-array> 15 16 <string name="drawer_open">打开</string> 17 <string name="drawer_close">关闭</string> 18 <string name="action_websearch">WebSearch</string> 19 <string name="app_not_available">Sorry, there\'s no web browser available</string> 20 21 </resources>

 

 1 <!--  2  【 注意事项 】  3  1、主内容视图一定要是DrawerLayout的第一个子视图。  4  2、主要内容视图宽度和高度匹配父视图，即“match_parent”。  5  3、必须显示指定抽屉视图(如ListView)的android:layout_gravity属性  6  android:layout_gravity="start"，从左向右滑出菜单；  7  android:layout_gravity="end", 从右向左滑出菜单；  8  不推荐使用"left"和"right"。  9  4、抽屉视图的宽度以dp为单位，请不要超过320dp(为了总能看到一些主内容视图) 10 --> 11 12 13 <!-- A DrawerLayout is intended to be used as the top-level content view using match_parent 14  for both width and height to consume the full space available. --> 15 <android.support.v4.widget.DrawerLayout 16 xmlns:android="http://schemas.android.com/apk/res/android" 17  android:id="@+id/drawer_layout" 18  android:layout_width="match_parent" 19  android:layout_height="match_parent" > 20 21 <!-- 22  As the main content view, the view below consumes the entire 23  space available using match_parent in both dimensions. 24 --> 25 <!-- 在这里面动态插入Fragment --> 26 <FrameLayout 27 android:id="@+id/content_frame" 28  android:layout_width="match_parent" 29  android:layout_height="match_parent" /> 30 31 <!-- 32  android:layout_gravity="start" tells DrawerLayout to treat 33  this as a sliding drawer on the left side for left-to-right 34  languages and on the right side for right-to-left languages. 35  The drawer is given a fixed width in dp and extends the full height of 36  the container. A solid background is used for contrast 37  with the content view. 38 --> 39 40 <!-- 41  android:layout_gravity="start" 从左向右滑动 42  android:layout_gravity="end" 从右向左滑动 43  android:choiceMode="singleChoice" 单选模式 44 --> 45 <ListView 46 android:id="@+id/left_drawer" 47  android:layout_width="240dp" 48  android:layout_height="match_parent" 49  android:layout_gravity="start" 50  android:background="#111" 51  android:choiceMode="singleChoice" 52  android:divider="@android:color/transparent" 53  android:dividerHeight="0dp" /> 54 55 </android.support.v4.widget.DrawerLayout>

 

 1 package com.example.android.navigationdrawerexample;  2  3 import java.util.Locale;  4  5 import android.app.Activity;  6 import android.app.Fragment;  7 import android.app.FragmentManager;  8 import android.content.Intent;  9 import android.content.res.Configuration;  10 import android.net.Uri;  11 import android.os.Bundle;  12 import android.support.v4.app.ActionBarDrawerToggle;  13 import android.support.v4.view.GravityCompat;  14 import android.support.v4.widget.DrawerLayout;  15 import android.view.LayoutInflater;  16 import android.view.Menu;  17 import android.view.MenuInflater;  18 import android.view.MenuItem;  19 import android.view.View;  20 import android.view.ViewGroup;  21 import android.widget.AdapterView;  22 import android.widget.ArrayAdapter;  23 import android.widget.ImageView;  24 import android.widget.ListView;  25 import android.widget.Toast;  26  27  28 public class MainActivity extends Activity {  29 private DrawerLayout mDrawerLayout;  30 private ListView mDrawerList;  31  32 /* 1、mDrawerLayout.setDrawerListener(DrawerLayout.DrawerListener);  33  2、ActionBarDrawerToggle是DrawerLayout.DrawerListener的具体实现类；  34  1)改变android.R.id.home图标(构造方法)。  35  2)Drawer拉出、隐藏，带有android.R.id.home动画效果(syncState())。  36  3)监听Drawer拉出、隐藏事件。  37  3、覆写ActionBarDrawerToggle的onDrawerOpened()和onDrawerClosed()以监听抽屉拉出或隐藏事件。  38 */  39 private ActionBarDrawerToggle mDrawerToggle;  40  41 //private CharSequence mDrawerTitle;  42 private CharSequence mTitle;  43 private String[] mPlanetTitles;  44  45  @Override  46 protected void onCreate(Bundle savedInstanceState) {  47 super.onCreate(savedInstanceState);  48  setContentView(R.layout.activity_main);  49  50 mTitle = getTitle();  51 // ListView列表数据  52 mPlanetTitles = getResources().getStringArray(R.array.planets_array);  53 mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);  54 mDrawerList = (ListView) findViewById(R.id.left_drawer);  55  56 // set a custom shadow that overlays the main content when the drawer  57 // opens  58  mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);  59 // set up the drawer's list view with items and click listener  60 mDrawerList.setAdapter(new ArrayAdapter<String>(this,  61  R.layout.drawer_list_item, mPlanetTitles));  62 mDrawerList.setOnItemClickListener(new DrawerItemClickListener());  63  64 // enable ActionBar app icon to behave as action to toggle nav drawer  65 // 开启ActionBar上APP ICON的功能  66 getActionBar().setDisplayHomeAsUpEnabled(true);  67 getActionBar().setHomeButtonEnabled(true);  68  69 /**  70  * 第4个和第5个参数:打开和关闭的描述资源  71 */  72 mDrawerToggle = new ActionBarDrawerToggle(  73 this,  74  mDrawerLayout,  75  R.drawable.ic_drawer,  76  R.string.drawer_open,  77  R.string.drawer_close) {  78 /** 覆写他的两个方法 */  79 @Override /** 当被关闭时，执行这个方法 */  80 public void onDrawerClosed(View view) {  81  getActionBar().setTitle(mTitle);  82  invalidateOptionsMenu();  83  }  84 @Override /** 当被打开时，执行这个方法 */  85 public void onDrawerOpened(View drawerView) {  86 getActionBar().setTitle("请选择");  87 // 重绘菜单项的ActionBar。  88 // 当调用此方法的时候，它会自动调用一个方法:Call onPrepareOptionsMenu(所以要重写)。  89  invalidateOptionsMenu();  90  }  91  };  92  mDrawerLayout.setDrawerListener(mDrawerToggle);  93  94 if (savedInstanceState == null) {  95 selectItem(0);  96  }  97  }  98  99  @Override 100 public boolean onCreateOptionsMenu(Menu menu) { 101 MenuInflater inflater = getMenuInflater(); 102  inflater.inflate(R.menu.main, menu); 103 return super.onCreateOptionsMenu(menu); 104  } 105 106 /* Called whenever we call invalidateOptionsMenu() */ 107  @Override 108 public boolean onPrepareOptionsMenu(Menu menu) { 109 // 根据打开和关闭来实现右上角的图片显示。 110 boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList); // 获取打开状态 111 menu.findItem(R.id.action_websearch).setVisible(!drawerOpen); 112 return super.onPrepareOptionsMenu(menu); 113  } 114 115  @Override 116 public boolean onOptionsItemSelected(MenuItem item) { 117 // 将ActionBar上的图标与Drawer结合起来。 118 // 点击左上角的图标，打开和关闭抽屉。 119 if (mDrawerToggle.onOptionsItemSelected(item)) { 120 return true; 121  } 122 switch (item.getItemId()) { 123 case R.id.action_websearch: // 右上角查询按钮 124 Intent intent = new Intent(); 125 intent.setAction("android.intent.action.VIEW"); 126 Uri uri = Uri.parse("http://www.baidu.com"); 127  intent.setData(uri); 128 // catch event that there's no activity to handle intent 129 if (intent.resolveActivity(getPackageManager()) != null) { 130  startActivity(intent); 131 } else { 132 Toast.makeText(this, R.string.app_not_available, 133  Toast.LENGTH_LONG).show(); 134  } 135 return true; 136 default: 137 return super.onOptionsItemSelected(item); 138  } 139  } 140 141 /* The click listner for ListView in the navigation drawer */ 142 private class DrawerItemClickListener implements 143  ListView.OnItemClickListener { 144  @Override 145 public void onItemClick(AdapterView<?> parent, View view, int position, 146 long id) { 147  selectItem(position); 148  } 149  } 150 151 private void selectItem(int position) { 152 Fragment fragment = new PlanetFragment(); 153 Bundle args = new Bundle(); 154 // 传入参数 155  args.putInt(PlanetFragment.ARG_PLANET_NUMBER, position); 156  fragment.setArguments(args); 157 158 FragmentManager fragmentManager = getFragmentManager(); 159  fragmentManager.beginTransaction() 160  .replace(R.id.content_frame, fragment).commit(); 161 162 // update selected item and title, then close the drawer 163 mDrawerList.setItemChecked(position, true); 164  setTitle(mPlanetTitles[position]); 165  mDrawerLayout.closeDrawer(mDrawerList); 166  } 167 168  @Override 169 public void setTitle(CharSequence title) { 170 mTitle = title; 171  getActionBar().setTitle(mTitle); 172  } 173 174 /** 175  * When using the ActionBarDrawerToggle, you must call it during 176  * onPostCreate() and onConfigurationChanged()... 177 */ 178 179  @Override 180 protected void onPostCreate(Bundle savedInstanceState) { 181 super.onPostCreate(savedInstanceState); 182 // 需要将ActionDrawerToggle与DrawerLayout的状态同步。 183 // 将ActionBarDrawerToggle中的drawer图标，设置为ActionBar中的Home-Button的ICON。 184 mDrawerToggle.syncState(); // 实现同步即可。 185  } 186 187 @Override // 当屏幕旋转的时候调用。实现重新配置。 188 public void onConfigurationChanged(Configuration newConfig) { 189 super.onConfigurationChanged(newConfig); 190 // Pass any configuration change to the drawer toggls 191  mDrawerToggle.onConfigurationChanged(newConfig); 192  } 193 194 /** 195  * Fragment that appears in the "content_frame", shows a planet 196 */ 197 public static class PlanetFragment extends Fragment { 198 public static final String ARG_PLANET_NUMBER = "planet_number"; 199 200 public PlanetFragment() { 201 // Empty constructor required for fragment subclasses 202  } 203 204  @Override 205 public View onCreateView(LayoutInflater inflater, ViewGroup container, 206  Bundle savedInstanceState) { 207 View rootView = inflater.inflate(R.layout.fragment_planet, 208 container, false); 209 int i = getArguments().getInt(ARG_PLANET_NUMBER); 210 String planet = getResources() 211  .getStringArray(R.array.planets_array)[i]; 212 213 int imageId = getResources().getIdentifier( 214 planet.toLowerCase(Locale.getDefault()), "drawable", 215  getActivity().getPackageName()); 216  ((ImageView) rootView.findViewById(R.id.image)) 217  .setImageResource(imageId); 218  getActivity().setTitle(planet); 219 return rootView; 220  } 221  } 222 }