十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
今天学习的新内容是侧滑导航栏,我想大家肯定都比较熟悉了,因为这个效果在qq里面也有,最近一直跟室友们玩的游戏是快速让自己的头像的点赞量上千。当然我的效果跟qq是没有办法比的,因为那里面的功能是在是太强大了。下面我来展示一下我做的效果截图。
十载的莘县网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。成都全网营销的优势是能够根据用户设备显示端的尺寸不同,自动调整莘县建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联公司从事“莘县网站设计”,“莘县网站推广”以来,每个客户项目都认真落实执行。
我做的界面有点丑,但是对比之前已经是有了很大的改观了。想做这样的效果的话可以ps几张比较好看的图片。
下面就是粘贴我代码的时间了。
activity_main.xml
leftmenu.xml
<?xml version="1.0" encoding="utf-8"?>
menulist_item_text.xml
middleview.xml
<?xml version="1.0" encoding="utf-8"?>
leftmenu_btn_selector.xml
<?xml version="1.0" encoding="utf-8"?>
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
以上所述是小编给大家介绍的Android侧滑导航栏的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!