AndroidUI-仿QQ侧滑例子（简单版）

最新推荐文章于 2024-06-23 06:14:55 发布
最新推荐文章于 2024-06-23 06:14:55 发布
阅读量959 收藏 1
点赞数
分类专栏： Android UI组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ACM_TH/article/details/50365638
版权

AndroidUI-仿QQ侧滑例子（简单版）

在此感谢hyman大神的博客教程，让在下受益匪浅。
鸿洋老师的博客

运行效果:
这里写图片描述
这里写图片描述
这里写图片描述

主要用到的知识点：

  • 自定义View组件继承HorizontalScrollView
    1.需要获取屏幕的像素
    2.设置左侧菜单布局的宽度
    3.设置手指抬起事件
    4.单位的转换（dp->px）
    5.设置组件的位置(onLayout(boolean changed, int l, int t, int r, int b))

首先是设置左侧菜单的布局
left_menu.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="@drawable/menu_background" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="vertical" >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/id_img1"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@drawable/img_1" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_toRightOf="@id/id_img1"
                android:text="第一个item"
                android:textColor="#ffffff"
                android:textSize="20sp" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/id_img2"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@drawable/img_2" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_toRightOf="@id/id_img2"
                android:text="第二个item"
                android:textColor="#ffffff"
                android:textSize="20sp" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/id_img3"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@drawable/img_3" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_toRightOf="@id/id_img3"
                android:text="第三个item"
                android:textColor="#ffffff"
                android:textSize="20sp" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/id_img4"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@drawable/img_4" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_toRightOf="@id/id_img4"
                android:text="第四个item"
                android:textColor="#ffffff"
                android:textSize="20sp" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/id_img5"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@drawable/img_5" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_toRightOf="@id/id_img5"
                android:text="第五个item"
                android:textColor="#ffffff"
                android:textSize="20sp" />
        </RelativeLayout>
    </LinearLayout>

</RelativeLayout>

还有就是activity_main.xml

<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" >

    <!-- 之后继承HorizontalScrollView的类 -->
    <com.example.again_imooc_qq50_demo.view.MyMenuView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal" >

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

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/qq" >
            </LinearLayout>
        </LinearLayout>
    </com.example.again_imooc_qq50_demo.view.MyMenuView>

</RelativeLayout>

接下来就是继承HorizontalScrollView自定义View类了
首先定义全局变量

private int sCreenWidth; // 屏幕像素的宽度
    private int mMenuRightPadding; // 菜单和右边的边距
    private int mMenuWidth; // 菜单布局的宽度

    private boolean once = true;


    /**
     * 各个组件
     */
    private LinearLayout mWapper;  
    private ViewGroup mMenu;
    private ViewGroup mContent;

1.获取屏幕像素

/**
     * 获取屏幕像素的宽度值
     * 
     * @param context
     * @param attrs
     */

    public MyMenuView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
        WindowManager wm = (WindowManager) context
                .getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(outMetrics);

        // 屏幕像素的PX
        sCreenWidth = outMetrics.widthPixels;

        /**
         * 进行单位的转换 dp->px
         */
        mMenuRightPadding = (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources()
                        .getDisplayMetrics());

    }

mMenuRightPadding代表的宽度->如下图所示
这里写图片描述

首先设置一个布尔型变量


    /**
     * 为了避免onMeasure方法多次调用 我们设置一个布尔值
     */
    private boolean once = true;

2.决定View的宽和高

/**
     * 决定View的宽和高
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // TODO Auto-generated method stub
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        if (once) {
            mWapper = (LinearLayout) getChildAt(0);
            mMenu = (ViewGroup) mWapper.getChildAt(0);
            mContent = (ViewGroup) mWapper.getChildAt(1);

            // 菜单布局的宽度
            mMenuWidth = mMenu.getLayoutParams().width = sCreenWidth
                    - mMenuRightPadding;

            mContent.getLayoutParams().width = sCreenWidth;

            once = false;
        }

    }

3.决定组件在什么位置

/**
     * 决定组件在什么位置
     */

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        // TODO Auto-generated method stub
        super.onLayout(changed, l, t, r, b);

        /**
         * 把左边的菜单布局隐藏
         */
        if (changed) {
            scrollTo(mMenuWidth, 0);
        }

    }

接下来就是设置手指抬起的事件了

@Override
    public boolean onTouchEvent(MotionEvent ev) {
        // TODO Auto-generated method stub

        int action = ev.getAction();
        switch (action) {
        case MotionEvent.ACTION_UP:
            // 隐藏在左边的宽度
            int scrollX = getScrollX();
            if (scrollX <= mMenuWidth / 2) {
                smoothScrollTo(0, 0);
            } else {
                smoothScrollTo(mMenuWidth, 0);
            }

            return true;

        default:
            break;
        }

        return super.onTouchEvent(ev);
    }

完整代码：
MyMenuView.java

package com.example.again_imooc_qq50_demo.view;

import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;

public class MyMenuView extends HorizontalScrollView {

    private int sCreenWidth; // 屏幕像素的宽度
    private int mMenuRightPadding; // 菜单和右边的边距
    private int mMenuWidth; // 菜单布局的宽度

    private boolean once = true;

    /**
     * 各个组件
     */
    private LinearLayout mWapper;
    private ViewGroup mMenu;
    private ViewGroup mContent;

    /**
     * 获取屏幕像素的宽度值
     * 
     * @param context
     * @param attrs
     */

    public MyMenuView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
        WindowManager wm = (WindowManager) context
                .getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(outMetrics);

        // 屏幕像素的PX
        sCreenWidth = outMetrics.widthPixels;

        /**
         * 进行单位的转换 dp->px
         */
        mMenuRightPadding = (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources()
                        .getDisplayMetrics());

    }

    /**
     * 决定View的宽和高
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // TODO Auto-generated method stub
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        if (once) {
            mWapper = (LinearLayout) getChildAt(0);
            mMenu = (ViewGroup) mWapper.getChildAt(0);
            mContent = (ViewGroup) mWapper.getChildAt(1);

            // 菜单布局的宽度
            mMenuWidth = mMenu.getLayoutParams().width = sCreenWidth
                    - mMenuRightPadding;

            mContent.getLayoutParams().width = sCreenWidth;

            once = false;
        }

    }

    /**
     * 决定组件在什么位置
     */

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        // TODO Auto-generated method stub
        super.onLayout(changed, l, t, r, b);

        /**
         * 把左边的菜单布局隐藏
         */
        if (changed) {
            scrollTo(mMenuWidth, 0);
        }

    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        // TODO Auto-generated method stub

        int action = ev.getAction();
        switch (action) {
        case MotionEvent.ACTION_UP:
            // 隐藏在左边的宽度
            int scrollX = getScrollX();
            if (scrollX <= mMenuWidth / 2) {
                smoothScrollTo(0, 0);
            } else {
                smoothScrollTo(mMenuWidth, 0);
            }

            return true;

        default:
            break;
        }

        return super.onTouchEvent(ev);
    }

}

源码下载

Kid_TH
关注
专栏目录
Android自定义SwipeLayout仿QQ侧滑条目
01-06
Android自定义SwipeLayout仿QQ侧滑条目，供大家参考，具体内容如下 先看动图 看布局文件 activity_main.xml <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=www.wes
android仿QQ首页侧滑
05-21
安卓初学者必备技术，android高仿QQ首页侧滑，灵活 多用，流畅性能好
Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭
810364804
09-15 1072
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/39257409，本文出自【张鸿洋的博客】 上一篇博客带大家实现了：Android 自定义控件打造史上最简单的侧滑菜单，有兄弟看了以后说，你这滑动菜单过时了呀~QQ5.0的效果还不错~~嗯，的确，上一篇也承诺过，稍微修改上一篇的代码，实现QQ5.0侧滑菜单~~好了，下面就开始为大家展...
【Android】史上最简单，一步集成侧滑(删除)菜单，高仿QQ、IOS。
最新发布
2401_85493350的博客
06-23 645
小编这些年深知大多数初中级Android工程师，想要提升自己，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
Android高仿QQ侧滑菜单
小马快跑的博客
06-13 3420
先上效果图： GIF图有点模糊，源码已上传Github：Android仿QQ侧滑菜单整体思路：自定义ItemView的根布局(SwipeMenuLayout extends LinearLayout)，复写onTouchEvent来处理滑动事件，注意这里的滑动是View里面内容的滑动而不是View的滑动，View里内容的滑动主要是通过scrollTo、scrollBy来实现，然后自定义SwipeR
安卓仿QQ侧滑(SwipeLayout+RecyclerView)
weixin_45843676的博客
11-25 581
安卓仿QQ侧滑(SwipeLayout+RecyclerView)
Android例子源码仿QQ5.0侧滑菜单
03-16
总的来说，这个“Android例子源码仿QQ5.0侧滑菜单”项目展示了如何利用NineOldAndroids库在不同Android版本上实现高级动画效果，以及如何构建和管理侧滑菜单，包括手势检测、布局设计和UI定制。对于想要学习Android...
仿QQ侧滑例子源码
12-20
【仿QQ侧滑例子源码】是一个用于学习和实践的Android开发项目，旨在模拟QQ应用中的侧滑菜单效果。在Android应用设计中，侧滑菜单（通常称为抽屉式导航）是一个常见且实用的设计模式，它允许用户通过从屏幕边缘向内...
仿qq侧滑例子
12-04
在"仿qq侧滑例子"中，可能使用了自定义的ViewGroup，例如SlidingPaneLayout或者DrawerLayout，这两种布局都是Android SDK提供的，用于实现抽屉式的侧滑效果。SlidingPaneLayout允许一个视图覆盖在另一个视图之上，...
Android使用Item Swipemenulistview实现仿QQ侧滑删除功能
08-31
至此，我们就成功实现了使用`SwipeMenuListView`在Android应用中创建仿QQ侧滑删除功能。这个功能不仅可以用于删除，还可以扩展为其他操作，如分享、编辑等，大大提升了用户体验。记得在实际项目中，根据需要调整样式...
Android仿腾讯QQ侧滑菜单
08-05
Android 利用ViewDragHelper实现的仿腾讯QQ侧滑菜单的实现
Android 仿QQ侧滑删除—一个满足ListView、RecyclerView以及其他View通用的侧滑删除
11-07
仿QQ侧滑删除，使用简单，满足ListView、RecyclerView以及其他View通用的侧滑删除
Android使用DrawerLayout仿QQ6.6版侧滑效果
01-20
一讲到侧滑菜单，我相信大家都会想到一个开源控件SlidingMenu，在google还没有出来DrawerLayout的时候几乎都是使用Slidingmenu来实现侧滑效果，可以说是效果很不错，自从google出了Drawerlayout以后很多公司就使用了Drawerlayout比如 滴滴打车等等。那么今天我们利用drawerlayout来实现qq6.6最新的侧滑效果。首先来看看Drawerlayout默认的效果： 和目前最新版的qq的侧滑还是不一样的区别就是内容页面没有跟随向右滑动，而是菜单直接覆盖在内容上，来看一张QQ的样式图 这样大家可以看到区别了，其实我们只要在滑动左面菜单的
android仿QQ的侧滑菜单功能完整版
07-16
网上很多android上的侧滑菜单，只能侧滑出一个界面而已，缺少菜单响应事件等完整功能。本代码在java apk的侧滑菜单上修改而成，菜单项目可以动态变化，并增加了菜单响应事件及菜单选择回调等必备功能。
android效仿qq侧滑菜单,Android仿qq侧滑菜单
weixin_39853523的博客
05-26 328
我们经常能看到各种app中都有应用侧滑菜单(SlidingMenu),效果很好的一种显示方式，今天我就向大家展示可以说是很简单就能实现和qq的侧滑菜单很相似的效果。现在侧滑菜单的框架在github上也有很多，有兴趣的可以去搜一下，今天我就给大家展示一个简单的仿qq侧滑菜单的例子。开始实现原理我们可以自定义一个view，然后用一个水平滚动条HorizontalScrollView匹配父容器原理如图:...
仿QQ6.0主页面侧滑效果
热门推荐
z240336124的专栏
11-02 2万+
1.概述　　最近一直都在带实习生做项目，发现自己好久没有写博客了，这几天更新会比较频繁，今天玩QQ的时候发现QQ主页菜单滑动效果早就变了，实在忍不住晚上就来实现一下了！ 　　2．实现　　　2.1． 实现的方式多种多样 　　2.1.1　自定义ViewGroup ，处理其onTouch事件 　　2.1.2　FrameLayout + 手势处理类GestureDetector
android_基础_实现仿qq侧滑菜单
写bug的蚊子的博客
09-10 778
Material Design 系列之 DrawerLayout + NavigationView 开发详解 原文 原创 Jaynm [码农专栏](javascript:void(0)???? 前言 DrawerLayout 是 Support Library 包中实现了侧滑菜单效果的控件，可以说 DrawerLayout 是因为第三方控件如 MenuDrawer 等的出现之后，google 借鉴而出现的产物。DrawerLayout 分为侧边菜单和主内容区两部分，侧边菜单可以根据手势展开与隐藏（Drawe
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值