Android QQ空間(Apad)項目總結(三)---應用UI框架的搭建！！！

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

圖1：交互效果圖.

從上圖可以看出，整個應用其實UI框架相對比較簡單，可以分爲倆部分，左側導航欄區域，右側顯示內容區域。當我們點擊左側導航欄時，右側顯示相對應內容。

應用的主要內容分爲四個模塊：好友動態；個人主頁；好友列表；應用中心。右側顯示內容則統一由一個管理器管理，管理器管理了右側的容器以及顯示內容面板。

也許用文字不太好說清楚，所以我寫了一個簡單的Demo以及畫了一個UI結構圖方便大家理解：

首先是新建一個Android工程，命名爲QzoneFrameDemo,結構如下:

圖2：程序代碼結構圖:

爲了更容易理解代碼，我畫了一個各個類的關係圖如下：

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

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

view plain copy to clipboard print ?

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

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

view plain copy to clipboard print ?

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();
//做些事2
public abstract void dosomething2();
}

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();
	//做些事2
	public abstract void dosomething2();

}

右側窗口Window1即QZRightWindow1代碼(其他的都一樣不貼代碼了)如下:

view plain copy to clipboard print ?

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() {
// TODO Auto-generated method stub
}
@Override
public void dosomething2() {
// TODO Auto-generated method stub
}
}

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() {
		// TODO Auto-generated method stub
		
	}

	@Override
	public void dosomething2() {
		// TODO Auto-generated method stub
		
	}

}

管理QZRightWindowContainer和右側四個Window的管理類QZRightWindowManager代碼如下:

view plain copy to clipboard print ?

package com.tutor.frame;
import java.util.HashMap;
import java.util.Iterator;
import android.view.View;
public class QZRightWindowManager {
/**
* 好友動態面板的KEY
*/
public static final int FRIEND_TRENDS_WINDOW = 0;
/**
* 個人中心面板的KEY
*/
public static final int HOME_PAGE_WINDOW = 1;
/**
* 好友關係鏈面板的KEY
*/
public static final int FRIEND_LIST_WINDOW = 2;
/**
* 應用中心面板的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);
}
}

package com.tutor.frame;

import java.util.HashMap;
import java.util.Iterator;

import android.view.View;




public class QZRightWindowManager {

	 /**
     * 好友動態面板的KEY
     */
    public static final int FRIEND_TRENDS_WINDOW = 0;
    
	 /**
     * 個人中心面板的KEY
     */
    public static final int HOME_PAGE_WINDOW = 1;
    
	 /**
     * 好友關係鏈面板的KEY
     */
    public static final int FRIEND_LIST_WINDOW = 2;
    
	 /**
     * 應用中心面板的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代碼如下:

view plain copy to clipboard print ?

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

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

view plain copy to clipboard print ?

<?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>

<?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控件化，是比較好的選擇，這樣可以加大開發效率，減少和其他同學的耦合性。

下面的鏈接是源代碼，供新手們學習用，今天就講到這裏，謝謝大家！！！

源代碼點擊進入==>

Android QQ空間(Apad)項目總結(三)---應用UI框架的搭建！！！

HTML頁面關於高分屏的設置

北歐瑞典挪威芬蘭瑞士TikTok海外網紅與YouTube博主的合作模式

歐洲英國德國法國TikTok與YouTube海外網紅達人的完美合作策略

druid數據源 xml配置

Tab-size獨立的源代碼的格式

用C寫郵箱密碼暴力破解器

Linux系統中關於文件編碼以及編碼的轉換

ASP.NET中的代碼分離

ASP.NET圖片盜鏈問題

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結