1. 所在位置
  2. 首页
  3. 经验笔记
  4. 正文

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侧滑导航栏的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对鸟哥教程(niaoge.com)网站的支持！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#niaoge.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

基础教程
猜你喜欢