仿QQ5.0的侧滑菜单

最新推荐文章于 2024-09-18 15:29:47 发布
最新推荐文章于 2024-09-18 15:29:47 发布
阅读量359 收藏
点赞数
分类专栏： 实战学习 文章标签： android 侧滑菜单

这里写图片描述

第一步：设置菜单的布局，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/img_frame_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/image1"
                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/image1"
                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/image2"
                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/image2"
                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/image3"
                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/image3"
                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/image4"
                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/image4"
                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/image5"
                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/image5"
                android:text="第五个item"
                android:textColor="#ffffff"
                android:textSize="20sp" />
        </RelativeLayout>

    </LinearLayout>
</RelativeLayout>

这里写图片描述

android:src与android:background的区别:
http://blog.csdn.net/dalleny/article/details/14048375

第二步：改写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" >

    <!-- SlidingMenu继承自HorizontalScrollView -->
    <com.example.sideslipfollowqq5_0.SlidingMenu 
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <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="match_parent" 
               android:background="@drawable/qq" >      
           </LinearLayout>

        </LinearLayout>

    </com.example.sideslipfollowqq5_0.SlidingMenu>

</RelativeLayout>

注意：HorizontalScrollView的内部只能有一个控件

第三步：实现SlidingMenu.java

自定义ViewGroup需要做的事:
1、 onMeasure
决定内部View（子View）的宽和高，(可选，因为有时候在.xml文件中会设置成”match_parent”)以及自己的宽和高
2、 onLayout
决定子View放置的位置
3、 onTounchEvent（可选）
决定内部View的移动效果或者变化

public class SlidingMenu extends HorizontalScrollView {
    private LinearLayout mWapper;//activity_main.xml中com.example.sideslipfollowqq5_0.SlidingMenu布局
    private ViewGroup mMenu;//activity_main.xml中include的布局
    private ViewGroup mContent;//activity_main.xml中第二个LinearLayout布局

    private int mScreenWidth;//屏幕的宽度

    private int mMenuRightPadding;//菜单完全显示时与屏幕右侧的距离（在SlidingMenu中设置成一个固定值）

    private boolean isOnce=true;//因为onMeasure又可能会多次调用（影响效率），这里用于判断onMeasure是否是第一次调用

    private int mMenuWidth;//代表mMenu的宽度

    /**
     * 未使用自定义属性时调用（使用自定义属性会在下一篇说明）
     * @param context
     * @param attrs
     */
    public SlidingMenu(Context context, AttributeSet attrs) {
        super(context, attrs);

        //获取屏幕的宽度
        WindowManager wm=(WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics=new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(outMetrics);//getMetrics将会为传入的outMetrics赋值
        mScreenWidth=outMetrics.widthPixels;

        //将50dp转化成相应的px
        //因为dp是相对于分辨率的，而px就是一个像素点，是固定大小的
        //为了在不同分辨率的屏幕上显示的效果相同，应该将mMenuRightPadding依据不同的分辨率而变换
        mMenuRightPadding=(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics());
    }

    /**
     * 设置子View的宽和高以及自己的宽和高
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        if (isOnce) {
            mWapper = (LinearLayout) getChildAt(0);// 得到activity_main.xml中SlidingMenu布局下的第一个元素，即activity_main.xml中第一个LinearLayout
            mMenu = (ViewGroup) mWapper.getChildAt(0);
            mContent = (ViewGroup) mWapper.getChildAt(1);

            mMenuWidth=mMenu.getLayoutParams().width = mScreenWidth - mMenuRightPadding;// 设置mMenu的宽度
            mContent.getLayoutParams().width = mScreenWidth;
            isOnce = false;
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    /**
     * 通过设置偏移量，一开始就将menu隐藏
     */
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {

        super.onLayout(changed, l, t, r, b);

        if (changed) {
            this.scrollTo(mMenuWidth, 0);// 当第一个参数为正时，滚动条向左移动，内容区域向右移动
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        int action=ev.getAction();//通过action判断用户的操作，是按下、抬起、还是在移动
        switch (action) {
        case MotionEvent.ACTION_UP:
            int scrollX=(int) getScrollX();//得到未在屏幕显示出的内容的左侧区域宽度(即左侧隐藏的宽度)，动态变化的
            if(scrollX>=mMenuWidth/2) {
                this.smoothScrollTo(mMenuWidth, 0);
                //this.scrollTo(mMenuWidth, 0);
                //如果内容隐藏的区域>=菜单的一半，隐藏菜单
                //smoothScrollTo方法与scroolTo相似，只不过scroolTo是瞬间完成，而该方法有一个缓冲的效果
            }
            else {
                this.smoothScrollTo(0, 0);
            }
            return true;
        default:
            break;
        }
        return super.onTouchEvent(ev);
    }
}

scrollTo(int x,int y) ：当第一个参数为正时，滚动条向左移动，内容区域向右移动
将一个视图的内容移动到指定位置（即给定的x、y坐标）.此时偏移量 mScrollX,mScrollY就分别等于x,y，该动作是瞬间完成的，无法给用户一个缓冲的感觉（smoothScrollTo则具有缓冲效果）
进一步了解请参考：http://www.tuicool.com/articles/JBFrauZ

getScrollX():得到未在屏幕显示出的内容的左侧区域(即左侧隐藏的宽度)
这里写图片描述

关于TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics());
请参考：http://www.cnblogs.com/xilinch/p/4444833.html

第四步：修改MainActivity.java，隐藏活动的标题

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
    }
}

源码：http://download.csdn.net/download/qq_22804827/9284053

一个昵称而已T
关注
专栏目录
qq侧滑菜单的简单实现
默默丶遗忘
11-06 647
疯了,疯了,刚刚写的一不小心被我删了 ,我就简单的把代码贴下,代码上面都有注释, 首先是布局文件,<com.qianfeng.sideqq.ui.DragLayer xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" and
Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭
810364804
09-15 1072
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/39257409，本文出自【张鸿洋的博客】 上一篇博客带大家实现了：Android 自定义控件打造史上最简单的侧滑菜单，有兄弟看了以后说，你这滑动菜单过时了呀~QQ5.0的效果还不错~~嗯，的确，上一篇也承诺过，稍微修改上一篇的代码，实现QQ5.0侧滑菜单~~好了，下面就开始为大家展...
Flutter：手把手教你实现一个仿QQ侧滑菜单的功能
吉原拉面
10-16 3010
  一个类似于QQ侧滑菜单的功能，支持从上、下、左、右四个方法打开菜单栏。可以通过自定义transform实现更加炫酷的动效！   先上效果图： slide from left.gif slide from right.gif slide from top.gif Github地址：https://github.com/yumi0629/SlideDrawer 使用方法： ...
教你实现最简单的QQ消息item侧滑菜单
Jack921的专栏
04-16 1245
这次跟大家介绍怎么简单的实现类似QQ消息Item的左右滑动菜单的实现。首先见效果图先: 这就实现了ListView或RecyclerView加载的item的View实现侧滑菜单。至于这么实现，很简单就是通过继承HorizontalScrollView，再判断滑动的距离以滑到对应的View或菜单。具体如下: 首先，在item的界面布局方面如下:<?xml version="1.0" encodin
仿QQ5.0侧滑菜单效果
08-03 110
慕课网视频 今天我们来继承 HorizontalScrollView 实现比较炫酷的侧滑菜单效果 继承HorizontalScrollView的好处有两点： 1、不用在写 MOVE 事件 2、不用解决 和 ListView 的冲突 以下是实现步骤： 自定义 ViewGroup，实现它的几个方法 1、onMeasure 决定内部 View （子 Vie...
仿QQ5.0侧滑菜单实现
小小矮子的博客
08-23 682
周末两天时间在公司里研究新版QQ的侧滑菜单的实现，在网上也看到一些实例，也看了慕课网上的课程，终于完全搞明白了整个实现过程，现将我的理解和实现写出来。 自定义控件--显示侧滑菜单和内容的horizontalScrollView 需要用到 HorizontalScrollView控件，同时要实现 （1）初始状态是显示内容，隐藏菜单 （2）当滑动超过屏幕一般的响应。（隐藏菜单o
android 高仿qq5.0,ym Android仿QQ5.0侧滑菜单ResideMenu源码分析
weixin_36005427的博客
05-27 434
原创博客地址：点击传送AndroidResideMenugithub:https://github.com/SpecialCyCi/AndroidResideMenu csdn:http://download.csdn.net/detail/cym492224103/7887801先看看如何使用：把项目源码下载下来导入工程，可以看到ResideMenu为引用工程，再看看如何使用这个引用工程来构建出...
仿QQ5.0侧滑菜单
04-07 95
一.概述 侧滑菜单现在已经非常流行了,目前大概有这么几种:最普通的侧滑,抽屉侧滑,QQ侧滑 注:本文来自慕课网 二.最普通的侧滑 先上图 代码如下: 1 public class MainActivity extends Activity { 2 private SlidingMenuView mLeftMenu; 3 @Override ...
Android 高仿 QQ5.0 侧滑菜单效果 HorizontalScrollView
06-10 285
上一篇博客带大家实现了：Android 自定义控件打造史上最简单的侧滑菜单，有兄弟看了以后说，你这滑动菜单过时了呀~QQ5.0的效果还不错~~嗯，的确，上一篇也承诺过，稍微修改上一篇的代码，实现QQ5.0侧滑菜单~~好了，下面就开始为大家展示写一个类QQ的侧滑有多easy ~! 1、原理...
Android 超高仿 QQ5.0 侧滑菜单项目完整实例代码
09-14
【Android超高仿QQ5.0侧滑菜单项目完整实例代码】是一个针对Android开发者的实践教程，旨在教开发者如何实现类似QQ5.0版本中的侧滑菜单效果。这个实例代码是基于CSDN博主的文章，你可以通过提供的链接在博客中找到更...
Android例子源码仿QQ5.0侧滑菜单
03-16
在这个“Android例子源码仿QQ5.0侧滑菜单”项目中，开发者利用了第三方库NineOldAndroids来实现对Android早期版本的支持，因为NineOldAndroids库使得在Android 2.x版本上也能实现一些API 11+的新特性。 首先，让...
Android开发+UI组件+QQ侧滑菜单+项目实战示例：Android 超高仿 QQ5.0 侧滑菜单项目完整实例代码
04-18
本资源包“Android开发+UI组件+QQ侧滑菜单+项目实战示例：Android 超高仿 QQ5.0 侧滑菜单项目完整实例代码”为Android开发者提供了一个详尽的实例，展示如何创建一个与QQ5.0版本中的侧滑菜单高度相似的用户界面。...
Android仿QQ5.0侧滑菜单
06-01
本文将详细介绍如何在Android中实现一个仿QQ5.0的侧滑菜单。 首先，我们需要了解实现侧滑菜单的核心组件——`SlidingPaneLayout`。`SlidingPaneLayout`是Android SDK提供的一种布局，它允许两个视图并排显示，并...
在Android中fragment的生命周期
LLZjiayou的博客
09-18 543
Fragment的生命周期非常类似于Activity，但是它有自己特有的生命周期方法（如），因为Fragment的视图可能会被销毁和重建。
android 14.0 USB连接模式默认设为MTP
安卓兼职framework和app工程师的博客
09-13 452
在14.0android系统产品开发中，在通过otg连接设备的时候，会弹出usb连接模式这时候会让客户选择当前连接电脑是 哪种模式，在项目开发中，需要以mtp模式，就是可以在电脑查看设备的内部存储的样式来设置otg连接电脑的模式， 接下来分析下相关模式，来具体实现相关功能
Shell篇之编写php启动脚本
最新发布
小橙子的笔记屋
09-18 164
shell编写php启动脚本
百度Android IM SDK组件能力建设及应用
lihui49的博客
09-18 1045
即时通讯系统（Instant Messaging，简称IM系统）是一种允许用户通过互联网实时交换信息的通信技术。核心功能包括消息的发送与接收、用户状态的管理、消息、会话的存储与检索等。为了更好地满足用户更多场景诉求，IM系统还提供了如群组聊天、文件传输、语音和视频通话等功能。
Android14 蓝牙 BluetoothService 启动和相关代码介绍
wenzhi的博客
09-14 1852
蓝牙开关和使能开发主要用到：BluetoothService、BluetoothManagerService、BluetoothManager、BluetoothAdapter 这几个系统相关类。某个蓝牙的配对、连接、断开 使用的是 BluetoothDevice 对象。蓝牙开关状态不记忆或者打开异常就可以看看BluetoothManagerService的日志，里面有打开关闭相关过程日志和时间点，这个对问题分析有一定的帮助。本文主要介绍一下 framework 相关的几个类，
自定义控件实现QQ5.0侧滑菜单动画教程
"基于Android实现仿QQ5.0侧滑，通过自定义控件和属性动画来创建可拖动的侧滑菜单效果" 在Android应用开发中，侧滑菜单是常见的用户界面元素，用于提供一个隐藏的导航区域，通常包含应用的主要功能或设置选项。QQ5.0...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值