android:自訂HorizontalScrollView實現qq側滑菜單

android:自訂HorizontalScrollView實現qq側滑菜單

今天看了鴻洋_大神在慕課網講的qq5.0側滑菜單。學了不少的知識，同時也佩服鴻洋_大神思路的清晰。

看了教程課下也自己實現了一下。代碼幾乎完全相同 別噴我啊。。沒辦法 o(︶︿︶)o 唉

像素不好 沒辦法 找不到好的製作gif的軟體。

我們暫且稱側滑左邊介面的為menu,右邊為content

首先是menu的布局

<!--{cke_protected}{C}%3C!%2D%2D%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%2D%2D%3E--><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">        </textview></imageview></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">        </textview></imageview></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">        </textview></imageview></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">        </textview></imageview></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">        </textview></imageview></relativelayout>    </linearlayout></relativelayout>

然後是主布局，一個水平捲軸，放入menu.xml，然後下面是一個線性垂直布局，背景是qq圖片

<!--{cke_protected}{C}%3C!%2D%2D%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%2D%2D%3E--><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>    </include></linearlayout></com.example.myhorizontalscrollview.myhorizontalscrollview></relativelayout>

其中的水平捲軸是我們自訂的view

需要重寫其中的兩個方法

@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {// TODO Auto-generated method stubsuper.onLayout(changed, l, t, r, b);}

通過設定位移量，調整我們的初始布局，使menu全部隱藏，右側菜單顯現

@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {// TODO Auto-generated method stubsuper.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;//水平線性布局的左側菜單menuprivate 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轉換成pxmMenuRightPadding=(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50,context.getResources().getDisplayMetrics());}/* * 設定子view的寬和高 * */@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {// TODO Auto-generated method stubif(!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隱藏 * */@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {// TODO Auto-generated method stubsuper.onLayout(changed, l, t, r, b);/* * 通過scrollTo（x,y）方法設定螢幕的位移量，x為正 * 內容向左移動 * */if(changed){this.scrollTo(mMenuWidth, 0);}}/* * 因為HorizontalScrollView自己控制move和down的事件 * 所以我們還要判斷一下up.如果當前的x位移量大於menu寬度的一半 * 隱藏menu，否則顯示menu * */@Overridepublic boolean onTouchEvent(MotionEvent ev) {// TODO Auto-generated method stubint 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 {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);}}