Android群英传笔记第三章（四）

作者: 学android的小新 | 来源:发表于2016-06-13 21:05 被阅读370次

自定义ViewGroup

在学自定义ViewGroup的时候对书中的知识有部分没有掌握，所以跳到了本书的第五章进行学习了相关的内容
以下为第五章笔记（学完这章会把第三章的笔记补上）

5.1 滑动效果是如何产生的

滑动一个View本质上就是移动一个View，通过不断改变View的坐标来实现这个效果；要实现View的滑动就要监听用户触摸事件，并根据传入的坐标，动态不断的改变View的坐标，从而实现滑动
#######5.1.1Android坐标系
在Android中将屏幕的左上角的顶点作为Android坐标系的原点，这个点向右是X轴正方形，向下是y轴正方向
系统通过getLocationOnScreen(location)方法（PS：int [] location = new int[2]，获取后location[0]代表x坐标location[1]代表y坐标）来获取Android坐标系中点的坐标

5.1.2 视图坐标系

描述的是子视图在父视图中的位置关系，以父视图的左上角为坐标原点
####### 5.1.3触摸事件-MotionEvent
在MotionEvent中封装了一些常用的事件常量
单点触摸按下动作

public static final int ACTION_DOWN = 0;
单点触摸离开动作
public static final int ACTION_UP = 1;
触摸点移动动作
public static final int ACTION_MOVE = 2;
触摸动作取消
public static final int ACTION_CANCEL = 3;
触摸动作超出边界
publicstatic final int ACTION_OUTSIDE = 4;
多点触摸按下动作
public static final int ACTION_POINTER_DOWN = 5;
多点离开动作
public static final int ACTION_POINTER_UP = 6;
通常我们会在onTouchEvent(MotionEvent event)方法中通过event.getAction()来获取触控事件的类型，并使用switch-case方法来进行筛选
使用的模板

@Override
    public boolean onTouchEvent(MotionEvent event) {
        //获取当前输入的的X,Y坐标（视图坐标）
        int x = (int) event.getX();
        int y = (int) event.getY();
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN :
                //处理输入的按下事件
                break;
            case MotionEvent.ACTION_HOVER_MOVE:
                //处理输入的移动事件
                break;
            case MotionEvent.ACTION_UP:
                //处理输入的离开事件
                break;
        }
        return true;
    }

坐标系总结

Android坐标系

getLeft()：View自身的左边到父布局左边的距离
getRight()：View自身的右边到父布局左边的距离
getBottom()：View自身的底边到父布局顶边的距离
getTop()：View自身的顶边到父布局顶边的距离

getX()：触摸点到控件左边的距离（相对距坐标）
getY()：触摸点到控件顶边的距离（相对坐标）
getRawX()：触摸点到屏幕左边的距离（绝对坐标）
getRawY()：触摸点到屏幕顶边的距离（绝对坐标）

5.2实现滑动的七中方法

原理：当触摸View的时候，系统记下当前触摸点的坐标，当手指移动时，系统记下移动后触摸点的坐标，两者之差获取到偏移量，并通过偏移量来修改View的坐标，不断的重复，从而实现滑动

5.2.1layout方法

package com.example.phonejason;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
 * Created by 小新 on 2016/6/9.
 */
public class MyRec extends View {
    private int lastX,lastY;
    private Paint mPaint = null;
    public MyRec(Context context) {
        super(context);
        mPaint = new Paint();
    }

    public MyRec(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
    }

    public MyRec(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(Color.RED);
        //画一个矩形
        canvas.drawRect(0,0,100,100,mPaint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int x = (int) event.getX();
        int y = (int) event.getY();
        switch (event.getAction()){
            //第一次触摸按下的时候获取到的x,y赋值给lastX，lastY
            case MotionEvent.ACTION_DOWN:
                lastX = x;
                lastY = y;
                break;
            //触摸移动时x,y会改变，和第一次触摸的lastX，lastY相减算出偏移
            case MotionEvent.ACTION_MOVE:
                int offsetX = x - lastX;
                int offsetY = y - lastY;
                //每次移动都会调用latout()方法对自己重新布局，从而达到移动View的效果
                layout(getLeft()+offsetX,getTop()+offsetY,getRight()+offsetX,getBottom()+offsetY);
                break;
            default:
                break;
        }
        return true;
    }
}

也可以使用绝对绝对坐标来计算偏移量，但是和相对坐标有一定的区别（使用getRawX()和getRawY()是当前View的左边的距离距屏幕左边的距离+getX()，这个值随着View的滑动一直是变化的；但是getX是触摸点距离控件左边的距离，因为控件也是滑动的所以getX()是一直不变化的，所以在每次执行完ACTION_MOVE时我们重新设置初始坐标，这样才能准确获取偏移量）

package com.example.phonejason;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
 * Created by 小新 on 2016/6/9.
 */
public class MyRec extends View {
    private int lastX,lastY;
    private Paint mPaint = null;
    public MyRec(Context context) {
        super(context);
        mPaint = new Paint();
    }

    public MyRec(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
    }

    public MyRec(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(Color.RED);
        //画一个矩形
        canvas.drawRect(0,0,100,100,mPaint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int rawX = (int) event.getRawX();
        int rawY = (int) event.getRawY();
        switch (event.getAction()){
            //第一次触摸按下的时候获取到的x,y赋值给lastX，lastY
            case MotionEvent.ACTION_DOWN:
                lastX = rawX;
                lastY = rawY;
                break;
            //触摸移动时x,y会改变，和第一次触摸的lastX，lastY相减算出偏移
            case MotionEvent.ACTION_MOVE:
                int offsetX = rawX - lastX;
                int offsetY = rawY - lastY;
                //每次移动都会调用latout()方法对自己重新布局，从而达到移动View的效果
                layout(getLeft()+offsetX,getTop()+offsetY,getRight()+offsetX,getBottom()+offsetY);
                lastX = rawX;
                lastY = rawY;
                break;
            default:
                break;
        }
        return true;
    }
}

5.2.2 offsetLeafAndRight()与offsetTopAndBottom()

这个方法是系统提供的一个对左右、上下移动API的封装，使用如下代码可以完成View的重新布局，效果与Layout一样，代码如下

offsetLeftAndRight(offsetX);
 offsetTopAndBottom(offsetY);

5.2.3 LayoutParams

使用getLayoutParams()来获取一个View的LayoutParams，LayoutParams保存一个View的布局参数

 LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) getLayoutParams();
layoutParams.leftMargin = getLeft()+offsetX;
layoutParams.topMargin = getTop()+offsetY;
setLayoutParams(layoutParams);

注意：获取LayoutParams时需要根据View所在父布局的类型设置不同的类型；使用ViewGroup.MarginLayoutParams就不需要考虑父布局了，但是本质上是一样的

 ViewGroup.MarginLayoutParams marginLayoutParams = (ViewGroup.MarginLayoutParams) getLayoutParams();
                marginLayoutParams.leftMargin = getLeft()+offsetX;
                marginLayoutParams.topMargin = getTop()+offsetY;
                setLayoutParams(marginLayoutParams);

5.2.4 scrollTo与scrollBy()

scrollBy(x,y)表示移动到一个具体的坐标(x,y)；
scrollTo(dx,dy)表示移动的增量为dx,dy；
scrollBy(x,y)和scrollTo(dx,dy)是让View的内容移动，例如TextView的内容就是文本；ImageView的内容就是drawable；如果在ViewGroup中使用，那么移动的是所有的View；所以我们要移动图形的话我们需要获取它的父布局然后移动（这里要注意一点很重要的是：父布局往右移动20px，字布局是向左移动20px，实际上我们想子布局向右移动20px那么我们就需要在父布局中往右移动-20px；选的参考系不一样）

package com.example.phonejason;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

/**
 * Created by 小新 on 2016/6/9.
 */
public class MyRec extends View {
    private int lastX,lastY;
    private Paint mPaint = null;
    public MyRec(Context context) {
        super(context);
        mPaint = new Paint();
    }

    public MyRec(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
    }

    public MyRec(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(Color.RED);
        //画一个矩形
        canvas.drawRect(0,0,100,100,mPaint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int x = (int) event.getX();
        int y = (int) event.getY();
        switch (event.getAction()){
            //第一次触摸按下的时候获取到的x,y赋值给lastX，lastY
            case MotionEvent.ACTION_DOWN:
                lastX = x;
                lastY = y;
                break;
            //触摸移动时x,y会改变，和第一次触摸的lastX，lastY相减算出偏移
            case MotionEvent.ACTION_MOVE:
                int offsetX = x - lastX;
                int offsetY = y - lastY;
                //注意这里要取负数
                ((View) getParent()).scrollBy(-offsetX, -offsetY);
                break;
            default:
                break;
        }
        return true;
    }
}

学到这里我们就可以学回

自定义ViewGroup

ViewGroup的存在就是为了对其子View进行管理，为其子View添加显示、响应规则。自定义ViewGroup需要重写onMeasure()对其子View进行测量，onLayout()方法来确定子View的位置，onTouchEvent()增加响应事件
Demo实现一个类似ScrollView：
效果：上下滑动的功能，当一个子View向上滑动大于一定的距离后，松开手指，它将自动向上滑动，显示下一个子View。同理向下也是一样的道理

package com.example.mygroup;

import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.Scroller;

/**
 * Created by 小新 on 2016/6/13.
 */
public class mygroup extends ViewGroup {

    private int mScreenHeight;
    private Scroller mScroller;
    private int mLastY;
    private int mStart;
    private int mEnd;

    public mygroup(Context context) {
        super(context);
        initView(context);
    }

    public mygroup(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }

    public mygroup(Context context, AttributeSet attrs,
                        int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context);
    }

    private void initView(Context context) {
        WindowManager wm = (WindowManager) context.getSystemService(
                Context.WINDOW_SERVICE);
        DisplayMetrics dm = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(dm);
        mScreenHeight = dm.heightPixels;
        mScroller = new Scroller(context);
    }

    @Override
    protected void onLayout(boolean changed,
                            int l, int t, int r, int b) {
        int childCount = getChildCount();
        // 璁剧疆ViewGroup鐨勯珮搴?
        MarginLayoutParams mlp = (MarginLayoutParams) getLayoutParams();
        mlp.height = mScreenHeight * childCount;
        setLayoutParams(mlp);
        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            if (child.getVisibility() != View.GONE) {
                child.layout(l, i * mScreenHeight,
                        r, (i + 1) * mScreenHeight);
            }
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec,
                             int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int count = getChildCount();
        for (int i = 0; i < count; ++i) {
            View childView = getChildAt(i);
            measureChild(childView,
                    widthMeasureSpec, heightMeasureSpec);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int y = (int) event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mLastY = y;
                mStart = getScrollY();
                break;
            case MotionEvent.ACTION_MOVE:
                if (!mScroller.isFinished()) {
                    mScroller.abortAnimation();
                }
                int dy = mLastY - y;
                if (getScrollY() < 0) {
                    dy = 0;
                }
                if (getScrollY() > getHeight() - mScreenHeight) {
                    dy = 0;
                }
                scrollBy(0, dy);
                mLastY = y;
                break;
            case MotionEvent.ACTION_UP:
                int dScrollY = checkAlignment();
                if (dScrollY > 0) {
                    if (dScrollY < mScreenHeight / 3) {
                        mScroller.startScroll(
                                0, getScrollY(),
                                0, -dScrollY);
                    } else {
                        mScroller.startScroll(
                                0, getScrollY(),
                                0, mScreenHeight - dScrollY);
                    }
                } else {
                    if (-dScrollY < mScreenHeight / 3) {
                        mScroller.startScroll(
                                0, getScrollY(),
                                0, -dScrollY);
                    } else {
                        mScroller.startScroll(
                                0, getScrollY(),
                                0, -mScreenHeight - dScrollY);
                    }
                }
                break;
        }
        postInvalidate();
        return true;
    }
    private int checkAlignment() {
        int mEnd = getScrollY();
        //mEnd和mStart是在父布局中的位置，所以当
        //最后一次的值减去第一次的值>0的话向上
        boolean isUp = ((mEnd - mStart) > 0) ? true : false;
        int lastPrev = mEnd % mScreenHeight;
        int lastNext = mScreenHeight - lastPrev;
        if (isUp) {
            return lastPrev;
        } else {
            return -lastNext;
        }
    }
    @Override
    public void computeScroll() {
        super.computeScroll();
        if (mScroller.computeScrollOffset()) {
            scrollTo(0, mScroller.getCurrY());
            postInvalidate();
        }
    }

}

在布局中使用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="com.example.mygroup.MainActivity">

    <com.example.mygroup.mygroup
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitXY"
            android:src="@drawable/test1" />

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitXY"
            android:src="@drawable/test2" />

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitXY"
            android:src="@drawable/test3" />

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitXY"
            android:src="@drawable/test4" />
    </com.example.mygroup.mygroup>
</LinearLayout>

Android群英传笔记第三章（四）

自定义ViewGroup

5.1 滑动效果是如何产生的

5.1.2 视图坐标系

5.2实现滑动的七中方法

5.2.1layout方法

5.2.2 offsetLeafAndRight()与offsetTopAndBottom()

5.2.3 LayoutParams

5.2.4 scrollTo与scrollBy()

自定义ViewGroup

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

安卓开发

Android开发经验谈

Android知识

Android干货

Android