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

秒速五厘米 2022-06-16 09:41 159阅读 0赞

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

![0_1325414962V5h7.gif][]

图1：交互效果图.

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

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

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

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

![0_1325415870tgIG.gif][]

图2：程序代码结构图:

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

![0_1325416017qZ8E.gif][]

上图可以清晰的看清各个类之间的关系，其中QZRightWindowManger管理了QZRightWindowContainer(剪头忘记加了)和右侧的四个Window,QZRightWindowContainer继承了FrameLayout，四个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);
    	}
    
    }

而右侧四个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);
    	}
    	
    	//做些事为了扩展举例而已
    	public abstract void dosomething();
    	//做些事2
    	public abstract void dosomething2();
    
    }

右侧窗口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("好友动态");
    		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代码如下:

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

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>

运行效果如下:

![0_1325416333zEbt.gif][]

效果1

![0_1325416338LPLo.gif][]

效果2.

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

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

[**源代码点击进入==>**][Link 1]

[0_1325414962V5h7.gif]: /images/20220616/ebfcc9fd7bb6446b80196e46192b1b6a.png
[0_1325415870tgIG.gif]: /images/20220616/12d41f870f414ae290c9b30fef3a4616.png
[0_1325416017qZ8E.gif]: /images/20220616/f4cb6813ca9a412385c030b2d5a1b89f.png
[0_1325416333zEbt.gif]: /images/20220616/bdc9a9caa9e44568aa716ff70858d588.png
[0_1325416338LPLo.gif]: /images/20220616/9ff7b9734a72488eb5f79c2b09a56bb6.png
[Link 1]: http://download.csdn.net/detail/android_tutor/3997605