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自己定義的屬性。為了保持我們在布局中自定義元件設定的尺寸生效，不如不重寫這個，尺寸會變成預設的尺寸

效果圖

HorizontalScrollViewQQ側滑

下面是例子我讀注釋的很清楚哦

先布局

<?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高手之路，必經之路就是自定義元件，對于菜鳥的我們，剛開始接觸的時候可能會覺得，這個東西會比之前學的基礎要難，但是隻要我們肯學，沒有什麼可怕的，之前我在做項目的時候用到了側滑，我隻能在網上找源碼，現在經過自己的努力，也可以了。是以要相信自己。

覺得有幫助的。麻煩贊一下。嘻嘻

HorizontalScrollViewQQ側滑

繼續閱讀

HorizontalScrollView+viewpager實作仿天天動聽ios版和QQ側邊菜單效果

android HorizontalScrollView講解

Android 執行個體講解HorizontalScrollView實作左右滑動

自定義微信小程式下拉選擇框元件

React native自定義元件之Button按鈕

vue自定義元件搜尋輸入框

vue使用use自定義全局元件和指令

數字孿生技術，智能資料可視化大屏軟體，智慧安保，智慧環衛，網際網路安全，内含豐富可視化元件，threejs、d3.js、e

#國學智慧與現代企業管理##軟體源碼開發##智慧生活，伴你身邊#數字孿生技術，智能資料可視化大屏軟體，智慧安保，智慧環衛

angular 自定義元件

#前端##react##css##nextui#NextUIVersion2.0是一個基于React的UI庫，旨在提供美

（android高仿系列）今日頭條 --新聞閱讀器（一）

【angular】primeng源碼分析，自定義表單元素checkbox元件，實作ngModel雙向資料綁定及FormControl表單驗證功能（超實用）

vue實作一個簡單的下拉選擇框元件

asp.net使用者自定義控件的方法

小程式自定義button元件擷取使用者資訊（使用者授權登入）