首页 > 系统 > Android > 正文

Android侧滑导航栏的实例代码

2019-12-12 03:58:03
字体:
来源:转载
供稿:网友

今天学习的新内容是侧滑导航栏,我想大家肯定都比较熟悉了,因为这个效果在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侧滑导航栏的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表