android:自定義HorizontalScrollView實現qq側滑菜單

Dus5275 8年前發布 | 24K 次閱讀 Android開發移動開發

來自： http://blog.csdn.net/su20145104009/article/details/50688659

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

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

像素不好沒辦法找不到好的制作gif的軟件。

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

首先是menu的布局

<?xml version="1.0" encoding="utf-8"?>
<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" />
        </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" />
        </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" />
        </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" />
        </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" />
        </RelativeLayout>
    </LinearLayout>

</RelativeLayout>

然后是主布局，一個水平滾動條，放入menu.xml，然后下面是一個線性垂直布局，背景是qq圖片

<?xml version="1.0" encoding="utf-8"?>
<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>
    </com.example.myhorizontalscrollview.MyHorizontalScrollView>

</RelativeLayout>

其中的水平滾動條是我們自定義的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);
    }

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

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // TODO Auto-generated method stub
        super.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;
    //水平線性布局的左側菜單menu
    private 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轉換成px
        mMenuRightPadding=(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50,
                context.getResources().getDisplayMetrics());
    }
    /*
     * 設置子view的寬和高
     * */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // TODO Auto-generated method stub
        if(!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隱藏
     * */
    @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);
        /*
         * 通過scrollTo（x,y）方法設置屏幕的偏移量，x為正
         * 內容向左移動
         * */
        if(changed){
            this.scrollTo(mMenuWidth, 0);
        }


    }
    /*
     * 因為HorizontalScrollView自己控制move和down的事件
     * 所以我們還要判斷一下up.如果當前的x偏移量大于menu寬度的一半
     * 隱藏menu，否則顯示menu
     * */
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        // TODO Auto-generated method stub
        int 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 {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

本文由用戶 Dus5275 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1455841871105.html

Android開發移動開發

android:自定義HorizontalScrollView實現qq側滑菜單

相關經驗

相關資訊

相關文檔

目錄