仿QQ聊天（2）—主布局及侧滑菜单的实现

欢迎假面(WelcomeActivity)到登陆界面(LoginActivity)很简单，就是搞一个延时2秒的定时器，2秒钟后自动跳转到登陆页面。
欢迎界面布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <ImageView 
        android:id="@+id/iv_welcome"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@drawable/iv_welcome"
        android:scaleType="fitXY"/>
</LinearLayout>

跳转用的延时器代码：

iv_welcome = (ImageView) findViewById(R.id.iv_welcome);
        iv_welcome.postDelayed(new Runnable() {

            @Override
            public void run() {
                Intent intent = new Intent(WelcomeActivity.this,
                        LoginActivity.class);
                WelcomeActivity.this.startActivity(intent);
            }
        }, 2000);

LoginActivity点击登陆按钮就跳转到MainActivity。

主界面MainActivty由三部分组成，顶部是一个自定义的TitleBarView，中间一大片是三个不同的Fragment，底部则是三个按钮（消息，联系人，动态），点击不同的按钮切换到不同的Fragment。
另外还需要实现一个侧滑功能，在主页面向右滑动，可以拉出一个菜单，并且菜单显示的时候还有透明度改变的动画和缩放动画。
我反正不会写，我是抄鸿洋大神的，但是我抄对了，成功的把它用到了自己的项目的，也是很屌的，对不？等时间久了，再慢慢去看是如何实现的。不以为耻，反以为荣。
MainActivity的布局代码：

<?xml version="1.0" encoding="utf-8"?>
<com.example.views.SlidingMenu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:xsl="http://schemas.android.com/apk/res/com.example.testqqchatui"
    android:id="@+id/id_menu"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:scrollbars="none"
   android:background="@drawable/sliding_bg" 
    xsl:rightPadding="100dp" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:orientation="horizontal" >
        <include layout="@layout/layout_menu" />

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:orientation="vertical" 
            android:background="#ffffff">

            <com.example.views.TitleBarView 
                android:id="@+id/titleBar"
                android:layout_width="fill_parent"
                android:layout_height="48dp">
            </com.example.views.TitleBarView>

            <FrameLayout
                android:id="@+id/fl_content"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_above="@+id/view"
                android:layout_below="@+id/titleBar" >
            </FrameLayout>

            <View
                android:id="@+id/view"
                android:layout_width="fill_parent"
                android:layout_height="0.5dp"
                android:layout_above="@+id/ll_bottom"
                android:background="@color/devide_line" />

            <LinearLayout
                android:id="@+id/ll_bottom"
                android:layout_alignParentBottom="true"
                android:layout_width="fill_parent"
                android:layout_height="64dp"
                android:layout_gravity="center_vertical"
                android:orientation="horizontal" 
                android:background="#ffffff">

                <LinearLayout
                    android:id="@+id/ll_news"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:layout_gravity="center_vertical"
                    android:orientation="vertical" >

                    <ImageButton
                        android:id="@+id/ib_news"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:background="@drawable/tab_recent_press"
                        android:clickable="false" />

                    <TextView
                        android:id="@+id/tv_news"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="消息"
                        android:textColor="#00A5E0" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/ll_contasts"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:layout_gravity="center_vertical"
                    android:orientation="vertical" >

                    <ImageButton
                        android:id="@+id/ib_contacts"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:background="@drawable/tab_buddy_nor"
                        android:clickable="false"
                        android:contentDescription="@string/app_name" />

                    <TextView
                        android:id="@+id/tv_contasts"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="联系人" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/ll_dynamic"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:layout_gravity="center_vertical"
                    android:orientation="vertical" >

                    <ImageButton
                        android:id="@+id/ib_dynamic"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:background="@drawable/tab_qworld_nor"
                        android:clickable="false" />

                    <TextView
                        android:id="@+id/tv_dynamic"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="动态" />
                </LinearLayout>

            </LinearLayout>
        </RelativeLayout>

    </LinearLayout>

</com.example.views.SlidingMenu>

可以看到布局最外层用的是一个自定义的SlidingMenu，里面包含一个水平方向的LinearLayout，该布局中再包含两个子控件，菜单页面和主页面。SlidingMenu是继承自HorizontalScrollView的，重写了里面的一些方法，实现侧滑菜单。下面是SlidingMenu的代码：

package com.example.views;

import com.example.testqqchatui.R;
import com.example.utils.ScreenUtils;

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.ViewGroup;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import com.nineoldandroids.view.ViewHelper;

public class SlidingMenu extends HorizontalScrollView{
    /**
     * 屏幕宽度
     */
    private int mScreenWidth;
    /**
     * dp
     */
    private int mMenuRightPadding;
    /**
     * 菜单的宽度
     */
    private int mMenuWidth;
    private int mHalfMenuWidth;

    private boolean isOpen;

    private boolean once;

    private ViewGroup mMenu;
    private ViewGroup mContent;

    public SlidingMenu(Context context, AttributeSet attrs)
    {
        this(context, attrs, 0);

    }

    public SlidingMenu(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
        mScreenWidth = ScreenUtils.getScreenWidth(context);

        TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
                R.styleable.SlidingMenu, defStyle, 0);
        int n = a.getIndexCount();
        for (int i = 0; i < n; i++)
        {
            int attr = a.getIndex(i);
            switch (attr)
            {
            case R.styleable.SlidingMenu_rightPadding:
                // 默认50
                mMenuRightPadding = a.getDimensionPixelSize(attr,
                        (int) TypedValue.applyDimension(
                                TypedValue.COMPLEX_UNIT_DIP, 50f,
                                getResources().getDisplayMetrics()));// 默认为10DP
                break;
            }
        }
        a.recycle();
    }

    public SlidingMenu(Context context)
    {
        this(context, null, 0);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        /**
         * 显示的设置一个宽度
         */
        if (!once)
        {
            LinearLayout wrapper = (LinearLayout) getChildAt(0);
            mMenu = (ViewGroup) wrapper.getChildAt(0);
            mContent = (ViewGroup) wrapper.getChildAt(1);

            mMenuWidth = mScreenWidth - mMenuRightPadding;
            mHalfMenuWidth = mMenuWidth / 2;
            mMenu.getLayoutParams().width = mMenuWidth;
            mContent.getLayoutParams().width = mScreenWidth;

        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b)
    {
        super.onLayout(changed, l, t, r, b);
        if (changed)
        {
            // 将菜单隐藏
            this.scrollTo(mMenuWidth, 0);
            once = true;
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev)
    {
        int action = ev.getAction();
        switch (action)
        {
        // Up时，进行判断，如果显示区域大于菜单宽度一半则完全显示，否则隐藏
        case MotionEvent.ACTION_UP:
            int scrollX = getScrollX();
            if (scrollX > mHalfMenuWidth)
            {
                this.smoothScrollTo(mMenuWidth, 0);
                isOpen = false;
            } else
            {
                this.smoothScrollTo(0, 0);
                isOpen = true;
            }
            return true;
        }
        return super.onTouchEvent(ev);
    }

    /**
     * 打开菜单
     */
    public void openMenu()
    {
        if (isOpen)
            return;
        this.smoothScrollTo(0, 0);
        isOpen = true;
    }

    /**
     * 关闭菜单
     */
    public void closeMenu()
    {
        if (isOpen)
        {
            this.smoothScrollTo(mMenuWidth, 0);
            isOpen = false;
        }
    }

    /**
     * 切换菜单状态
     */
    public void toggle()
    {
        if (isOpen)
        {
            closeMenu();
        } else
        {
            openMenu();
        }
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt)
    {
        super.onScrollChanged(l, t, oldl, oldt);
        float scale = l * 1.0f / mMenuWidth;
        float leftScale = 1 - 0.3f * scale;
        float rightScale = 0.8f + scale * 0.2f;

        ViewHelper.setScaleX(mMenu, leftScale);
        ViewHelper.setScaleY(mMenu, leftScale);
        ViewHelper.setAlpha(mMenu, 0.6f + 0.4f * (1 - scale));
        ViewHelper.setTranslationX(mMenu, mMenuWidth * scale * 0.7f);

        ViewHelper.setPivotX(mContent, 0);
        ViewHelper.setPivotY(mContent, mContent.getHeight() / 2);
        ViewHelper.setScaleX(mContent, rightScale);
        ViewHelper.setScaleY(mContent, rightScale);

    }
}

这段代码我看不太懂，有问题去问鸿神吧，鸿神侧滑菜单的链接：

http://blog.youkuaiyun.com/lmj623565791/article/details/39185641
鸿神真帅，我艹，啥都会。神一样的男人，分分钟写个程序就能够控制宇宙生成。太可怕了。我钥匙有那么屌该多好了。