Android侧滑导航栏的实例代码

今天学习的新内容是侧滑导航栏，我想大家肯定都比较熟悉了，因为这个效果在qq里面也有，最近一直跟室友们玩的游戏是快速让自己的头像的点赞量上千。当然我的效果跟qq是没有办法比的，因为那里面的功能是在是太强大了。下面我来展示一下我做的效果截图。

我做的界面有点丑，但是对比之前已经是有了很大的改观了。想做这样的效果的话可以ps几张比较好看的图片。

下面就是粘贴我代码的时间了。

activity_main.xml

<cn.edu.rjxy.activity.draglayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/dl"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="@drawable/bg1"
 android:clickable="true"
 android:orientation="vertical" >
 <!-- 左侧菜单页面 -->
 <include layout="@layout/leftmenu" />
 <cn.edu.rjxy.activity.myrelativelayout
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:background="#eeeeee"
  android:orientation="vertical" >
  <!-- headbanner -->
  <include layout="@layout/middleview" />
 </cn.edu.rjxy.activity.myrelativelayout>
</cn.edu.rjxy.activity.draglayout>

leftmenu.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:paddingbottom="30dp"
 android:paddingleft="30dp"
 android:paddingtop="10dp" >
 <linearlayout
  android:id="@+id/menu_header"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:gravity="left|center"
  android:orientation="horizontal"
  android:padding="5dp" >
  <imageview
   android:id="@+id/iv_headimage"
   android:layout_width="55dp"
   android:layout_height="55dp"
   android:src="@drawable/ic_launcher" />
  <linearlayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:gravity="center|left"
   android:layout_marginleft="6dp"
   android:orientation="vertical" >
   <textview
    android:id="@+id/tv_sname"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:text="员工名"
    android:textcolor="#ffffff"
    android:textsize="15sp" />
   <textview
    android:id="@+id/tv_message"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margintop="2dp"
    android:textcolor="#ffffff"
    android:text="蝴蝶为花醉，花却随风飞，花舞花落泪，花哭花瓣飞"
    android:textsize="12sp" />
  </linearlayout>
 </linearlayout>
 <textview
  android:id="@+id/tv_setting"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_alignparentbottom="true"
  android:text="设置"
  android:drawablepadding="5dp"
  android:gravity="center"
  android:drawableleft="@drawable/ic_launcher"
  android:textcolor="#ffffff"
  android:textsize="15sp" />
 <listview
  android:id="@+id/lv"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_above="@id/tv_setting"
  android:layout_below="@id/menu_header"
  android:layout_marginbottom="30dp"
  android:layout_margintop="20dp"
  android:cachecolorhint="#00000000"
  android:divider="@null"
  android:scrollbars="none"
  android:textcolor="#ffffff" />
</relativelayout>

menulist_item_text.xml

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="horizontal" >
 <linearlayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:gravity="center"
  android:padding="10dp"
  android:orientation="horizontal" >
  <imageview
   android:id="@+id/menu_imageview1"
   android:layout_width="40dp"
   android:layout_height="40dp"
   android:src="@drawable/ic_launcher" />
  <textview
   android:id="@+id/menu_text"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_marginleft="5dp"
   android:gravity="center_vertical"
   android:text="菜单1"
   android:textcolor="#ffffff"
   android:textsize="20sp" />
 </linearlayout>
</linearlayout>

middleview.xml

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="@android:color/white"
 android:orientation="vertical" >
 <relativelayout
  android:layout_width="fill_parent"
  android:layout_height="40dp"
  android:background="#00c5cd"
  android:orientation="horizontal" >
  <imagebutton
   android:id="@+id/menu_imgbtn"
   android:layout_width="20dp"
   android:layout_height="15dp"
   android:layout_centervertical="true"
   android:layout_marginleft="10dp"
   android:layout_margintop="1dp"
   android:background="@drawable/leftmenu_btn_selector" />
  <textview
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_centerinparent="true"
   android:text="@string/app_name"
   android:textcolor="@android:color/white"
   android:textsize="20dp" />
 </relativelayout>
</linearlayout>

leftmenu_btn_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@drawable/leftmenu_btn_press" android:state_pressed="true"/>
 <item android:drawable="@drawable/leftmenu_btn" android:state_pressed="false"/>
</selector>

myrelativelayout

package cn.edu.rjxy.activity;
import cn.edu.rjxy.activity.draglayout.status;
import android.content.context;
import android.util.attributeset;
import android.view.motionevent;
import android.widget.linearlayout;
public class myrelativelayout extends linearlayout {
 private draglayout dl;
 public myrelativelayout(context context) {
  super(context);
 }
 public myrelativelayout(context context, attributeset attrs) {
  super(context, attrs);
 }
 public void setdraglayout(draglayout dl) {
  this.dl = dl;
 }
 @override
 public boolean onintercepttouchevent(motionevent event) {
  if (dl.getstatus() != status.close) {
   return true;
  }
  return super.onintercepttouchevent(event);
 }
 @override
 public boolean ontouchevent(motionevent event) {
  if (dl.getstatus() != status.close) {
   if (event.getaction() == motionevent.action_up) {
    dl.close();
   }
   return true;
  }
  return super.ontouchevent(event);
 }
}

draglayout

package cn.edu.rjxy.activity;
import com.nineoldandroids.view.viewhelper;
import android.content.context;
import android.graphics.color;
import android.graphics.porterduff.mode;
import android.support.v4.view.gesturedetectorcompat;
import android.support.v4.view.viewcompat;
import android.support.v4.widget.viewdraghelper;
import android.util.attributeset;
import android.view.gesturedetector.simpleongesturelistener;
import android.view.motionevent;
import android.view.view;
import android.view.viewgroup;
import android.widget.framelayout;
import android.widget.imageview;
import android.widget.relativelayout;
public class draglayout extends framelayout {
 private boolean isshowshadow = true;
 private gesturedetectorcompat gesturedetector;
 private viewdraghelper draghelper;
 private draglistener draglistener;
 private int range;
 private int width;
 private int height;
 private int mainleft;
 private context context;
 private imageview iv_shadow;
 private relativelayout vg_left;
 private myrelativelayout vg_main;
 private status status = status.close;
 public draglayout(context context) {
  this(context, null);
 }
 public draglayout(context context, attributeset attrs) {
  this(context, attrs, 0);
  this.context = context;
 }
 public draglayout(context context, attributeset attrs, int defstyle) {
  super(context, attrs, defstyle);
  gesturedetector = new gesturedetectorcompat(context,
    new yscrolldetector());
  draghelper = viewdraghelper.create(this, draghelpercallback);
 }
 class yscrolldetector extends simpleongesturelistener {
  @override
  public boolean onscroll(motionevent e1, motionevent e2, float dx,
    float dy) {
   return math.abs(dy) <= math.abs(dx);
  }
 }
 private viewdraghelper.callback draghelpercallback = new viewdraghelper.callback() {
  @override
  public int clampviewpositionhorizontal(view child, int left, int dx) {
   if (mainleft + dx < 0) {
    return 0;
   } else if (mainleft + dx > range) {
    return range;
   } else {
    return left;
   }
  }
  @override
  public boolean trycaptureview(view child, int pointerid) {
   return true;
  }
  @override
  public int getviewhorizontaldragrange(view child) {
   return width;
  }
  @override
  public void onviewreleased(view releasedchild, float xvel, float yvel) {
   super.onviewreleased(releasedchild, xvel, yvel);
   if (xvel > 0) {
    open();
   } else if (xvel < 0) {
    close();
   } else if (releasedchild == vg_main && mainleft > range * 0.3) {
    open();
   } else if (releasedchild == vg_left && mainleft > range * 0.7) {
    open();
   } else {
    close();
   }
  }
  @override
  public void onviewpositionchanged(view changedview, int left, int top,
    int dx, int dy) {
   if (changedview == vg_main) {
    mainleft = left;
   } else {
    mainleft = mainleft + left;
   }
   if (mainleft < 0) {
    mainleft = 0;
   } else if (mainleft > range) {
    mainleft = range;
   }
   if (isshowshadow) {
    iv_shadow.layout(mainleft, 0, mainleft + width, height);
   }
   if (changedview == vg_left) {
    vg_left.layout(0, 0, width, height);
    vg_main.layout(mainleft, 0, mainleft + width, height);
   }
   dispatchdragevent(mainleft);
  }
 };
 public interface draglistener {
  public void onopen();
  public void onclose();
  public void ondrag(float percent);
 }
 public void setdraglistener(draglistener draglistener) {
  this.draglistener = draglistener;
 }
 @override
 protected void onfinishinflate() {
  super.onfinishinflate();
  if (isshowshadow) {
   iv_shadow = new imageview(context);
   iv_shadow.setimageresource(r.drawable.shadow);
   layoutparams lp = new layoutparams(layoutparams.match_parent,
     layoutparams.match_parent);
   addview(iv_shadow, 1, lp);
  }
  vg_left = (relativelayout) getchildat(0);
  vg_main = (myrelativelayout) getchildat(isshowshadow ? 2 : 1);
  vg_main.setdraglayout(this);
  vg_left.setclickable(true);
  vg_main.setclickable(true);
 }
 public viewgroup getvg_main() {
  return vg_main;
 }
 public viewgroup getvg_left() {
  return vg_left;
 }
 @override
 protected void onsizechanged(int w, int h, int oldw, int oldh) {
  super.onsizechanged(w, h, oldw, oldh);
  width = vg_left.getmeasuredwidth();
  height = vg_left.getmeasuredheight();
  range = (int) (width * 0.6f);
 }
 @override
 protected void onlayout(boolean changed, int left, int top, int right,
   int bottom) {
  vg_left.layout(0, 0, width, height);
  vg_main.layout(mainleft, 0, mainleft + width, height);
 }
 @override
 public boolean onintercepttouchevent(motionevent ev) {
  return draghelper.shouldintercepttouchevent(ev)
    && gesturedetector.ontouchevent(ev);
 }
 @override
 public boolean ontouchevent(motionevent e) {
  try {
   draghelper.processtouchevent(e);
  } catch (exception ex) {
   ex.printstacktrace();
  }
  return false;
 }
 private void dispatchdragevent(int mainleft) {
  if (draglistener == null) {
   return;
  }
  float percent = mainleft / (float) range;
  animateview(percent);
  draglistener.ondrag(percent);
  status laststatus = status;
  if (laststatus != getstatus() && status == status.close) {
   draglistener.onclose();
  } else if (laststatus != getstatus() && status == status.open) {
   draglistener.onopen();
  }
 }
 private void animateview(float percent) {
  float f1 = 1 - percent * 0.3f;
  viewhelper.setscalex(vg_main, f1);
  viewhelper.setscaley(vg_main, f1);
  viewhelper.settranslationx(vg_left, -vg_left.getwidth() / 2.3f
    + vg_left.getwidth() / 2.3f * percent);
  viewhelper.setscalex(vg_left, 0.5f + 0.5f * percent);
  viewhelper.setscaley(vg_left, 0.5f + 0.5f * percent);
  viewhelper.setalpha(vg_left, percent);
  if (isshowshadow) {
   viewhelper.setscalex(iv_shadow, f1 * 1.4f * (1 - percent * 0.12f));
   viewhelper.setscaley(iv_shadow, f1 * 1.85f * (1 - percent * 0.12f));
  }
  getbackground().setcolorfilter(
    evaluate(percent, color.black, color.transparent),
    mode.src_over);
 }
 private integer evaluate(float fraction, object startvalue, integer endvalue) {
  int startint = (integer) startvalue;
  int starta = (startint >> 24) & 0xff;
  int startr = (startint >> 16) & 0xff;
  int startg = (startint >> 8) & 0xff;
  int startb = startint & 0xff;
  int endint = (integer) endvalue;
  int enda = (endint >> 24) & 0xff;
  int endr = (endint >> 16) & 0xff;
  int endg = (endint >> 8) & 0xff;
  int endb = endint & 0xff;
  return (int) ((starta + (int) (fraction * (enda - starta))) << 24)
    | (int) ((startr + (int) (fraction * (endr - startr))) << 16)
    | (int) ((startg + (int) (fraction * (endg - startg))) << 8)
    | (int) ((startb + (int) (fraction * (endb - startb))));
 }
 @override
 public void computescroll() {
  if (draghelper.continuesettling(true)) {
   viewcompat.postinvalidateonanimation(this);
  }
 }
 public enum status {
  drag, open, close
 }
 public status getstatus() {
  if (mainleft == 0) {
   status = status.close;
  } else if (mainleft == range) {
   status = status.open;
  } else {
   status = status.drag;
  }
  return status;
 }
 public void open() {
  open(true);
 }
 public void open(boolean animate) {
  if (animate) {
   if (draghelper.smoothslideviewto(vg_main, range, 0)) {
    viewcompat.postinvalidateonanimation(this);
   }
  } else {
   vg_main.layout(range, 0, range * 2, height);
   dispatchdragevent(range);
  }
 }
 public void close() {
  close(true);
 }
 public void close(boolean animate) {
  if (animate) {
   if (draghelper.smoothslideviewto(vg_main, 0, 0)) {
    viewcompat.postinvalidateonanimation(this);
   }
  } else {
   vg_main.layout(0, 0, width, height);
   dispatchdragevent(0);
  }
 }
}

mainactivity

package cn.edu.rjxy.activity;
import java.util.arraylist;
import java.util.hashmap;
import java.util.list;
import java.util.map;
import cn.edu.rjxy.activity.draglayout.draglistener;
import android.app.activity;
import android.os.bundle;
import android.view.view;
import android.view.view.onclicklistener;
import android.widget.adapterview;
import android.widget.adapterview.onitemclicklistener;
import android.widget.imagebutton;
import android.widget.linearlayout;
import android.widget.listview;
import android.widget.simpleadapter;
import android.widget.textview;
import android.widget.toast;
public class mainactivity extends activity {
 /** 左边侧滑菜单 */
 private draglayout mdraglayout;
 private listview menulistview;// 菜单列表
 private imagebutton menusettingbtn;// 菜单呼出按钮
 private linearlayout menu_header;
 private textview menu_setting;
 @override
 protected void oncreate(bundle savedinstancestate) {
  super.oncreate(savedinstancestate);
  setcontentview(r.layout.activity_main);
  menu_setting=(textview) this.findviewbyid(r.id.tv_setting);
  menu_header = (linearlayout) this.findviewbyid(r.id.menu_header);
  /**
   * 如果需要在别的activity界面中也实现侧滑菜单效果，需要在布局中引入draglayout（同本activity方式），
   * 然后在oncreate中声明使用; activity界面部分，需要包裹在myrelativelayout中.
   */
  mdraglayout = (draglayout) findviewbyid(r.id.dl);
  mdraglayout.setdraglistener(new draglistener() {// 动作监听
     @override
     public void onopen() {
     }
     @override
     public void onclose() {
     }
     @override
     public void ondrag(float percent) {
     }
    });
  // 生成测试菜单选项数据
  list<map<string, object>> data = getmenudata();
  menulistview = (listview) findviewbyid(r.id.lv);
  menulistview.setadapter(new simpleadapter(this, data,
    r.layout.menulist_item_text, new string[] { "item", "image" },
    new int[] { r.id.menu_text, r.id.menu_imageview1 }));
  // 添加监听，可点击呼出菜单
  menusettingbtn = (imagebutton) findviewbyid(r.id.menu_imgbtn);
  menusettingbtn.setonclicklistener(new onclicklistener() {
   @override
   public void onclick(view v) {
    // todo auto-generated method stub
    mdraglayout.open();
   }
  });
  initresidelistener();// 自定义添加的东东
 }
 private void initresidelistener() {
  // todo auto-generated method stub
  // 点击个人中心
  menu_header.setonclicklistener(new onclicklistener() {
   @override
   public void onclick(view v) {
    // todo auto-generated method stub
    toast.maketext(mainactivity.this, "进入个人中心界面", toast.length_long).show();
   }
  });
  // 点击子菜单选项
  menulistview.setonitemclicklistener(new onitemclicklistener() {
   @override
   public void onitemclick(adapterview<?> parent, view view,
     int position, long id) {
    // todo auto-generated method stub
    switch (position) {
    case 0:
     toast.maketext(mainactivity.this, "0", toast.length_long).show();
     break;
    case 1:
     toast.maketext(mainactivity.this, "1", toast.length_long).show();
     break;
    case 2:
     toast.maketext(mainactivity.this, "2", toast.length_long).show();
     break;
    case 3:
     toast.maketext(mainactivity.this, "3", toast.length_long).show();
     break;
    case 4:
     toast.maketext(mainactivity.this, "4", toast.length_long).show();
     break;
    case 5:
     toast.maketext(mainactivity.this, "5", toast.length_long).show();
     break;
    default:
     break;
    }
   }
  });
  //进入设置界面
  menu_setting.setonclicklistener(new onclicklistener() {
   @override
   public void onclick(view v) {
    // todo auto-generated method stub
    toast.maketext(mainactivity.this, "进入设置界面", toast.length_long).show();
   }
  });
 }
 private list<map<string, object>> getmenudata() {
  // todo auto-generated method stub
  list<map<string, object>> data = new arraylist<map<string, object>>();  
  map<string, object> item;
  item = new hashmap<string, object>();
  item.put("item", "需参加会议");
  item.put("image", r.drawable.ic_launcher);
  data.add(item);
  item = new hashmap<string, object>();
  item.put("item", "已参加会议");
  item.put("image", r.drawable.ic_launcher);
  data.add(item);
  item = new hashmap<string, object>();
  item.put("item", "个人信息完善");
  item.put("image", r.drawable.ic_launcher);
  data.add(item);
  item = new hashmap<string, object>();
  item.put("item", "密码修改");
  item.put("image", r.drawable.ic_launcher);
  data.add(item);
  return data;
 }
}

以上所述是小编给大家介绍的android侧滑导航栏的实例代码，希望对大家有所帮助