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;@Overrideprotected void onCreate(Bundle arg0) {// TODO Auto-generated method stubsuper.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() {@Overridepublic void onDrawerStateChanged(int newState) {}@Overridepublic 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);}}@Overridepublic void onDrawerOpened(View drawerView) {}@Overridepublic void onDrawerClosed(View drawerView) {mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.RIGHT);}});}/** 初始化 */private void initView() {// TODO Auto-generated method stubtxt_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);}@Overridepublic void onClick(View v) {// TODO Auto-generated method stubswitch (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);}}}

Android UI 模仿界面框架系列第一章:QQ UI框架_第1张图片

更多相关文章

随机推荐