仿QQ6.0主页面侧滑效果（第二种实现方法）
效果展示
背景
对于这个效果，我之前写过一种实现方法 仿QQ6.0主页面侧滑效果，这种方法跟手性不好，如果复现了的朋友应该能体会到，并且，还得自己处理很多 onTouch 事件，所以，这篇文章带大家体验一下另外一种实现方法，继承自 HorizontalScrollView
实现步骤
第一步：创建自定义类
package com.wust.myhorizontalscrollview;
import android.content.Context;
import android.util.AttributeSet;
import android.widget.HorizontalScrollView;
public class mySlidingMenu extends HorizontalScrollView {
public mySlidingMenu(Context context) {
this(context,null);
}
public mySlidingMenu(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public mySlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
}
第二步：引用布局
如果大家在这一步试图去运行，就会发现报错，如下：
大概意思就是说 HorizontalScrollView 里面只能包一个布局，所以，我们得把上面的布局文件修改一下，用一个线性布局把他们包起来
第三步：编写逻辑
这个时候当我们运行程序的时候就会发现，我们明明写的 match_parent 可是最后的结果不是铺满的，所以，我们得给我们的自定义组件赋值宽高。在 onMeasure() 方法里？？我们不妨来试试
package com.wust.myhorizontalscrollview;
import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;
public class mySlidingMenu extends HorizontalScrollView {
private int mScreenWidth;
private View mMenu;
private View mContent;
private int mMenuWidth;
private int mContentWidth;
private int mScrennHeight;
public mySlidingMenu(Context context) {
this(context,null);
}
public mySlidingMenu(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public mySlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//获取屏幕宽度
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics metrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(metrics);
mScreenWidth = metrics.widthPixels;
mScrennHeight = metrics.heightPixels;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//初始化宽度、高度
int width = 0;
int height = 0;
//获取子代
ViewGroup ll_child = (ViewGroup) getChildAt(0);
mMenu = ll_child.getChildAt(0);
mContent = ll_child.getChildAt(1);
//设置菜单 内容的宽度
mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth - 400;
mContentWidth = mContent.getLayoutParams().width = mScreenWidth;
//设置自定义组件的宽高
width = mMenuWidth + mContentWidth;
height = mScrennHeight;
setMeasuredDimension(width,height);
}
}
我们发现布局结构的确出来了，但是划不动， 最大的可能就是我们设置宽高的时机不对，通过翻阅资料，我发现我们应该写在布局解析完成这个时间节点
package com.wust.myhorizontalscrollview;
import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;
public class mySlidingMenu extends HorizontalScrollView {
private int mScreenWidth;
private View mMenu;
private View mContent;
private int mMenuWidth;
private int mContentWidth;
private int mScrennHeight;
public mySlidingMenu(Context context) {
this(context,null);
}
public mySlidingMenu(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public mySlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//获取屏幕宽度
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics metrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(metrics);
mScreenWidth = metrics.widthPixels;
mScrennHeight = metrics.heightPixels;
}
@Override
protected void onFinishInflate() {
super.onFinishInflate();
//获取子代
ViewGroup ll_child = (ViewGroup) getChildAt(0);
mMenu = ll_child.getChildAt(0);
mContent = ll_child.getChildAt(1);
//设置菜单 内容的宽度
mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth - 400;
//设置布局宽度的第二种方法
ViewGroup.LayoutParams contentLayoutParams = mContent.getLayoutParams();
mContentWidth = contentLayoutParams.width = mScreenWidth;
mContent.setLayoutParams(contentLayoutParams);
}
}
这个时候，你就会发现屏幕可以滑动了
第四步：优化
经过上面三步，侧滑菜单我们就做完了，下面所讲是为了优化用户体验
- 优化一：最初渲染页面的时候，菜单栏是关闭的
在这一步中要注意 关闭菜单的时机，即到底写在那个函数里
package com.wust.myhorizontalscrollview;
import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;
public class mySlidingMenu extends HorizontalScrollView {
private int mScreenWidth;
private View mMenu;
private View mContent;
private int mMenuWidth;
private int mContentWidth;
private int mScrennHeight;
public mySlidingMenu(Context context) {
this(context,null);
}
public mySlidingMenu(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public mySlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//获取屏幕宽度
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics metrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(metrics);
mScreenWidth = metrics.widthPixels;
mScrennHeight = metrics.heightPixels;
}
@Override
protected void onFinishInflate() {
super.onFinishInflate();
//获取子代
ViewGroup ll_child = (ViewGroup) getChildAt(0);
mMenu = ll_child.getChildAt(0);
mContent = ll_child.getChildAt(1);
//设置菜单 内容的宽度
mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth - 400;
//设置布局宽度的第二种方法
ViewGroup.LayoutParams contentLayoutParams = mContent.getLayoutParams();
mContentWidth = contentLayoutParams.width = mScreenWidth;
mContent.setLayoutParams(contentLayoutParams);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
closeMenu();
}
private void closeMenu(){
smoothScrollTo(mMenuWidth,0);
}
private void openMenu(){
smoothScrollTo(0,0);
}
}
- 优化二：判断手指抬起时是否超过菜单宽度一半，超过即打开菜单，没有超过即关闭菜单
在这一步中要区别于我们上讲 仿QQ6.0主页面侧滑效果 中的滑动正负观，在这我就不过多赘述，大家自己动手实践就知道了
@Override
public boolean onTouchEvent(MotionEvent ev) {
switch(ev.getAction()){
//自己处理 手指抬起事件 所以 return true
case MotionEvent.ACTION_UP:
{
//就是这里要注意，因为最开始 getScrollX() 的值是 mMenuWidth
if (getScrollX() > mMenuWidth/2){
closeMenu();
}else {
openMenu();
}
return true;
}
}
return super.onTouchEvent(ev);
}- 优化三：处理快速滑动手势
在这个里面主要用到了一个类 GestureDetector
public mySlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//获取屏幕宽度
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics metrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(metrics);
mScreenWidth = metrics.widthPixels;
mScrennHeight = metrics.heightPixels;
//第一步：在构造方法里创建 GestureDetector 类
mGestureDetector = new GestureDetector(context, new myGestureListener());
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
//第二步：在 onTouchEvent 中拦截快速滑动手势
if (mGestureDetector.onTouchEvent(ev)){
return mGestureDetector.onTouchEvent(ev);
}
switch(ev.getAction()){
//自己处理 手指抬起事件 所以 return true
case MotionEvent.ACTION_UP:
{
//就是这里要注意，因为最开始 getScrollX() 的值是 mMenuWidth
if (getScrollX() > mMenuWidth/2){
closeMenu();
}else {
openMenu();
}
return true;
}
}
return super.onTouchEvent(ev);
}
//第三步：编写 myGestureListener
private class myGestureListener extends GestureDetector.SimpleOnGestureListener {
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
System.out.println("velocityX ->" + velocityX);
if (menuIsOpen){
//菜单打开状态
if (velocityX < -500){
closeMenu();
return true;
}
}else {
//菜单关闭状态
if (velocityX > 500){
openMenu();
return true;
}
}
return false;
}
}
//在下面两个方法中添加了菜单是否打开标志
private void closeMenu(){
smoothScrollTo(mMenuWidth,0);
menuIsOpen = false;
}
private void openMenu(){
smoothScrollTo(0,0);
menuIsOpen = true;
}- 优化四：根据滑动给内容页添加阴影
其实要实现这个有以下两种方法：
-
在 xml 中静态添加 View 覆盖层
-
在 java 代码中动态添加 View 覆盖层（复用性好，我们选择这一种）
@Override
protected void onFinishInflate() {
super.onFinishInflate();
//获取子代
ViewGroup ll_child = (ViewGroup) getChildAt(0);
mMenu = ll_child.getChildAt(0);
mContent = ll_child.getChildAt(1);
//设置菜单 内容的宽度
mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth - 400;
//第一步：先把以前的内容 从线性布局中移除
ll_child.removeView(mContent);
//第二步：创建一个帧布局
FrameLayout contentFrameLayout = new FrameLayout(getContext());
//第三步：把以前的内容 加入到这个帧布局中
contentFrameLayout.addView(mContent);
//第四步：创建一个阴影 层
mShadeView = new View(getContext());
//给阴影层设置颜色
mShadeView.setBackgroundColor(Color.parseColor("#550000"));
//第五步：将这个阴影层加入帧布局中，覆盖在内容之上
contentFrameLayout.addView(mShadeView);
//第六步：给帧布局设置宽度
ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
params.width = mScreenWidth;
contentFrameLayout.setLayoutParams(params);
//第七步：将这个帧布局添加进来
ll_child.addView(contentFrameLayout);
//第八步：将阴影层设为透明
mShadeView.setAlpha(0.0f);
}
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
//计算比例因子 1 -> 0
float rate = l/(float)mMenuWidth;
//根据比例因子设置透明度
mShadeView.setAlpha(1-rate);
}最终效果
有偿提问
如果大家觉得这篇文章帮助你了，可以支持一下。
有偿提问
