Android自定义HorizontalScrollView实现qq侧滑菜单

今天看了鸿洋_大神在慕课网讲的qq5.0侧滑菜单。学了不少的知识,同时也佩服鸿洋_大神思路的清晰。

看了教程课下也自己实现了一下。代码几乎完全相同  别喷我啊。。没办法 o(︶︿︶)o 唉

像素不好 没办法 找不到好的制作gif的软件。

我们暂且称侧滑左边界面的为menu,右边为content

首先是menu的布局

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/img_frame_background" > <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:orientation="vertical" > <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content" > <ImageView android:id="@+id/image1" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="20dp" android:src="@drawable/img_1" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_toRightOf="@id/image1" android:textColor="#ffffff" android:layout_marginLeft="20dp" android:text="第一个Item" android:textSize="20sp" /> </RelativeLayout> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" > <ImageView android:id="@+id/image2" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="20dp" android:src="@drawable/img_2" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_toRightOf="@id/image2" android:textColor="#ffffff" android:layout_marginLeft="20dp" android:text="第二个Item" android:textSize="20sp" /> </RelativeLayout> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" > <ImageView android:id="@+id/image3" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="20dp" android:src="@drawable/img_3" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_toRightOf="@id/image3" android:textColor="#ffffff" android:layout_marginLeft="20dp" android:text="第三个Item" android:textSize="20sp" /> </RelativeLayout> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" > <ImageView android:id="@+id/image4" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="20dp" android:src="@drawable/img_4" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_toRightOf="@id/image4" android:textColor="#ffffff" android:layout_marginLeft="20dp" android:text="第四个Item" android:textSize="20sp" /> </RelativeLayout> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" > <ImageView android:id="@+id/image5" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="20dp" android:src="@drawable/img_5" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_toRightOf="@id/image5" android:textColor="#ffffff" android:layout_marginLeft="20dp" android:text="第五个Item" android:textSize="20sp" /> </RelativeLayout> </LinearLayout> </RelativeLayout>

然后是主布局,一个水平滚动条,放入menu.xml,然后下面是一个线性垂直布局,背景是qq图片

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" > <com.example.myhorizontalscrollview.MyHorizontalScrollView android:layout_width="fill_parent" android:layout_height="fill_parent" android:scrollbars="none"> <LinearLayout android:layout_width="wrap_content" android:layout_height="fill_parent" android:orientation="horizontal" > <include layout="@layout/menu" /> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/qq" /> </LinearLayout> </com.example.myhorizontalscrollview.MyHorizontalScrollView> </RelativeLayout>

其中的水平滚动条是我们自定义的view

需要重写其中的两个方法

@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); }

通过设置偏移量,调整我们的初始布局,使menu全部隐藏,右侧菜单显现

@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // TODO Auto-generated method stub super.onMeasure(widthMeasureSpec, heightMeasureSpec); }

设置子view的宽

* 因为HorizontalScrollView自己控制move和down的事件

* 所以我们还要通过onTouchEvent判断一下up.如果当前的x偏移量大于menu宽度的一半

* 隐藏menu,否则显示menu 显示的时候通过smoothScrollTo(x, y)方法来实现动画的效果

下面是所有的自定义的HorizontalScrollView

package com.example.myhorizontalscrollview; import android.annotation.SuppressLint; import android.content.Context; import android.text.GetChars; 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 MyHorizontalScrollView extends HorizontalScrollView { //滚动条中的水平先行布局 private LinearLayout mWrpper; //水平线性布局的左侧菜单menu private ViewGroup mMenu; //水平先行布局的右侧线性布局 private ViewGroup mContent; //屏幕的宽 private int mScreenWidth; //menu的宽离屏幕右侧的距离 private int mMenuRightPadding=50; //menu的宽度 private int mMenuWidth; private boolean once; /** * 未使用自定义属性时调用 * */ public MyHorizontalScrollView(Context context, AttributeSet attrs) { super(context, attrs); /* * 获取屏幕的宽度 * 通过context拿到windowManager,在通过windowManager拿到Metrics,用DisplayMetrics接收 * */ 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) { // TODO Auto-generated method stub if(!once){ mWrpper=(LinearLayout) getChildAt(0); mMenu=(ViewGroup) mWrpper.getChildAt(0); mContent=(ViewGroup) mWrpper.getChildAt(1); //menu的宽度等于屏幕的宽度减去menu离屏幕右侧的边距 mMenuWidth=mMenu.getLayoutParams().width=mScreenWidth-mMenuRightPadding; //右边的先行布局的宽度直接等于屏幕的宽度 mContent.getLayoutParams().width=mScreenWidth; once=true; } super.onMeasure(widthMeasureSpec, heightMeasureSpec); } /* * 通过设置偏移量将menu隐藏 * */ @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); /* * 通过scrollTo(x,y)方法设置屏幕的偏移量,x为正 * 内容向左移动 * */ if(changed){ this.scrollTo(mMenuWidth, 0); } } /* * 因为HorizontalScrollView自己控制move和down的事件 * 所以我们还要判断一下up.如果当前的x偏移量大于menu宽度的一半 * 隐藏menu,否则显示menu * */ @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){ this.smoothScrollTo(mMenuWidth, 0); } else{ this.smoothScrollTo(0, 0); } return true; } return super.onTouchEvent(ev); } }

然后就是MainActivity加载布局就可以

package com.example.slipping; import com.example.helloworld.R; import android.os.Bundle; import android.app.Activity; import android.view.Menu; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } }

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

时间: 2024-10-30 14:49:16

Android自定义HorizontalScrollView实现qq侧滑菜单的相关文章

Android自定义View 仿QQ侧滑菜单的实现代码

先看看QQ的侧滑效果 分析一下 先上原理图(不知道能否表达的清楚 ==) -首先这里使用了 Android 的HorizontalScrollView 水平滑动布局作为容器,当然我们需要继承它自定义一个侧滑视图 - 这个容器里面有一个父布局(一般用LinerLayout,本demo用的是),这个父布局里面有且只有两个子控件(布局),初始状态菜单页的位置在Y轴上存在偏移这样可以就可以形成主页叠在菜单页的上方的视觉效果:然后在滑动的过程程中 逐渐修正偏移,最后菜单页和主页并排排列.原理搞清了实现起来

Android实现网易新闻客户端侧滑菜单(2)_Android

前面已经讲过通过三方开源库SlideMenu来实现这种效果,请参考Android实现网易新闻客户端侧滑菜单(一) 今天通过自定义View来实现这种功能. 代码如下: SlideMenu.java package com.jackie.slidemenu.view; import android.content.Context; import android.graphics.Canvas; import android.util.AttributeSet; import android.view

Android实现网易新闻客户端侧滑菜单(1)_Android

Android中很多产品(比如360手机助手.网易菜单...)都采用侧滑菜单的展现形式,采用这种展现形式 1.能把更多的展现内容都存放在菜单中 2.设计上也能体现出视觉效果 现在这种交互方式越来越流行了,虽然这种交互方式可以通过自定义组件的方式来实现,但是用三方开源库更简单. SlidingMenu:SlidingMenu的是一种比较新的设置界面或配置界面效果,在主界面左滑或者右滑出现设置界面,能方便的进行各种操作.目前有大量的应用都在使用这一效果. 地址:https://github.com/

Android开发之各种双向侧滑菜单的实现

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39670935,本文出自:[张鸿洋的博客] 1.概述 关于自定义控件侧滑已经写了两篇了~~今天决定把之前的单向改成双向,当然了,单纯的改动之前的代码也没意思,今天不仅会把之前的单向改为双向,还会多添加一种侧滑效果,给大家带来若干种形态各异的双向侧滑菜单,不过请放心,代码会很简单~~然后根据这若干种,只要你喜欢,相信你可以打造任何绚(bian)丽(tai)效果的双向侧滑菜单~~ 首

Android实现网易新闻客户端侧滑菜单(2)

前面已经讲过通过三方开源库SlideMenu来实现这种效果,请参考Android实现网易新闻客户端侧滑菜单(一) 今天通过自定义View来实现这种功能. 代码如下: SlideMenu.java package com.jackie.slidemenu.view; import android.content.Context; import android.graphics.Canvas; import android.util.AttributeSet; import android.view

Android如何实现的简单侧滑菜单

问题描述 Android如何实现的简单侧滑菜单 利用最简单,代码量最少的方法实现侧滑菜单,主要方法没搞懂,请求实现的步骤 解决方案 先定义出菜单的XML android:layout_width="match_parent" android:layout_height="match_parent" > <LinearLayout an......<br/><strong>答案就在这里:</strong><a ta

Android 自定义 HorizontalScrollView 打造多图片OOM 的横向滑动效果(实例代码)

自从Gallery被谷歌废弃以后,Google推荐使用ViewPager和HorizontalScrollView来实现Gallery的效果.的确HorizontalScrollView可以实现Gallery的效果,但是HorizontalScrollView存在一个很大的问题,如果你仅是用来展示少量的图片,应该是没问题的,但是如果我希望HorizontalScrollView可以想ViewPager一样,既可以绑定数据集(动态改变图片),还能做到,不管多少图片都不会OOM(ViewPager内

Android_UI 仿QQ侧滑菜单效果的实现

相信大家对QQ侧滑菜单的效果已经不陌生了吧,侧滑进入个人头像一侧,进行对头像的更改,我的收藏,QQ钱包,我的文件等一系列的操作,今天呢,主要是实现进入侧滑菜单的这一效果原理进行分析. 主要思路分析 1.首先写一个SlideMenu 继承一个帧布局FrameLayout ,因为如果继承自ViewGroup的话,需要我们自己来实现onMeasure方法,而该方法的实现一般比较麻烦且没有必要,所以选择继承系统的已有的控件FrameLayout,不用其他控件是因为FrameLayout最轻量级 2.在布

Android实现网易新闻客户端侧滑菜单(1)

Android中很多产品(比如360手机助手.网易菜单...)都采用侧滑菜单的展现形式,采用这种展现形式 1.能把更多的展现内容都存放在菜单中 2.设计上也能体现出视觉效果 现在这种交互方式越来越流行了,虽然这种交互方式可以通过自定义组件的方式来实现,但是用三方开源库更简单. SlidingMenu:SlidingMenu的是一种比较新的设置界面或配置界面效果,在主界面左滑或者右滑出现设置界面,能方便的进行各种操作.目前有大量的应用都在使用这一效果. 地址:https://github.com/