Android 左右滑動菜單之基本UI視圖動畫

此筆記是爲了複習以前在某視頻網站上的教程,下面附上代碼

主UI類:

package com.dh.mc.de;

import android.content.Context;
import android.graphics.Color;
import android.graphics.Point;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.animation.DecelerateInterpolator;
import android.widget.FrameLayout;
import android.widget.RelativeLayout;
import android.widget.Scroller;

/**
 * Created by M.c on 2015/4/14.
 */
public class MenuAct extends RelativeLayout {

    private FrameLayout leftMenu, centerMenu, rightMenu;//左中右佈局控件

    private Context context;//上下文
    private Scroller mScroller;

    //構造函數1
    public MenuAct(Context context) {
        super(context);
        initView(context);
    }

    //構造函數2
    public MenuAct(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    //初始化左中右佈局控件
    private void initView(Context context) {
        this.context = context;
        mScroller = new Scroller(context, new DecelerateInterpolator());
        leftMenu = new FrameLayout(context);
        centerMenu = new FrameLayout(context);
        rightMenu = new FrameLayout(context);
        leftMenu.setBackgroundColor(Color.RED);//爲了看到效果 設置背景色
        centerMenu.setBackgroundColor(Color.GREEN);
        rightMenu.setBackgroundColor(Color.BLUE);
        addView(leftMenu); //添加布局到根佈局
        addView(centerMenu);
        addView(rightMenu);

    }

    //設置左中右佈局長寬
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        centerMenu.measure(widthMeasureSpec, heightMeasureSpec);//中間佈局就是整個屏幕大小
        int realWidth = MeasureSpec.getSize(widthMeasureSpec); //得到屏幕真實寬度
        int tempWidth = MeasureSpec.makeMeasureSpec((int) (realWidth * 0.8f), MeasureSpec.EXACTLY);//得到屏幕真實寬度的80%,用於設置左右佈局

        leftMenu.measure(tempWidth, heightMeasureSpec);  //設置左佈局
        rightMenu.measure(tempWidth, heightMeasureSpec); //設置右佈局


    }

    //設置佈局邊界在屏幕中的位置
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);

        centerMenu.layout(l, t, r, b);
        leftMenu.layout(l - leftMenu.getMeasuredWidth(), t, l, b);
        rightMenu.layout(l + centerMenu.getMeasuredWidth(), t, l + centerMenu.getMeasuredWidth() + rightMenu.getMeasuredWidth(), b);
    }


    private boolean isTestCompete,
            isLeftRightComplete;//

    //屏幕觸摸事件處理
    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        if (!isTestCompete) {
            getEventType(ev);
            return true;
        }

        if (isLeftRightComplete) {//若是是左右滑動
            switch (ev.getActionMasked()) {
                case MotionEvent.ACTION_MOVE:
                    int curScrollX = getScrollX();//滾動距離
                    int dis_x = (int) (ev.getX() - point.x);//手指按下後滑動距離
                    int expectX = -dis_x + curScrollX;
                    int finalX = 0; //初始化屏幕滑動距離
                    if (expectX < 0) { //向左滑動
                        finalX = Math.max(expectX, -leftMenu.getMeasuredWidth());
                    } else { //向右滑動
                        finalX = Math.min(expectX, rightMenu.getMeasuredWidth());
                    }

                    scrollTo(finalX, 0);//屏幕移動
                    point.x = (int) ev.getX();
                    break;
                case MotionEvent.ACTION_UP:
                case MotionEvent.ACTION_CANCEL:
                    curScrollX = getScrollX();
                    if (Math.abs(curScrollX) > leftMenu.getMeasuredWidth() >> 1) {//滑動大於屏幕距離一半時,啓動動畫
                        System.out.println("滑動距離: "+curScrollX);
                        if (curScrollX < 0) {//向左
                            mScroller.startScroll(curScrollX, 0, -leftMenu.getMeasuredWidth() - curScrollX, 0);
                        } else {//向右
                            mScroller.startScroll(curScrollX, 0, leftMenu.getMeasuredWidth() - curScrollX, 0);
                        }
                    } else {
                        mScroller.startScroll(curScrollX, 0, -curScrollX, 0);//距離不到返回原點

                    }
                    invalidate();//View重繪
                    isLeftRightComplete = false;
                    isTestCompete = false;
                    break;
            }
        } else {//上下滑動也要初始化
            switch (ev.getActionMasked()) {
                case MotionEvent.ACTION_UP:
                    isLeftRightComplete = false;
                    isTestCompete = false;
                    break;
            }
        }

        return super.dispatchTouchEvent(ev);

    }

    //滑動回調重寫
    @Override
    public void computeScroll() {
        super.computeScroll();
        if (!mScroller.computeScrollOffset()) {
            return;
        }
        int tempX = mScroller.getCurrX();//總滑動值
        scrollTo(tempX, 0);
    }

    private Point point = new Point(); //座標點
    private static final int DIS = 20;//超過20像素是 斷定爲移動

    //判斷滑動方向並得到座標
    private void getEventType(MotionEvent ev) {

        switch (ev.getActionMasked()) {
            default:
                break;
            case MotionEvent.ACTION_DOWN://按下
                point.x = (int) ev.getX();//按下時的座標,用point存
                point.y = (int) ev.getY();

                break;
            case MotionEvent.ACTION_MOVE://移動

                int dx = Math.abs((int) ev.getX() - point.x);//x軸移動距離
                int dy = Math.abs((int) ev.getY() - point.y);//y軸移動距離
                if (dx > DIS && dx > dy) { //左右滑動
                    isLeftRightComplete = true;
                    isTestCompete = true;
                    point.x = (int) ev.getX();//再次拿到座標
                    point.y = (int) ev.getY();
                } else if (dy > DIS && dy > dx) { //上下滑動
                    isLeftRightComplete = false;
                    isTestCompete = true;
                    point.x = (int) ev.getX();
                    point.y = (int) ev.getY();
                }

                break;

            case MotionEvent.ACTION_UP://手指擡起

            case MotionEvent.ACTION_CANCEL:

                break;
        }

    }
}


在Activity中使用

package com.dh.mc.de;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;


public class MainActivity extends ActionBarActivity {

    private MenuAct menu;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        menu = new MenuAct(this);
        setContentView(menu);
    }


}


若是很差的地方,請你們指出,誠心接受任何吐槽~~~~~~~~~~ 

後續也會再加入Fragment和點擊事件效果

相關文章
相關標籤/搜索