QQ左侧滑动显示

  对于新版的QQ界面,左侧增加了一个滑动效果,相信小伙伴们早已按耐不住激动的心情,这种效果是如何实现的呢?本篇我们就一起来探讨一二。既然是滑动效果这里就要使用到HorizontalScrollView类,一个水平滑动的效果。

  对于这个效果我们可以分为一个Item Menu和Layout,通过对Item Menu设置padding值来隐藏和显示左侧的Menu菜单。

  我们的Menu设计代码:

<?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="match_parent">
            <ImageView
               android:id="@+id/img1"
               android:layout_width="50dp"
               android:layout_height="50dp"
               android:src="@drawable/img_1"
               android:layout_marginLeft="20dp"
               android:layout_marginTop="20dp"
               android:layout_centerVertical="true"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:textColor="#fff"
                android:text="第一个item"
                android:layout_toRightOf="@id/img1"
                android:layout_centerVertical="true"
                />
       </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
               android:id="@+id/img2"
               android:layout_width="50dp"
               android:layout_height="50dp"
               android:src="@drawable/img_2"
               android:layout_marginLeft="20dp"
               android:layout_marginTop="20dp"
               android:layout_centerVertical="true"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:textColor="#fff"
                android:text="第二个item"
                android:layout_toRightOf="@id/img2"
                android:layout_centerVertical="true"
                />
       </RelativeLayout>

    </LinearLayout>

</RelativeLayout>

  我们的主Activity的Layout代码:

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <com.example.menu.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>
    </com.example.menu.SlidingMenu>

</RelativeLayout>

  我们自定义的SlidingMenu:

package com.example.menu;

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 SlidingMenu extends HorizontalScrollView {

    private LinearLayout mWapper;
    private ViewGroup mMenu;
    private ViewGroup mContent;
    private int mScreenWidth;//屏幕的宽度
    private int mMenuWidth;//设置Menu的宽度

    //dp
    private int mMenuRightPadding;
    private boolean once = false;

    /**
     * 未使用自定义属性时调用此方法
     * @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 );
        mScreenWidth = 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) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        if(!once){
            mWapper = (LinearLayout) getChildAt(0);
            mMenu = (ViewGroup) mWapper.getChildAt(0);
            mContent = (ViewGroup) mWapper.getChildAt(1);
            mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth - mMenuRightPadding;
            mContent.getLayoutParams().width = mScreenWidth;
            once = true;
        }

    }

    /**
     * 设置子View的放置位置
     * 通过设置偏移量来隐藏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();
        switch (action) {
        case MotionEvent.ACTION_UP:
            int scrollx = getScrollX();//Menu左侧隐藏的区域宽度
            if(scrollx >= mMenuWidth/2){
                this.smoothScrollTo(mMenuWidth, 0);
            }else{
                this.smoothScrollTo(0, 0);
            }
            return true;
        }
        return super.onTouchEvent(ev);
    }

}

  我们的主Activity:

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);//去除标题
        setContentView(R.layout.activity_main);

    }
}

  效果图:

  

时间: 2024-10-26 16:08:22

QQ左侧滑动显示的相关文章

QQ左侧滑动显示之自定义属性

上一篇为大家实现了最基本的侧滑效果,相信很多小伙伴已经发现一个小问题了,修改Menu右侧的宽度时,我们需要修改我们的自定义方法,这样非常不方便,下面就为大家介绍一下如何通过自定义属性来控制这个的变化.代码主体同上,这里我就单独解释一下如何实现自定义属性. 在Android的UI设计时我们往往不能满足于谷歌为我们提供的样式,这时就需要我们自定义样式,那么自定义样式的基本步骤是什么呢?1.书写xml文件:2.在布局文件中进行使用,特别注意xmlnx:3.在构造方法中获得我们设置的值. 下面我们本篇的

SwipeListView 详解 实现微信,QQ等滑动删除效果

Linux的shell编程 1.什么是shell? 当一个用户登录Linux系统之后,系统初始化程序init就为每一个用户运行一个称为shell(外壳)的程序. shell就是一个命令行解释器,它为用户提供了一个向Linux内核发送请求以便运行程序的界面系统级程序,用户可以用shell来启动.挂起.停止甚至是编写一些程序.一般的Linux系统都将bash作为默认的shell. 2.几种流行的shell 目前流行的shell有ash.bash.ksh.csh.zsh等,可以用下面的命令来查看she

SlidingMenu 左侧滑动菜单

1.MainActivity package loveworld.slidingmenu; import java.util.ArrayList; import android.app.Activity; import android.graphics.Color; import android.graphics.drawable.ColorDrawable; import android.os.Bundle; import android.provider.ContactsContract.C

WinForm实现类似QQ停靠,显示隐藏过程添加特效效果

原文:WinForm实现类似QQ停靠,显示隐藏过程添加特效效果 这可能是个老题长谈的问题了,只是在项目中会用到这个效果,所以今天做个记录.大家见了别喷我.在项目中的需求是这样的. 打开程序,在屏幕的右下角会显示一个窗体,一般情况下该窗体会隐藏停靠在右边,只露出很小部分,当鼠标移动到这个很小部分时,窗体全部显示,显示过程是从右边滑动到左边,当鼠标离开窗体时,窗体需要隐藏在右边,只露出很小部分,隐藏过程是从左边滑动到右边. 实现此类效果我碰到的连个难点是:1.如何判断鼠标离开了窗体?2.窗体显示隐藏

安卓开发之左侧滑动菜单学习

左侧滑动窗口是很多app应用经常用到的,学习它也是很有必要的. 左侧滑动xml的布局: <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:lay

长姿势 教你在qq空间上显示iPhone6尾巴

下午刚午休完的时候,广州很多童鞋都感受到了震感,半青也感受到了,不仅如此,我还感受到了更大震感,那就是翻一下QQ空间动态,竟然看到有一位好友的尾巴竟然显示为“iPhone6”,顿时觉得该好友逼格太高了.但作为一名苹果资讯编辑,我觉得独乐乐不如众乐乐,下面就教大家如何在QQ空间上显示iPhone6小尾巴. 具体步骤如下: 第一步.打开手机QQ空间,点击[我的空间],然后再点击右上角的[个性化]选项. 第二步.把[我的手机标识]设置为[不显示].如果不记得把这个去掉,你就等着出糗吧.其次,不要被黄钻

Android高仿QQ消息滑动删除(附源码)

大家都应该使用过QQ吧,他的消息中可以滑动删除功能,我觉得比较有意思,所以模仿写了一个,并且修改了其滑动算法.我先贴几个简单示范图吧 其实主要用的是算法以及对ListView的把控. 一下是适配器的类 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

[ jquery 效果 slideDown([speed,[easing],[fn]]) slideUp([speed,[easing],[fn]]) ] 此方法用于滑动显示隐藏的被选元素:动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中,上下的padding和margin也会被有动画,效果更流畅

此方法用于滑动显示隐藏的被选元素:动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来.在jQuery 1.3中,上下的padding和margin也会被有动画,效果更流畅 实例: <!DOCTYPE html><html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my

IOS仿QQ空间时间显示

最近项目有类似QQ空间展示动态的UI,模仿了QQ空间的时间显示,在此记录,以备查阅. 这是QQ空间的ui: 时间显示为: 1.今天-->今天 xx:xx(今天 15:39)   2.昨天-->昨天 xx:xx(昨天 06:00)   3.前天-->前天 xx:xx(前天 19:00)   4.同一年, 例如:同一年的一月三号-->01-03 xx:xx(01-03 12:29)   5.不在同一年 --> xxxx-xx-xx(2014-12-12) 程序运行效果如下,以下为