使用HorizontalScrollView实现瑞士军刀界面

iOS及Android上的瑞士军刀界面很是新颖，也很便捷。很多应用采用了该设计，例如QQ，凤凰新闻客户端等。今天介绍一下通过自定义HorizontalScrollView类的方法实现瑞士军刀界面。

 

依赖jar包

NineOldAndroids.jar

 

 

思路

●使用HorizontalScrollView布局，左侧为Menu，右侧为Content；

自定义HorizontalScrollView，使之监听Action_UP事件，进行Menu的显示和隐藏；

 

●menu隐藏在抽屉正下方

属性动画：改变拖动时，

调用动画时机：ACTION_MOVE==>覆写View类的onScrollChanged()方法

 

●菜单及内容区域的缩放和透明度变化

拖动时 scale：1.0-0

menu透明度变化：0.7-1.0

menu缩放变化：0.7-1.0

content缩放变化：1.0-0.7【注意默认缩放中心会影响实际效果，需要设置缩放中心】

 

效果图

 

 

核心代码

自定义HorizontalScrollView类SlidingMenu

public class SlidingMenu extends HorizontalScrollView {
    private LinearLayout mWrapper;
    private ViewGroup mMenu;
    private ViewGroup mContent;
    private int menuWidth;
    private int slidingMenuPadding;
    private int screenWidth;
    private boolean once;
    private boolean isOpen;

    public SlidingMenu(Context context, AttributeSet attr) {
        super(context, attr);
        DisplayMetrics dm = new DisplayMetrics();
        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        wm.getDefaultDisplay().getMetrics(dm);
        screenWidth = dm.widthPixels;
        slidingMenuPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 80,
                context.getResources().getDisplayMetrics());
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        this.scrollTo(menuWidth, 0);
        super.onLayout(changed, l, t, r, b);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        if (!once) {
            mWrapper = (LinearLayout) getChildAt(0);
            mMenu = (ViewGroup) mWrapper.getChildAt(0);
            mContent = (ViewGroup) mWrapper.getChildAt(1);
            menuWidth = mMenu.getLayoutParams().width = screenWidth - slidingMenuPadding;
            mContent.getLayoutParams().width = screenWidth;
            once = true;
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        int action = ev.getAction();
        switch (action) {
            case MotionEvent.ACTION_UP:
                int scrollX = getScrollX();
                if (scrollX >= menuWidth / 2) {
                    this.smoothScrollTo(menuWidth, 0);
                    isOpen = false;
                } else {
                    this.smoothScrollTo(0, 0);
                    isOpen = true;
                }
                return true;
        }
        return super.onTouchEvent(ev);
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        float scale = l * 1.0f / menuWidth;
        float rightScale = 0.7f + scale * 0.3f;
        float leftScale = 1.0f - scale * 0.3f;
        float leftAlpha = 1.0f - scale * 0.3f;
        ViewHelper.setTranslationX(mMenu, l * 0.5f);
        ViewHelper.setScaleX(mMenu, leftScale);
        ViewHelper.setScaleY(mMenu, leftScale);
        ViewHelper.setAlpha(mMenu, leftAlpha);
        ViewHelper.setPivotX(mContent, 0);
        ViewHelper.setPivotY(mContent, mContent.getHeight() / 2);
        ViewHelper.setScaleX(mContent, rightScale);
        ViewHelper.setScaleY(mContent, rightScale);
    }

    public void trigger() {
        if (isOpen) {
            closeMenu();
            isOpen = false;
        } else {
            openMenu();
            isOpen = true;
        }
    }

    private void openMenu() {
        if (isOpen) return;
        this.smoothScrollTo(0, 0);
    }

    private void closeMenu() {
        if (!isOpen) return;
        this.smoothScrollTo(menuWidth, 0);
    }
}

布局

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

    <com.example.dialogtest.SlidingMenu
        android:id="@+id/menu_id"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none" >
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal" >
            <include layout="@layout/sliding_menu" />
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/apple" >
                <Button
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:background="@drawable/title_bar_menu"
                    android:onClick="showMenu" />
            </LinearLayout>
        </LinearLayout>
    </com.example.dialogtest.SlidingMenu>
</RelativeLayout>