Android DrawerLayout 的使用
Android L Android Studio 1.4
从主视图左侧能抽出一个导航栏,效果图:
点击后弹出新界面:
新界面也可以抽出左侧导航栏
1.配置xml文件,指定根视图和左右抽屉视图
2.Activity中加载xml文件,设定UI动作
代码
首先配置 main_layout.xml 文件;用v4包里的DrawerLayout,指定一个FrameLayout作为根视图,后续可以把Fragment插入到这个FrameLayout中
抽屉视图是一个RelativeLayout,里面承载着几个UI,ListView用于装按钮,下面是退出按键
1 <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
2 android:id="@+id/drawer_layout"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent">
5 <!-- 指定Framelayout为根视图 -->
6 <FrameLayout
7 android:id="@+id/root_framelayout"
8 android:layout_width="match_parent"
9 android:layout_height="match_parent"></FrameLayout>
10
11 <!-- The left navigation drawer -->
12 <RelativeLayout
13 android:id="@+id/left_relative_drawer"
14 android:layout_width="240dp"
15 android:layout_height="match_parent"
16 android:layout_gravity="start"
17 android:background="#ffffcc"
18 android:clickable="true"><!-- clickable="true" 防止点击事件穿透 -->
19
20
21 <ImageButton
22 android:id="@+id/imagebtn_left_head"
23 android:layout_width="120dp"
24 android:layout_height="120dp"
25 android:layout_centerHorizontal="true"
26 android:layout_marginTop="20dp"
27 android:background="@drawable/littleboygreen"
28 android:scaleType="fitXY" />
29
30 <ListView
31 android:id="@+id/left_list"
32 android:layout_width="match_parent"
33 android:layout_height="wrap_content"
34 android:layout_below="@id/imagebtn_left_head"
35 android:choiceMode="singleChoice"
36 android:divider="@android:color/transparent"
37 android:dividerHeight="10dp"
38 android:paddingTop="5dp"></ListView>
39
40 <Button
41 android:id="@+id/btn_left_exit"
42 android:layout_width="140dp"
43 android:layout_height="wrap_content"
44 android:layout_below="@id/left_list"
45 android:layout_centerInParent="true"
46 android:layout_marginTop="50dp"
47 android:background="@drawable/button_corner_shape"
48 android:text="退出应用"
49 android:textSize="20sp" />
50
51 <Button
52 android:id="@+id/btn_left_confirm"
53 android:layout_width="70dp"
54 android:layout_height="wrap_content"
55 android:layout_below="@id/left_list"
56 android:layout_marginLeft="30dp"
57 android:layout_marginTop="50dp"
58 android:background="@drawable/button_corner_shape"
59 android:text="退出"
60 android:textSize="20sp" />
61
62 <Button
63 android:id="@+id/btn_left_cancel"
64 android:layout_width="70dp"
65 android:layout_height="wrap_content"
66 android:layout_below="@id/left_list"
67 android:layout_marginLeft="40dp"
68 android:layout_marginTop="50dp"
69 android:layout_toRightOf="@id/btn_left_confirm"
70 android:background="@drawable/button_cancel_corner_shape"
71 android:text="取消"
72 android:textSize="20sp" />
73
74 </RelativeLayout>
75
76
77 </android.support.v4.widget.DrawerLayout>
在MainActivity.java的onCreate方法中加载这个layout
setContentView(R.layout.main_layout);
主视图就只有一张背景,新写一个MainFragment加载进去
MainFragment.java
public class MainFragment extends Fragment {
......
private Toolbar toolbar;
......
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.main_relativelayout, container,false);
/* 这里设置UI,设置按钮监听等等 */
/* 为防止单调,显示放屏幕分辨率和屏幕方向 */
return rootView;
}
/* 屏幕分辨率 */
private String getScreenRatio(){
StringBuilder ratio = new StringBuilder("");
mDisplay = ((WindowManager)getActivity().getSystemService(Context.WINDOW_SERVICE))
.getDefaultDisplay();/* 先getActivity */
DisplayMetrics mDisplayMetrics = new DisplayMetrics();
mDisplay.getMetrics(mDisplayMetrics);
mDisplay.getSize(mCurrentDisplaySize);/* 竖屏Point(1536, 1964) 横屏Point(2048, 1452) */
Log.d("rust","mCurrentDisplaySize "+ mCurrentDisplaySize);
int screenWidth = mDisplayMetrics.widthPixels;
int screenHeight = mDisplayMetrics.heightPixels;
ratio.append(screenWidth);
ratio.append(" x ");
ratio.append(screenHeight);
return ratio.toString();
}
/* 获取屏幕方向 */
private void getOrientation() {
config = getResources().getConfiguration();/* 检查屏幕方向 */
if (config.orientation == Configuration.ORIENTATION_LANDSCAPE){
screenOrientation = "LANDSCAPE";
} else if (config.orientation == Configuration.ORIENTATION_PORTRAIT) {
screenOrientation = "PORTRAIT";
} else {
screenOrientation = "Unknow";
}
}
}
回到MainActivity.java的onCreate方法,把MainFragment加载进去
mainFragment = new MainFragment();/* 指定一个单独的Fragment */
......
final FragmentManager fragmentManager = getFragmentManager();/* 加载到root容器 */
fragmentManager.beginTransaction().add(R.id.root_framelayout, mainFragment).commit();
同样在MainActivity.java的onCreate方法中加载一下导航栏
/* 左抽屉 */
leftDrawer = (RelativeLayout) findViewById(R.id.left_relative_drawer);
/* 左列表在左抽屉里 */
leftList = (ListView) leftDrawer.findViewById(R.id.left_list);
/* 适配器装载数据;即初始化导航列表;这里使用SimpleAdapter,加载自定义的LinearLayout作为按钮 */
contentLeftAdapter = new SimpleAdapter(this, leftDrawerListData(),
R.layout.list_item_linearlayout, new String[]{"image","text"},
new int[]{R.id.image_left_item,R.id.tv_left_item});
leftList.setAdapter(contentLeftAdapter);
/* 为list设置ClickListener;DrawerOnItemClickListener定义在下面*/
leftList.setOnItemClickListener(new DrawerOnItemClickListener());
imageBtnLeft.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
fragmentManager.beginTransaction()
.replace(R.id.root_framelayout, mainFragment)
.commit();
mDrawerLayout.closeDrawer(leftDrawer);
}
});
btnExit.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
btnConfirmExit.setVisibility(View.VISIBLE);
btnCancelExit.setVisibility(View.VISIBLE);
btnExit.setVisibility(View.INVISIBLE);
}
});
btnCancelExit.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
btnCancelExit.setVisibility(View.INVISIBLE);
btnConfirmExit.setVisibility(View.INVISIBLE);
btnExit.setVisibility(View.VISIBLE);
}
});
btnConfirmExit.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// finish();
android.os.Process.killProcess(android.os.Process.myPid());
}
});
往listview中添加内容的方法
private List<Map<String, Object>> leftDrawerListData(){
List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
Map<String, Object> map = new HashMap<String, Object>();
map.put("image", R.drawable.orange01);
map.put("text", "橘子");
list.add(map);
map = new HashMap<String, Object>();
map.put("image", R.drawable.sixtraveltransportation);
map.put("text", "路标");
list.add(map);
map = new HashMap<String, Object>();
map.put("image", R.drawable.traintraveltransportation);
map.put("text", "火车");
list.add(map);
map = new HashMap<String, Object>();
map.put("image", R.drawable.ecologytree);
map.put("text", "树苗");
list.add(map);
map = new HashMap<String, Object>();
map.put("image", R.drawable.ecology);
map.put("text", "插头");
list.add(map);
return list;
}
导航栏按钮监听
private class DrawerOnItemClickListener implements AdapterView.OnItemClickListener{
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
seleteItem(position);/* 按钮选择 */
}
}
private void seleteItem(int position){
leftList.setItemChecked(position, true);
Fragment newFragment = new ContentFragment();/* new 一个子fragment */
Bundle args = new Bundle();
args.putInt(ContentFragment.ARG_SHOW_FRAGMENT,position);
newFragment.setArguments(args);/* 装载数据 */
FragmentManager childFragmentManager = getFragmentManager();
childFragmentManager.beginTransaction()
.replace(R.id.root_framelayout, newFragment)
.commit();/* 替换当前fragment */
/* 最后关闭左侧抽屉 */
mDrawerLayout.closeDrawer(leftDrawer);
}
点击一下导航栏的按钮,就会把原来的MainFragment替换掉
DrawerLayout往往和Fragment结合起来使用;布局界面可以更丰富和灵活
如果跳到另一个Activity,就抽不出MainActivity的DrawerLayout