Android DrawerLayout带有侧滑功能的布局类(1)

DrawerLayout顾名思义就是一个管理布局的。使用方式可以与其它的布局类类似。
DrawerLayout带有滑动的功能。只要按照drawerLayout的规定布局方式写完布局,就能有侧滑的效果。
直接将DrawerLayout作为根布局,然后其内部

  第一个View为内容区域

  第二个View为左侧菜单   

第三个View为右侧侧滑菜单 

当前第三个是可选的。
使用的包如下: 
import android.support.v4.widget.DrawerLayout;

使用这些包的时候有时有的会报错。这时候确保android.support.v4是不是最新的版本。
 可以更新一下support包,文件存放在sdk/extres/support中。
 然后可以通过eclipse>project right click>Android Tools>Add Support library…
 或者可以直接把文件复制到Project中libs文件夹中。

<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/content_frame"
  android:layout_width="match_parent"
  android:layout_height="match_parent" />
 <ListView
  android:id="@+id/left_drawer"
  android:layout_width="240dp"
  android:layout_height="match_parent"
  android:layout_gravity="start"
  android:choiceMode="singleChoice"
  android:divider="@android:color/transparent"
  android:dividerHeight="0dp"
  android:background="#111"/>
</android.support.v4.widget.DrawerLayout>

Drawer positioning and layout is controlled using the android:layout_gravity attribute on child views corresponding to which side of the view you want the drawer to emerge from: left or right.
 (Or start/end on platform versions that support layout direction.)
 也就是说
  android:layout_gravity="start" 相当于左侧的MENU向右滑动即显示菜单,LEFT/START(RIGHT/END)
那么从布局文件中可知:
 FrameLayout是内容区, ListView是左侧菜单。
我们需做一个Fragment来装载内容:

public class PageFragment extends Fragment {
  public final static String ITEM_POSITION_NUMBER = "item_position_num";
  public PageFragment(){}
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
    Bundle savedInstanceState) {
   View convertView = inflater.inflate(R.layout.page_fragment_layout, null);
   TextView tv = (TextView) convertView.findViewById(R.id.textView);
   int num = getArguments().getInt(ITEM_POSITION_NUMBER);
   //从res/array中获取list数据
   String[] dynastyList = getResources().getStringArray(R.array.list_item);
   tv.setText(dynastyList[num]);
   return convertView;
  }
 }

代码中可以看出当我们在左侧菜单中选择SelectItem时会把对应的值显示到内容区。
代码中的page_fragment_layout.xml仅是FrameLayout内加一个TextView所以就不贴代码了。
接下来我们需要把listView进行填充数据。

private ListView menuList;
private String[] mMenuTitles;
private String[] historyTitles;
private String[] musicTitles;
private String[] movieTitles;
private String[] listTitles;
     // 历史栏
  historyTitles = getResources().getStringArray(R.array.history);
  // 音乐栏
  musicTitles = getResources().getStringArray(R.array.music);
  // 电影栏
  movieTitles = getResources().getStringArray(R.array.movie);
  // 标题数组
  mMenuTitles = getResources().getStringArray(R.array.title);
  // 每一項的標題
  listTitles = getResources().getStringArray(R.array.list_item);

  drawLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
  menuList = (ListView) findViewById(R.id.left_menu);

  // 设置菜单阴影效果
  // drawLayout.setDrawerShadow(R.drawable.drawer_shadow,
  // GravityCompat.START);
  List<Item> list = new ArrayList<Item>();
  // 菜单加入历史标题和历史项
  HeaderItem historyHeader = new HeaderItem(mMenuTitles[0]);
  list.add(historyHeader);
  for (int i = 0; i < historyTitles.length; i++) {
   EventItem historyitem = new EventItem(historyTitles[i]);
   list.add(historyitem);
  }

  // 菜单加入音乐标题和音乐项
  HeaderItem musicHeader = new HeaderItem(mMenuTitles[1]);
  list.add(musicHeader);
  for (int i = 0; i < musicTitles.length; i++) {
   EventItem musicItem = new EventItem(musicTitles[i]);
   list.add(musicItem);
  }

  // 菜单加入电影标题和电影项
  HeaderItem movieHeader = new HeaderItem(mMenuTitles[2]);
  list.add(movieHeader);
  for (int i = 0; i < movieTitles.length; i++) {
   EventItem movieItem = new EventItem(movieTitles[i]);
   list.add(movieItem);
  }

  MyListAdapter adapter = new MyListAdapter(this, list);
  menuList.setAdapter(adapter);

这个数据填充有点麻烦。自定义ListAdapter然后进行适配。
 数据在res/values/arrays.xml中

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <string-array name="history">
  <item >三国</item>
  <item >楚汉</item>
  <item >春秋</item>
  <item >战国</item>
 </string-array>
  <string-array name="music">
  <item >爵士</item>
  <item >古典</item>
  <item >现代</item>
  <item >民谣</item>
 </string-array>
  <string-array name="movie">
  <item >悬疑</item>
  <item >爱情</item>
  <item >历史</item>
  <item >恐怖</item>
 </string-array>
 <string-array name="title">
  <item >历史</item>
  <item >音樂</item>
  <item >电影</item>
 </string-array>
 <string-array name="list_item">
  <item >歷史</item>
  <item >三国</item>
  <item >楚汉</item>
  <item >春秋</item>
  <item >战国</item>
  <item >音樂</item>
  <item >爵士</item>
  <item >古典</item>
  <item >现代</item>
  <item >民谣</item>
  <item >電影</item>
  <item >悬疑</item>
  <item >爱情</item>
  <item >历史</item>
  <item >恐怖</item>
 </string-array>
</resources>

然后就是listView的监听:

  private void initListener() {
  // 菜单单击事件监听器
  menuList.setOnItemClickListener(new DrawerItemClickListener());
 }

 /* The click listner for ListView in the navigation drawer */
 private class DrawerItemClickListener implements
   ListView.OnItemClickListener {
  @Override
  public void onItemClick(AdapterView<?> parent, View view, int position,
    long id) {
   Log.i("Light", "position:" + position);
   selectItem(position);
  }
 }

 private void selectItem(int position) {
  // update the main content by replacing fragments
  PageFragment fragment = new PageFragment();
  // 将当前选择的项传递到Fragment
  Bundle args = new Bundle();
  args.putInt(PageFragment.ITEM_POSITION_NUMBER, position);
  fragment.setArguments(args);

  FragmentTransaction ft = MainActivity.this.getSupportFragmentManager()
    .beginTransaction();
  ft.replace(R.id.content_frame, fragment).commit();

  drawLayout.closeDrawer(menuList);
  // update selected item and title, then close the drawer
  menuList.setItemChecked(position, true);
  // 注意这里改变的是ActionBar的标题
  getActionBar().setTitle(listTitles[position]);
 }

我们关心的是当某一个Item被点击时会发生什么即代码:

private void selectItem(int position) {
  // update the main content by replacing fragments
  PageFragment fragment = new PageFragment();
  // 将当前选择的项传递到Fragment
  Bundle args = new Bundle();
  args.putInt(PageFragment.ITEM_POSITION_NUMBER, position);
  fragment.setArguments(args);

  FragmentTransaction ft = MainActivity.this.getSupportFragmentManager()
    .beginTransaction();
  ft.replace(R.id.content_frame, fragment).commit();

  drawLayout.closeDrawer(menuList);
  // update selected item and title, then close the drawer
  menuList.setItemChecked(position, true);
  // 注意这里改变的是ActionBar的标题
  getActionBar().setTitle(listTitles[position]);
 }

从代码中可以看出 
1. 首先我们先通过new PageFragment();获取内容区。 
2. 通过Bundle把数据打包起来然后注入fragment.setArguments(args);中这样fragment就能获取到此数据。 
    在fragment类中通过getArguments().getInt(ITEM_POSITION_NUMBER);可以获取传递的值。 
3. 然后通过ft.replace(R.id.content_frame, fragment).commit();把内容替换成之前定义的PageFragment  
4. 关闭菜单通过drawLayout.closeDrawer(menuList); 整个代码中我们仅用DrawLayout这一个函数 
5. 同时把ActionBar的标题改为selectedItem对应的值。 
*这时有人会问我们怎么没有ListView与DrawerLayout进行绑定的操作。我们在之前也说过DrawerLayout中的第二个开始即是菜单View,内部已经绑定好了。 
就这些内容可以实现左右侧滑动菜单效果了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android DrawerLayout带有侧滑功能的布局类(2)

    ActionBarDrawerToggle: 在前一张中我们并没有使用drawLayout.setDrawerListener();  对应的参数对象就是DrawerLayout.DrawerListener: public interface DrawerListener { void onDrawerSlide(View var1, float var2); void onDrawerOpened(View var1); void onDrawerClosed(View var1); voi

  • Android之侧滑菜单DrawerLayout的使用介绍

    在android support.v4 中有一个抽屉视图控件DrawerLayout.使用这个控件,可以生成通过在屏幕上水平滑动打开或者关闭菜单,能给用户一个不错的体验效果. DrawerLayout分为侧边菜单和主内容区两部分,侧边菜单可以根据手势展开与隐藏,主内容区的部分可以随着菜单的点击而变化.DrawerLayout其实是一个控件,跟LinearLayout差不多,直接使用即可. DrawerLayout属性 1.drawerPosition:指定 drawer 将从屏幕的一侧滑动. 2

  • Android使用DrawerLayout实现侧滑菜单效果

    一.概述 DrawerLayout是一个可以方便的实现Android侧滑菜单的组件,我最近开发的项目中也有一个侧滑菜单的功能,于是DrawerLayout就派上用场了.如果你从未使用过DrawerLayout,那么本篇博客将使用一个简单的案例带你迅速掌握DrawerLayout的用法. 二.效果图 三.代码实现 主布局activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLa

  • Android官方的侧滑控件DrawerLayout的示例代码

    导语 侧滑控件,以前大家用的可能是三方的SlidingMenu控件,最近在看谷歌源码项目,意外的看到一个 DrawerLayout 控件.上网一查,原来这个控件是官方给我们提供的一个侧滑菜单控件.既然谷歌已经提供了一个侧滑控件,我们又何必去用一个三方的SlidingMenu控件来实现相同的效果.于是,我决定自己手敲一个Demo来实现看看. 1.DrawerLayout效果图 2.DrawerLayout 的介绍 DrawerLayout的官方文档介绍链接:http://androiddoc.qi

  • Android使用DrawerLayout实现仿QQ双向侧滑菜单

    1.概述 之前写了一个Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭 ,恰逢QQ5.2又加了一个右侧菜单,刚好看了下DrawerLayout,一方面官方的东西,我都比较感兴趣:另一方面,这玩意用起来的确方便,于是简单写了个demo,高仿QQ5.2双向侧滑,分享给大家. 首先看看效果图: DrawerLayout用起来真的很方便,下面一起看看用法~ 2.DrawerLayout的使用 直接将DrawerLayout作为根布局,然后其内部第一个View为内容区域,第二个View为左侧

  • Android组件DrawerLayout仿网易新闻v4.4侧滑菜单

    概述 今天这篇博客将记录一些关于DrawerLayout的基本用法,我想关于DrawerLayout的用法也许有不少不够了解,这也是比较正常的事情,因为DrawerLayout作为Android组件是Google后来在android中添加的,在android.support.v4包下.那么,DrawerLayout是一个怎么的组件呢?我们知道,当我们使用Android上各类App的时候,是不是注意过App主页上通常有一个"侧滑菜单"?关于侧滑菜单的实现,我在前面博客里有一些介绍,想多些

  • Android DrawerLayout带有侧滑功能的布局类(1)

    DrawerLayout顾名思义就是一个管理布局的.使用方式可以与其它的布局类类似. DrawerLayout带有滑动的功能.只要按照drawerLayout的规定布局方式写完布局,就能有侧滑的效果. 直接将DrawerLayout作为根布局,然后其内部 第一个View为内容区域 第二个View为左侧菜单  第三个View为右侧侧滑菜单  当前第三个是可选的. 使用的包如下:  import android.support.v4.widget.DrawerLayout; 使用这些包的时候有时有的

  • Android Drawerlayout实现侧滑菜单效果

    本文实例为大家分享了Drawerlayout侧滑菜单的具体代码,供大家参考,具体内容如下 1.Drawerlayout的xml布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.and

  • Android 模仿QQ侧滑删除ListView功能示例

    需求: 1.listView可以侧滑item,展示删除按钮,点击删除按钮,删除当前的item 2.在删除按钮展示时,点击隐藏删除按钮,不响应item的点击事件 3.在删除按钮隐藏时,点击item响应点击事件 根据以上需求在网络上查找响应的例子,也有仿QQ侧滑代码,但不能满足2和3的要求,因此修改了一把,代码如下,共大家拍砖 第一步:重写ListView public class SwipeListView extends ListView { private final static Strin

  • Android自定义带有圆形进度条的可长按控件功能

    这几天有在学习Jetpack中CameraX的内容,在拍摄视频的时候想着做一个自定义带有进度条的可长按控件,用来显示拍摄进度,故记录下来与大家分享!效果如下: (篇幅过长是因为有代码解析过程,可直接到最后查看完整代码) 这个控件较为简易,从效果中可以看出,控件模拟了单击拍照,长按可以录制视频的功能,中途松手或者时间到都可以停止录制 思路很简单,使用简单的画笔工具就可以完成这个控件 继承自View 定义自定义属性并获取 定义填充样式的画笔 onMeasure中测量大小,onDraw中绘制圆与扇形

  • Android DrawerLayout实现侧拉菜单功能

    效果图 activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://sc

  • Android实现QQ侧滑菜单效果

    QQ侧滑菜单的Android实现代码,供大家参考,具体内容如下 实现逻辑 1.先写出菜单页面和主页面的布局 2.创建一个类,继承RelativeLayout,实现里面的onLayout 3.在主布局文件中添加子空间 4.在onLayout里面获取子控件的宽和高,并对子控件的位置进行绘制 5.给子布局设置滑动事件,分别在手指落下\移动\抬起的时候,获取手指的位置 6.在手指移动的过程中,对菜单页面的移动距离进行限制,防止菜单页面跑出指定的页面 7.在手指抬起的时候,判定一下手指移动的距离,如果移动

  • Android仿外卖购物车功能

    先看看效果图: 知识点分析 效果图来看不复杂内容并没多少,值得介绍一下的知识点也就下面几个吧 - 列表标题悬停 - 左右列表滑动时联动 - 添加商品时的抛物线动画 - 底部弹出购物车清单 - 数据的同步 另外就是实现效果的时候可能会遇到的几个坑... 布局很简单直接进入代码 1:列表标题悬停 现在做项目列表什么的基本抛弃了ListView改用RecyclerView,上篇博客中的标题悬停也是使用了一个RecyclerView的开源项目sticky-headers-recyclerview,不过写

  • Android 仿京东侧滑筛选实例代码

    简单介绍 这个demo写的是仿京东的侧滑筛选页面,点击进入筛选后进入二级筛选,两次侧滑的筛选,还包括ListView+CheckBox滑动冲突,ListView+ GridView显示一行问题解决,接口回调传递数据等 效果图 简单得代码介绍 1.首页侧滑用的是安卓官方V4包中的DrawerLayout <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLa

  • Android简单实现自定义流式布局的方法

    本文实例讲述了Android简单实现自定义流式布局的方法.分享给大家供大家参考,具体如下: 首先来看一下 手淘HD - 商品详情 - 选择商品属性 页面的UI 商品有很多尺码,而且展现每个尺码所需要的View的大小也不同(主要是宽度),所以在从服务器端拉到数据之前,展现所有尺码所需要的行数和每一行的个数都无法确定,因此不能直接使用GridView或ListView. 如果使用LinearLayout呢? 一个LinearLayout只能显示一行,如果要展示多行,则每一行都要new一个Linear

随机推荐