Android 自定义ViewGroup（侧滑菜单）

1，实现效果

2，实现逻辑

【1】界面搭建，menu菜单提取样式

main 布局

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="@drawable/top_bar_bg"

        android:orientation="horizontal" >

        <Button

            android:id="@+id/btn_back"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:background="@drawable/main_back" />

        <ImageView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:paddingTop="3dp"

            android:src="@drawable/top_bar_divider" />

        <TextView

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_marginLeft="50dp"

            android:text="小帅xxx"

            android:textColor="#ffffff"

            android:textSize="25sp" />

    </LinearLayout>

      <TextView

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:text="牛奶奶说牛奶是刘奶奶的奶奶····"

            android:gravity="center"

            android:textSize="25sp" />

</LinearLayout>

抽取字体的样式

<style name="MenuText" parent="android:Widget.TextView">

        <item name="android:layout_width">match_parent</item>

        <item name="android:layout_height">wrap_content</item>

        <item name="android:drawablePadding">15dp</item>

        <item name="android:gravity">center_vertical</item>

        <item name="android:padding">15dp</item>

        <item name="android:textColor">#fff</item>

        <item name="android:textSize">25sp</item>

        <item name="android:textStyle">bold</item>

    </style>

menu 的布局

<?xml version="1.0" encoding="utf-8"?>

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="240dp"

    android:layout_height="match_parent" >

    <LinearLayout

        android:layout_width="240dp"

        android:layout_height="match_parent"

        android:background="@drawable/menu_bg"

        android:orientation="vertical" >

        <TextView

            style="@style/MenuText"

            android:background="#571F2C"

            android:drawableLeft="@drawable/tab_news"

            android:text="新闻" />

        <TextView

            style="@style/MenuText"

            android:drawableLeft="@drawable/tab_read"

            android:text="订阅" />

        <TextView

            style="@style/MenuText"

            android:drawableLeft="@drawable/tab_ties"

            android:text="跟帖" />

        <TextView

            style="@style/MenuText"

            android:drawableLeft="@drawable/tab_pics"

            android:text="图片" />

        <TextView

            style="@style/MenuText"

            android:drawableLeft="@drawable/tab_ugc"

            android:text="话题" />

        <TextView

            style="@style/MenuText"

            android:drawableLeft="@drawable/tab_vote"

            android:text="投票" />

        <TextView

            style="@style/MenuText"

            android:drawableLeft="@drawable/tab_focus"

            android:text="聚合阅读" />

    </LinearLayout>

</ScrollView>

【2】定义一个类创建自定义控件

public class SlidingMenu extends RelativeLayout{



    public SlidingMenu(Context context, AttributeSet attrs) {

        super(context, attrs);

    }

    //在这个方法里面 自己对孩子进行排版 不使用系统默认的排版方式

    @Override

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

    }

布局中声明控件

<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=".MainActivity" >

    <com.xiaoshuai.slidingmenuhm.SlidingMenu

        android:id="@+id/slidingMenu1"

        android:layout_width="match_parent"

        android:layout_height="match_parent">

        <!-- 添加自己的孩子  menu菜单和main主界面 -->

        <include layout="@layout/menu" />

        <include layout="@layout/main" />

    </com.xiaoshuai.slidingmenuhm.SlidingMenu>

</RelativeLayout>

MainActivity在加载布局中去掉标题栏

//去掉标题栏

requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.activity_main);

SlidingMenu的onlayout 自己进行排版

//在这个方法里面自己对孩子进行排版不使用系统默认的排版方式

   @Override

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

        

        //[1]找到menu和main孩子

        View menuView = getChildAt(0);

        View mainView = getChildAt(1);

        //[2]获取菜单的宽度

        menuWidth = menuView.getMeasuredWidth();

        //[3]对menu菜单进行排版

        menuView.layout(-menuWidth, t, l, b);

        //[4]对main界面排版

        mainView.layout(l, t, r, b);

        

    }

【3】移动效果：

创建onTouchEvent获取对应的3种事件，按下和移动获取坐标。获取移动的偏移量

//处理当前view的事件

    @Override

    public boolean onTouchEvent(MotionEvent event) {

        switch (event.getAction()) {

        case MotionEvent.ACTION_DOWN:  //按下

            //[1]获取手指按下的坐标

            downX = event.getX();

            break;

        case MotionEvent.ACTION_MOVE: //移动

            //[2]算出移动的距离

            float moveX = event.getX();

            distaceX = (int) (moveX - downX)+currentMenuPosition;

            //[4]开始滚动view

            startScrollViewContent(distaceX);

            break;

重写scrollTo方法来实现移动

/**

* 由于scrollTo 方法系统在实现的时候传入正值往左移动传入负值往右移动所以我重写这个方

* 符合中国人的思维

* @param x

public void startScrollViewContent(int x){

super.scrollTo(-x, 0);

}

对边界进行处理 menuWidth 是menu 宽度

  case MotionEvent.ACTION_MOVE: //移动

            //[2]算出移动的距离

            float moveX = event.getX();

            distaceX = (int) (moveX - downX)+currentMenuPosition;

            //[3]对边界进行处理

            if (distaceX <= 0) {

                distaceX = 0;

            }else if (distaceX >=menuWidth) {

                distaceX = menuWidth;

            }

            

            //[4]开始滚动view

            startScrollViewContent(distaceX);

            break;

抬起时做距离判断效果

    case MotionEvent.ACTION_UP:    //抬起

            //[5]当手指抬起后, 如果移动的距离 < 菜单的宽/2 就回到左边  否则像右移动

            if (distaceX < menuWidth/2) {

                startScrollViewContent(0);

            }else {

                startScrollViewContent(menuWidth); 

            }

            break;

        }

【4】实现平滑滚动

invalidate--drawchild ---child.draw --computeScroll()

创建对象

//创建Scroller的实例可以收集数据并且产生一个动画效果

mScroller = new Scroller(getContext());

ACTION_UP方法中实现平滑滚动效果

currentMenuPosition 定义的一个菜单移动到哪里的变量

    case MotionEvent.ACTION_UP:    //抬起

            //[5]当手指抬起后, 如果移动的距离 < 菜单的宽/2 就回到左边  否则像右移动

            if (distaceX < menuWidth/2) {

                currentMenuPosition = 0;

            }else {

                currentMenuPosition = menuWidth;

            }

            

            //[6]当一段逻辑同时用到多次 我们最好做抽取

            

            int startX = distaceX; //就是移动的距离

            int endX = currentMenuPosition;

            int dx = endX - startX;

            int duration = Math.abs(dx)*20;

            //产生模拟的数据

            mScroller.startScroll(startX, 0, dx, 0, duration);

            //调用invalidata 请求绘制

            invalidate();  //---->drawchild ---child.draw --computeScroll()

            

            break;

computeScroll 方法中获取模拟的移动数据进行滑动

  //取出我们模拟滚动的数据

    @Override

    public void computeScroll() {

        if (mScroller.computeScrollOffset()) {

            //[1]取出我们模拟的数据

             int currX = mScroller.getCurrX();

            //[2]调用startScrollViewContent 让view的内容滚动

            startScrollViewContent(currX);

            invalidate();

         }

    }

【5】在menu布局中无法左右滑动，处理孩子的滑动事件

onInterceptTouchEvent判断孩子滑动的距离

   //当用户横着滑动的距离 > 竖着滑动的距离 就拦截事件 不让孩子处理事件 否则就让孩子处理事件

    @Override

    public boolean onInterceptTouchEvent(MotionEvent ev) {

        switch (ev.getAction()) {

        case MotionEvent.ACTION_DOWN:

             downX = ev.getX();

             downY = ev.getY();

            break;

        case MotionEvent.ACTION_MOVE:

            float moveX = ev.getX();

            float moveY = ev.getY();

            //[1]算出X轴移动的距离 和 Y移动的距离

            int distanceX = (int) (moveX - downX);

            int distanceY = (int) (moveY - downY);

            //[2]如果x轴移动的距离大于Y轴移动的距离 就拦截事件

            if (Math.abs(distanceX) > Math.abs(distanceY)) {

                return true;

            }

            break;

        case MotionEvent.ACTION_UP:

            break;

        }

        return super.onInterceptTouchEvent(ev);

    }

【6】MainActivity 中点击事件实现平滑滚动

设置点击事件

//[1]找到slidingmenu

        sm = (SlidingMenu) findViewById(R.id.slidingMenu1);

        //[2]给主页面的按钮设置点击事件 当菜单是关闭状态 点击按钮菜单打开  如果是打开状态就关闭

        findViewById(R.id.btn_back).setOnClickListener(new OnClickListener() {

            

            @Override

            public void onClick(View v) {

                

                sm.setOnMenuIsOpen();

            }

        });

创建setOnMenuIsOpen 方法，判断菜单的位置来确认开或者关

    //通过这个方法控制菜单打开或者关闭

    public void setOnMenuIsOpen() {

        int startX = 0;

        if (currentMenuPosition == 0) {

            //说明菜单是关闭状态  需要打开

            currentMenuPosition = menuWidth;

        }else if (currentMenuPosition == menuWidth) {

            //说明菜单是打开状态  需要关闭

            currentMenuPosition = 0;

            startX = menuWidth;

        }

        //调用平滑滚动的方法

        startScroller(startX, currentMenuPosition);

    }

3，实现的全部代码

package com.xiaoshuai.www.slidingmenu;

import android.content.Context;

import android.util.AttributeSet;

import android.view.MotionEvent;

import android.view.View;

import android.widget.RelativeLayout;

import android.widget.Scroller;

public class SlidingMenu extends RelativeLayout{





    private float downX;

    /**代表菜单的宽度**/

    private int menuWidth;

    private int distaceX;

    private Scroller mScroller;

    /**代表当前菜单的位置**/

    private int currentMenuPosition;

    private float downY;





    public SlidingMenu(Context context, AttributeSet attrs) {

        super(context, attrs);

        //创建Scroller的实例  可以收集数据 并且产生一个动画效果

        mScroller = new Scroller(getContext());





    }



    //在这个方法里面 自己对孩子进行排版 不使用系统默认的排版方式

    @Override

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





        //[1]找到menu和main孩子

        View menuView = getChildAt(0);

        View mainView = getChildAt(1);

        //[2]获取菜单的宽度

        menuWidth = menuView.getMeasuredWidth();

        //[3]对menu菜单进行排版

        menuView.layout(-menuWidth, t, l, b);

        //[4]对main界面排版

        mainView.layout(l, t, r, b);





    }



    //当用户横着滑动的距离 > 竖着滑动的距离 就拦截事件 不让孩子处理事件 否则就让孩子处理事件

    @Override

    public boolean onInterceptTouchEvent(MotionEvent ev) {

        switch (ev.getAction()) {

            case MotionEvent.ACTION_DOWN:

                downX = ev.getX();

                downY = ev.getY();





                break;





            case MotionEvent.ACTION_MOVE:

                float moveX = ev.getX();

                float moveY = ev.getY();

                //[1]算出X轴移动的距离 和 Y移动的距离

                int distanceX = (int) (moveX - downX);

                int distanceY = (int) (moveY - downY);

                //[2]如果x轴移动的距离大于Y轴移动的距离 就拦截事件

                if (Math.abs(distanceX) > Math.abs(distanceY)) {

                    return true;

                }

                break;





            case MotionEvent.ACTION_UP:

                break;

        }



        return super.onInterceptTouchEvent(ev);

    }







    //处理当前view的事件

    @Override

    public boolean onTouchEvent(MotionEvent event) {

        switch (event.getAction()) {

            case MotionEvent.ACTION_DOWN:  //按下

                //[1]获取手指按下的坐标

                downX = event.getX();

                break;





            case MotionEvent.ACTION_MOVE: //移动

                //[2]算出移动的距离

                float moveX = event.getX();

                distaceX = (int) (moveX - downX)+currentMenuPosition;

                //[3]对边界进行处理

                if (distaceX <= 0) {

                    distaceX = 0;

                }else if (distaceX >=menuWidth) {

                    distaceX = menuWidth;

                }





                //[4]开始滚动view

                startScrollViewContent(distaceX);

                break;





            case MotionEvent.ACTION_UP:    //抬起

                //[5]当手指抬起后, 如果移动的距离 < 菜单的宽/2 就回到左边  否则像右移动

                if (distaceX < menuWidth/2) {

                    currentMenuPosition = 0;

                }else {

                    currentMenuPosition = menuWidth;

                }



                //[6]当一段逻辑同时用到多次 我们最好做抽取





                int startX = distaceX; //就是移动的距离

                int endX = currentMenuPosition;

                //[7]实现平滑滚动

                startScroller(startX, endX);



                break;

        }









        return true;//让当前view消费事件

    }





    //实现平滑滚动

    private void startScroller(int startX, int endX) {

        int dx = endX - startX;

        int duration = Math.abs(dx)*20;

        //产生模拟的数据

        mScroller.startScroll(startX, 0, dx, 0, duration);

        //调用invalidata 请求绘制

        invalidate();  //---->drawchild ---child.draw --computeScroll()

    }





    /**

     * 由于scrollTo 方法 系统在实现的时候 传入正值往左移动  传入负值往右移动 所以我重写这个方

     *  符合中国 人的思维

     * @param x

     */

    public void startScrollViewContent(int x){

        super.scrollTo(-x, 0);

    }





    //取出我们模拟滚动的数据

    @Override

    public void computeScroll() {

        if (mScroller.computeScrollOffset()) {

            //[1]取出我们模拟的数据

            int currX = mScroller.getCurrX();

            //[2]调用startScrollViewContent 让view的内容滚动

            startScrollViewContent(currX);

            invalidate();





        }

    }



    //通过这个方法控制菜单打开或者关闭

    public void setOnMenuIsOpen() {

        int startX = 0;

        if (currentMenuPosition == 0) {

            //说明菜单是关闭状态  需要打开

            currentMenuPosition = menuWidth;

        }else if (currentMenuPosition == menuWidth) {

            //说明菜单是打开状态  需要关闭

            currentMenuPosition = 0;

            startX = menuWidth;





        }

        //调用平滑滚动的方法

        startScroller(startX, currentMenuPosition);

    }

}

Android 自定义ViewGroup（侧滑菜单）

猜你喜欢