今天學習的新內(nèi)容是側(cè)滑導航欄,我想大家肯定都比較熟悉了,因為這個效果在qq里面也有,最近一直跟室友們玩的游戲是快速讓自己的頭像的點贊量上千。當然我的效果跟qq是沒有辦法比的,因為那里面的功能是在是太強大了。下面我來展示一下我做的效果截圖。
十載的莘縣網(wǎng)站建設(shè)經(jīng)驗,針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù),響應(yīng)快,48小時及時工作處理。成都全網(wǎng)營銷的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同,自動調(diào)整莘縣建站的顯示方式,使網(wǎng)站能夠適用不同顯示終端,在瀏覽器中調(diào)整網(wǎng)站的寬度,無論在任何一種瀏覽器上瀏覽網(wǎng)站,都能展現(xiàn)優(yōu)雅布局與設(shè)計,從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)公司從事“莘縣網(wǎng)站設(shè)計”,“莘縣網(wǎng)站推廣”以來,每個客戶項目都認真落實執(zhí)行。
我做的界面有點丑,但是對比之前已經(jīng)是有了很大的改觀了。想做這樣的效果的話可以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 { /** 左邊側(cè)滑菜單 */ 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界面中也實現(xiàn)側(cè)滑菜單效果,需要在布局中引入DragLayout(同本Activity方式), * 然后在onCreate中聲明使用; Activity界面部分,需要包裹在MyRelativeLayout中. */ mDragLayout = (DragLayout) findViewById(R.id.dl); mDragLayout.setDragListener(new DragListener() {// 動作監(jiān)聽 @Override public void onOpen() { } @Override public void onClose() { } @Override public void onDrag(float percent) { } }); // 生成測試菜單選項數(shù)據(jù) List
以上所述是小編給大家介紹的Android側(cè)滑導航欄的實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!