大家好，今天是元旦節(jié)了，祝大家節(jié)日快樂！今天給大家分享的是Apad Qzone的UI框架，我們首先看下交互圖如下:

圖1：交互效果圖.

從上圖可以看出，整個(gè)應(yīng)用其實(shí)UI框架相對(duì)比較簡(jiǎn)單，可以分為倆部分，左側(cè)導(dǎo)航欄區(qū)域，右側(cè)顯示內(nèi)容區(qū)域。當(dāng)我們點(diǎn)擊左側(cè)導(dǎo)航欄時(shí)，右側(cè)顯示相對(duì)應(yīng)內(nèi)容。

應(yīng)用的主要內(nèi)容分為四個(gè)模塊：好友動(dòng)態(tài)；個(gè)人主頁；好友列表；應(yīng)用中心。右側(cè)顯示內(nèi)容則統(tǒng)一由一個(gè)管理器管理，管理器管理了右側(cè)的容器以及顯示內(nèi)容面板。

也許用文字不太好說清楚，所以我寫了一個(gè)簡(jiǎn)單的Demo以及畫了一個(gè)UI結(jié)構(gòu)圖方便大家理解：

首先是新建一個(gè)Android工程，命名為QzoneFrameDemo,結(jié)構(gòu)如下:

圖2：程序代碼結(jié)構(gòu)圖:

為了更容易理解代碼，我畫了一個(gè)各個(gè)類的關(guān)系圖如下：

上圖可以清晰的看清各個(gè)類之間的關(guān)系，其中QZRightWindowManger管理了QZRightWindowContainer(剪頭忘記加了)和右側(cè)的四個(gè)Window,QZRightWindowContainer繼承了FrameLayout，四個(gè)Window繼承了QZRightWindowBase。

其中QZRightWindowContainer代碼如下(繼承了FrameLayout):

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); } }

而右側(cè)四個(gè)Window的基類QZRightWindowBase的代碼如下:

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); } //做些事為了擴(kuò)展舉例而已 public abstract void dosomething(); //做些事2 public abstract void dosomething2(); } 右側(cè)窗口Window1即QZRightWindow1代碼(其他的都一樣不貼代碼了)如下:

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("好友動(dòng)態(tài)"); mContentTextView.setBackgroundColor(Color.RED); addView(mContentTextView); } @Override public void dosomething() { // TODO Auto-generated method stub } @Override public void dosomething2() { // TODO Auto-generated method stub } }
管理QZRightWindowContainer和右側(cè)四個(gè)Window的管理類QZRightWindowManager代碼如下:

package com.tutor.frame; import java.util.HashMap; import java.util.Iterator; import android.view.View; public class QZRightWindowManager { /** * 好友動(dòng)態(tài)面板的KEY */ public static final int FRIEND_TRENDS_WINDOW = 0; /** * 個(gè)人中心面板的KEY */ public static final int HOME_PAGE_WINDOW = 1; /** * 好友關(guān)系鏈面板的KEY */ public static final int FRIEND_LIST_WINDOW = 2; /** * 應(yīng)用中心面板的KEY */ 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代碼如下:

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代碼如下:

<?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>
運(yùn)行效果如下:

效果1

效果2.

OK，這樣就大功告成了!對(duì)于pad上面的應(yīng)用，單Activity化，各個(gè)功能模塊化，UI控件化，是比較好的選擇，這樣可以加大開發(fā)效率，減少和其他同學(xué)的耦合性。

下面的鏈接是源代碼，供新手們學(xué)習(xí)用，今天就講到這里，謝謝大家！！！

源代碼點(diǎn)擊進(jìn)入==>

總結(jié)

以上是生活随笔為你收集整理的Android QQ空间(Apad)项目总结(三)---应用UI框架的搭建！！！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。