Android QQ空间(Apad)项目总结(三)---应用UI框架的搭建！！！

大家好，今天是元旦节了，祝大家节日快乐！今天给大家分享的是Apad Qzone的UI框架，我们首先看下交互图如下:

图1：交互效果图.

从上图可以看出，整个应用其实UI框架相对比较简单，可以分为俩部分，左侧导航栏区域，右侧显示内容区域。当我们点击左侧导航栏时，右侧显示相对应内容。

应用的主要内容分为四个模块：好友动态；个人主页；好友列表；应用中心。右侧显示内容则统一由一个管理器管理，管理器管理了右侧的容器以及显示内容面板。

也许用文字不太好说清楚，所以我写了一个简单的Demo以及画了一个UI结构图方便大家理解：

首先是新建一个Android工程，命名为QzoneFrameDemo,结构如下:

图2：程序代码结构图:

为了更容易理解代码，我画了一个各个类的关系图如下：

上图可以清晰的看清各个类之间的关系，其中QZRightWindowManger管理了QZRightWindowContainer(剪头忘记加了)和右侧的四个Window,QZRightWindowContainer继承了FrameLayout，四个Window继承了QZRightWindowBase。

其中QZRightWindowContainer代码如下(继承了FrameLayout):

[java]  view plain copy

1. package com.tutor.frame;  
2.   
3. import android.content.Context;  
4. import android.util.AttributeSet;  
5. import android.widget.FrameLayout;  
6.   
7. public class QZRightWindowContainer extends FrameLayout {  
8.   
9.     public QZRightWindowContainer(Context context){  
10.         super(context);  
11.     }  
12.     public QZRightWindowContainer(Context context, AttributeSet attrs) {  
13.         super(context, attrs);  
14.     }  
15.   
16. }  

而右侧四个Window的基类QZRightWindowBase的代码如下:

[java]  view plain copy

1. package com.tutor.frame;  
2.   
3. import android.content.Context;  
4. import android.util.AttributeSet;  
5. import android.widget.FrameLayout;  
6. import android.widget.TextView;  
7.   
8. public abstract class QZRightWindowBase extends FrameLayout {  
9.   
10.     public TextView mContentTextView;  
11.       
12.     private LayoutParams params = new LayoutParams(LayoutParams.FILL_PARENT,  
13.             LayoutParams.FILL_PARENT);  
14.           
15.     public QZRightWindowBase(Context context){  
16.         super(context);  
17.         setupViews();  
18.     }  
19.       
20.     public QZRightWindowBase(Context context, AttributeSet attrs) {  
21.         super(context, attrs);  
22.         setupViews();  
23.     }  
24.       
25.     private void setupViews(){  
26.         mContentTextView = new TextView(getContext());  
27.         mContentTextView.setLayoutParams(params);  
28.     }  
29.       
30.     //做些事为了扩展举例而已  
31.     public abstract void dosomething();  
32.     //做些事2  
33.     public abstract void dosomething2();  
34.   
35. }  

右侧窗口Window1即QZRightWindow1代码(其他的都一样不贴代码了)如下:

[java]  view plain copy

1. package com.tutor.frame;  
2.   
3. import android.content.Context;  
4. import android.graphics.Color;  
5. import android.util.AttributeSet;  
6.   
7. public class QZRightWindow1 extends QZRightWindowBase{  
8.   
9.     public QZRightWindow1(Context context){  
10.         super(context);  
11.         setupViews();  
12.     }  
13.     public QZRightWindow1(Context context, AttributeSet attrs) {  
14.         super(context, attrs);  
15.         setupViews();  
16.     }  
17.       
18.     private void setupViews(){  
19.         mContentTextView.setText("好友动态");  
20.         mContentTextView.setBackgroundColor(Color.RED);  
21.         addView(mContentTextView);  
22.     }  
23.   
24.     @Override  
25.     public void dosomething() {  
26.         // TODO Auto-generated method stub  
27.           
28.     }  
29.   
30.     @Override  
31.     public void dosomething2() {  
32.         // TODO Auto-generated method stub  
33.           
34.     }  
35.   
36. }  

管理QZRightWindowContainer和右侧四个Window的管理类QZRightWindowManager代码如下:

[java]  view plain copy

1. package com.tutor.frame;  
2.   
3. import java.util.HashMap;  
4. import java.util.Iterator;  
5.   
6. import android.view.View;  
7.   
8.   
9.   
10.   
11. public class QZRightWindowManager {  
12.   
13.      /** 
14.      * 好友动态面板的KEY 
15.      */  
16.     public static final int FRIEND_TRENDS_WINDOW = 0;  
17.       
18.      /** 
19.      * 个人中心面板的KEY 
20.      */  
21.     public static final int HOME_PAGE_WINDOW = 1;  
22.       
23.      /** 
24.      * 好友关系链面板的KEY 
25.      */  
26.     public static final int FRIEND_LIST_WINDOW = 2;  
27.       
28.      /** 
29.      * 应用中心面板的KEY 
30.      */  
31.     public static final int APP_CENTER_WINDOW = 3;  
32.       
33.       
34.     private HashMap<Integer, QZRightWindowBase> mHashMap;  
35.       
36.     private QZRightWindowContainer mContainer;  
37.       
38.       
39.     public QZRightWindowManager(){  
40.         mHashMap = new HashMap<Integer, QZRightWindowBase>();   
41.     }  
42.       
43.     public void setmContainer(QZRightWindowContainer container) {  
44.         this.mContainer = container;  
45.     }  
46.       
47.     public void showRightWindow(int num,QZRightWindowBase mQzRightWindowBase){  
48.         if(!mHashMap.containsKey(num)){  
49.             mHashMap.put(num, mQzRightWindowBase);  
50.             if(!(mQzRightWindowBase instanceof QZRightWindow1)){  
51.                 mContainer.addView(mQzRightWindowBase);  
52.             }  
53.         }  
54.           
55.         for (Iterator iter = mHashMap.keySet().iterator(); iter.hasNext();) {  
56.             Object key = iter.next();  
57.             QZRightWindowBase qzb = mHashMap.get(key);  
58.             qzb.setVisibility(View.INVISIBLE);  
59.         }  
60.           
61.         mQzRightWindowBase.setVisibility(View.VISIBLE);  
62.     }  
63.       
64. }  

主程序QzoneFrameDemoActivity代码如下:

[java]  view plain copy

1. package com.tutor.framedemo;  
2.   
3. import com.tutor.frame.QZLeftNavBar;  
4. import com.tutor.frame.QZRightWindow1;  
5. import com.tutor.frame.QZRightWindow2;  
6. import com.tutor.frame.QZRightWindow3;  
7. import com.tutor.frame.QZRightWindow4;  
8. import com.tutor.frame.QZRightWindowBase;  
9. import com.tutor.frame.QZRightWindowContainer;  
10. import com.tutor.frame.QZRightWindowManager;  
11.   
12. import android.app.Activity;  
13. import android.os.Bundle;  
14. import android.view.View;  
15. import android.view.View.OnClickListener;  
16.   
17. public class QzoneFrameDemoActivity extends Activity implements OnClickListener{  
18.       
19.     private QZRightWindow1 mQzRightWindow1;  
20.       
21.     private QZRightWindow2 mQzRightWindow2;  
22.       
23.     private QZRightWindow3 mQzRightWindow3;  
24.       
25.     private QZRightWindow4 mQzRightWindow4;  
26.       
27.     private QZLeftNavBar mQzLeftNavBar;  
28.       
29.     private QZRightWindowContainer mQzRightWindowContainer;  
30.       
31.     private QZRightWindowManager mQzRightWindowManager;  
32.       
33.     @Override  
34.     public void onCreate(Bundle savedInstanceState) {  
35.         super.onCreate(savedInstanceState);  
36.         setContentView(R.layout.main);  
37.           
38.         setupViews();  
39.     }  
40.       
41.     private void setupViews(){  
42.         mQzRightWindowManager = new QZRightWindowManager();  
43.           
44.         mQzLeftNavBar = (QZLeftNavBar)findViewById(R.id.navbar);  
45.           
46.         mQzLeftNavBar.findViewById(R.id.rw1).setOnClickListener(this);  
47.         mQzLeftNavBar.findViewById(R.id.rw2).setOnClickListener(this);  
48.         mQzLeftNavBar.findViewById(R.id.rw3).setOnClickListener(this);  
49.         mQzLeftNavBar.findViewById(R.id.rw4).setOnClickListener(this);  
50.           
51.         mQzRightWindow1 = (QZRightWindow1)findViewById(R.id.qzrw1);  
52.           
53.         mQzRightWindowContainer = (QZRightWindowContainer)findViewById(R.id.container);  
54.         mQzRightWindowManager.setmContainer(mQzRightWindowContainer);  
55.     }  
56.   
57.     private void showRightWindow(int num,QZRightWindowBase mQzRightWindowBase){  
58.         mQzRightWindowManager.showRightWindow(num, mQzRightWindowBase);  
59.     }  
60.       
61.     @Override  
62.     public void onClick(View v) {         
63.         int id = v.getId();  
64.         switch (id) {  
65.         case R.id.rw1:  
66.             showRightWindow(QZRightWindowManager.FRIEND_TRENDS_WINDOW, mQzRightWindow1);  
67.             break;  
68.         case R.id.rw2:  
69.             if(mQzRightWindow2 == null){  
70.                 mQzRightWindow2 = new QZRightWindow2(this);  
71.             }  
72.             showRightWindow(QZRightWindowManager.HOME_PAGE_WINDOW, mQzRightWindow2);  
73.             break;  
74.         case R.id.rw3:  
75.             if(mQzRightWindow3 == null){  
76.                 mQzRightWindow3 = new QZRightWindow3(this);  
77.             }  
78.             showRightWindow(QZRightWindowManager.FRIEND_LIST_WINDOW, mQzRightWindow3);  
79.             break;  
80.         case R.id.rw4:  
81.             if(mQzRightWindow4 == null){  
82.                 mQzRightWindow4 = new QZRightWindow4(this);  
83.             }  
84.             showRightWindow(QZRightWindowManager.APP_CENTER_WINDOW, mQzRightWindow4);  
85.             break;  
86.         default:  
87.             break;  
88.         }  
89.     }  
90. }  

主程序所用到的布局文件main.xml代码如下:

[java]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:orientation="horizontal" >  
6.   
7.     <com.tutor.frame.QZLeftNavBar  
8.         android:id="@+id/navbar"  
9.         android:layout_width="wrap_content"  
10.         android:layout_height="fill_parent"/>  
11.   
12.     <com.tutor.frame.QZRightWindowContainer  
13.         android:id="@+id/container"  
14.         android:layout_width="fill_parent"  
15.         android:layout_height="fill_parent"  
16.      >  
17.         <com.tutor.frame.QZRightWindow1  
18.              android:id="@+id/qzrw1"  
19.              android:layout_width="fill_parent"  
20.              android:layout_height="fill_parent"  
21.           />  
22.      </com.tutor.frame.QZRightWindowContainer>  
23. </LinearLayout>  

运行效果如下:

效果1

效果2.

OK，这样就大功告成了!对于pad上面的应用，单Activity化，各个功能模块化，UI控件化，是比较好的选择，这样可以加大开发效率，减少和其他同学的耦合性。

下面的链接是源代码，供新手们学习用，今天就讲到这里，谢谢大家！！！

源代码点击进入==>