美文网首页程序员技术栈
自制控件2 —— 自制控件 仿qq侧滑菜单

自制控件2 —— 自制控件 仿qq侧滑菜单

作者: 阿敏其人 | 来源:发表于2016-03-07 10:58 被阅读1170次

自定义控件——初识自定义控件里面,我们已经对自定义控件进行描述和分类。其分类分别是

  • 自制控件
  • 组合控件
  • 拓展控件

这篇博文里面,我们继续进行自制控件。

我们想要继续的是一个简单的仿造qq侧滑菜单。

先来看一下效果图

效果图.gif

在(初识自定义控件)中,我们知道了自定义控件分为三种

  • 自制控件
  • 组合控件
  • 拓展控件

在(自制控件1)中,我们自制了一个开关按钮View,这次,我们来做自制的ViewGroup,一个简单的仿qq策划菜单。

在(自制控件1)我们利用View.layout(l,t,r,b)这个api让View动起来。在本次的侧滑菜单里面,我们使用
ScrollTo和ScrollBy让View动起来
而且使用Scroller做弹性滑动。

如果对自制继承自ViewGroup的控件还没有一个大概的概念,可以通过(初识自定义控件)这篇博文里面的demo,进行一个大概的了解。

一、造起来一个ViewGroup

新建一个类,比如叫做SlideMenu,继承自ViewGroup

public class SlideMenu extends ViewGroup{
    public SlideMenu(Context context) {
        super(context);
    }
    public SlideMenu(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public SlideMenu(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
    }
}

.
.
然后我们在 activity_main 利用控件的全路径名引入这个控件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context="com.amqr.diyslidemenu.MainActivity">
    <com.amqr.diyslidemenu.view.SlideMenu
        android:id="@+id/mSmenu"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        >
    </com.amqr.diyslidemenu.view.SlideMenu>
</RelativeLayout>

.
.

二、弄两个布局文件,一个左侧菜单的,一个是主页部分的。SlideView里面把这两个布局加载出来

.
1、准备两个布局文件,左侧菜单的布局文件需要控制宽度,这里我们设置为200dp

左侧菜单 slide_left.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="200dp"
    android:layout_height="match_parent"
    android:background="#ff0000"
    >
    <!--左侧的菜单限定为200dp-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical"
        >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:text="本地"
            android:textSize="26sp"
            android:gravity="center"
            android:layout_marginTop="10dp"
            android:background="#689342"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:text="体育"
            android:textSize="26sp"
            android:gravity="center"
            android:layout_marginTop="10dp"
            android:background="#689342"
            />
    </LinearLayout>
    
</ScrollView>
左侧菜单.png

主页部分 slide_main.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:background="#ffffff"
    >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="主页内容区域"
        android:layout_gravity="center"
        android:textSize="30dp"
        android:layout_centerInParent="true"
        />
</RelativeLayout>
主页部分的.png

2、引用xml的布局代码里面include进来左侧菜单和布局文件

这个include的先后顺序需要严格区分
因为待会需要结合SlideView的onFinishInflate相互结合

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context="com.amqr.diyslidemenu.MainActivity">
    <com.amqr.diyslidemenu.view.SlideMenu
        android:id="@+id/mSmenu"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        >
        <!--这个include的先后顺序需要严格区分,
       因为待会需要结合SlideView的onFinishInflate相互结合 -->
        <!--左侧菜单-->
        <include layout="@layout/slide_left"/>
        <!--主页部分-->
        <include layout="@layout/slide_main"/>
    </com.amqr.diyslidemenu.view.SlideMenu>
</RelativeLayout>

三、利用SlideView的onFinishInflate方法加载view

利用SlideView的onFinishInflate方法加载view

public class SlideMenu extends ViewGroup{
    private View mLeftMenu;
    private View mMainPage;
    public SlideMenu(Context context) {
        super(context);
    }
    public SlideMenu(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public SlideMenu(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    // 当SlideView被xml引用加载之后完成,这个方法就会调用。
    /**
     * Finalize inflating a view from XML.  This is called as the last phase
     * of inflation, after all child views have been added.
     */
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate(); // ???
        //  getChildAt 作用 Returns the view at the specified position in the group.
        //  精确地返回在ViewGroup里面的View的位置 所以我们的include顺序很重要
        mLeftMenu = getChildAt(0); // 左侧菜单
        mMainPage = getChildAt(1);
    }
}

看一下onFinishInflate这个方法,属于View类下一个方法

    /**
     * Finalize inflating a view from XML.  This is called as the last phase
     * of inflation, after all child views have been added.
     *
     * <p>Even if the subclass overrides onFinishInflate, they should always be
     * sure to call the super method, so that we get called.
     */
    @CallSuper
    protected void onFinishInflate() {
    }

getChildAt的作用是 精确地返回在ViewGroup里面的View的位置 所以我们的include顺序很重要

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate(); // ???
        //  getChildAt 作用 Returns the view at the specified position in the group.
        //  精确地返回在ViewGroup里面的View的位置 所以我们的include顺序很重要
        mLeftMenu = getChildAt(0); // 左侧菜单
        mMainPage = getChildAt(1);
    }

四、利用onMeasure来孩子测量大小

首先记住,不管干嘛,首先先把现在onMeasure里面把setMeasuredDimension方法给写上。

说在测量之前的第一点

我们的ViewGroup也是View这点我们都知道,其实到最终,ViewGroup到最后还是给他的父亲调用,他的父亲就是使用使用measure来测量ViewGroup的大小的。说了这么多,我们还是看一下代码吧。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context="com.amqr.diyslidemenu.MainActivity">



    <!--这个ViewGroup,他的父亲就是上面的RelativeLayout,RelativeLayout就是使用measure来测量这个SlideView的大小的-->
    <com.amqr.diyslidemenu.view.SlideMenu
        android:id="@+id/mSmenu"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        >
        <!--这个include的先后顺序需要严格区分,
       因为待会需要结合SlideView的onFinishInflate相互结合 -->
        <!--左侧菜单-->
        <include layout="@layout/slide_left"/>
        <!--主页部分-->
        <include layout="@layout/slide_main"/>
    </com.amqr.diyslidemenu.view.SlideMenu>
</RelativeLayout>

这个SlideMenu是ViewGroup,他的父亲就是上面的RelativeLayout,RelativeLayout就是使用measure来测量这个SlideView的大小的

明白了onMeasure是给measure调用的之后,我们就应该清楚地知道,onMeasure是父亲给孩子用的宽高(父亲把自己所能给的都给了,也就是最大的,我们可以采用父亲的宽高,我们可以自己指定宽高。但是孩子的自由发挥的空间没有办法超出父亲所能给的最大值,但是可以比父亲小)

说在测量之前的第二点

怎么得到一个View在xml布局文件里面宽?
利用view.getLayoutParams().width,高类似

有了前面的两点说明,现在我们可以真正式在SlideMenu里面复写onMeasere方法并且进行测量了

代码如下:

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        // makeMeasureSpec 的时候,第一个参数是大小,第二个参数是模式
        // 宽度我们使用左侧菜单的在xml里面的200dp,因为指定大小所以模式是MeasureSpec.EXACTLY
        // 怎么得到一个View在xml布局文件里面宽,利用view.getLayoutParams().width,高类似
        int leftViewMeasureSpecWidth = MeasureSpec.
                makeMeasureSpec(mLeftMenu.getLayoutParams().width, MeasureSpec.EXACTLY);
        //左侧菜单的的高度我们希望填充父窗体,而当前onMeasure里面的heightMeasureSpec根据我们的布局显然就是填充父窗体
        // 所以一直接用父亲传过来的这个32位参数就好
        mLeftMenu.measure(leftViewMeasureSpecWidth,heightMeasureSpec);
        // 至于主页页面,我们的希望他宽高都是填充父窗体,所以直接用onMeasure里面传过来的参数就好啦
        mMainPage.measure(widthMeasureSpec,heightMeasureSpec);
        // onMeasure一开始什么都不管就应该复写setMeasuredDimension,不然报错。
        // 除非我们的自定义控件是宽高都是填充父窗体,那么我们就留着下面这句super的代码就可以
        // super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(widthMeasureSpec,heightMeasureSpec);
    }

关于测量的View的measure方法的参数可以参考(初识自定义控件)

五、利用onLayout给自孩子摆放位置

在onMeasure里面给孩子布局采用的方法是 child.measure方法
利用onLayout给自己孩子摆放位置相应来说用的是 child.layout方法

摆放之前,了解getMeasuredWidth();和getWidth()的区别

我们下面说的layout的前提是已经进行onMeasure被执行之后(onMeasure里面必须执行setMeasuredDimension)
getWidth()必须在控件的 layout(l,t,r,b) 被执行过后才能获取到有效的值,也就在View被绘制好之后才有效
getMeasuredWidth(); 是 layout(l,t,r,b)执行之前就会获取到View的宽度的,也就是在View被绘制好之前就可以生效的。

先测量,后摆放。

也就是 先onMeasure,后onLayout。

有了这些了解,我们可以来很好地摆放位置了

代码如下

 @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int leftViewWidth = mLeftMenu.getMeasuredWidth();
        int leftViewHeight = mLeftMenu.getMeasuredHeight();
        // l t r b  左上右下  左上一点,右下一点,两点确定了一个矩形的大小
        mLeftMenu.layout(-leftViewWidth,0,0,leftViewHeight);
        int mainViewWidth = mMainPage.getMeasuredWidth();
        int mainViewHeight = mMainPage.getMeasuredHeight();
        mMainPage.layout(0,0,mainViewWidth,mainViewHeight);
    }

到此为止先停一下,看一下SlideView里面目前的代码:

SlideMenu

public class SlideMenu extends ViewGroup{
    private View mLeftMenu;
    private View mMainPage;
    public SlideMenu(Context context) {
        super(context);
    }
    public SlideMenu(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public SlideMenu(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    // 当SlideView被xml引用加载之后完成,这个方法就会调用。
    /**
     * Finalize inflating a view from XML.  This is called as the last phase
     * of inflation, after all child views have been added.
     */
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate(); // ???
        //  getChildAt 作用 Returns the view at the specified position in the group.
        //  精确地返回在ViewGroup里面的View的位置 所以我们的include顺序很重要
        mLeftMenu = getChildAt(0); // 左侧菜单
        mMainPage = getChildAt(1);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        // makeMeasureSpec 的时候,第一个参数是大小,第二个参数是模式
        // 宽度我们使用左侧菜单的在xml里面的200dp,因为指定大小所以模式是MeasureSpec.EXACTLY
        // 怎么得到一个View在xml布局文件里面宽,利用view.getLayoutParams().width,高类似
        int leftViewMeasureSpecWidth = MeasureSpec.
                makeMeasureSpec(mLeftMenu.getLayoutParams().width, MeasureSpec.EXACTLY);
        //左侧菜单的的高度我们希望填充父窗体,而当前onMeasure里面的heightMeasureSpec根据我们的布局显然就是填充父窗体
        // 所以一直接用父亲传过来的这个32位参数就好
        mLeftMenu.measure(leftViewMeasureSpecWidth,heightMeasureSpec);
        // 至于主页页面,我们的希望他宽高都是填充父窗体,所以直接用onMeasure里面传过来的参数就好啦
        mMainPage.measure(widthMeasureSpec,heightMeasureSpec);
        // onMeasure一开始什么都不管就应该复写setMeasuredDimension,不然报错。
        // 除非我们的自定义控件是宽高都是填充父窗体,那么我们就留着下面这句super的代码就可以
        // super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(widthMeasureSpec,heightMeasureSpec);
    }
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int leftViewWidth = mLeftMenu.getMeasuredWidth();
        int leftViewHeight = mLeftMenu.getMeasuredHeight();
        Log.d("Slide","getWidth:"+mLeftMenu.getWidth()+"   mLeftMenu.getHeight():"+mLeftMenu.getHeight());
        Log.d("Slide","getMeasuredWidth:"+mLeftMenu.getMeasuredWidth()+"   getMeasuredHeight:"+mLeftMenu.getMeasuredHeight());
        // l t r b  左上右下  左上一点,右下一点,两点确定了一个矩形的大小
        mLeftMenu.layout(-leftViewWidth,0,0,leftViewHeight);
        int mainViewWidth = mMainPage.getMeasuredWidth();
        int mainViewHeight = mMainPage.getMeasuredHeight();
        mMainPage.layout(0, 0, mainViewWidth, mainViewHeight);
    }
}

MainActivity

package com.amqr.diyslidemenu;

import android.app.Activity;

import android.os.Bundle;

public class MainActivity extends Activity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

    }

}

运行效果:

当前还无法拉动,但是我们已经过能让界面显示出来了。

暂时效果.png

六、开始做移动效果

移动的方式有很多种,这次我们采用的是ScrollTo+ScrollBy方式

说明1: ScrollTo和ScrollBy 的了解

ScrollTo和ScrollBy就是手机屏幕的左上角动,而不是View或者ViewGroup动。

区别是,ScrollTo每次都是都是想比较于最开始的左上角(0,0)
ScrollBy每次的移动是累计的

比如,调用ScollTo(20,0),的时候,那么手机屏幕回向右移动20个单位,但是再次调用ScollTo(20,0),的时候是不动的,因为每次都是跟最开始的(0,0)做比较;然后我们调用ScrollTo(-20,0)的时候,就回到最开的原点。

ScrollBy是累计的,第一次调用ScrollBy(20,0),向右移动20 个单位,再次调用ScrollBy(20,0),那么屏幕的左上角就会移动到(40,0)的位置,因为累计嘛。

说明2: getX和getRawX的了解

getX()是触摸的点与控件自身的距离
getRawX()是触摸的点与屏幕的距离
结论:当你触到按钮时,x,y是相对于该按钮左上点(控件本身)的相对位置。而rawx,rawy始终是相对于屏幕的位置。

图片摘自csdn

说明3:getScrollX()和getScrollY()的了解

getScrollX(): 手机屏幕显示区域左上角 与 你指定的View的左上角的横向距离getScrollY(): 手机屏幕显示区域左上角 与 你指定的View的左上角的垂直距离(因为子视图的高度和手机屏幕高度一样)

六.1、简单的移动,不会产生越界现象

public class SlideMenu extends ViewGroup{
    private View mLeftMenu;
    private View mMainPage;
    private int downX;
    public SlideMenu(Context context) {
        super(context);
    }
    public SlideMenu(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public SlideMenu(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    // 当SlideView被xml引用加载之后完成,这个方法就会调用。
    /**
     * Finalize inflating a view from XML.  This is called as the last phase
     * of inflation, after all child views have been added.
     */
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate(); // ???
        //  getChildAt 作用 Returns the view at the specified position in the group.
        //  精确地返回在ViewGroup里面的View的位置 所以我们的include顺序很重要
        mLeftMenu = getChildAt(0); // 左侧菜单
        mMainPage = getChildAt(1);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        // makeMeasureSpec 的时候,第一个参数是大小,第二个参数是模式
        // 宽度我们使用左侧菜单的在xml里面的200dp,因为指定大小所以模式是MeasureSpec.EXACTLY
        // 怎么得到一个View在xml布局文件里面宽,利用view.getLayoutParams().width,高类似
        int leftViewMeasureSpecWidth = MeasureSpec.
                makeMeasureSpec(mLeftMenu.getLayoutParams().width, MeasureSpec.EXACTLY);
        //左侧菜单的的高度我们希望填充父窗体,而当前onMeasure里面的heightMeasureSpec根据我们的布局显然就是填充父窗体
        // 所以一直接用父亲传过来的这个32位参数就好
        mLeftMenu.measure(leftViewMeasureSpecWidth,heightMeasureSpec);
        // 至于主页页面,我们的希望他宽高都是填充父窗体,所以直接用onMeasure里面传过来的参数就好啦
        mMainPage.measure(widthMeasureSpec,heightMeasureSpec);
        // onMeasure一开始什么都不管就应该复写setMeasuredDimension,不然报错。
        // 除非我们的自定义控件是宽高都是填充父窗体,那么我们就留着下面这句super的代码就可以
        // super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(widthMeasureSpec,heightMeasureSpec);
    }
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int leftViewWidth = mLeftMenu.getMeasuredWidth();
        int leftViewHeight = mLeftMenu.getMeasuredHeight();
        Log.d("Slide","getWidth:"+mLeftMenu.getWidth()+"   mLeftMenu.getHeight():"+mLeftMenu.getHeight());
        Log.d("Slide","getMeasuredWidth:"+mLeftMenu.getMeasuredWidth()+"   getMeasuredHeight:"+mLeftMenu.getMeasuredHeight());
        // l t r b  左上右下  左上一点,右下一点,两点确定了一个矩形的大小
        mLeftMenu.layout(-leftViewWidth,0,0,leftViewHeight);
        int mainViewWidth = mMainPage.getMeasuredWidth();
        int mainViewHeight = mMainPage.getMeasuredHeight();
        mMainPage.layout(0, 0, mainViewWidth, mainViewHeight);
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //return super.onTouchEvent(event);
        int action = event.getAction();
        switch (action){
            case MotionEvent.ACTION_DOWN:
                downX = (int)(event.getX()+0.5f);
                break;
            case MotionEvent.ACTION_MOVE:
                int moveX = (int)(event.getX()+0.5f);
                // 用减法,比如按下是0,最终移动到了20,那么屏幕向左边移动20个单位,左侧菜单就可显示出来了
                int distanceX =  downX - moveX;
                int scrollX = getScrollX();  // 注意getScaleX()不要写成getScaleX()
                // 解决越界问题
                if(scrollX+distanceX < (-mLeftMenu.getMeasuredWidth())){ // 左侧越界临界点
                    scrollTo(-mLeftMenu.getMeasuredWidth(),0);
                }else if(scrollX+distanceX>0){ // 右侧越界临界点
                    scrollTo(0,0);
                }else{  // 在两个临界点之间的可移动范围
                    scrollBy(distanceX,0);
                }
                downX = moveX;
                break;
            case MotionEvent.ACTION_UP:
                break;
        }
        //关键一步,返回true,代表消费当前的偷吃事件
        return true;
    }
}
简单的移动,不会产生越界现象.gif

六.2、判断松手后应该停留在哪一个界面

原理图.png

做的事情很简单,其实也就是在 case MotionEvent.ACTION_UP: 里面添加几行代码

   case MotionEvent.ACTION_UP:
        int upScrollX = getScrollX();
        if(upScrollX<-(mLeftMenu.getMeasuredWidth()/2)){
            scrollTo(-mLeftMenu.getMeasuredWidth(),0);
        }else{
            scrollTo(0,0);
        }
        break;
判断松手后应该停留在哪一个界面.gif

六.3、使用Scoller弹性滑动,让滑动产生过渡效果

自定义View做动画有很多做法,Scroller是其中一种,也是我们这次要采用的做法。

Scoller弹性滑动是使用过程:
1、实例化Scroller
实例化一个Scroller

@Override
protected void onFinishInflate() {
    super.onFinishInflate(); 
    //  getChildAt 作用 Returns the view at the specified position in the group.
    //  精确地返回在ViewGroup里面的View的位置 所以我们的include顺序很重要
    mLeftMenu = getChildAt(0); // 左侧菜单
    mMainPage = getChildAt(1);

    scroller = new Scroller(getContext()); // 实例化一个Scroll,需要context
}

2、调用startScroll(startX, startY, dx, dy, durationTime);模拟数据变化,接着调用invalidate(); 触发computeScroll()

注意点:startScroll 只是模拟数据的变化,想要看到效果还需要调用invalidate重新刷新UI,其实就是调用onDraw

注意点:invalidate();经过辗转会去computeScroll();
invalidate(); ---> draw()-->onDraw()--> computeScroll();

3、在computeScroll()里面复写真正让让模拟数据生效的代码,调用invalidate()

注意点:
scroller.computeScrollOffset()
computeScrollOffset()为true代表模拟数据还没有完成

注意点:scroller.getCurrX()当前时刻正模拟到的数据

代码如下(其实这几乎是模板代码):

@Override
    public void computeScroll() { // 如果数据模拟没有完成,那么继续更新
        //super.computeScroll();
        // computeScrollOffset
        if(scroller.computeScrollOffset()){
            scrollTo(scroller.getCurrX(),0);
            invalidate(); // 注意这里还调用了invalidate,这样才会产生效果
        }
    }

.
.
上面几点已经说完,具体看看在代码中怎么使用吧

computeScroll();和computeScrollOffset()的结合使用

        case MotionEvent.ACTION_UP:
            int upScrollX = getScrollX();
            choosePage(upScrollX<-(mLeftMenu.getMeasuredWidth()/2));
            break;
    }
    //关键一步,返回true,代表消费当前的偷吃事件
    return true;
}
private void choosePage(boolean isMainPage){
    if(isMainPage){
        startScrollNow(-mLeftMenu.getMeasuredWidth());
        //scrollTo(0,0); 可以实现但是无动画过渡
    }else{
        startScrollNow(0);
        //scrollTo(-mLeftMenu.getMeasuredWidth(),0);  可以实现但是无动画过渡
    }
}
private void startScrollNow(int endX){
    int startX = getScrollX();  // 起始X
    int startY = 0;  // 起始Y
    int dx = endX - startX;   // X方向的增量值,可以理解为距离
    int dy = 0;   // Y方向的增量值,可以理解为距离
    int time = Math.abs(dx) * 10;
    int durationTime = (time>600)?600:time;
    //startScroll(int startX, int startY, int dx, int dy, int duration)
    // 注意: startScroll 只是模拟数据的变化,想要看到效果还需要调用invalidate重新刷新UI,其实就是调用onDraw
    scroller.startScroll(startX, startY, dx, dy, durationTime);
    invalidate();  // 关键代码,invalidate和computeScroll才会有动画效果,scroller.startScroll只是模拟数据
}
@Override
public void computeScroll() { // 如果数据模拟没有完成,那么继续更新
    //super.computeScroll();
    // computeScrollOffset
    if(scroller.computeScrollOffset()){
        scrollTo(scroller.getCurrX(),0);
        invalidate(); // 注意这里还调用了invalidate,这样才会产生效果
    }
}
弹性滑动.gif

六、4、添加是 否处于主页的方法 和 展示那个页面的方法

其实也就是添加了isAtMainPage、showMainPage()和showLeftPage()这三个方法


public class SlideMenu extends ViewGroup{
    private static final int MAIN_PAGE = 0;
    private static final int LEFT_PAGE = 1;
    private View mLeftMenu;
    private View mMainPage;
    private int downX;
    private Scroller scroller;
    private int pageIndex;
    public SlideMenu(Context context) {
        super(context);
    }
    public SlideMenu(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public SlideMenu(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    // 当SlideView被xml引用加载之后完成,这个方法就会调用。
    /**
     * Finalize inflating a view from XML.  This is called as the last phase
     * of inflation, after all child views have been added.
     */
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate(); // ???
        //  getChildAt 作用 Returns the view at the specified position in the group.
        //  精确地返回在ViewGroup里面的View的位置 所以我们的include顺序很重要
        mLeftMenu = getChildAt(0); // 左侧菜单
        mMainPage = getChildAt(1);
        scroller = new Scroller(getContext()); // 实例化一个Scroll,需要context
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        // makeMeasureSpec 的时候,第一个参数是大小,第二个参数是模式
        // 宽度我们使用左侧菜单的在xml里面的200dp,因为指定大小所以模式是MeasureSpec.EXACTLY
        // 怎么得到一个View在xml布局文件里面宽,利用view.getLayoutParams().width,高类似
        int leftViewMeasureSpecWidth = MeasureSpec.
                makeMeasureSpec(mLeftMenu.getLayoutParams().width, MeasureSpec.EXACTLY);
        //左侧菜单的的高度我们希望填充父窗体,而当前onMeasure里面的heightMeasureSpec根据我们的布局显然就是填充父窗体
        // 所以一直接用父亲传过来的这个32位参数就好
        mLeftMenu.measure(leftViewMeasureSpecWidth,heightMeasureSpec);
        // 至于主页页面,我们的希望他宽高都是填充父窗体,所以直接用onMeasure里面传过来的参数就好啦
        mMainPage.measure(widthMeasureSpec, heightMeasureSpec);
        // onMeasure一开始什么都不管就应该复写setMeasuredDimension,不然报错。
        // 除非我们的自定义控件是宽高都是填充父窗体,那么我们就留着下面这句super的代码就可以
        // super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(widthMeasureSpec,heightMeasureSpec);
    }
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int leftViewWidth = mLeftMenu.getMeasuredWidth();
        int leftViewHeight = mLeftMenu.getMeasuredHeight();
        Log.d("Slide", "getWidth:" + mLeftMenu.getWidth() + "   mLeftMenu.getHeight():" + mLeftMenu.getHeight());
        Log.d("Slide", "getMeasuredWidth:" + mLeftMenu.getMeasuredWidth() + "   getMeasuredHeight:" + mLeftMenu.getMeasuredHeight());
        // l t r b  左上右下  左上一点,右下一点,两点确定了一个矩形的大小
        mLeftMenu.layout(-leftViewWidth,0,0,leftViewHeight);
        int mainViewWidth = mMainPage.getMeasuredWidth();
        int mainViewHeight = mMainPage.getMeasuredHeight();
        mMainPage.layout(0, 0, mainViewWidth, mainViewHeight);
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //return super.onTouchEvent(event);
        int action = event.getAction();
        switch (action){
            case MotionEvent.ACTION_DOWN:
                downX = (int)(event.getX()+0.5f);
                break;
            case MotionEvent.ACTION_MOVE:
                int moveX = (int)(event.getX()+0.5f);
                // 用减法,比如按下是0,最终移动到了20,那么屏幕向左边移动20个单位,左侧菜单就可显示出来了
                int distanceX =  downX - moveX;
                int scrollX = getScrollX();  // 注意getScaleX()不要写成getScaleX()
                // 解决越界问题
                if(scrollX+distanceX < (-mLeftMenu.getMeasuredWidth())){ // 左侧越界临界点
                    scrollTo(-mLeftMenu.getMeasuredWidth(),0);
                }else if(scrollX+distanceX>0){ // 右侧越界临界点
                    scrollTo(0,0);
                }else{  // 在两个临界点之间的可移动范围
                    scrollBy(distanceX,0);
                }
                downX = moveX;
                break;
            case MotionEvent.ACTION_UP:
                int upScrollX = getScrollX();
                choosePage(upScrollX<-(mLeftMenu.getMeasuredWidth()/2));
                break;
        }
        //关键一步,返回true,代表消费当前的touch事件
        return true;
    }
    private void choosePage(boolean isMainPage){
        if(isMainPage){
            pageIndex = MAIN_PAGE;
            startScrollNow(-mLeftMenu.getMeasuredWidth());
            //scrollTo(0,0); 可以实现但是无动画过渡
        }else{
            pageIndex = LEFT_PAGE;
            startScrollNow(0);
            //scrollTo(-mLeftMenu.getMeasuredWidth(),0);  可以实现但是无动画过渡
        }
    }
    private void startScrollNow(int endX){
        int startX = getScrollX();  // 起始X
        int startY = 0;  // 起始Y
        int dx = endX - startX;   // X方向的增量值,可以理解为距离
        int dy = 0;   // Y方向的增量值,可以理解为距离
        int time = Math.abs(dx) * 10;
        int durationTime = (time>600)?600:time;
        //startScroll(int startX, int startY, int dx, int dy, int duration)
        // 注意: startScroll 只是模拟数据的变化,想要看到效果还需要调用invalidate重新刷新UI,其实就是调用onDraw
        scroller.startScroll(startX, startY, dx, dy, durationTime);
        invalidate();  // 关键代码,invalidate和computeScroll才会有动画效果,scroller.startScroll只是模拟数据
    }
    @Override
    public void computeScroll() { // 如果数据模拟没有完成,那么继续更新
        //super.computeScroll();
        // computeScrollOffset
        if(scroller.computeScrollOffset()){
            scrollTo(scroller.getCurrX(),0);
            invalidate(); // 注意这里还调用了invalidate,这样才会产生效果
        }
    }
    public boolean isAtMainPage(){
        return (pageIndex == MAIN_PAGE)?true:false;
    }
    public void showMainPage(){
        choosePage(true);
    }
    public void showLeftPage(){
        choosePage(false);
    }
}
页面判断.gif

六、5、我们发现当我们滑动左侧菜单的时候,无法拉动菜单。

这就涉及到一个View的传递机制了。

关于View的传递机制,可以参考文章 ——————————

为什么拉动左侧的菜单无法拖动,这肯定是属于SlideMenu的左侧菜单在拉动的时候,SlideMenu的onTouchEvent没有被执行,为了确保我们的SlideMenu不管是在左侧菜单还是主页菜单的都能够顺利拖动,我们就在SlideMenu里面复写 onInterceptTouchEvent 方法,然后判断一下,如果是横向滑动,就拦截下来,自己就消费掉这个touch

其实也就只是添加这么一小段代码

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
    int action = ev.getAction();
    switch (action){
        case MotionEvent.ACTION_DOWN:
            interDownX = (int)(ev.getX()+0.5f);
            interDownY = (int)(ev.getY()+0.5f);
            break;
        case MotionEvent.ACTION_MOVE:
            interMoveX = (int)(ev.getX()+0.5f);
            interMoveY = (int)(ev.getY()+0.5f);
            int diatanceInterX = Math.abs(interMoveX - interDownX);
            int distanceInterY = Math.abs(interMoveY - interDownY);
            if(diatanceInterX > distanceInterY){ // 代表是水平滑动,(水平滑动的距离比垂直滑动的距离大)
                return true; // 拦截之后就肯定执行onTouchEvent
            }
            break;
        case MotionEvent.ACTION_UP:
            break;
    }
    return super.onInterceptTouchEvent(ev); // 如果不是水平滑动就不拦截
}
完成.gif

好啦,该做的差不多都做啦。

最后附上所有代码:
SlideMenu完整代码

public class SlideMenu extends ViewGroup{


    private static final int MAIN_PAGE = 0;
    private static final int LEFT_PAGE = 1;
    private View mLeftMenu;
    private View mMainPage;
    private int downX;
    private Scroller scroller;
    private int pageIndex;
    private int interDownX;
    private int interDownY;
    private int interMoveX;
    private int interMoveY;

    public SlideMenu(Context context) {
        super(context);
    }

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

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


    // 当SlideView被xml引用加载之后完成,这个方法就会调用。
    /**
     * Finalize inflating a view from XML.  This is called as the last phase
     * of inflation, after all child views have been added.
     */

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate(); // ???

        //  getChildAt 作用 Returns the view at the specified position in the group.
        //  精确地返回在ViewGroup里面的View的位置 所以我们的include顺序很重要
        mLeftMenu = getChildAt(0); // 左侧菜单
        mMainPage = getChildAt(1);
        scroller = new Scroller(getContext()); // 实例化一个Scroll,需要context

    }

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

        // makeMeasureSpec 的时候,第一个参数是大小,第二个参数是模式
        // 宽度我们使用左侧菜单的在xml里面的200dp,因为指定大小所以模式是MeasureSpec.EXACTLY

        // 怎么得到一个View在xml布局文件里面宽,利用view.getLayoutParams().width,高类似
        int leftViewMeasureSpecWidth = MeasureSpec.
                makeMeasureSpec(mLeftMenu.getLayoutParams().width, MeasureSpec.EXACTLY);

        //左侧菜单的的高度我们希望填充父窗体,而当前onMeasure里面的heightMeasureSpec根据我们的布局显然就是填充父窗体
        // 所以一直接用父亲传过来的这个32位参数就好
        mLeftMenu.measure(leftViewMeasureSpecWidth,heightMeasureSpec);

        // 至于主页页面,我们的希望他宽高都是填充父窗体,所以直接用onMeasure里面传过来的参数就好啦
        mMainPage.measure(widthMeasureSpec, heightMeasureSpec);

        // onMeasure一开始什么都不管就应该复写setMeasuredDimension,不然报错。
        // 除非我们的自定义控件是宽高都是填充父窗体,那么我们就留着下面这句super的代码就可以
        // super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(widthMeasureSpec,heightMeasureSpec);

    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {

        int leftViewWidth = mLeftMenu.getMeasuredWidth();
        int leftViewHeight = mLeftMenu.getMeasuredHeight();

        Log.d("Slide", "getWidth:" + mLeftMenu.getWidth() + "   mLeftMenu.getHeight():" + mLeftMenu.getHeight());
        Log.d("Slide", "getMeasuredWidth:" + mLeftMenu.getMeasuredWidth() + "   getMeasuredHeight:" + mLeftMenu.getMeasuredHeight());

        // l t r b  左上右下  左上一点,右下一点,两点确定了一个矩形的大小
        mLeftMenu.layout(-leftViewWidth,0,0,leftViewHeight);


        int mainViewWidth = mMainPage.getMeasuredWidth();
        int mainViewHeight = mMainPage.getMeasuredHeight();

        mMainPage.layout(0, 0, mainViewWidth, mainViewHeight);

    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {

        int action = ev.getAction();
        switch (action){
            case MotionEvent.ACTION_DOWN:
                interDownX = (int)(ev.getX()+0.5f);
                interDownY = (int)(ev.getY()+0.5f);

                break;
            case MotionEvent.ACTION_MOVE:
                interMoveX = (int)(ev.getX()+0.5f);
                interMoveY = (int)(ev.getY()+0.5f);

                int diatanceInterX = Math.abs(interMoveX - interDownX);
                int distanceInterY = Math.abs(interMoveY - interDownY);

                if(diatanceInterX > distanceInterY){ // 代表是水平滑动,(水平滑动的距离比垂直滑动的距离大)
                    return true; // 拦截之后就肯定执行onTouchEvent
                }
                break;

            case MotionEvent.ACTION_UP:

                break;

        }
        return super.onInterceptTouchEvent(ev); // 如果不是水平滑动就不拦截
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //return super.onTouchEvent(event);

        int action = event.getAction();
        switch (action){
            case MotionEvent.ACTION_DOWN:

                downX = (int)(event.getX()+0.5f);

                break;
            case MotionEvent.ACTION_MOVE:
                int moveX = (int)(event.getX()+0.5f);

                // 用减法,比如按下是0,最终移动到了20,那么屏幕向左边移动20个单位,左侧菜单就可显示出来了
                int distanceX =  downX - moveX;

                int scrollX = getScrollX();  // 注意getScaleX()不要写成getScaleX()

                // 解决越界问题
                if(scrollX+distanceX < (-mLeftMenu.getMeasuredWidth())){ // 左侧越界临界点
                    scrollTo(-mLeftMenu.getMeasuredWidth(),0);
                }else if(scrollX+distanceX>0){ // 右侧越界临界点
                    scrollTo(0,0);
                }else{  // 在两个临界点之间的可移动范围
                    scrollBy(distanceX,0);
                }

                downX = moveX;
                break;

            case MotionEvent.ACTION_UP:
                int upScrollX = getScrollX();
                choosePage(upScrollX<-(mLeftMenu.getMeasuredWidth()/2));
                break;
        }
        //关键一步,返回true,代表消费当前的touch事件
        return true;

    }


    private void choosePage(boolean isMainPage){
        if(isMainPage){
            pageIndex = MAIN_PAGE;
            startScrollNow(-mLeftMenu.getMeasuredWidth());
            //scrollTo(0,0); 可以实现但是无动画过渡
        }else{
            pageIndex = LEFT_PAGE;
            startScrollNow(0);
            //scrollTo(-mLeftMenu.getMeasuredWidth(),0);  可以实现但是无动画过渡
        }


    }

    private void startScrollNow(int endX){
        int startX = getScrollX();  // 起始X
        int startY = 0;  // 起始Y
        int dx = endX - startX;   // X方向的增量值,可以理解为距离
        int dy = 0;   // Y方向的增量值,可以理解为距离

        int time = Math.abs(dx) * 10;
        int durationTime = (time>600)?600:time;

        //startScroll(int startX, int startY, int dx, int dy, int duration)
        // 注意: startScroll 只是模拟数据的变化,想要看到效果还需要调用invalidate重新刷新UI,其实就是调用onDraw
        scroller.startScroll(startX, startY, dx, dy, durationTime);
        invalidate();  // 关键代码,invalidate和computeScroll才会有动画效果,scroller.startScroll只是模拟数据
    }


    @Override
    public void computeScroll() { // 如果数据模拟没有完成,那么继续更新
        //super.computeScroll();

        // computeScrollOffset
        if(scroller.computeScrollOffset()){
            scrollTo(scroller.getCurrX(),0);
            invalidate(); // 注意这里还调用了invalidate,这样才会产生效果
        }

    }



    public boolean isAtMainPage(){
        return (pageIndex == MAIN_PAGE)?true:false;
    }

    public void showMainPage(){
        choosePage(true);
    }
    public void showLeftPage(){
        choosePage(false);
    }

}

.
.
MainActivity

public class MainActivity extends Activity {

    private SlideMenu slideMenu;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        slideMenu = (SlideMenu) findViewById(R.id.mSmenu);

        findViewById(R.id.mIvBack).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(slideMenu.isAtMainPage()){
                    slideMenu.showLeftPage();
                }else{
                    slideMenu.showMainPage();
                }
            }
        });


        findViewById(R.id.mTvBd).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,"本地",Toast.LENGTH_SHORT).show();
                if(slideMenu.isAtMainPage()){
                    slideMenu.showLeftPage();
                }else{
                    slideMenu.showMainPage();
                }
            }
        });


    }
}

组合控件仿qq侧滑菜单至此结束。

组合控件1—— 设置框一文中,我们将进行组合控件的demo编写。

本篇完。

相关文章

  • 自制控件2 —— 自制控件 仿qq侧滑菜单

    在自定义控件——初识自定义控件里面,我们已经对自定义控件进行描述和分类。其分类分别是 自制控件 组合控件 拓展控件...

  • 自制控件3——仿qq侧滑删除

    在自定义控件——初识自定义控件里面,我们已经对自定义控件进行描述和分类。其分类分别是 自制控件 组合控件 拓展控件...

  • 组合控件2——海贼王选项菜单

    之前的自定义控件——初识自定义控件,我们了解到了自定义控件分为三种,自制控件,组合控件,拓展控件。而我们在自制控件...

  • DrawerLayout-侧滑菜单

    DrawerLayout是在android.support.v4包下,实现了侧滑菜单效果的控件。是第三方侧滑控件如...

  • 组合控件1—— 设置框

    之前的自定义控件——初识自定义控件,我们了解到了自定义控件分为三种,自制控件,组合控件,拓展控件。 而我们在自制控...

  • ios侧滑菜单控件

    先上效果图把: 项目有这个需求,之前是别人做的效果不太好,后来需要重写,但还是不是我负责,但是那段时间不算很忙,也...

  • Flutter-抽屉效果只能拖拽

    flutter_new类似日历的抽屉 仿QQ侧滑菜单

  • Android 新控件学习

    Android新控件 DrawerLayout 顶层容器,通常与NavigationView实现侧滑菜单 Navi...

  • 仿QQ侧滑菜单

    一. 实例说明 二. 关键技术    使用自定义类 QQMenu 类中的构造方法,View类中的 onMeasur...

  • 常用第三方库

    UI动画 波浪控件 Tabbar items显示萌萌的动画 qq侧滑 橡皮筋弹跳式动画 菜单动画 帧动画 手势驱动...

网友评论

    本文标题:自制控件2 —— 自制控件 仿qq侧滑菜单

    本文链接:https://www.haomeiwen.com/subject/lddakttx.html