今天給大家分享的是Apad Qzone的UI框架，我們首先看下交互圖如下:
圖1：交互效果圖.
從上圖可以看出，整個應用其實UI框架相對比較簡單，可以分為倆部分，左側導航欄區域，右側顯示內容區域。當我們點擊左側導航欄時，右側顯示相對應內容。
應用的主要內容分為四個模塊：好友動態；個人主頁；好友列表；應用中心。右側顯示內容則統一由一個管理器管理，管理器管理了右側的容器以及顯示內容面板。
也許用文字不太好說清楚，所以我寫了一個簡單的Demo以及畫了一個UI結構圖方便大家理解：
首先是新建一個Android工程，命名為QzoneFrameDemo,結構如下:
圖2：程序代碼結構圖:
為了更容易理解代碼，我畫了一個各個類的關系圖如下：
上圖可以清晰的看清各個類之間的關系，其中QZRightWindowManger管理了QZRightWindowContainer(剪頭忘記加了)和右側的四個Window,QZRightWindowContainer繼承了FrameLayout，四個Window繼承了QZRightWindowBase。
其中QZRightWindowContainer代碼如下(繼承了FrameLayout):
[java]?view plaincopy
package?com.tutor.frame;?? ?? import?android.content.Context;?? import?android.util.AttributeSet;?? import?android.widget.FrameLayout;?? ?? public?class?QZRightWindowContainer?extends?FrameLayout?{?? ?? ????public?QZRightWindowContainer(Context?context){?? ????????super(context);?? ????}?? ????public?QZRightWindowContainer(Context?context,?AttributeSet?attrs)?{?? ????????super(context,?attrs);?? ????}?? ?? }??
而右側四個Window的基類QZRightWindowBase的代碼如下:
[java]?view plaincopy
package?com.tutor.frame;?? ?? import?android.content.Context;?? import?android.util.AttributeSet;?? import?android.widget.FrameLayout;?? import?android.widget.TextView;?? ?? public?abstract?class?QZRightWindowBase?extends?FrameLayout?{?? ?? ????public?TextView?mContentTextView;?? ?????? ????private?LayoutParams?params?=?new?LayoutParams(LayoutParams.FILL_PARENT,?? ????????????LayoutParams.FILL_PARENT);?? ?????????? ????public?QZRightWindowBase(Context?context){?? ????????super(context);?? ????????setupViews();?? ????}?? ?????? ????public?QZRightWindowBase(Context?context,?AttributeSet?attrs)?{?? ????????super(context,?attrs);?? ????????setupViews();?? ????}?? ?????? ????private?void?setupViews(){?? ????????mContentTextView?=?new?TextView(getContext());?? ????????mContentTextView.setLayoutParams(params);?? ????}?? ?????? ?????? ????public?abstract?void?dosomething();?? ?????? ????public?abstract?void?dosomething2();?? ?? }??
右側窗口Window1即QZRightWindow1代碼(其他的都一樣不貼代碼了)如下:
[java]?view plaincopy
package?com.tutor.frame;?? ?? import?android.content.Context;?? import?android.graphics.Color;?? import?android.util.AttributeSet;?? ?? public?class?QZRightWindow1?extends?QZRightWindowBase{?? ?? ????public?QZRightWindow1(Context?context){?? ????????super(context);?? ????????setupViews();?? ????}?? ????public?QZRightWindow1(Context?context,?AttributeSet?attrs)?{?? ????????super(context,?attrs);?? ????????setupViews();?? ????}?? ?????? ????private?void?setupViews(){?? ????????mContentTextView.setText("好友動態");?? ????????mContentTextView.setBackgroundColor(Color.RED);?? ????????addView(mContentTextView);?? ????}?? ?? ????@Override?? ????public?void?dosomething()?{?? ?????????? ?????????? ????}?? ?? ????@Override?? ????public?void?dosomething2()?{?? ?????????? ?????????? ????}?? ?? }??
管理QZRightWindowContainer和右側四個Window的管理類QZRightWindowManager代碼如下:
[java]?view plaincopy
package?com.tutor.frame;?? ?? import?java.util.HashMap;?? import?java.util.Iterator;?? ?? import?android.view.View;?? ?? ?? ?? ?? public?class?QZRightWindowManager?{?? ?? ?????? ? ?? ????public?static?final?int?FRIEND_TRENDS_WINDOW?=?0;?? ?????? ?????? ? ?? ????public?static?final?int?HOME_PAGE_WINDOW?=?1;?? ?????? ?????? ? ?? ????public?static?final?int?FRIEND_LIST_WINDOW?=?2;?? ?????? ?????? ? ?? ????public?static?final?int?APP_CENTER_WINDOW?=?3;?? ?????? ?????? ????private?HashMap<Integer,?QZRightWindowBase>?mHashMap;?? ?????? ????private?QZRightWindowContainer?mContainer;?? ?????? ?????? ????public?QZRightWindowManager(){?? ????????mHashMap?=?new?HashMap<Integer,?QZRightWindowBase>();??? ????}?? ?????? ????public?void?setmContainer(QZRightWindowContainer?container)?{?? ????????this.mContainer?=?container;?? ????}?? ?????? ????public?void?showRightWindow(int?num,QZRightWindowBase?mQzRightWindowBase){?? ????????if(!mHashMap.containsKey(num)){?? ????????????mHashMap.put(num,?mQzRightWindowBase);?? ????????????if(!(mQzRightWindowBase?instanceof?QZRightWindow1)){?? ????????????????mContainer.addView(mQzRightWindowBase);?? ????????????}?? ????????}?? ?????????? ????????for?(Iterator?iter?=?mHashMap.keySet().iterator();?iter.hasNext();)?{?? ????????????Object?key?=?iter.next();?? ????????????QZRightWindowBase?qzb?=?mHashMap.get(key);?? ????????????qzb.setVisibility(View.INVISIBLE);?? ????????}?? ?????????? ????????mQzRightWindowBase.setVisibility(View.VISIBLE);?? ????}?? ?????? }??
主程序QzoneFrameDemoActivity代碼如下:
[java]?view plaincopy
package?com.tutor.framedemo;?? ?? import?com.tutor.frame.QZLeftNavBar;?? import?com.tutor.frame.QZRightWindow1;?? import?com.tutor.frame.QZRightWindow2;?? import?com.tutor.frame.QZRightWindow3;?? import?com.tutor.frame.QZRightWindow4;?? import?com.tutor.frame.QZRightWindowBase;?? import?com.tutor.frame.QZRightWindowContainer;?? import?com.tutor.frame.QZRightWindowManager;?? ?? import?android.app.Activity;?? import?android.os.Bundle;?? import?android.view.View;?? import?android.view.View.OnClickListener;?? ?? public?class?QzoneFrameDemoActivity?extends?Activity?implements?OnClickListener{?? ?????? ????private?QZRightWindow1?mQzRightWindow1;?? ?????? ????private?QZRightWindow2?mQzRightWindow2;?? ?????? ????private?QZRightWindow3?mQzRightWindow3;?? ?????? ????private?QZRightWindow4?mQzRightWindow4;?? ?????? ????private?QZLeftNavBar?mQzLeftNavBar;?? ?????? ????private?QZRightWindowContainer?mQzRightWindowContainer;?? ?????? ????private?QZRightWindowManager?mQzRightWindowManager;?? ?????? ????@Override?? ????public?void?onCreate(Bundle?savedInstanceState)?{?? ????????super.onCreate(savedInstanceState);?? ????????setContentView(R.layout.main);?? ?????????? ????????setupViews();?? ????}?? ?????? ????private?void?setupViews(){?? ????????mQzRightWindowManager?=?new?QZRightWindowManager();?? ?????????? ????????mQzLeftNavBar?=?(QZLeftNavBar)findViewById(R.id.navbar);?? ?????????? ????????mQzLeftNavBar.findViewById(R.id.rw1).setOnClickListener(this);?? ????????mQzLeftNavBar.findViewById(R.id.rw2).setOnClickListener(this);?? ????????mQzLeftNavBar.findViewById(R.id.rw3).setOnClickListener(this);?? ????????mQzLeftNavBar.findViewById(R.id.rw4).setOnClickListener(this);?? ?????????? ????????mQzRightWindow1?=?(QZRightWindow1)findViewById(R.id.qzrw1);?? ?????????? ????????mQzRightWindowContainer?=?(QZRightWindowContainer)findViewById(R.id.container);?? ????????mQzRightWindowManager.setmContainer(mQzRightWindowContainer);?? ????}?? ?? ????private?void?showRightWindow(int?num,QZRightWindowBase?mQzRightWindowBase){?? ????????mQzRightWindowManager.showRightWindow(num,?mQzRightWindowBase);?? ????}?? ?????? ????@Override?? ????public?void?onClick(View?v)?{????????? ????????int?id?=?v.getId();?? ????????switch?(id)?{?? ????????case?R.id.rw1:?? ????????????showRightWindow(QZRightWindowManager.FRIEND_TRENDS_WINDOW,?mQzRightWindow1);?? ????????????break;?? ????????case?R.id.rw2:?? ????????????if(mQzRightWindow2?==?null){?? ????????????????mQzRightWindow2?=?new?QZRightWindow2(this);?? ????????????}?? ????????????showRightWindow(QZRightWindowManager.HOME_PAGE_WINDOW,?mQzRightWindow2);?? ????????????break;?? ????????case?R.id.rw3:?? ????????????if(mQzRightWindow3?==?null){?? ????????????????mQzRightWindow3?=?new?QZRightWindow3(this);?? ????????????}?? ????????????showRightWindow(QZRightWindowManager.FRIEND_LIST_WINDOW,?mQzRightWindow3);?? ????????????break;?? ????????case?R.id.rw4:?? ????????????if(mQzRightWindow4?==?null){?? ????????????????mQzRightWindow4?=?new?QZRightWindow4(this);?? ????????????}?? ????????????showRightWindow(QZRightWindowManager.APP_CENTER_WINDOW,?mQzRightWindow4);?? ????????????break;?? ????????default:?? ????????????break;?? ????????}?? ????}?? }??
主程序所用到的布局文件main.xml代碼如下:
[java]?view plaincopy
<?xml?version="1.0"?encoding="utf-8"?>?? <LinearLayout?xmlns:android="http://schemas.android.com/apk/res/android"?? ????android:layout_width="fill_parent"?? ????android:layout_height="fill_parent"?? ????android:orientation="horizontal"?>?? ?? ????<com.tutor.frame.QZLeftNavBar?? ????????android:id="@+id/navbar"?? ????????android:layout_width="wrap_content"?? ????????android:layout_height="fill_parent"/>?? ?? ????<com.tutor.frame.QZRightWindowContainer?? ????????android:id="@+id/container"?? ????????android:layout_width="fill_parent"?? ????????android:layout_height="fill_parent"?? ?????>?? ????????<com.tutor.frame.QZRightWindow1?? ?????????????android:id="@+id/qzrw1"?? ?????????????android:layout_width="fill_parent"?? ?????????????android:layout_height="fill_parent"?? ??????????/>?? ?????</com.tutor.frame.QZRightWindowContainer>?? </LinearLayout>??
運行效果如下:
效果1
效果2.
OK，這樣就大功告成了!對于pad上面的應用，單Activity化，各個功能模塊化，UI控件化，是比較好的選擇，這樣可以加大開發效率，減少和其他同學的耦合性。
下面的鏈接是源代碼，供新手們學習用，今天就講到這里，謝謝大家！！！
源代碼點擊進入==>
轉自：http://blog.csdn.net/android_tutor/article/details/7170434
總結
以上是生活随笔為你收集整理的(转)Android QQ空间(Apad)项目总结(三)---应用UI框架的搭建！！！的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
