仿QQ侧滑和酷狗侧滑效果

最新推荐文章于 2018-10-18 22:06:24 发布

LushEast

最新推荐文章于 2018-10-18 22:06:24 发布

阅读量584

点赞数

文章标签：酷狗 QQ 侧滑

本文链接：https://blog.csdn.net/grg106/article/details/77718058

版权

本文介绍了如何使用自定义ViewGroup实现类似QQ和酷狗的侧滑菜单效果。通过在ViewGroup下放置两个布局，分别用于菜单和内容，并在onFinishInflate()中设置布局宽度。侧滑的实现依赖于触摸事件处理，菜单的打开和关闭状态在onLayout和onTouchEvent中调整。同时，文章提到了如何添加酷狗菜单的特效和内容布局的阴影，以及利用GestureDetector处理快速滑动。最后，讨论了在内容页面点击时如何判断并处理菜单状态。

摘要由CSDN通过智能技术生成

今天来写的是关于侧滑的，说道侧滑，我们可以想导用什么来实现呢？首先肯定是系统为我们写好的DrawerLayout来写，或者用ViewGroup再加上一些手势处理，下面我来写的是自定义view继承自我们的HorizontalScrollView。

先看一下实际的QQ效果和酷狗的实际效果

先说一下实现思路：

就是在自定义的ViewGroup下面放两个布局，一个是菜单布局，一个是内容布局，看看我们在代码中使用情况吧

activity_main:

<?xml version="1.0" encoding="utf-8"?>
<moocollege.cn.kugougouslidemenu.KuGouSlideMenu xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="@mipmap/home_bg_menu"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:menuRightMargin="100dp"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
        <include layout="@layout/layout_menu" />

        <include layout="@layout/layout_content" />
    </LinearLayout>

</moocollege.cn.kugougouslidemenu.KuGouSlideMenu>

当然你要是以为直接这样做就可以的话，在自定义的viewGropu中不做处理，布局会乱的。想看效果的可以试试

不做任何处理的

public class KuGouSlideMenu extends HorizontalScrollView {

    public KuGouSlideMenu(Context context) {
        this(context, null);
    }

    public KuGouSlideMenu(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

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

layout_menu

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/layout_menu_top"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_above="@+id/layout_bottom"
        android:layout_marginTop="20dp"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/enter_login"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="23dp"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/user_head_iv"
                android:layout_width="56dp"
                android:layout_height="56dp"
                android:src="@mipmap/toux2" />

            <TextView
                android:id="@+id/user_name_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="16dp"
                android:text="登录/注册"
                android:textColor="#FFFFFF"
                android:textSize="18sp