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.MyRelativeLayoutandroid: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" > <LinearLayoutandroid: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" > <TextViewandroid: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" /> <TextViewandroid: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> <TextViewandroid: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" /> <ListViewandroid: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" > <LinearLayoutandroid: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" > <RelativeLayoutandroid: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 {@Overridepublic boolean onScroll（MotionEvent e1, MotionEvent e2, float dx,float dy） { return Math.abs（dy） <= Math.abs（dx）;} } private ViewDragHelper.Callback dragHelperCallback = new ViewDragHelper.Callback（） {@Overridepublic int clampViewPositionHorizontal（View child, int left, int dx） { if （mainLeft + dx < 0） {return 0; } else if （mainLeft + dx > range） {return range; } else {return left; }}@Overridepublic boolean tryCaptureView（View child, int pointerId） { return true;}@Overridepublic int getViewHorizontalDragRange（View child） { return width;}@Overridepublic 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（）; }}@Overridepublic 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 stubmDragLayout.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 stubToast.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 stubswitch （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 stubToast.makeText（MainActivity.this, "进入设置界面", Toast.LENGTH_LONG）.show（）; }}）; } private List<Map<String, Object>> getMenuData（） {// TODO Auto-generated method stubList<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侧滑导航栏的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！