Android应用经典主界面框架之一:仿QQ (使用Fragment, 附源码) 分类： Android开发 2014-06-14 23:43 17633人阅读 评论(98) 收藏 举报 android应用 框架 Fragment

目录(?)[+]

  1. 一底部控制栏
  2. 二顶部控制栏
  3. 三总控中心Activity和Fragment

最近反复研究日常经典必用的几个android app，从主界面带来的交互方式入手进行分析，我将其大致分为三类。今天记录第一种方式，即主界面下面有几个tab页，最上端是标题栏，tab页和tab页之间不是通过滑动切换的，而是通过点击切换tab页。早期这种架构一直是使用tabhost+activitygroup来使用，随着fragment的出现及google官方也大力推荐使用fragment，后者大有代替前者之势。本文也使用fragment进行搭建，标题中的“经典”指这种交互经典，非本文的代码框架结构，欢迎大家提出指出不足，帮助完善。文中的fragment部分参考了郭神的博文(链接1 链接2 链接3)，代码也是在郭神代码基础上加入了自己对框架的理解。

再次重申下这种主界面交互的特点:1,多个tab，不能滑动切换只能点击切换；2，上有标题栏。这种模式也是目前app中使用最多的。如qq、百度云盘、招商银行、微博、支付宝。几个月前支付宝还是能滑动切换的，后来取消了。视图如下:



下面本文从底部控制栏、顶部控制栏及中间的内容显示载体fragment三部分叙述。

一、底部控制栏

底部控制栏里每个控件都不是单一基础控件，上面是图片、下面是文字，右上角是红点，当有更新时红点显示，否则隐藏。另外像qq的右上角还能显示未读消息的个数，我的参考链接里是通过大量的layout一点一点搭出来的，这样的好处是方便控制比较直观，另外是可以利用Linearlayout里的layout_weight这个属性，让底部的这些item均匀分布，缺点是代码上有很多重复，维护起来不方便。既然是整理app的通用模板框架，因此我将每个item视为一个对象，然后将其放在底部就ok了。本代码里只封装了上面是图片下面是文字，右上角的红点么有封装进来。

ImageText.java就作了这样一件事:

[java] view plain copy print ?
  1. <SPANstyle="FONT-FAMILY:ComicSansMS;FONT-SIZE:18px">packageorg.yanzi.ui;
  3. importorg.yanzi.constant.Constant;
  5. importandroid.content.Context;
  6. importandroid.graphics.Color;
  7. importandroid.util.AttributeSet;
  8. importandroid.view.LayoutInflater;
  9. importandroid.view.MotionEvent;
  10. importandroid.view.View;
  11. importandroid.view.ViewGroup;
  12. importandroid.widget.ImageView;
  13. importandroid.widget.LinearLayout;
  14. importandroid.widget.TextView;
  16. importcom.example.fragmentproject.R;
  19. publicclassImageTextextendsLinearLayout{
  20. privateContextmContext=null;
  21. privateImageViewmImageView=null;
  22. privateTextViewmTextView=null;
  23. privatefinalstaticintDEFAULT_IMAGE_WIDTH=64;
  24. privatefinalstaticintDEFAULT_IMAGE_HEIGHT=64;
  25. privateintCHECKED_COLOR=Color.rgb(29,118,199);//选中蓝色
  26. privateintUNCHECKED_COLOR=Color.GRAY;//自然灰色
  27. publicImageText(Contextcontext){
  28. super(context);
  29. //TODOAuto-generatedconstructorstub
  30. mContext=context;
  31. }
  33. publicImageText(Contextcontext,AttributeSetattrs){
  34. super(context,attrs);
  35. //TODOAuto-generatedconstructorstub
  36. mContext=context;
  37. LayoutInflaterinflater=(LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  38. ViewparentView=inflater.inflate(R.layout.image_text_layout,this,true);
  39. mImageView=(ImageView)findViewById(R.id.image_iamge_text);
  40. mTextView=(TextView)findViewById(R.id.text_iamge_text);
  41. }
  42. publicvoidsetImage(intid){
  43. if(mImageView!=null){
  44. mImageView.setImageResource(id);
  45. setImageSize(DEFAULT_IMAGE_WIDTH,DEFAULT_IMAGE_HEIGHT);
  46. }
  47. }
  49. publicvoidsetText(Strings){
  50. if(mTextView!=null){
  51. mTextView.setText(s);
  52. mTextView.setTextColor(UNCHECKED_COLOR);
  53. }
  54. }
  56. @Override
  57. publicbooleanonInterceptTouchEvent(MotionEventev){
  58. //TODOAuto-generatedmethodstub
  59. returntrue;
  60. }
  61. privatevoidsetImageSize(intw,inth){
  62. if(mImageView!=null){
  63. ViewGroup.LayoutParamsparams=mImageView.getLayoutParams();
  64. params.width=w;
  65. params.height=h;
  66. mImageView.setLayoutParams(params);
  67. }
  68. }
  69. publicvoidsetChecked(intitemID){
  70. if(mTextView!=null){
  71. mTextView.setTextColor(CHECKED_COLOR);
  72. }
  73. intcheckDrawableId=-1;
  74. switch(itemID){
  75. caseConstant.BTN_FLAG_MESSAGE:
  76. checkDrawableId=R.drawable.message_selected;
  77. break;
  78. caseConstant.BTN_FLAG_CONTACTS:
  79. checkDrawableId=R.drawable.contacts_selected;
  80. break;
  81. caseConstant.BTN_FLAG_NEWS:
  82. checkDrawableId=R.drawable.news_selected;
  83. break;
  84. caseConstant.BTN_FLAG_SETTING:
  85. checkDrawableId=R.drawable.setting_selected;
  86. break;
  87. default:break;
  88. }
  89. if(mImageView!=null){
  90. mImageView.setImageResource(checkDrawableId);
  91. }
  92. }
  98. }
  99. </SPAN>

对应的布局:

[html] view plain copy print ?
  1. <SPANstyle="FONT-FAMILY:ComicSansMS;FONT-SIZE:18px"><?xmlversion="1.0"encoding="utf-8"?>
  2. <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:orientation="vertical">
  7. <ImageView
  8. android:id="@+id/image_iamge_text"
  9. android:layout_width="wrap_content"
  10. android:layout_height="wrap_content"
  11. android:layout_gravity="center_horizontal"/>
  13. <TextView
  14. android:id="@+id/text_iamge_text"
  15. android:layout_width="wrap_content"
  16. android:layout_height="wrap_content"
  17. android:layout_gravity="center_horizontal"/>
  19. </LinearLayout></SPAN>

代码里用到了Constant.java，这里面放的都是常量：

[java] view plain copy print ?
  1. <SPANstyle="FONT-FAMILY:ComicSansMS;FONT-SIZE:18px">packageorg.yanzi.constant;
  3. publicclassConstant{
  4. //Btn的标识
  5. publicstaticfinalintBTN_FLAG_MESSAGE=0x01;
  6. publicstaticfinalintBTN_FLAG_CONTACTS=0x01<<1;
  7. publicstaticfinalintBTN_FLAG_NEWS=0x01<<2;
  8. publicstaticfinalintBTN_FLAG_SETTING=0x01<<3;
  10. //Fragment的标识
  11. publicstaticfinalStringFRAGMENT_FLAG_MESSAGE="消息";
  12. publicstaticfinalStringFRAGMENT_FLAG_CONTACTS="联系人";
  13. publicstaticfinalStringFRAGMENT_FLAG_NEWS="新闻";
  14. publicstaticfinalStringFRAGMENT_FLAG_SETTING="设置";
  15. publicstaticfinalStringFRAGMENT_FLAG_SIMPLE="simple";
  18. }
  19. </SPAN>
第一排是复合Button的标识，下面的string类型的是将来创建fragment的标识。

完成了ImageText之后，下面就是将4个这样的控件放到一个布局里。为了控制方便，我们将底部栏抽象为一个对象BottomControlPanel.java，这样在维护底部栏相关内容时直接找他就行了。BottomControlPanel继承自RelativeLayout，先来看它的布局:

bottom_panel_layout.xml

[html] view plain copy print ?
  1. <SPANstyle="FONT-FAMILY:ComicSansMS;FONT-SIZE:18px"><?xmlversion="1.0"encoding="utf-8"?>
  2. <org.yanzi.ui.BottomControlPanelxmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="60dp"
  5. android:layout_alignParentBottom="true"
  6. android:gravity="center_vertical"
  7. android:paddingLeft="20dp"
  8. android:paddingRight="20dp">
  10. <org.yanzi.ui.ImageText
  11. android:id="@+id/btn_message"
  12. android:layout_width="wrap_content"
  13. android:layout_height="wrap_content"
  14. android:layout_alignParentLeft="true"/>
  16. <org.yanzi.ui.ImageText
  17. android:id="@+id/btn_contacts"
  18. android:layout_width="wrap_content"
  19. android:layout_height="wrap_content"
  20. android:layout_toRightOf="@id/btn_message"/>
  22. <org.yanzi.ui.ImageText
  23. android:id="@+id/btn_news"
  24. android:layout_width="wrap_content"
  25. android:layout_height="wrap_content"
  26. android:layout_toRightOf="@id/btn_contacts"/>
  28. <org.yanzi.ui.ImageText
  29. android:id="@+id/btn_setting"
  30. android:layout_width="wrap_content"
  31. android:layout_height="wrap_content"
  32. android:layout_alignParentRight="true"/>
  34. </org.yanzi.ui.BottomControlPanel></SPAN>
对应的java文件:

BottomControlPanel.java

[java] view plain copy print ?
  1. <SPANstyle="FONT-FAMILY:ComicSansMS;FONT-SIZE:18px">packageorg.yanzi.ui;
  3. importjava.util.ArrayList;
  4. importjava.util.List;
  6. importorg.yanzi.constant.Constant;
  8. importandroid.content.Context;
  9. importandroid.graphics.Color;
  10. importandroid.util.AttributeSet;
  11. importandroid.util.Log;
  12. importandroid.view.View;
  13. importandroid.widget.RelativeLayout;
  15. importcom.example.fragmentproject.R;
  17. publicclassBottomControlPanelextendsRelativeLayoutimplementsView.OnClickListener{
  18. privateContextmContext;
  19. privateImageTextmMsgBtn=null;
  20. privateImageTextmContactsBtn=null;
  21. privateImageTextmNewsBtn=null;
  22. privateImageTextmSettingBtn=null;
  23. privateintDEFALUT_BACKGROUND_COLOR=Color.rgb(243,243,243);//Color.rgb(192,192,192)
  24. privateBottomPanelCallbackmBottomCallback=null;
  25. privateList<ImageText>viewList=newArrayList<ImageText>();
  27. publicinterfaceBottomPanelCallback{
  28. publicvoidonBottomPanelClick(intitemId);
  29. }
  30. publicBottomControlPanel(Contextcontext,AttributeSetattrs){
  31. super(context,attrs);
  32. //TODOAuto-generatedconstructorstub
  33. }
  34. @Override
  35. protectedvoidonFinishInflate(){
  36. //TODOAuto-generatedmethodstub
  37. mMsgBtn=(ImageText)findViewById(R.id.btn_message);
  38. mContactsBtn=(ImageText)findViewById(R.id.btn_contacts);
  39. mNewsBtn=(ImageText)findViewById(R.id.btn_news);
  40. mSettingBtn=(ImageText)findViewById(R.id.btn_setting);
  41. setBackgroundColor(DEFALUT_BACKGROUND_COLOR);
  42. viewList.add(mMsgBtn);
  43. viewList.add(mContactsBtn);
  44. viewList.add(mNewsBtn);
  45. viewList.add(mSettingBtn);
  47. }
  48. publicvoidinitBottomPanel(){
  49. if(mMsgBtn!=null){
  50. mMsgBtn.setImage(R.drawable.message_unselected);
  51. mMsgBtn.setText("消息");
  52. }
  53. if(mContactsBtn!=null){
  54. mContactsBtn.setImage(R.drawable.contacts_unselected);
  55. mContactsBtn.setText("联系人");
  56. }
  57. if(mNewsBtn!=null){
  58. mNewsBtn.setImage(R.drawable.news_unselected);
  59. mNewsBtn.setText("新闻");
  60. }
  61. if(mSettingBtn!=null){
  62. mSettingBtn.setImage(R.drawable.setting_unselected);
  63. mSettingBtn.setText("设置");
  64. }
  65. setBtnListener();
  67. }
  68. privatevoidsetBtnListener(){
  69. intnum=this.getChildCount();
  70. for(inti=0;i<num;i++){
  71. Viewv=getChildAt(i);
  72. if(v!=null){
  73. v.setOnClickListener(this);
  74. }
  75. }
  76. }
  77. publicvoidsetBottomCallback(BottomPanelCallbackbottomCallback){
  78. mBottomCallback=bottomCallback;
  79. }
  80. @Override
  81. publicvoidonClick(Viewv){
  82. //TODOAuto-generatedmethodstub
  83. initBottomPanel();
  84. intindex=-1;
  85. switch(v.getId()){
  86. caseR.id.btn_message:
  87. index=Constant.BTN_FLAG_MESSAGE;
  88. mMsgBtn.setChecked(Constant.BTN_FLAG_MESSAGE);
  89. break;
  90. caseR.id.btn_contacts:
  91. index=Constant.BTN_FLAG_CONTACTS;
  92. mContactsBtn.setChecked(Constant.BTN_FLAG_CONTACTS);
  93. break;
  94. caseR.id.btn_news:
  95. index=Constant.BTN_FLAG_NEWS;
  96. mNewsBtn.setChecked(Constant.BTN_FLAG_NEWS);
  97. break;
  98. caseR.id.btn_setting:
  99. index=Constant.BTN_FLAG_SETTING;
  100. mSettingBtn.setChecked(Constant.BTN_FLAG_SETTING);
  101. break;
  102. default:break;
  103. }
  104. if(mBottomCallback!=null){
  105. mBottomCallback.onBottomPanelClick(index);
  106. }
  107. }
  108. publicvoiddefaultBtnChecked(){
  109. if(mMsgBtn!=null){
  110. mMsgBtn.setChecked(Constant.BTN_FLAG_MESSAGE);
  111. }
  112. }
  113. @Override
  114. protectedvoidonLayout(booleanchanged,intleft,inttop,intright,intbottom){
  115. //TODOAuto-generatedmethodstub
  116. super.onLayout(changed,left,top,right,bottom);
  117. layoutItems(left,top,right,bottom);
  118. }
  119. /**最左边和最右边的view由母布局的padding进行控制位置。这里需对第2、3个view的位置重新设置
  120. *@paramleft
  121. *@paramtop
  122. *@paramright
  123. *@parambottom
  124. */
  125. privatevoidlayoutItems(intleft,inttop,intright,intbottom){
  126. intn=getChildCount();
  127. if(n==0){
  128. return;
  129. }
  130. intpaddingLeft=getPaddingLeft();
  131. intpaddingRight=getPaddingRight();
  132. Log.i("yanguoqi","paddingLeft="+paddingLeft+"paddingRight="+paddingRight);
  133. intwidth=right-left;
  134. intheight=bottom-top;
  135. Log.i("yanguoqi","width="+width+"height="+height);
  136. intallViewWidth=0;
  137. for(inti=0;i<n;i++){
  138. Viewv=getChildAt(i);
  139. Log.i("yanguoqi","v.getWidth()="+v.getWidth());
  140. allViewWidth+=v.getWidth();
  141. }
  142. intblankWidth=(width-allViewWidth-paddingLeft-paddingRight)/(n-1);
  143. Log.i("yanguoqi","blankV="+blankWidth);
  145. LayoutParamsparams1=(LayoutParams)viewList.get(1).getLayoutParams();
  146. params1.leftMargin=blankWidth;
  147. viewList.get(1).setLayoutParams(params1);
  149. LayoutParamsparams2=(LayoutParams)viewList.get(2).getLayoutParams();
  150. params2.leftMargin=blankWidth;
  151. viewList.get(2).setLayoutParams(params2);
  152. }
  156. }
  157. </SPAN>
在onFinishInflate()函数里实例化里面的子元素，在initBottomPanel()里设置每个孩子的图片和文字、监听.onLayout()里对中间的2个孩子的位置进行调整，使其均匀分布，见我的前文。这个BottomControlPanel实现了View.OnClickListener接口，在onClick()里通过id来判断用户点击了哪一个孩子。判断出来后需要做两件事，一是对这个被点击的对象进行处理，如字体颜色、图片资源的变化，右上角小红点的隐藏等等。另一方面，BottomControlPanel要告诉将来它的主人，也就是Activity到底是点了哪个，通知Activity去切换fragment。可以看到，activity类似个总控中心，BottomControlPanel管理属于它的ImageText，同时上报Activity。Activity知道消息后再切换fragment，每个fragment都有自己的事务逻辑。

这里定义了

public interface BottomPanelCallback{
public void onBottomPanelClick(int itemId);
}这个接口，通过传递Id来通知Activity。defaultBtnChecked()函数是apk初次打开后，默认切换到第一个消息fragment上。

这里有个地方需要注意，就是虽然ImageText和BottomControlPanel都是自定义控件，但两者在方式上是有区别的。在ImageText的构造函数里通过inflater将布局加载进来，它对应的布局是个普通的布局。而BottomControlPanel对应的布局文件里，直接使用了定义的BottomControlPanel，在onFinishInflate函数里实例化孩子View。前者是inflate之后实例化的。在使用ImageText到一个新的母布局时是通过<org.yanzi.ui.ImageText />这种方式进行的，那么使用BottomControlPanel有何区别，请见下文介绍Activity的布局时。

二、顶部控制栏

有了底部控制栏，顶部控制栏就可以如法炮制了。这里先交代几句，虽然Android3.0 后Google推出的有ActionBar来做顶部导航栏，参见郭神的这篇博文。但我发现，本文最前面贴图的几款应用应该都没有使用ActionBar，因为它不够灵活。ActionBar使用起来什么样，大家看看微信就知道了，那个的顶部控制栏就是ActionBar做的，这个应该没跑。

通过观察，顶部控制栏除了标题居中外，在右上角通常会再放一个按钮。不是ImageView就是TextView，这里我为了方便放的是两个TextView，右侧的按钮效果可以再TextView上弄个背景来实现。

HeadControlPanel.java

[html] view plain copy print ?
  1. <SPANstyle="FONT-FAMILY:ComicSansMS;FONT-SIZE:18px">packageorg.yanzi.ui;
  3. importorg.yanzi.constant.Constant;
  5. importcom.example.fragmentproject.R;
  7. importandroid.content.Context;
  8. importandroid.graphics.Color;
  9. importandroid.util.AttributeSet;
  10. importandroid.widget.RelativeLayout;
  11. importandroid.widget.TextView;
  13. publicclassHeadControlPanelextendsRelativeLayout{
  15. privateContextmContext;
  16. privateTextViewmMidleTitle;
  17. privateTextViewmRightTitle;
  18. privatestaticfinalfloatmiddle_title_size=20f;
  19. privatestaticfinalfloatright_title_size=17f;
  20. privatestaticfinalintdefault_background_color=Color.rgb(23,124,202);
  22. publicHeadControlPanel(Contextcontext,AttributeSetattrs){
  23. super(context,attrs);
  24. //TODOAuto-generatedconstructorstub
  25. }
  27. @Override
  28. protectedvoidonFinishInflate(){
  29. //TODOAuto-generatedmethodstub
  30. mMidleTitle=(TextView)findViewById(R.id.midle_title);
  31. mRightTitle=(TextView)findViewById(R.id.right_title);
  32. setBackgroundColor(default_background_color);
  33. }
  34. publicvoidinitHeadPanel(){
  36. if(mMidleTitle!=null){
  37. setMiddleTitle(Constant.FRAGMENT_FLAG_MESSAGE);
  38. }
  39. }
  40. publicvoidsetMiddleTitle(Strings){
  41. mMidleTitle.setText(s);
  42. mMidleTitle.setTextSize(middle_title_size);
  43. }
  46. }
  47. </SPAN>

布局文件head_panel_layout.xml

[html] view plain copy print ?
  1. <SPANstyle="FONT-FAMILY:ComicSansMS;FONT-SIZE:18px"><?xmlversion="1.0"encoding="utf-8"?>
  2. <org.yanzi.ui.HeadControlPanelxmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="50dp"
  5. android:layout_alignParentTop="true">
  6. <TextView
  7. android:id="@+id/midle_title"
  8. android:layout_width="wrap_content"
  9. android:layout_height="wrap_content"
  10. android:layout_centerInParent="true"
  11. android:textColor="@android:color/white"/>
  12. <TextView
  13. android:id="@+id/right_title"
  14. android:layout_width="wrap_content"
  15. android:layout_height="wrap_content"
  16. android:layout_alignParentRight="true"
  17. android:textColor="@android:color/white"/>
  19. </org.yanzi.ui.HeadControlPanel>
  20. </SPAN>

三、总控中心Activity和Fragment

先交代下Fragment的使用大致分两种，一种是将Fragment作为一个View写死在布局中，布局里使用android:name来告诉它对应的是哪个实体Fragment。这种添加fragment的方式不能delete和replace掉。另一种是通过获得activity的fragmentmanager和fragmentTransaction和进行动态的添加。这种方式更加灵活，一般使用此种方法。

先看Activity的布局activity_main.xml:

[html] view plain copy print ?
  1. <SPANstyle="FONT-FAMILY:ComicSansMS;FONT-SIZE:18px"><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:id="@+id/root_layout"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. tools:context="org.yanzi.fragmentproject.MainActivity">
  8. <include
  9. android:id="@+id/bottom_layout"
  10. layout="@layout/bottom_panel_layout"/>
  12. <View
  13. android:layout_width="match_parent"
  14. android:layout_height="1dip"
  15. android:layout_above="@id/bottom_layout"
  16. android:background="#FFE7E7E7"/>
  18. <include
  19. android:id="@+id/head_layout"
  20. layout="@layout/head_panel_layout"/>
  22. <View
  23. android:layout_width="match_parent"
  24. android:layout_height="1dip"
  25. android:layout_below="@id/head_layout"
  26. android:background="#FFE7E7E7"/>
  27. <FrameLayout
  28. android:id="@+id/fragment_content"
  29. android:layout_width="match_parent"
  30. android:layout_height="wrap_content"
  31. android:layout_below="@id/head_layout"
  32. android:layout_above="@id/bottom_layout">
  33. </FrameLayout>
  35. </RelativeLayout></SPAN>

注意看这里是通过include的方式把刚才自定义的上下panel加过来，而不能直接用<org.yanzi.ui.BottomControlPanel />这种方式直接加载。当然如果也模仿ImageText的构造方式，也是可以这样用的。关于include方式的使用有几个注意事项，就是最好让它的母布局是RelativeLayout，否则的话很难控制include进来的布局的位置。另外，include布局的位置一定要写在include之前，如底部面板在最底部，android:layout_alignParentBottom="true"这句话是在bottom_panel_layout.xml里写的，如果写在activity_main.xml里就是无效的，这着实是个蛋疼的问题。再就是include后设置的id会覆盖掉以前的，所以这里只在include的时候设置id。其中的两个View是分割线。整体是按照底部栏、上部栏、中间Fragment的容器来放置的。

在放Fragment的时候需要注意，究竟是否要将顶部控制栏放到各自的fragment里合适还是放到Activity里合适要看具体情况，如果顶部栏里多是显示标题这种功能或少量的点击事件，应该放到Activity里，即顶部栏的事务逻辑和当前fragment的事务逻辑耦合的不是很紧。举个例子，比如微信的顶部栏，不管你处在哪个Tab页(聊天、发现、通讯录)，点击顶部栏里的按钮都呈现出同样的内容。但反过来讲，如果顶部栏里的事务逻辑和fragment耦合很紧，即在不同的fragment，顶部栏呈现的内容都不一样，且点击后处理的事务也和当前fragment紧密联系一起，那就应该一个fragment配套一个顶部栏，方便控制。本文是将两者分开的。所以让fragment的容器在顶部栏之下，底部栏之上，不这样写的话，就会遮挡。

<FrameLayout
android:id="@+id/fragment_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/head_layout"
android:layout_above="@id/bottom_layout" >
</FrameLayout>


MainActivity.java代码：

[java] view plain copy print ?
  1. <SPANstyle="FONT-FAMILY:ComicSansMS;FONT-SIZE:18px">packageorg.yanzi.activity;
  3. importorg.yanzi.constant.Constant;
  4. importorg.yanzi.fragment.BaseFragment;
  5. importorg.yanzi.fragment.ContactsFragment;
  6. importorg.yanzi.fragment.MessageFragment;
  7. importorg.yanzi.fragment.NewsFragment;
  8. importorg.yanzi.fragment.SettingFragment;
  9. importorg.yanzi.ui.BottomControlPanel;
  10. importorg.yanzi.ui.BottomControlPanel.BottomPanelCallback;
  11. importorg.yanzi.ui.HeadControlPanel;
  13. importandroid.app.Activity;
  14. importandroid.app.Fragment;
  15. importandroid.app.FragmentManager;
  16. importandroid.app.FragmentTransaction;
  17. importandroid.os.Bundle;
  18. importandroid.text.TextUtils;
  19. importandroid.util.Log;
  20. importandroid.view.Menu;
  21. importandroid.widget.Toast;
  23. importcom.example.fragmentproject.R;
  25. publicclassMainActivityextendsActivityimplementsBottomPanelCallback{
  26. BottomControlPanelbottomPanel=null;
  27. HeadControlPanelheadPanel=null;
  29. privateFragmentManagerfragmentManager=null;
  30. privateFragmentTransactionfragmentTransaction=null;
  32. /*privateMessageFragmentmessageFragment;
  33. privateContactsFragmentcontactsFragment;
  34. privateNewsFragmentnewsFragment;
  35. privateSettingFragmentsettingFragment;*/
  37. publicstaticStringcurrFragTag="";
  38. @Override
  39. protectedvoidonCreate(BundlesavedInstanceState){
  40. super.onCreate(savedInstanceState);
  41. setContentView(R.layout.activity_main);
  42. initUI();
  43. fragmentManager=getFragmentManager();
  44. setDefaultFirstFragment(Constant.FRAGMENT_FLAG_MESSAGE);
  45. }
  47. @Override
  48. publicbooleanonCreateOptionsMenu(Menumenu){
  49. //Inflatethemenu;thisaddsitemstotheactionbarifitispresent.
  50. getMenuInflater().inflate(R.menu.main,menu);
  51. returntrue;
  52. }
  53. privatevoidinitUI(){
  54. bottomPanel=(BottomControlPanel)findViewById(R.id.bottom_layout);
  55. if(bottomPanel!=null){
  56. bottomPanel.initBottomPanel();
  57. bottomPanel.setBottomCallback(this);
  58. }
  59. headPanel=(HeadControlPanel)findViewById(R.id.head_layout);
  60. if(headPanel!=null){
  61. headPanel.initHeadPanel();
  62. }
  63. }
  65. /*处理BottomControlPanel的回调
  66. *@seeorg.yanzi.ui.BottomControlPanel.BottomPanelCallback#onBottomPanelClick(int)
  67. */
  68. @Override
  69. publicvoidonBottomPanelClick(intitemId){
  70. //TODOAuto-generatedmethodstub
  71. Stringtag="";
  72. if((itemId&Constant.BTN_FLAG_MESSAGE)!=0){
  73. tag=Constant.FRAGMENT_FLAG_MESSAGE;
  74. }elseif((itemId&Constant.BTN_FLAG_CONTACTS)!=0){
  75. tag=Constant.FRAGMENT_FLAG_CONTACTS;
  76. }elseif((itemId&Constant.BTN_FLAG_NEWS)!=0){
  77. tag=Constant.FRAGMENT_FLAG_NEWS;
  78. }elseif((itemId&Constant.BTN_FLAG_SETTING)!=0){
  79. tag=Constant.FRAGMENT_FLAG_SETTING;
  80. }
  81. setTabSelection(tag);//切换Fragment
  82. headPanel.setMiddleTitle(tag);//切换标题
  83. }
  85. privatevoidsetDefaultFirstFragment(Stringtag){
  86. Log.i("yan","setDefaultFirstFragmententer...currFragTag="+currFragTag);
  87. setTabSelection(tag);
  88. bottomPanel.defaultBtnChecked();
  89. Log.i("yan","setDefaultFirstFragmentexit...");
  90. }
  92. privatevoidcommitTransactions(Stringtag){
  93. if(fragmentTransaction!=null&&!fragmentTransaction.isEmpty()){
  94. fragmentTransaction.commit();
  95. currFragTag=tag;
  96. fragmentTransaction=null;
  97. }
  98. }
  100. privateFragmentTransactionensureTransaction(){
  101. if(fragmentTransaction==null){
  102. fragmentTransaction=fragmentManager.beginTransaction();
  103. fragmentTransaction
  104. .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);
  106. }
  107. returnfragmentTransaction;
  109. }
  111. privatevoidattachFragment(intlayout,Fragmentf,Stringtag){
  112. if(f!=null){
  113. if(f.isDetached()){
  114. ensureTransaction();
  115. fragmentTransaction.attach(f);
  117. }elseif(!f.isAdded()){
  118. ensureTransaction();
  119. fragmentTransaction.add(layout,f,tag);
  120. }
  121. }
  122. }
  124. privateFragmentgetFragment(Stringtag){
  126. Fragmentf=fragmentManager.findFragmentByTag(tag);
  128. if(f==null){
  129. Toast.makeText(getApplicationContext(),"fragment=nulltag="+tag,Toast.LENGTH_SHORT).show();
  130. f=BaseFragment.newInstance(getApplicationContext(),tag);
  131. }
  132. returnf;
  134. }
  135. privatevoiddetachFragment(Fragmentf){
  137. if(f!=null&&!f.isDetached()){
  138. ensureTransaction();
  139. fragmentTransaction.detach(f);
  140. }
  141. }
  142. /**切换fragment
  143. *@paramtag
  144. */
  145. privatevoidswitchFragment(Stringtag){
  146. if(TextUtils.equals(tag,currFragTag)){
  147. return;
  148. }
  149. //把上一个fragmentdetach掉
  150. if(currFragTag!=null&&!currFragTag.equals("")){
  151. detachFragment(getFragment(currFragTag));
  152. }
  153. attachFragment(R.id.fragment_content,getFragment(tag),tag);
  154. commitTransactions(tag);
  155. }
  157. /**设置选中的Tag
  158. *@paramtag
  159. */
  160. publicvoidsetTabSelection(Stringtag){
  161. //开启一个Fragment事务
  162. fragmentTransaction=fragmentManager.beginTransaction();
  163. /*if(TextUtils.equals(tag,Constant.FRAGMENT_FLAG_MESSAGE)){
  164. if(messageFragment==null){
  165. messageFragment=newMessageFragment();
  166. }
  168. }elseif(TextUtils.equals(tag,Constant.FRAGMENT_FLAG_CONTACTS)){
  169. if(contactsFragment==null){
  170. contactsFragment=newContactsFragment();
  171. }
  173. }elseif(TextUtils.equals(tag,Constant.FRAGMENT_FLAG_NEWS)){
  174. if(newsFragment==null){
  175. newsFragment=newNewsFragment();
  176. }
  178. }elseif(TextUtils.equals(tag,Constant.FRAGMENT_FLAG_SETTING)){
  179. if(settingFragment==null){
  180. settingFragment=newSettingFragment();
  181. }
  182. }elseif(TextUtils.equals(tag,Constant.FRAGMENT_FLAG_SIMPLE)){
  183. if(simpleFragment==null){
  184. simpleFragment=newSimpleFragment();
  185. }
  187. }*/
  188. switchFragment(tag);
  190. }
  192. @Override
  193. protectedvoidonStop(){
  194. //TODOAuto-generatedmethodstub
  195. super.onStop();
  196. currFragTag="";
  197. }
  199. @Override
  200. protectedvoidonSaveInstanceState(BundleoutState){
  201. //TODOAuto-generatedmethodstub
  202. }
  204. }
  205. </SPAN>

注意这块我作了改动，不需要申明

/* private MessageFragment messageFragment;
private ContactsFragment contactsFragment;
private NewsFragment newsFragment;
private SettingFragment settingFragment;*/
这些内容，因为Fragment的生成是通过BaseFragment.newInstance()来生成的，传进去Tag生成相应的Fragment。所有的Fragment，ContactsFragment、MessageFragment、NewsFragment、SettingFragment都继承自BaseFragment，通过BaseFragment里的newInstance()接口进行实例化对应的fragment。优点是方便管理，缺点么也有，因为java继承继承一个类，不能同时继承两个类。所以如ListFragment这些，就没法同时继承了。不过好在有listview这些，也妨碍不了我们做到同样的效果。

Activity里事件的入口是在onBottomPanelClick()监听点击了谁，然后：

setTabSelection(tag); //切换Fragment

headPanel.setMiddleTitle(tag);//切换标题

先切换Fragment再切换顶部栏的标题。setTabSelection()里直接调switchFragment(),在switchFragment函数里先判断标签是否一样，一样则意外着无需切换，否则的话就先把当前Fragment找到然后detach掉，之后进到attachFragment()函数里。在这里，先判断这个fragment是不是被detach掉的，如果是的话意味着之前曾被add过，所以只需attach就ok了。否则的话，意味着这是第一次，进行add.这里记录下Fragment的声明周期:

MessageFragment正常打开：
Line 155: 01-04 11:50:46.688 E/MessageFragment( 2546): onAttach-----
Line 159: 01-04 11:50:46.688 E/MessageFragment( 2546): onCreate------
Line 161: 01-04 11:50:46.693 D/MessageFragment( 2546): onCreateView---->
Line 165: 01-04 11:50:46.694 E/MessageFragment( 2546): onActivityCreated-------
Line 169: 01-04 11:50:46.694 E/MessageFragment( 2546): onStart----->
Line 173: 01-04 11:50:46.694 E/MessageFragment( 2546): onresume---->
返回键退出：
Line 183: 01-04 11:52:26.506 E/MessageFragment( 2546): onpause
Line 259: 01-04 11:52:27.131 E/MessageFragment( 2546): onStop
Line 263: 01-04 11:52:27.132 E/MessageFragment( 2546): ondestoryView
Line 269: 01-04 11:52:27.134 E/MessageFragment( 2546): ondestory
Line 271: 01-04 11:52:27.135 D/MessageFragment( 2546): onDetach------

按home按键退出:
Line 97: 01-05 05:06:15.659 E/MessageFragment(18835): onpause
Line 215: 01-05 05:06:16.292 E/MessageFragment(18835): onStop
再次打开：
Line 81: 01-05 05:07:02.408 E/MessageFragment(18835): onStart----->
Line 85: 01-05 05:07:02.408 E/MessageFragment(18835): onresume---->

通过detach的方式切换至其他Fragment：
Line 69: 01-04 11:53:33.381 E/MessageFragment( 2546): onpause
Line 73: 01-04 11:53:33.382 E/MessageFragment( 2546): onStop
Line 77: 01-04 11:53:33.382 E/MessageFragment( 2546): ondestoryView
再次切换过来:
Line 55: 01-04 11:54:59.462 D/MessageFragment( 2546): onCreateView---->
Line 59: 01-04 11:54:59.463 E/MessageFragment( 2546): onActivityCreated-------
Line 63: 01-04 11:54:59.463 E/MessageFragment( 2546): onStart----->
Line 67: 01-04 11:54:59.464 E/MessageFragment( 2546): onresume---->


四、适配器和MessageBean

本来要连数据库的，时间原因用个简单的MessageBean代替了。一个消息分联系人头像、名字、消息正文和时间四部分组成，封装到一个MessageBean里。

MessageBean.java

[java] view plain copy print ?
  1. <SPANstyle="FONT-FAMILY:ComicSansMS;FONT-SIZE:18px">packageorg.yanzi.bean;
  3. publicclassMessageBean{
  4. privateintPhotoDrawableId;
  5. privateStringMessageName;
  6. privateStringMessageContent;
  7. privateStringMessageTime;
  9. publicMessageBean(){
  11. }
  13. publicMessageBean(intphotoDrawableId,StringmessageName,
  14. StringmessageContent,StringmessageTime){
  15. super();
  16. PhotoDrawableId=photoDrawableId;
  17. MessageName=messageName;
  18. MessageContent=messageContent;
  19. MessageTime=messageTime;
  20. }
  22. publicintgetPhotoDrawableId(){
  23. returnPhotoDrawableId;
  24. }
  25. publicvoidsetPhotoDrawableId(intmPhotoDrawableId){
  26. this.PhotoDrawableId=mPhotoDrawableId;
  27. }
  28. publicStringgetMessageName(){
  29. returnMessageName;
  30. }
  31. publicvoidsetMessageName(StringmessageName){
  32. MessageName=messageName;
  33. }
  34. publicStringgetMessageContent(){
  35. returnMessageContent;
  36. }
  37. publicvoidsetMessageContent(StringmessageContent){
  38. MessageContent=messageContent;
  39. }
  40. publicStringgetMessageTime(){
  41. returnMessageTime;
  42. }
  43. publicvoidsetMessageTime(StringmessageTime){
  44. MessageTime=messageTime;
  45. }
  46. @Override
  47. publicStringtoString(){
  48. return"MessageBean[mPhotoDrawableId="+PhotoDrawableId
  49. +",MessageName="+MessageName+",MessageContent="
  50. +MessageContent+",MessageTime="+MessageTime+"]";
  51. }
  55. }
  56. </SPAN>
然后就是MessageFragment的ListView里的适配器，MessageAdapter.java

[java] view plain copy print ?
  1. <SPANstyle="FONT-FAMILY:ComicSansMS;FONT-SIZE:18px">packageorg.yanzi.fragment.adapter;
  3. importjava.util.List;
  5. importorg.yanzi.bean.MessageBean;
  7. importcom.example.fragmentproject.R;
  9. importandroid.content.Context;
  10. importandroid.view.LayoutInflater;
  11. importandroid.view.View;
  12. importandroid.view.ViewGroup;
  13. importandroid.widget.BaseAdapter;
  14. importandroid.widget.ImageView;
  15. importandroid.widget.TextView;
  17. publicclassMessageAdapterextendsBaseAdapter{
  18. privateList<MessageBean>mListMsgBean=null;
  19. privateContextmContext;
  20. privateLayoutInflatermInflater;
  21. publicMessageAdapter(List<MessageBean>listMsgBean,Contextcontext){
  22. mListMsgBean=listMsgBean;
  23. mContext=context;
  24. mInflater=LayoutInflater.from(mContext);
  25. }
  26. @Override
  27. publicintgetCount(){
  28. //TODOAuto-generatedmethodstub
  29. returnmListMsgBean.size();
  30. }
  32. @Override
  33. publicObjectgetItem(intposition){
  34. //TODOAuto-generatedmethodstub
  35. returnmListMsgBean.get(position);
  36. }
  38. @Override
  39. publiclonggetItemId(intposition){
  40. //TODOAuto-generatedmethodstub
  41. returnposition;
  42. }
  44. @Override
  45. publicViewgetView(intposition,ViewconvertView,ViewGroupparent){
  46. //TODOAuto-generatedmethodstub
  47. Viewv=mInflater.inflate(R.layout.message_item_layout,null);
  49. ImageViewimageView=(ImageView)v.findViewById(R.id.img_msg_item);
  50. imageView.setImageResource(mListMsgBean.get(position).getPhotoDrawableId());
  52. TextViewnameMsg=(TextView)v.findViewById(R.id.name_msg_item);
  53. nameMsg.setText(mListMsgBean.get(position).getMessageName());
  55. TextViewcontentMsg=(TextView)v.findViewById(R.id.content_msg_item);
  56. contentMsg.setText(mListMsgBean.get(position).getMessageContent());
  58. TextViewtimeMsg=(TextView)v.findViewById(R.id.time_msg_item);
  59. timeMsg.setText(mListMsgBean.get(position).getMessageTime());
  61. returnv;
  62. }
  64. }
  65. </SPAN>
因为是示例，getView里没用ViewHolder。
最后是MessageFragment里通过对listview设置适配器，将MessageBean作为信息的提供者也填充到适配器里。

MessageFragment.java代码：

[java] view plain copy print ?
  1. <SPANstyle="FONT-FAMILY:ComicSansMS;FONT-SIZE:18px">packageorg.yanzi.fragment;
  3. importjava.util.ArrayList;
  4. importjava.util.List;
  6. importorg.yanzi.activity.MainActivity;
  7. importorg.yanzi.bean.MessageBean;
  8. importorg.yanzi.constant.Constant;
  9. importorg.yanzi.fragment.adapter.MessageAdapter;
  11. importandroid.app.Activity;
  12. importandroid.os.Bundle;
  13. importandroid.util.Log;
  14. importandroid.view.LayoutInflater;
  15. importandroid.view.View;
  16. importandroid.view.ViewGroup;
  17. importandroid.widget.AdapterView;
  18. importandroid.widget.Toast;
  19. importandroid.widget.AdapterView.OnItemClickListener;
  20. importandroid.widget.ListView;
  22. importcom.example.fragmentproject.R;
  24. publicclassMessageFragmentextendsBaseFragment{
  26. privatestaticfinalStringTAG="MessageFragment";
  27. privateMainActivitymMainActivity;
  28. privateListViewmListView;
  29. privateMessageAdaptermMsgAdapter;
  30. privateList<MessageBean>mMsgBean=newArrayList<MessageBean>();
  31. publicViewonCreateView(LayoutInflaterinflater,ViewGroupcontainer,
  32. BundlesavedInstanceState){
  33. ViewmessageLayout=inflater.inflate(R.layout.message_layout,
  34. container,false);
  35. Log.d(TAG,"onCreateView---->");
  36. mMainActivity=(MainActivity)getActivity();
  37. mFragmentManager=getActivity().getFragmentManager();
  38. mListView=(ListView)messageLayout.findViewById(R.id.listview_message);
  39. mMsgAdapter=newMessageAdapter(mMsgBean,mMainActivity);
  40. mListView.setAdapter(mMsgAdapter);
  41. mListView.setOnItemClickListener(newOnItemClickListener(){
  43. @Override
  44. publicvoidonItemClick(AdapterView<?>parent,Viewview,
  45. intposition,longid){
  46. //TODOAuto-generatedmethodstub
  47. Toast.makeText(mMainActivity,mMsgBean.get(position).toString(),
  48. Toast.LENGTH_SHORT).show();
  49. }
  51. });
  52. returnmessageLayout;
  53. }
  56. @Override
  57. publicvoidonAttach(Activityactivity){
  58. //TODOAuto-generatedmethodstub
  59. super.onAttach(activity);
  60. Log.e(TAG,"onAttach-----");
  62. }
  63. @Override
  64. publicvoidonCreate(BundlesavedInstanceState){
  65. //TODOAuto-generatedmethodstub
  66. super.onCreate(savedInstanceState);
  67. Log.e(TAG,"onCreate------");
  68. mMsgBean.add(newMessageBean(R.drawable.ic_photo_1,"张三","吃饭没?","昨天"));
  69. mMsgBean.add(newMessageBean(R.drawable.ic_photo_2,"李四","哈哈","昨天"));
  70. mMsgBean.add(newMessageBean(R.drawable.ic_photo_3,"小明","吃饭没?","昨天"));
  71. mMsgBean.add(newMessageBean(R.drawable.ic_photo_4,"王五","吃饭没?","昨天"));
  72. mMsgBean.add(newMessageBean(R.drawable.ic_photo_5,"Jack","吃饭没?","昨天"));
  73. mMsgBean.add(newMessageBean(R.drawable.ic_photo_6,"Jone","吃饭没?","昨天"));
  74. mMsgBean.add(newMessageBean(R.drawable.ic_photo_7,"Jone","吃饭没?","昨天"));
  75. mMsgBean.add(newMessageBean(R.drawable.ic_photo_8,"Jone","吃饭没?","昨天"));
  76. mMsgBean.add(newMessageBean(R.drawable.ic_photo_9,"Jone","吃饭没?","昨天"));
  77. }
  79. @Override
  80. publicvoidonActivityCreated(BundlesavedInstanceState){
  81. //TODOAuto-generatedmethodstub
  82. super.onActivityCreated(savedInstanceState);
  83. Log.e(TAG,"onActivityCreated-------");
  84. }
  86. @Override
  87. publicvoidonStart(){
  88. //TODOAuto-generatedmethodstub
  89. super.onStart();
  91. Log.e(TAG,"onStart----->");
  92. }
  94. @Override
  95. publicvoidonResume(){
  96. //TODOAuto-generatedmethodstub
  97. super.onResume();
  98. Log.e(TAG,"onresume---->");
  99. MainActivity.currFragTag=Constant.FRAGMENT_FLAG_MESSAGE;
  100. }
  102. @Override
  103. publicvoidonPause(){
  104. //TODOAuto-generatedmethodstub
  105. super.onPause();
  106. Log.e(TAG,"onpause");
  107. }
  109. @Override
  110. publicvoidonStop(){
  111. //TODOAuto-generatedmethodstub
  112. super.onStop();
  113. Log.e(TAG,"onStop");
  114. }
  116. @Override
  117. publicvoidonDestroyView(){
  118. //TODOAuto-generatedmethodstub
  119. super.onDestroyView();
  120. Log.e(TAG,"ondestoryView");
  121. }
  122. @Override
  123. publicvoidonDestroy(){
  124. //TODOAuto-generatedmethodstub
  125. super.onDestroy();
  126. Log.e(TAG,"ondestory");
  127. }
  129. @Override
  130. publicvoidonDetach(){
  131. //TODOAuto-generatedmethodstub
  132. super.onDetach();
  133. Log.d(TAG,"onDetach------");
  135. }
  139. }
  140. </SPAN>
最后来看下效果吧，只有MessageFragment填充了数据：



横屏情况下:


--------------本文系原创，转载请注明作者yanzi1225627


版权声明：本文为博主原创文章，未经博主允许不得转载。

更多相关文章

  1. Android中的布局和控件
  2. 【Android(安卓)开发】：Android布局中的几种常用属性
  3. Android(安卓)唯一识别码
  4. Android桌面应用
  5. Android(安卓)Camera数据流分析全程记录（非overlay方式）
  6. [置顶] 对Android(安卓)MVVM的理解
  7. Android(安卓)2.3.3 NFC分析
  8. Android(安卓)Notification 用法的4种形式
  9. Android创建桌面快捷方式

随机推荐

  1. Android---网络交互之登录嘀咕网
  2. 我的实习面经（Android开发，已拿阿里，华为，CVT
  3. 可左右两侧挤压傍边布局的Android抽屉
  4. Android内存监控与分析（二）：最常遇见的内存
  5. Android中的布局方式（一）
  6. Android提高十六篇之使用NDK把彩图转换灰
  7. Android(安卓)多分辨率自适应总结
  8. Android系统的Root权限获取与检测
  9. Android实现登录功能，Android与服务器数据
  10. 一个小码农的5年历程