这篇文章主要介绍了 Android 侧滑导航栏的实例代码的相关资料, 需要的朋友可以参考下
Android 是一种基于 Linux 的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由 Google 公司和开放手机联盟领导及开发。尚未有统一中文名称,中国大陆地区较多人使用 "安卓" 或 "安致"。
今天学习的新内容是侧滑导航栏,我想大家肯定都比较熟悉了,因为这个效果在 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 侧滑导航栏的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 PHPERZ 网站的支持!
来源: http://www.phperz.com/article/17/0320/320136.html