仿QQ5.0的侧滑菜单

转载 2015年11月20日 11:58:05

这里写图片描述

第一步:设置菜单的布局,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

修改slidingmenu仿QQ5.0侧滑菜单

转自:http://blog.csdn.net/manoel/article/details/39013095/#plain 本文由 孙国威 原创。如需转载,请注明出处! 为了...
  • huweijian5
  • huweijian5
  • 2015年02月28日 20:04
  • 845

仿QQ5.0菜单的实现及分析

在慕课网上看了鸿洋扣扣5.0菜单的视频,在这里写下新的也顺便梳理一下里面涉及到的知识点。不得不佩服大神的深度,讲的非常好。一、普通侧滑菜单的实定义出menu的布局文件。 ...
  • kenzo0
  • kenzo0
  • 2016年01月30日 16:09
  • 249

抽屉式菜单-仿QQ5.0侧滑菜单

为扩展屏幕尺寸所带来的局限性,很多APP都有侧滑菜单。所谓的侧滑菜单就是将一些菜单选项隐藏起来,而不是放置在主屏幕上,然后可以通过滑动的方式将菜单显示出来。 本文将通过Android提供的Horizo...
  • yuanxindev
  • yuanxindev
  • 2017年02月12日 14:56
  • 132

ym——Android仿QQ5.0侧滑菜单ResideMenu源码分析

原创博客地址:点击传送 AndroidResideMenu github:https://github.com/SpecialCyCi/AndroidResideMenu  csdn:http:/...
  • cym492224103
  • cym492224103
  • 2014年09月10日 09:23
  • 21231

关于SlidingMenu的一些改进写法,仿QQ5.0侧拉缩进

SlidingMenu的使用教程很多,如果只需要简单的侧拉,使用如下的办法简单加载点击SlidingMenu下载首先下载完毕导入项目中,导入方式如图 这时还没有玩,slidingMenu在文件夹下另...
  • z171422696
  • z171422696
  • 2017年01月16日 16:09
  • 336

android 仿QQ5.0左侧菜单,仿ISO7菜单,residemenu

最近QQ5.0更换了界面框架,左侧的
  • X158840833
  • X158840833
  • 2014年09月01日 14:33
  • 889

仿QQ5.0侧滑菜单实现

周末两天时间在公司里研究新版QQ的侧滑菜单的实现,在网上也看到一些实例,也看了慕课网上的课程,终于完全搞明白了整个实现过程,现将我的理解和实现写出来。 自定义控件--显示侧滑菜单和内容的horizo...
  • chengyajun12345
  • chengyajun12345
  • 2015年08月23日 17:18
  • 404

仿QQ5.0侧滑菜单ResideMenu

为了后续对这个项目进行优化,比如透明度动画、背景图的位移动画,以及性能上的优化。 我把这个项目上传到github上面,请大家随时关注。 github地址 https://github.com/s...
  • bingqingsuimeng
  • bingqingsuimeng
  • 2016年03月25日 15:06
  • 502

高仿QQ5.0的侧滑菜单的实现

转载自:http://blog.csdn.net/lmj623565791/article/details/39257409【张鸿洋的博客】 偶遇 看到QQ的侧滑菜单的效果,感觉真的很酷炫,想找一些高...
  • ProgramChangesWorld
  • ProgramChangesWorld
  • 2015年05月03日 16:09
  • 620

仿QQ5.0侧滑菜单—进阶篇

在上一篇文章中,实现了抽屉式侧滑菜单,但是跟真正的QQ5.0的侧滑菜单还是有所区别的: 区别1:内容区域1.0~0.7缩放的效果 区别2:菜单显示时有缩放,以及透明度变化(缩放:0.7~1.0 ...
  • qq_22804827
  • qq_22804827
  • 2015年11月21日 21:01
  • 917
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:仿QQ5.0的侧滑菜单
举报原因:
原因补充:

(最多只允许输入30个字)