HorizontalScrollViewQQ侧滑

今天给大家带来的是现在APP 基本上都用的到的一个功能，那就是侧滑功能，既方便，又炫酷。

首先实现这个功能 需要 自定义组件，写一个类继承HorizontalScrollView然后重写里面的几个方法

1 onTounchEvent(MotionEvent ev)  //这个是监听手势的

2 onMeasure(int widthMeasureSpec,int heightMeasureSpec) //这个是确定组件大小

3 onLayout（boolean changed, int l, int t, int r, int b）//这个是ViewGroup中子View的布局方法，用于放置子View的位置。放置子View很简单，只需在重写onLayout方法，然后获取子View的实例，调用子View的layout方法实现布局。在实际开发中，一般要配合onMeasure测量方法一起使用。

4  类名(Context context, AttributeSet attrs) //这是获取我们在Value文件下的XML自己定义的属性。为了保持我们在布局中自定义组件设置的尺寸生效，不如不重写这个，尺寸会变成默认的尺寸

效果图

下面是例子  我读注释的很清楚哦

先布局

<?xml version="1.0" encoding="utf-8"?>
<com.xcl.android.Horizontal xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/horizontal"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="#0fffaf"
            android:orientation="vertical" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="这是侧边栏"
                android:textSize="20sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="#00BFFF"
            android:orientation="vertical" >

            <Button
                android:id="@+id/button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="侧边栏" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="这是主界面" />
        </LinearLayout>
    </LinearLayout>

</com.xcl.android.Horizontal>

可能这个布局 看上去会有点乱  我就简化一下把 

<?xml version="1.0" encoding="utf-8"?>
<com.xcl.android.Horizontal xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/horizontal"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <!-- 最外层的线性布局是包含侧边栏跟主界面，只要是侧滑必须要一个线性布局包含子组件 -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >

        <!-- 这个是侧边栏布局 -->

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="#0fffaf"
            android:orientation="vertical" >
        </LinearLayout>
        
        <!-- 这个是主界面 -->

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="#00BFFF"
            android:orientation="vertical" >
        </LinearLayout>
    </LinearLayout>

</com.xcl.android.Horizontal>

这个是简化版的，这应该简单了把

values文件下的XML

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="Horizontal">
        <attr name="view_width" format="dimension"></attr>
    </declare-styleable>

</resources>

重点来了HorizontalScrollView类

package com.xcl.android;

import android.app.Activity;
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.ViewGroup;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;

import com.example.view_mian.R;

public class Horizontal extends HorizontalScrollView {
	private int peX;
	private int viewWidth;
	private boolean open, close;
	private ViewGroup group;
	private LinearLayout view;

	/**
	 * 获得屏幕宽度
	 * 
	 * @return
	 */
	public int getWidths() {
		DisplayMetrics display = new DisplayMetrics();
		Activity activity = (Activity) getContext();
		activity.getWindow().getWindowManager().getDefaultDisplay()
				.getMetrics(display);
		return display.widthPixels;
	}

	/**
	 * 手势
	 */
	@Override
	public boolean onTouchEvent(MotionEvent ev) {
		// TODO Auto-generated method stub

		if (ev.getAction() == MotionEvent.ACTION_UP) {
			peX = getScrollX();
			int pexWidth = this.viewWidth / 2;
			if (peX >= pexWidth) {

				this.smoothScrollTo(viewWidth, 0);
				open = true;
			} else {
				this.smoothScrollTo(0, 0);
				open = false;
			}
			return true;
		}
		return super.onTouchEvent(ev);
	}

	/**
	 * 根据Open值 来决定执行哪个方法
	 */
	public void isOpen() {
		if (open) {
			open();
		} else {
			close();
		}
	}

	/**
	 * 打开
	 */
	public void open() {
		if (open) {
			this.smoothScrollTo(0, 0);
			open = false;
		} 
		
	}

	/**
	 * 关闭
	 */
	public void close() {
		if (!open) {
			this.smoothScrollTo(viewWidth, 0);
			open = true;
		} 
		
	}

	/**
	 * 给子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);
		if (close) {
			this.smoothScrollTo(viewWidth, 0);
		}
		close = false;
	}

	/**
	 * 给子View规定尺寸
	 */
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// TODO Auto-generated method stub
		close = true;
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		LinearLayout layout = (LinearLayout) getChildAt(0);//首先找到最外层的线性布局
		view = (LinearLayout) layout.getChildAt(0);//因为最外层里面线性布局包含侧边栏跟主菜单，所以第一个是侧边栏布局getChildAt(0);
		group = (ViewGroup) layout.getChildAt(1);//第二个是主界面getChildAt(1);
		view.getLayoutParams().width = this.viewWidth;//设置侧边栏的宽度
		group.getLayoutParams().width = getWidths();//这是主界面的宽度
	}

	public Horizontal(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		// TODO Auto-generated constructor stub
	}

	public Horizontal(Context context, AttributeSet attrs) {
		super(context, attrs);

		TypedArray array = context
				.obtainStyledAttributes(R.styleable.Horizontal);
		this.viewWidth = array.getDimensionPixelSize(
				R.styleable.Horizontal_view_width, (int) TypedValue
						.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 300,
								getResources().getDisplayMetrics()));
		array.recycle();
		// TODO Auto-generated constructor stub
	}

	public Horizontal(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
	}

}

创建Acitvity显示界面

package com.xcl.android;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

import com.example.view_mian.R;

public class MainActivty extends Activity {
	private Horizontal horizontal;//自定义组件类
	private Button button;//按钮

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.viewactivity);
		horizontal = (Horizontal) findViewById(R.id.horizontal);
		button = (Button) horizontal.findViewById(R.id.button);
		button.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View arg0) {
				// TODO Auto-generated method stub
				horizontal.isOpen();
				
			}
		});
	}


}

不知道我这样写，看不看的懂

Android高手之路，必经之路就是自定义组件，对于菜鸟的我们，刚开始接触的时候可能会觉得，这个东西会比之前学的基础要难，但是只要我们肯学，没有什么可怕的，之前我在做项目的时候用到了侧滑，我只能在网上找源码，现在经过自己的努力，也可以了。所以要相信自己。

觉得有帮助的。麻烦赞一下。嘻嘻