DrawerLayout抽屉视图:
一个可以实现侧滑栏的视图
注意事项:
- 主内容视图一定要是DrawerLayout的第一个子视图
- 主内容视图宽度和高度必须匹配父视图,即“match_parent”
- 必须显示指定抽屉视图(如ListView)的android:layout_gravity属性
1)android:layout_gravity="start"时,从左向右滑出菜单
2)android:layout_gravity=“end"时,从右向左滑出菜单
3)不推荐使用"left’和"right” - 抽屉视图的宽度以dp为单位,不要超过320dp
下面我们来创建一个抽屉视图:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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"
tools:context="zs.drawerlayoutdemo.MainActivity">
<!-- 主内容视图 -->
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<!-- 抽屉菜单视图 -->
<ListView
android:id="@+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:background="#ffffcc"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="@android:color/transparent"
android:dividerHeight="0dp">
</ListView>
</android.support.v4.widget.DrawerLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
效果如下:
下面我们来给这个视图添加内容:
MainActivity.java
public class MainActivity extends AppCompatActivity implements AdapterView.OnItemClickListener{
private DrawerLayout mdl;
private ListView lv;
private ArrayList<String> menuLists;
private ArrayAdapter<String> adapter;
private ActionBarDrawerToggle mDrawerToggle;
private String mTitle;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTitle = (String)getTitle();
System.out.println(mTitle);
mdl = (DrawerLayout)findViewById(R.id.drawer_layout);
lv = (ListView)findViewById(R.id.left_drawer);
menuLists = new ArrayList<String>();
menuLists.add("个人");
menuLists.add("聊天");
menuLists.add("好友");
menuLists.add("动态");
menuLists.add("设置");
adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,menuLists);
lv.setAdapter(adapter);
lv.setOnItemClickListener(this);
mDrawerToggle = new ActionBarDrawerToggle(this,mdl
,R.drawable.ic_drawer
,R.string.drawer_open
,R.string.drawer_close){
//抽屉视图打开时调用
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
setTitle("请选择");
//重绘菜单项
invalidateOptionsMenu();
}
//抽屉视图关闭时调用
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
setTitle(mTitle);
invalidateOptionsMenu();
}
};
mdl.setDrawerListener(mDrawerToggle);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
}
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
//动态插入fragment
Fragment fragment = new MyFragment();
Bundle args = new Bundle();
args.putString("text",menuLists.get(position));
fragment.setArguments(args);
FragmentManager fm = getFragmentManager();
fm.beginTransaction().replace(R.id.content_frame,fragment).commit();
mdl.closeDrawer(lv);
}
//设置右边图标
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main,menu);
return true;
}
//实现点击左上角图标打开或关闭抽屉
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (mDrawerToggle.onOptionsItemSelected(item)) {
return true;
}
return super.onOptionsItemSelected(item);
}
@Override
public boolean onPrepareOptionsMenu(Menu menu) {
boolean isOpen = mdl.isDrawerOpen(lv);
menu.findItem(R.id.action_websrearch).setVisible(!isOpen);
return super.onPrepareOptionsMenu(menu);
}
//设置右边的图标
@Override
protected void onPostCreate( Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
//将ActionDrawerToggle与DrawerLayout的状态同步
//将ActionBarDra'werToggle中的图标设置为ActionBar中的图标
mDrawerToggle.syncState();
}
@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
mDrawerToggle.onConfigurationChanged(newConfig);
}
}
被切换的Fragment:MyFragment.java
public class MyFragment extends Fragment {
public MyFragment() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.fragment_my, container, false);
TextView tv = (TextView)view.findViewById(R.id.tv_my);
String text = getArguments().getString("text");
tv.setText(text);
return view;
}
}
Fragment的布局文件:fragment_my.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="zs.drawerlayoutdemo.MyFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:id="@+id/tv_my"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="个人" />
</FrameLayout>
右边的搜索按钮main.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:title="webSerach"
android:id="@+id/action_websrearch"
android:icon="@drawable/action_search"
app:showAsAction="ifRoom|withText"/>
</menu>
strings.xml
<resources>
<string name="app_name">DrawerLayoutDemo</string>
<string name="drawer_open">DrawerOpen</string>
<string name="drawer_close">DrawerClose</string>
<string name="hello_blank_fragment">Hello blank fragment</string>
</resources>
效果如下: