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

news/2024/4/16 22:17:57

今天给大家分享的是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控件化,是比较好的选择,这样可以加大开发效率,减少和其他同学的耦合性。

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

源代码点击进入==>



转自:http://blog.csdn.net/android_tutor/article/details/7170434


http://www.ppmy.cn/news/267079.html

相关文章

kubernetes-1.20.x二进制部署

资源规划 主机名ip地址配置角色系统版本k8s-master01192.168.0.2012C2Gmaster/Workcentos7.6k8s-master02192.168.0.2022C2Gmaster/Workcentos7.6k8s-master03192.168.0.2032C2Gmaster/Workcentos7.6k8s-k8s-master-lb192.168.0.200无需资源k8s-master-lbcentos7.6k8s-node011…

Apad Qzone项目总结(二)---换肤功能实现!!!

Hi,大家好&#xff0c;快元旦啦&#xff0c;提前祝大家元旦快乐&#xff0c;(*^__^*) 嘻嘻&#xff0c;今天给大家分享的是Apad Qzone换肤功能的实现&#xff0c;我们首先看下效果: 图1:默认的皮肤. 图2&#xff1a;点击菜单护肤按钮&#xff0c;应用更换皮肤. 通过上面的效果…

APAD 7'“谷歌Android操作系统1.5无线触摸屏

APAD 7“谷歌Android操作系统1.5无线触摸屏   中国iPad)APAD超薄超轻7寸Android操作系统的G-传感器&#xff0c;无线3G iPad的音乐风格电子书   * APAD - Android操作系统1.5 7寸WiFi平板电脑   *获取最热门的小工具&#xff0c;今年不到155美元免运费!   * APAD的是&a…

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

大家好&#xff0c;今天是元旦节了&#xff0c;祝大家节日快乐&#xff01;今天给大家分享的是Apad Qzone的UI框架&#xff0c;我们首先看下交互图如下: 图1&#xff1a;交互效果图. 从上图可以看出&#xff0c;整个应用其实UI框架相对比较简单&#xff0c;可以分为俩部分&…

平板电脑android 管理软件,应用宝HD下载V5.2.0.142 安卓版-Android平板电脑(aPad)专用西西软件下载...

应用宝HD&#xff0c;是腾讯应用中心专为Android平板电脑用户倾力打造的应用获取平台&#xff0c;我们致力于为用户提供丰富安全的应用资源和覆盖应用整个生命周期的一站式应用管理体验。目前应用宝HD支持操作系统Android3.0以上&#xff0c;屏幕分辨率1280*800的平板电脑支持最…

FFplay文档解读-18-音频过滤器三

26.21 anequalizer 每个通道的高阶参数多频带均衡器。 它接受以下参数&#xff1a; params此选项字符串的格式为&#xff1a;cchn f cf w w g g t f | ...每个均衡器带由|分隔。 均衡器解释chn设置要应用均衡的通道编号。 如果输入没有该通道&#xff0c;则忽略该条目f…

JS学习笔记(6. BOM)

简介 BOM是指window对象 1. window.变量 var声明的变量&#xff0c;都是挂载在window下。var a; 使用a相当于window.a 2. window.document document&#xff08;DOM&#xff09;是window&#xff08;BOM&#xff09;下的对象&#xff0c;一般省略window.document的window直…

简介吧,写点关于初衷的东西

2019.3.2 22:33 坐标魔都&#xff0c;四年前高考失利&#xff0c;阴差阳错来到了魔都一所双非普本&#xff0c;2019年即将毕业 &#xff0c;立志成为一名Java开发程序猿/媛&#xff0c;2019考研软工爆炸&#xff0c;觉得是自己专业课没考好&#xff0c;难受了一个礼拜&#xf…

维库电子市场网--15年电子贸易推广专家

维库电子市场网&#xff0d;&#xff0d;15年电子贸易推广专家杭州威士顿网络科技有限公司旗下维库电子市场网&#xff08;www.dzsc.com&#xff09;成立于2004年&#xff0c;专注于为电子元器件产业链提供B2B电商服务&#xff0c;是业内知名度极高的互联网平台。通过多年的不懈…

LongIsland纽约长岛LangeEylandt

LangeEylandt n.长岛(美国) 纽约长岛 纽约长岛 &#xff08;LongIsland&#xff09;是北美洲在大西洋内的一个岛&#xff0c;最早追溯到十七世纪的1650年被命名为Lange Eylandt [1] &#xff0c;位于北美洲东海岸边&#xff0c;属于美国纽约州。长190千米&#xff0c;宽约20到…

js实现页面的跳转

JS跳转页面参考代码 第一种&#xff1a; <script language"javascript" type"text/javascript"> window.location.href"login.jsp?backurl"window.location.href; </script> 第二种&#xff1a; <script language"…

沉默后的爆发,罗技UE推出全新非定制动铁旗舰耳机UE900

UE是世界著名的耳机品牌&#xff0c;他们的动铁产品一直是优质的代名词&#xff0c;在发烧友中口碑也非常好。UE的产品提供给舞台表演者一个强大的技术支持&#xff0c;我们经常能看到上台的歌手采用UE的高端定制耳机。当然我们一些音乐发烧友也会采用UE的定制耳机来欣赏音乐&a…

oracle 在中国的合作伙伴名单(一)

ShanghaiGenerationTechnologyInc.ShanghaiGenerationTechnologyInc.IndependentSoftwareVendor(ISV) 合作伙伴会员资格级别 :PartnerLevel 合作伙伴会员资格所属地区 :China 上海协泰信息技术有限公司 ShanghaiHuatengSoftewareSystemsCo.,Ltd.ShanghaiHuatengSoftewareSystem…

美国大学网址大全(按州排序)

转载自&#xff1a;http://www.university-list.net/meiguo/daxue-1000.htm 全部州在一页•亚拉巴马AL • 阿拉斯加AK • 亚利桑那AZ • 阿肯色AR • 加利福尼亚CA • 科罗拉多CO • 康涅狄格CT • 特拉华DE • 哥伦比亚特区DC • 佛罗里达FL • 佐治亚GA • 夏威夷HI • 爱达荷…

美国LangeEylandt长岛

LangeEylandt 长岛(美国) 纽约长岛 纽约长岛 &#xff08;LongIsland&#xff09;是北美洲在大西洋内的一个岛&#xff0c;最早追溯到十七世纪的1650年被命名为Lange Eylandt &#xff0c;位于北美洲东海岸边&#xff0c;属于美国纽约州。长190千米&#xff0c;宽约20到30千米…

MOSFET常用品牌及特点

IR(International Rectifier国际整流器公司)--老牌劲旅&#xff0c;贵且缺着&#xff0c;但还是要用 ST (ST Microelectronics意法半导体公司)--性价比不错的老牌子 FSC(FAIRCHILD飞兆半导体 大家习惯叫“仙童”)--MOS逐渐谈去&#xff0c;期待IGBT Infineon(Infineon英飞…

JS页面跳转总结

JS跳转页面参考代码第一种&#xff1a; <script language"javascript" type"text/javascript">window.location.href"login.jsp?backurl"window.location.href;</script>第二种&#xff1a; <script language"javasc…

亚当斯的区域曝光理论

&#xff08;大部分内容转载自百度百科&#xff09; 美国著名摄影家安塞尔亚当斯的区域曝光理论&#xff0c;是半个多世纪以来摄影科学的基本理论之一。亚当斯在他所写的《负片与照片》一书中对此曾作了详尽的表述。他所介绍的方法虽然较为复杂&#xff0c;然而是极其有用的。有…

js跳转页面方法转载

JS跳转页面参考代码 第一种&#xff1a; 第二种&#xff1a; 第三种&#xff1a; 第四种&#xff1a; 第五种&#xff1a; &#xff1d;&#xff1d;&#xff1d;&#xff1d;&#xff1d;javascript中弹出选择框跳转到其他页面&#xff1d;&#xff1d;&#xff1d;&#…

易备数据库备份方案案例演示

目录 鸿萌易备数据备份软件之数据库备份功能 3 1. 关键特性 3 2. 数据库备份功能 3 3. 使用鸿萌易备数据备份软件备份数据库的用户案例 3 4. 应用范例&#xff1a;使用鸿萌易备备份Oracle数据库 4 5. 应用范例&#xff1a;使用鸿萌易备数据备份软件备份MySQL数据库 8 6. 应用范…
最新文章