模仿QQ5.0侧滑效果

学习链接地址:/article/1336229.html

第一次看见这个效果，觉得挺酷炫，所以决定自己实现一遍，并且心得整理如下:

其实实现的原理还是跟HorizontalScrollView这个控件有关，所以我们先来认识一下这个控件，从表面意思上来看，这就是一个水平滑动视图，就像listview是一个垂直滑动视图一样，光说不练，那么我就先来试着用一下这个控件

首先还是新建一个项目：里面包含了两个xml文件，代码如下，比较简单

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"
android:orientation="vertical" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical" >

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<ImageView
android:id="@+id/imageview1"
android:layout_width="50dp"
android:layout_height="50dp"
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/imageview1"
android:text="第一个标签"
android:textColor="#f0f0f0"
android:textSize="20sp" />
</RelativeLayout>

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<ImageView
android:id="@+id/imageview2"
android:layout_width="50dp"
android:layout_height="50dp"
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/imageview2"
android:text="第二个标签"
android:textColor="#f0f0f0"
android:textSize="20sp" />
</RelativeLayout>

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<ImageView
android:id="@+id/imageview3"
android:layout_width="50dp"
android:layout_height="50dp"
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/imageview3"
android:text="第三个标签"
android:textColor="#f0f0f0"
android:textSize="20sp" />
</RelativeLayout>
</LinearLayout>

</RelativeLayout>

horizontalscrollview.xml

<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="fill_parent" >

<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>

</LinearLayout>

</HorizontalScrollView>

然后我们在主活动中加载一下第二个xml就可以了。

public class MainActivity extends Activity {

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

实现的效果是：



、


从上面的效果我们可以看出这两个页面是可以通过水平滑动实现切换的效果，但是他们两个布局的宽度就有点让人失望了，一个页面竟然不能显示一个linearlayout，还要分成两个页面，这样就太影响美感了，所以我们有没有什么方法控制一下页面的宽度尼，这就留下了一个疑问？

既然之前说我们要实现自己的HorizontalScrollView，那么我就需要继承此控件，然后重新实现其方法即可。

我们先来理一理思路，继承了这个viewgroup后，我们要实现哪些方法？

1.因为我们上面出现了宽度过大的问题，所以我们要解决两个layout的宽度问题，即这个viewgroup子view的宽度，这个重载onMeasure这个函数就可以解决。

2.我们要实现刚开始的页面只有QQ的主页面，将menu界面隐藏，所以需要重载一下onlayout()函数

3.我们要实现菜单栏超过一半时，就弹出菜单栏的功能，所以重载一下onTouchEvent(MotionEvent)函数，来判断手指点击抬起时，当前菜单栏出来的宽度，然后和菜单栏的一半作比较，然后大于就弹出。

思路基本就是这样，现在开始进行编码：

myHorizontalScrollView.java

/**
*
*/
package com.example.horizontalscrollview;

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;

/**
* @author gxl 自定义viewGroup步骤
*  1.onMeasure----决定内部view的宽和高
*  2.onLayout-----决定子view放置的位置
*  3.onTouchEvent---处理viewgroup的点击事件
*
*
*/
public class myHorizontalScrollView extends HorizontalScrollView {
private int mScreenWidth;
private int mMenuWidth;
private int mMenuRightPadding = 50;
//用来标志当前menu是否打开
private Boolean flag;

/**
* 未使用自定义样式使用的构造方法
*
* @param context
* @param attrs
*/
public myHorizontalScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
// 通过WindowManager获取当前屏幕的宽度
WindowManager wm = (WindowManager) context
.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics outMetrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(outMetrics);
mScreenWidth = outMetrics.widthPixels;
//将dp转化成px，可以通过修改TypedValue.COMPLEX_UNIT_DIP控制转化的类型
mMenuRightPadding = (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources()
.getDisplayMetrics());
flag=false;
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// 获取当前viewgroup中的layout并且给他们设置自己的宽度
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
LinearLayout wrapper = (LinearLayout) getChildAt(0);
ViewGroup menu = (ViewGroup) wrapper.getChildAt(0);
ViewGroup content = (ViewGroup) wrapper.getChildAt(1);
mMenuWidth = mScreenWidth - mMenuRightPadding;
menu.getLayoutParams().width = mMenuWidth;
content.getLayoutParams().width = mScreenWidth;
}

@Override
public boolean onTouchEvent(MotionEvent ev) {
// TODO Auto-generated method stub
switch (ev.getAction()) {
case MotionEvent.ACTION_UP:
int scrollx=getScrollX();
if(scrollx>=(mMenuWidth/2))
{
this.smoothScrollTo(mMenuWidth, 0);
}else
{
this.smoothScrollTo(0, 0);
}
return true;
default:
break;
}
return super.onTouchEvent(ev);
}

@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);
if (changed) {
this.scrollTo(mMenuWidth, 0);
}
}
}

xml文件

<?xml version="1.0" encoding="utf-8"?>
<com.example.horizontalscrollview.myHorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="fill_parent" >

<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>

</LinearLayout>

</com.example.horizontalscrollview.myHorizontalScrollView>

和之前的xml基本没有变化，只是将原来的HorizontalScrollView换成了我们自己定义的myHorizontalScrollView

最后上一下效果：



这里可以清楚的看到上面的宽度问题已经解决了，侧滑效果基本上我们已经都实现了，大家自己也试一试这个效果吧！