安卓開發筆記——自定義HorizontalScrollView控件（實現QQ5.0側滑效果）

對於滑動菜單欄SlidingMenu，大家應該都不陌生，在市場上的一些APP應用里經常可以見到，比如人人網，FaceBook等。

前段時間QQ5.0版本出來后也采用了這種設計風格：（下面是效果圖）

之前在GitHub上看到過關於此設計風格的開源項目，它只需要引入對應的類庫，就可以定制靈活、各種陰影和漸變以及動畫的滑動效果的側滑菜單。

這里是關於開源組件的介紹網址：https://github.com/jfeinstein10/SlidingMenu

但作為開發人員，在學習階段還是建議盡可能的去自己實現，所以今天我不講此開源項目的使用方式，我們用自定義HorizontalScrollView來實現此效果。

下面先看下實現效果圖：

　　 　　

 上圖的效果是用自定義HorizontalScrollView來實現的，在HorizontalScrollView里潛入一個橫向排列的線性布局，然后在線性布局里分別加入菜單布局和內容布局，在我們初始化的時候把HorizontalScrollView的滾動條向左拉至左邊菜單距離即可實現菜單布局的隱藏，關於縮放，移動效果我們可以使用開源動畫庫nineoldandroids來實現，只需要幾行代碼。

 

好了，接着直接上代碼吧：

首先，先看下布局文件：

 

1、菜單欄布局文件：

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

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

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

            <ImageView
                android:id="@+id/menuimage1"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@drawable/img_1" />

            <TextView
                android:id="@+id/menutext1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:layout_toRightOf="@id/menuimage1"
                android:text="菜單一"
                android:textColor="@android:color/white"
                android:textSize="20dp" />
        </RelativeLayout>
        
        
                <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true" >

            <ImageView
                android:id="@+id/menuimage2"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@drawable/img_2" />

            <TextView
                android:id="@+id/menutext2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:layout_toRightOf="@id/menuimage2"
                android:text="菜單二"
                android:textColor="@android:color/white"
                android:textSize="20dp" />
        </RelativeLayout>
        
                        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true" >

            <ImageView
                android:id="@+id/menuimage3"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@drawable/img_3" />

            <TextView
                android:id="@+id/menutext3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:layout_toRightOf="@id/menuimage3"
                android:text="菜單三"
                android:textColor="@android:color/white"
                android:textSize="20dp" />
        </RelativeLayout>
        
                        
                                <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true" >

            <ImageView
                android:id="@+id/menuimage4"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@drawable/img_4" />

            <TextView
                android:id="@+id/menutext4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:layout_toRightOf="@id/menuimage4"
                android:text="菜單四"
                android:textColor="@android:color/white"
                android:textSize="20dp" />
        </RelativeLayout>
        
                                
                                        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true" >

            <ImageView
                android:id="@+id/menuimage5"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@drawable/img_5" />

            <TextView
                android:id="@+id/menutext5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:layout_toRightOf="@id/menuimage5"
                android:text="菜單五"
                android:textColor="@android:color/white"
                android:textSize="20dp" />
        </RelativeLayout>
    </LinearLayout>

</RelativeLayout>

2、主內容布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
        android:background="@drawable/img_frame_background" >

<com.example.sidesliptest.MyHorizontalScrollView 
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:scrollbars="none"
    >
    <LinearLayout 
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:orientation="horizontal"
        >
        <include layout="@layout/left_menu"/>
        <LinearLayout 
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/qq"
            ></LinearLayout>
        
    </LinearLayout>
    
</com.example.sidesliptest.MyHorizontalScrollView>

</RelativeLayout>

 

3、自定義View（HorizontalScrollView）類：

自定義Viewi實現步驟：

1、繼承要自定義View的類，並實現帶有參數的構造方法

2、重寫onMeasure（確定自定義View的大小）和onLayout（確定自定義View的位置）方法

 

關於HorizontalScrollView的滑動，我們可以用onScrollChanged來監聽參數L：

打印日志：可以發現，當滾動條向左（畫面向右滑動）的時候，L的值是逐漸增大的，所以我們可以通過它來作為動畫的變化梯度值。

注釋很全，具體看注釋吧。

package com.example.sidesliptest;

import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;

import com.nineoldandroids.view.ViewHelper;

public class MyHorizontalScrollView extends HorizontalScrollView {

    // 在HorizontalScrollView有個LinearLayout
    private LinearLayout linearLayout;
    // 菜單，內容頁
    private ViewGroup myMenu;
    private ViewGroup myContent;
    //菜單寬度
    private int myMenuWidth;

    // 屏幕寬度
    private int screenWidth;
    // 菜單與屏幕右側的距離(dp)
    private int myMenuPaddingRight = 50;

    // 避免多次調用onMeasure的標志
    private boolean once = false;

    /**
     * 自定義View需要實現帶有Context、AttributeSet這2個參數的構造方法,否則自定義參數會出錯
     * 當使用了自定義屬性時，會調用此構造方法
     * 
     * @param context
     * @param attrs
     */
    public MyHorizontalScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 獲取屏幕寬度
        WindowManager windowManager = (WindowManager) context
                .getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics = new DisplayMetrics();
        windowManager.getDefaultDisplay().getMetrics(outMetrics);
        screenWidth = outMetrics.widthPixels;// 屏幕寬度

        // 將dp轉換px
        myMenuPaddingRight = (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources()
                        .getDisplayMetrics());

    }

    /**
     * 設置子View的寬高，決定自身View的寬高，每次啟動都會調用此方法
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (!once) {//使其只調用一次
            // this指的是HorizontalScrollView，獲取各個元素
            linearLayout = (LinearLayout) this.getChildAt(0);// 第一個子元素
            myMenu = (ViewGroup) linearLayout.getChildAt(0);// HorizontalScrollView下LinearLayout的第一個子元素
            myContent = (ViewGroup) linearLayout.getChildAt(1);// HorizontalScrollView下LinearLayout的第二個子元素

            // 設置子View的寬高，高於屏幕一致
            myMenuWidth=myMenu.getLayoutParams().width = screenWidth - myMenuPaddingRight;// 菜單的寬度=屏幕寬度-右邊距
            myContent.getLayoutParams().width = screenWidth;// 內容寬度=屏幕寬度
            // 決定自身View的寬高，高於屏幕一致
            // 由於這里的LinearLayout里只包含了Menu和Content所以就不需要額外的去指定自身的寬
            once = true;
        }
    }

    //設置View的位置，首先，先將Menu隱藏（在eclipse中ScrollView的畫面內容（非滾動條）正數表示向左移，向上移）
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        //剛載入界面的時候隱藏Menu菜單也就是ScrollView向左滑動菜單自身的大小
        if(changed){
            this.scrollTo(myMenuWidth, 0);//向左滑動，相當於把右邊的內容頁拖到正中央，菜單隱藏    
        }
    
    }
    
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        int action=ev.getAction();
        switch (action) {
        case MotionEvent.ACTION_UP:
            int scrollX=this.getScrollX();//滑動的距離scrollTo方法里，也就是onMeasure方法里的向左滑動那部分
            if(scrollX>=myMenuWidth/2){
                this.smoothScrollTo(myMenuWidth,0);//向左滑動展示內容
            }else{
                this.smoothScrollTo(0, 0);
            }
            return true;
        }
        return super.onTouchEvent(ev);
    }
    
    
    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        Log.i("tuzi",l+"");
        float scale = l * 1.0f / myMenuWidth; // 1 ~ 0
　　　　　
        float rightScale = 0.7f + 0.3f * scale;
        float leftScale = 1.0f - scale * 0.3f;
        float leftAlpha = 0.6f + 0.4f * (1 - scale);

        // 調用屬性動畫，設置TranslationX
        ViewHelper.setTranslationX(myMenu, myMenuWidth * scale * 0.8f);
        
        ViewHelper.setScaleX(myMenu, leftScale);
        ViewHelper.setScaleY(myMenu, leftScale);
        ViewHelper.setAlpha(myMenu, leftAlpha);
        // 設置內容縮放的中心點
        ViewHelper.setPivotX(myContent, 0);
        ViewHelper.setPivotY(myContent, myContent.getHeight() / 2);
        ViewHelper.setScaleX(myContent, rightScale);
        ViewHelper.setScaleY(myContent, rightScale);
    }

} 

4、主程序類：

package com.example.sidesliptest;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

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


}

 

圖片素材:http://pan.baidu.com/s/1kTkjmAj

 

 

作者：Balla_兔子
出處：http://www.cnblogs.com/lichenwei/
本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文鏈接。
正在看本人博客的這位童鞋，我看你氣度不凡，談吐間隱隱有王者之氣，日后必有一番作為！旁邊有“推薦”二字，你就順手把它點了吧，相得准，我分文不收；相不准，你也好回來找我！