本节引言:
本节给大家带来基础UI控件部分的最后一个控件:DrawerLayout,官方给我们提供的一个侧滑菜单 控件,和上一节的ViewPager一样,3.0以后引入,低版本使用它,需要v4兼容包,说到侧滑,相信 很多人都用过github上的SlidingMenu,不过好像有两个版本,一个是单独的,另一个需要依赖另一 个开源项目:ActionBarSherlock;既然Google为我们提供了这个控件,为何不用咧,而且在 Material Design设计规范中,随处可见的很多侧滑菜单的动画效果,大都可以通过Toolbar + DrawerLayout来实现~,本节我们就来探究下这个DrawerLayout的一个基本用法~还有人喜欢把他 称为抽屉控件~官方文档:DrawerLayout
1.使用的注意事项
- 1.主内容视图一定要是DrawerLayout的第一个子视图
- 2.主内容视图宽度和高度需要match_parent
- 3.必须显示指定侧滑视图的android:layout_gravity属性 android:layout_gravity = "start"时,从左向右滑出菜单 android:layout_gravity = "end"时,从右向左滑出菜单 不推荐使用left和right!!!
- 侧滑视图的宽度以dp为单位,不建议超过320dp(为了总能看到一些主内容视图)
- 设置侧滑事件:mDrawerLayout.setDrawerListener(DrawerLayout.DrawerListener);
- 要说一点:可以结合Actionbar使用当用户点击Actionbar上的应用图标,弹出侧滑菜单! 这里就要通过ActionBarDrawerToggle,它是DrawerLayout.DrawerListener的具体实现类, 我们可以重写ActionBarDrawerToggle的onDrawerOpened()和onDrawerClosed()以监听抽屉拉出 或隐藏事件!但是这里我们不讲,因为5.0后我们使用的是Toolbar!有兴趣的可以自行查阅相关 文档!
2.使用代码示例
示例1:单个侧滑菜单的实现
运行效果图:
实现关键代码:
首先是我们的主布局,注意:最外层要是DrawerLayout哦!!!!
activity_main.xml:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:id="@+id/ly_content" android:layout_width="match_parent" android:layout_height="match_parent" /> <ListView android:id="@+id/list_left_drawer" android:layout_width="180dp" android:layout_height="match_parent" android:layout_gravity="start" android:background="#080808" android:choiceMode="singleChoice" android:divider="#FFFFFF" android:dividerHeight="1dp" /> </android.support.v4.widget.DrawerLayout>
接着ListView的布局代码和domain类:Item比较简单,就不给出了,直接上中间Fragment的 布局以及代码吧!另外Adapter直接复用我们之前写的那个可复用的MyAdapter!
fg_content.xml:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:id="@+id/tv_content" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:textSize="25sp" /> </RelativeLayout>
ContentFragment.java:
/** * Created by Jay on 2015/10/8 0008. */ public class ContentFragment extends Fragment { private TextView tv_content; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fg_content, container, false); tv_content = (TextView) view.findViewById(R.id.tv_content); String text = getArguments().getString("text"); tv_content.setText(text); return view; } }
最后是我们的Activity类
MainActivity.java:
public class MainActivity extends AppCompatActivity implements AdapterView.OnItemClickListener{ private DrawerLayout drawer_layout; private ListView list_left_drawer; private ArrayList<Item> menuLists; private MyAdapter<Item> myAdapter = null; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); drawer_layout = (DrawerLayout) findViewById(R.id.drawer_layout); list_left_drawer = (ListView) findViewById(R.id.list_left_drawer); menuLists = new ArrayList<Item>(); menuLists.add(new Item(R.mipmap.iv_menu_realtime,"实时信息")); menuLists.add(new Item(R.mipmap.iv_menu_alert,"提醒通知")); menuLists.add(new Item(R.mipmap.iv_menu_trace,"活动路线")); menuLists.add(new Item(R.mipmap.iv_menu_settings,"相关设置")); myAdapter = new MyAdapter<Item>(menuLists,R.layout.item_list) { @Override public void bindView(ViewHolder holder, Item obj) { holder.setImageResource(R.id.img_icon,obj.getIconId()); holder.setText(R.id.txt_content, obj.getIconName()); } }; list_left_drawer.setAdapter(myAdapter); list_left_drawer.setOnItemClickListener(this); } @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { ContentFragment contentFragment = new ContentFragment(); Bundle args = new Bundle(); args.putString("text", menuLists.get(position).getIconName()); contentFragment.setArguments(args); FragmentManager fm = getSupportFragmentManager(); fm.beginTransaction().replace(R.id.ly_content,contentFragment).commit(); drawer_layout.closeDrawer(list_left_drawer); } }
代码很简单,就不多说了~
示例2.左右两个侧滑菜单的实现
嗯,不知道你有没有发现,从上面的DrawerLayout的布局,我们大概可以猜到,DrawerLayout 最多由三个部分组成,中间的内容部分,左边的侧滑菜单部分,右边的侧滑菜单部分组成! 下面我们来写一个带有两个侧滑菜单的示例!
运行效果图:
代码实现:
首先我们创建两个Fragment以及对应的布局,他们分别是左右侧滑菜单!
左边Fragment:
布局:fg_left.xml,这里就用了一个图片而以,点击后弹出一个新的Activity; 当然你可以根据自己的需求进行扩展!
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/img_bg" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@mipmap/bg_menu_left"/> </LinearLayout>
对应的LeftFragment.java:
/** * Created by Jay on 2015/10/9 0009. */ public class LeftFragment extends Fragment{ private DrawerLayout drawer_layout; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fg_left, container, false); ImageView img_bg = (ImageView) view.findViewById(R.id.img_bg); img_bg.setOnClickListener(new View.OnClickListener() {