Android UI 模仿界面框架系列第一章:QQ UI框架

闲着无聊写了个 QQ5.4UI. 后面还有一系列 QQ模仿开发文章.今天首先来个 UI 框架.
主界面采用: android.support.v4.widget.DrawerLayout 作为父布局,多的不说上代码.

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/id_drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/img_frame_background" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <Button
            android:layout_width="40dp"
            android:layout_height="30dp"
            android:layout_alignParentRight="true"
            android:layout_marginTop="10dp"
            android:background="@drawable/ic_search_back_r"
            android:onClick="OpenRightMenu" />

        <FrameLayout
            android:id="@+id/id_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="50dp"
            android:layout_weight="1"
            android:background="@color/white"
            android:visibility="visible" >
        FrameLayout>

        <RelativeLayout
            android:id="@+id/ly_main_tab_bottom"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="#00000000"
            android:visibility="visible" >

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:orientation="vertical" >

                <View
                    android:layout_width="match_parent"
                    android:layout_height="0.1dp"
                    android:background="#cfcfcf" />

                <LinearLayout
                    android:layout_width="fill_parent"
                    android:layout_height="90dp"
                    android:background="#fafafa" >

                    <ImageView
                        android:id="@+id/txt_main_one"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_gravity="center_vertical"
                        android:layout_weight="4"
                        android:src="@drawable/skin_tab_icon_conversation_normal"
                        android:gravity="center"
                        android:paddingTop="3dp"
                        android:textColor="#6e6e6e"
                        android:textSize="12sp" />

                    <ImageView
                        android:id="@+id/txt_main_two"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_gravity="center_vertical"
                        android:layout_weight="4"
                        android:src="@drawable/skin_tab_icon_contact_normal"
                        android:gravity="center"
                        android:paddingTop="3dp"
                        android:textColor="#6e6e6e"
                        android:textSize="12sp" />

                    <ImageView
                        android:id="@+id/txt_main_three"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_gravity="center_vertical"
                        android:layout_weight="4"
                        android:src="@drawable/skin_tab_icon_plugin_normal"
                        android:gravity="center"
                        android:paddingTop="3dp"
                        android:text="@string/fragmen_txt_three"
                        android:textColor="#6e6e6e"
                        android:textSize="12sp" />

                    <ImageButton
                        android:visibility="gone"
                        android:id="@+id/txt_main_four"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_gravity="center_vertical"
                        android:layout_weight="4"
                        android:background="@drawable/kou"
                        android:gravity="center"
                        android:paddingTop="3dp"
                        android:textColor="#6e6e6e"
                        android:textSize="12sp" />
                LinearLayout>
            LinearLayout>
        RelativeLayout>
    RelativeLayout>

    <fragment
        android:id="@+id/id_left_menu"
        android:name="com.zhuxiaohao.application.fragment.LeftFragment"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:tag="LEFT" />

    <fragment
        android:id="@+id/id_right_menu"
        android:name="com.zhuxiaohao.application.fragment.RightFragment"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_gravity="right|center_vertical"
        android:tag="RIGHT" />

android.support.v4.widget.DrawerLayout>

这是主界面 XML.下面是主界面管理器 fragmentactivity

/**
 * Project Name:com.zhuxiaohao.application
 * File Name:MainFragment.java
 * Package Name:com.zhuxiaohao.application.fragment
 * Date:2015年3月13日下午2:43:22
 * Copyright (c) 2015, zhuxiaohao All Rights Reserved.
 *
 */


package com.zhuxiaohao.application.fragment;


import android.annotation.SuppressLint;
import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.widget.DrawerLayout;
import android.support.v4.widget.DrawerLayout.DrawerListener;
import android.view.Gravity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;


import com.nineoldandroids.view.ViewHelper;
import com.zhuxiaohao.application.R;


/**
 * ClassName:MainFragment 

 * Function: TODO ADD FUNCTION. 

 * Reason: TODO ADD REASON. 

 * Date: 2015年3月13日 下午2:43:22 

 * 
 * @author chenhao
 * @version
 * @since JDK 1.6
 * @see
 */
public class MainFragment extends FragmentActivity implements OnClickListener {
/** 上下文 */
@SuppressWarnings("unused")
private static Context context;
/** 管理器 */
private FragmentManager fragmentManager;
/** 其他界面切换 */
public static MainFragment fragmentMainActivity;
/** 第1个 fragmen */
private OneFragment oneFragment;
private ImageView txt_main_one;
/** 第2个 fragmen */
private TwoFragment twoFragment;
private ImageView txt_main_two;
/** 第3个 fragmen */
private ThreeFragment threeFragment;
private ImageView txt_main_three;
/** 第4个 fragmen */
private FourFragment fourFragment;
private ImageView txt_main_four;
/** view */
private DrawerLayout mDrawerLayout;


@Override
protected void onCreate(Bundle arg0) {
// TODO Auto-generated method stub
super.onCreate(arg0);
setContentView(R.layout.layout_fragment_main);
context = getApplicationContext();
fragmentManager = getSupportFragmentManager();
fragmentMainActivity = this;
initViewDrawerLayout();
initEvents();
initView();


}


/**
* initViewDrawerLayout:(初始化 Drawerlayout 布局). 

* 
* @author chenhao
* @since JDK 1.6
*/
private void initViewDrawerLayout() {
mDrawerLayout = (DrawerLayout) findViewById(R.id.id_drawerLayout);
mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.RIGHT);
}


/**
* OpenRightMenu:(初始化右边view). 

* @author chenhao
* @param view
* @since JDK 1.6
*/
public void OpenRightMenu(View view) {
mDrawerLayout.openDrawer(Gravity.RIGHT);
mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED, Gravity.RIGHT);
}


/**
* initEvents:(滑动监听). 

* @author chenhao
* @since JDK 1.6
*/
private void initEvents() {
mDrawerLayout.setDrawerListener(new DrawerListener() {
@Override
public void onDrawerStateChanged(int newState) {
}


@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
View mContent = mDrawerLayout.getChildAt(0);
View mMenu = drawerView;
float scale = 1 - slideOffset;
float rightScale = 0.8f + scale * 0.2f;
if (drawerView.getTag().equals("LEFT")) {


float leftScale = 1 - 0.3f * scale;
ViewHelper.setScaleX(mMenu, leftScale);
ViewHelper.setScaleY(mMenu, leftScale);
ViewHelper.setAlpha(mMenu, 0.6f + 0.4f * (1 - scale));
ViewHelper.setTranslationX(mContent, mMenu.getMeasuredWidth() * (1 - scale));
ViewHelper.setPivotX(mContent, 0);
ViewHelper.setPivotY(mContent, mContent.getMeasuredHeight() / 2);
mContent.invalidate();
ViewHelper.setScaleX(mContent, rightScale);
ViewHelper.setScaleY(mContent, rightScale);
} else {
ViewHelper.setTranslationX(mContent, -mMenu.getMeasuredWidth() * slideOffset);
ViewHelper.setPivotX(mContent, mContent.getMeasuredWidth());
ViewHelper.setPivotY(mContent, mContent.getMeasuredHeight() / 2);
mContent.invalidate();
ViewHelper.setScaleX(mContent, rightScale);
ViewHelper.setScaleY(mContent, rightScale);
}
}


@Override
public void onDrawerOpened(View drawerView) {
}


@Override
public void onDrawerClosed(View drawerView) {
mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.RIGHT);
}
});
}


/** 初始化 */
private void initView() {
// TODO Auto-generated method stub
txt_main_one = (ImageView) findViewById(R.id.txt_main_one);
txt_main_two = (ImageView) findViewById(R.id.txt_main_two);
txt_main_three = (ImageView) findViewById(R.id.txt_main_three);
txt_main_four = (ImageView) findViewById(R.id.txt_main_four);
txt_main_one.setOnClickListener(this);
txt_main_two.setOnClickListener(this);
txt_main_three.setOnClickListener(this);
txt_main_four.setOnClickListener(this);
setTabSelection(0);


}


@Override
public void onClick(View v) {
// TODO Auto-generated method stub
switch (v.getId()) {
case R.id.txt_main_one:
setTabSelection(0);
break;
case R.id.txt_main_two:
setTabSelection(1);
break;
case R.id.txt_main_three:
setTabSelection(2);
break;
case R.id.txt_main_four:
setTabSelection(3);
break;
}
}


/**
* 根据传入的index参数来设置选中的tab页。
*/
@SuppressLint({ "NewApi", "ResourceAsColor" })
public void setTabSelection(int index) {
resetBtn();
FragmentTransaction transaction = fragmentManager.beginTransaction();
hideFragments(transaction);
switch (index) {
case 0:
// // 当点击了tab时，改变控件的图片和文字颜色
((ImageView) txt_main_one.findViewById(R.id.txt_main_one)).setImageResource(R.drawable.skin_tab_icon_conversation_selected);
if (oneFragment == null) {
// 如果为空，则创建一个并添加到界面上
oneFragment = new OneFragment();
transaction.add(R.id.id_content, oneFragment, index + "");
} else {
// 如果不为空，则直接将它显示出来
transaction.show(oneFragment);
}
break;
case 1:
// 当点击了tab时，改变控件的图片和文字颜色
((ImageView) txt_main_two.findViewById(R.id.txt_main_two)).setImageResource(R.drawable.skin_tab_icon_contact_selected);
if (twoFragment == null) {
// 如果为空，则创建一个并添加到界面上
twoFragment = new TwoFragment();
transaction.add(R.id.id_content, twoFragment, index + "");
} else {
// 如果不为空，则直接将它显示出来
transaction.show(twoFragment);
}
break;
case 2:
// 当点击了tab时，改变控件的图片和文字颜色
((ImageView) txt_main_three.findViewById(R.id.txt_main_three)).setImageResource(R.drawable.skin_tab_icon_plugin_selected);
if (threeFragment == null) {
// 如果为空，则创建一个并添加到界面上
threeFragment = new ThreeFragment();
transaction.add(R.id.id_content, threeFragment, index + "");
} else {
// 如果不为空，则直接将它显示出来
transaction.show(threeFragment);
}
break;
case 3:
// 当点击了tab时，改变控件的图片和文字颜色
((ImageView) txt_main_four.findViewById(R.id.txt_main_four)).setImageResource(R.drawable.kov);
if (fourFragment == null) {
// 如果为空，则创建一个并添加到界面上
fourFragment = new FourFragment();
transaction.add(R.id.id_content, fourFragment, index + "");
} else {
// 如果不为空，则直接将它显示出来
transaction.show(fourFragment);
}
break;
}
transaction.commitAllowingStateLoss();
}


/**
* 删除所有选中的。
*/
@SuppressLint("ResourceAsColor")
private void resetBtn() {
((ImageView) txt_main_one.findViewById(R.id.txt_main_one)).setImageResource(R.drawable.skin_tab_icon_conversation_normal);
((ImageView) txt_main_two.findViewById(R.id.txt_main_two)).setImageResource(R.drawable.skin_tab_icon_contact_normal);
((ImageView) txt_main_three.findViewById(R.id.txt_main_three)).setImageResource(R.drawable.skin_tab_icon_plugin_normal);
((ImageView) txt_main_four.findViewById(R.id.txt_main_four)).setImageResource(R.drawable.kou);


}


/**
* 把所有的碎片为隐藏状态。
* 
* @param transaction
*/
@SuppressLint("NewApi")
private void hideFragments(FragmentTransaction transaction) {
if (oneFragment != null) {
transaction.hide(oneFragment);
}
if (twoFragment != null) {
transaction.hide(oneFragment);
}
if (threeFragment != null) {
transaction.hide(threeFragment);
}
if (fourFragment != null) {
transaction.hide(fourFragment);
}
}
}