转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9023451


在今天的这篇文章当中,我依然会以实战加理论结合的方式教大家如何设计出自己觉得很炫的UI界面。好的,话不多说,进入正题。今天的这篇文章主要是以仿QQ空间的底部菜单栏效果为主,实现的效果有:

<1>实现了点击按钮时的切换图片效果;

<2>实现了点击按钮时的切换界面效果;

<3>实现了点击中间圆形按钮时弹出菜单以及按钮图片切换效果;

<4>实现了点击空白处和返回键按钮来关闭弹出菜单。


有个地方需要注意的是,弹出菜单栏后,点击里面的选项按钮会导致中间的圆形按钮切换为普通状态,这是因为在实际的项目中,点击菜单选项按钮之后会进入别的界面,所以也就不存在点击了之后圆形的按钮切换为普通的状态效果了,所以这里也不需要太在意。为了实现效果,这里只适配了480x800 hdpi的屏幕大小。



一、效果图

有图才有真相

【Android UI设计与开发】第09期:底部菜单栏(四)Fragment+PopupWindow仿QQ空间最新版底部菜单栏_第1张图片


【Android UI设计与开发】第09期:底部菜单栏(四)Fragment+PopupWindow仿QQ空间最新版底部菜单栏_第2张图片


【Android UI设计与开发】第09期:底部菜单栏(四)Fragment+PopupWindow仿QQ空间最新版底部菜单栏_第3张图片


二、项目结构图


【Android UI设计与开发】第09期:底部菜单栏(四)Fragment+PopupWindow仿QQ空间最新版底部菜单栏_第4张图片


三、代码详细编写


1、主布局界面,activity_main.xml:

[html] view plain copy
  1. <spanstyle="font-size:12px;"><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="fill_parent"
  4. android:layout_height="fill_parent">
  5. <FrameLayout
  6. android:id="@+id/frame_content"
  7. android:layout_width="wrap_content"
  8. android:layout_height="wrap_content"
  9. android:layout_above="@+id/frameLayout1"
  10. android:layout_alignParentLeft="true"
  11. android:layout_alignParentRight="true"
  12. android:layout_alignParentTop="true"
  13. android:background="#ffffff">
  14. </FrameLayout>
  15. <FrameLayout
  16. android:id="@+id/frameLayout1"
  17. android:layout_width="wrap_content"
  18. android:layout_height="wrap_content"
  19. android:layout_alignParentBottom="true"
  20. android:layout_alignParentLeft="true"
  21. android:background="@drawable/toolbar_bg_normal">
  22. <LinearLayout
  23. android:layout_width="fill_parent"
  24. android:layout_height="fill_parent"
  25. android:layout_marginTop="1dp"
  26. android:gravity="center_horizontal">
  27. <FrameLayout
  28. android:id="@+id/layout_friendfeed"
  29. android:layout_width="fill_parent"
  30. android:layout_height="48dp"
  31. android:layout_weight="1"
  32. android:background="@drawable/tab_btn_background">
  33. <ImageView
  34. android:id="@+id/image_friendfeed"
  35. android:layout_width="wrap_content"
  36. android:layout_height="wrap_content"
  37. android:layout_gravity="top|center"
  38. android:layout_marginTop="1.0dip"
  39. android:src="@drawable/tab_friendfeed_btn"/>
  40. <TextView
  41. android:layout_width="wrap_content"
  42. android:layout_height="wrap_content"
  43. android:layout_gravity="bottom|center"
  44. android:layout_marginBottom="6.0dip"
  45. android:text="动态"
  46. android:textColor="#ffffff"
  47. android:textSize="10sp"/>
  48. </FrameLayout>
  49. <FrameLayout
  50. android:id="@+id/layout_myfeed"
  51. android:layout_width="fill_parent"
  52. android:layout_height="48dp"
  53. android:layout_weight="1"
  54. android:background="@drawable/tab_btn_background">
  55. <ImageView
  56. android:id="@+id/image_myfeed"
  57. android:layout_width="wrap_content"
  58. android:layout_height="wrap_content"
  59. android:layout_gravity="top|center"
  60. android:layout_marginTop="1.0dip"
  61. android:src="@drawable/tab_myfeed_btn"/>
  62. <TextView
  63. android:layout_width="wrap_content"
  64. android:layout_height="wrap_content"
  65. android:layout_gravity="bottom|center"
  66. android:layout_marginBottom="6.0dip"
  67. android:text="与我想关"
  68. android:textColor="#ffffff"
  69. android:textSize="10sp"/>
  70. </FrameLayout>
  71. <FrameLayout
  72. android:layout_width="fill_parent"
  73. android:layout_height="wrap_content"
  74. android:layout_weight="1">
  75. </FrameLayout>
  76. <FrameLayout
  77. android:id="@+id/layout_home"
  78. android:layout_width="fill_parent"
  79. android:layout_height="48dp"
  80. android:layout_weight="1"
  81. android:background="@drawable/tab_btn_background">
  82. <ImageView
  83. android:id="@+id/image_home"
  84. android:layout_width="wrap_content"
  85. android:layout_height="wrap_content"
  86. android:layout_gravity="top|center"
  87. android:layout_marginTop="1.0dip"
  88. android:src="@drawable/tab_home_btn"/>
  89. <TextView
  90. android:layout_width="wrap_content"
  91. android:layout_height="wrap_content"
  92. android:layout_gravity="bottom|center"
  93. android:layout_marginBottom="6.0dip"
  94. android:text="我的空间"
  95. android:textColor="#ffffff"
  96. android:textSize="10sp"/>
  97. </FrameLayout>
  98. <FrameLayout
  99. android:id="@+id/layout_more"
  100. android:layout_width="fill_parent"
  101. android:layout_height="48dp"
  102. android:layout_weight="1"
  103. android:background="@drawable/tab_btn_background">
  104. <ImageView
  105. android:id="@+id/image_more"
  106. android:layout_width="wrap_content"
  107. android:layout_height="wrap_content"
  108. android:layout_gravity="top|center"
  109. android:layout_marginTop="1.0dip"
  110. android:src="@drawable/tab_more_btn"/>
  111. <TextView
  112. android:layout_width="wrap_content"
  113. android:layout_height="wrap_content"
  114. android:layout_gravity="bottom|center"
  115. android:layout_marginBottom="6.0dip"
  116. android:text="更多"
  117. android:textColor="#ffffff"
  118. android:textSize="10sp"/>
  119. </FrameLayout>
  120. </LinearLayout>
  121. </FrameLayout>
  122. <ImageView
  123. android:id="@+id/toggle_btn"
  124. android:layout_width="wrap_content"
  125. android:layout_height="wrap_content"
  126. android:layout_alignParentBottom="true"
  127. android:layout_centerHorizontal="true"
  128. android:src="@drawable/toolbar_btn_normal"/>
  129. <ImageView
  130. android:id="@+id/plus_btn"
  131. android:layout_width="wrap_content"
  132. android:layout_height="wrap_content"
  133. android:layout_alignTop="@+id/frameLayout1"
  134. android:layout_centerHorizontal="true"
  135. android:layout_marginTop="6dip"
  136. android:src="@drawable/toolbar_plus"/>
  137. </RelativeLayout></span>
我觉得这个布局界面是整个项目当中实现起来最复杂的地方,但是把思路理清楚了之后又觉得其实也没有那么复杂,详细说一下我实现的步骤:

<1> 最外层使用的是RelativeLayout,主要是为了容易摆放底部菜单栏的位置;

<2> 然后是一个FrameLayout,主要用来存放显示Fragment的内容,这里的ID取名为frame_content是用来替换Fragment对象的,在后面的代码中会用到;

<3> 最下面的底部菜单栏中外层使用了FrameLayout,之所以使用FrameLayout是为了让底部菜单栏中间的按钮也可以摆放进来,实现一种叠加的效果;

<4> 里面嵌套了LinearLayout,使用它是为了能够使用layout_weight属性,可以用来更好的摆放按钮,还可以实现自适应屏幕的效果(关于自适应屏幕的内容后面会有专题详细讲解)

<5> 最后里面又嵌套了一个FrameLayout,使用它可以很方便的实现图标在上文字在下的效果,最主要的原因是使用它可以很容易的再添加一个消息提醒的小图片(实际的开发中会用到,此项目中没有用到)


2、弹出菜单的布局界面,popwindow_layout.xml:

[html] view plain copy
  1. <spanstyle="font-size:12px;"><?xmlversion="1.0"encoding="utf-8"?>
  2. <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:tools="http://schemas.android.com/tools"
  4. android:layout_width="fill_parent"
  5. android:layout_height="fill_parent">
  6. <LinearLayout
  7. android:layout_width="fill_parent"
  8. android:layout_height="wrap_content"
  9. android:layout_alignParentBottom="true"
  10. android:background="@drawable/popwindow_bg"
  11. android:orientation="vertical"
  12. tools:ignore="UselessParent">
  13. <LinearLayout
  14. android:layout_width="wrap_content"
  15. android:layout_height="wrap_content"
  16. android:layout_gravity="center_horizontal"
  17. android:layout_marginTop="15dp"
  18. android:orientation="horizontal">
  19. <LinearLayout
  20. android:layout_width="wrap_content"
  21. android:layout_height="wrap_content"
  22. android:layout_margin="5dp"
  23. android:layout_weight="1"
  24. android:orientation="vertical">
  25. <ImageView
  26. android:layout_width="wrap_content"
  27. android:layout_height="wrap_content"
  28. android:layout_gravity="center_horizontal"
  29. android:layout_marginTop="1.0dip"
  30. android:src="@drawable/popwindow_write_btn"/>
  31. <TextView
  32. android:layout_width="wrap_content"
  33. android:layout_height="wrap_content"
  34. android:layout_gravity="center_horizontal"
  35. android:layout_marginTop="5.0dip"
  36. android:shadowColor="#ff000000"
  37. android:shadowDx="1.0"
  38. android:shadowDy="1.0"
  39. android:shadowRadius="1.0"
  40. android:text="说说"
  41. android:textColor="#ffffffff"
  42. android:textSize="13.0dip"/>
  43. </LinearLayout>
  44. <LinearLayout
  45. android:layout_width="wrap_content"
  46. android:layout_height="wrap_content"
  47. android:layout_margin="5dp"
  48. android:layout_weight="1"
  49. android:orientation="vertical">
  50. <ImageView
  51. android:layout_width="wrap_content"
  52. android:layout_height="wrap_content"
  53. android:layout_gravity="center_horizontal"
  54. android:layout_marginTop="1.0dip"
  55. android:src="@drawable/popwindow_voice_btn"/>
  56. <TextView
  57. android:layout_width="wrap_content"
  58. android:layout_height="wrap_content"
  59. android:layout_gravity="center_horizontal"
  60. android:layout_marginTop="5.0dip"
  61. android:shadowColor="#ff000000"
  62. android:shadowDx="1.0"
  63. android:shadowDy="1.0"
  64. android:shadowRadius="1.0"
  65. android:text="语音"
  66. android:textColor="#ffffffff"
  67. android:textSize="13.0dip"/>
  68. </LinearLayout>
  69. <LinearLayout
  70. android:layout_width="wrap_content"
  71. android:layout_height="wrap_content"
  72. android:layout_margin="5dp"
  73. android:layout_weight="1"
  74. android:orientation="vertical">
  75. <ImageView
  76. android:layout_width="wrap_content"
  77. android:layout_height="wrap_content"
  78. android:layout_gravity="center_horizontal"
  79. android:layout_marginTop="1.0dip"
  80. android:src="@drawable/popwindow_camera_btn"/>
  81. <TextView
  82. android:layout_width="wrap_content"
  83. android:layout_height="wrap_content"
  84. android:layout_gravity="center_horizontal"
  85. android:layout_marginTop="5.0dip"
  86. android:shadowColor="#ff000000"
  87. android:shadowDx="1.0"
  88. android:shadowDy="1.0"
  89. android:shadowRadius="1.0"
  90. android:text="照片"
  91. android:textColor="#ffffffff"
  92. android:textSize="13.0dip"/>
  93. </LinearLayout>
  94. <LinearLayout
  95. android:layout_width="wrap_content"
  96. android:layout_height="wrap_content"
  97. android:layout_margin="5dp"
  98. android:layout_weight="1"
  99. android:orientation="vertical">
  100. <ImageView
  101. android:layout_width="wrap_content"
  102. android:layout_height="wrap_content"
  103. android:layout_gravity="center_horizontal"
  104. android:layout_marginTop="1.0dip"
  105. android:src="@drawable/popwindow_picture_btn"/>
  106. <TextView
  107. android:layout_width="wrap_content"
  108. android:layout_height="wrap_content"
  109. android:layout_gravity="center_horizontal"
  110. android:layout_marginTop="5.0dip"
  111. android:shadowColor="#ff000000"
  112. android:shadowDx="1.0"
  113. android:shadowDy="1.0"
  114. android:shadowRadius="1.0"
  115. android:text="视频"
  116. android:textColor="#ffffffff"
  117. android:textSize="13.0dip"/>
  118. </LinearLayout>
  119. <LinearLayout
  120. android:layout_width="wrap_content"
  121. android:layout_height="wrap_content"
  122. android:layout_margin="5dp"
  123. android:layout_weight="1"
  124. android:orientation="vertical">
  125. <ImageView
  126. android:layout_width="wrap_content"
  127. android:layout_height="wrap_content"
  128. android:layout_gravity="center_horizontal"
  129. android:layout_marginTop="1.0dip"
  130. android:src="@drawable/popwindow_sign_btn"/>
  131. <TextView
  132. android:layout_width="wrap_content"
  133. android:layout_height="wrap_content"
  134. android:layout_gravity="center_horizontal"
  135. android:layout_marginTop="5.0dip"
  136. android:shadowColor="#ff000000"
  137. android:shadowDx="1.0"
  138. android:shadowDy="1.0"
  139. android:shadowRadius="1.0"
  140. android:text="签到"
  141. android:textColor="#ffffffff"
  142. android:textSize="13.0dip"/>
  143. </LinearLayout>
  144. </LinearLayout>
  145. </LinearLayout>
  146. </RelativeLayout></span>
3、其中一个Fragment布局页面,fragment_1.xml:

[html] view plain copy
  1. <spanstyle="font-size:12px;"><?xmlversion="1.0"encoding="utf-8"?>
  2. <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="fill_parent"
  4. android:layout_height="fill_parent">
  5. <ImageView
  6. android:id="@+id/imageview"
  7. android:layout_width="fill_parent"
  8. android:layout_height="fill_parent"
  9. android:scaleType="fitCenter"
  10. android:src="@drawable/xianjian01">
  11. </ImageView>
  12. </LinearLayout></span>
4、自定义按钮的资源文件,由于比较简单,就列出其中一个,tab_friendfeed_btn.xml: [html] view plain copy
  1. <spanstyle="font-size:12px;"><?xmlversion="1.0"encoding="utf-8"?>
  2. <selectorxmlns:android="http://schemas.android.com/apk/res/android">
  3. <itemandroid:drawable="@drawable/toolbar_friendfeed_pressed"android:state_selected="true"/>
  4. <itemandroid:drawable="@drawable/toolbar_friendfeed_normal"/>
  5. </selector></span>
5、主Activity界面,MainActivity.java: [java] view plain copy
  1. <spanstyle="font-size:12px;">packagecom.yangyu.mycustomtab03;
  2. importandroid.content.Context;
  3. importandroid.graphics.drawable.BitmapDrawable;
  4. importandroid.os.Bundle;
  5. importandroid.support.v4.app.FragmentActivity;
  6. importandroid.support.v4.app.FragmentTransaction;
  7. importandroid.view.Gravity;
  8. importandroid.view.LayoutInflater;
  9. importandroid.view.MotionEvent;
  10. importandroid.view.View;
  11. importandroid.view.View.OnClickListener;
  12. importandroid.view.View.OnTouchListener;
  13. importandroid.widget.FrameLayout;
  14. importandroid.widget.ImageView;
  15. importandroid.widget.LinearLayout;
  16. importandroid.widget.PopupWindow;
  17. importandroid.widget.PopupWindow.OnDismissListener;
  18. publicclassMainActivityextendsFragmentActivityimplementsOnClickListener{
  19. //定义Fragment页面
  20. privateFragmentPage1fragmentPage1;
  21. privateFragmentPage2fragmentPage2;
  22. privateFragmentPage3fragmentPage3;
  23. privateFragmentPage4fragmentPage4;
  24. //定义布局对象
  25. privateFrameLayoutfriendfeedFl,myfeedFl,homeFl,moreFl;
  26. //定义图片组件对象
  27. privateImageViewfriendfeedIv,myfeedIv,homeIv,moreIv;
  28. //定义按钮图片组件
  29. privateImageViewtoggleImageView,plusImageView;
  30. //定义PopupWindow
  31. privatePopupWindowpopWindow;
  32. @Override
  33. protectedvoidonCreate(BundlesavedInstanceState){
  34. super.onCreate(savedInstanceState);
  35. setContentView(R.layout.activity_main);
  36. initView();
  37. initData();
  38. //初始化默认为选中点击了“动态”按钮
  39. clickFriendfeedBtn();
  40. }
  41. /**
  42. *初始化组件
  43. */
  44. privatevoidinitView(){
  45. //实例化布局对象
  46. friendfeedFl=(FrameLayout)findViewById(R.id.layout_friendfeed);
  47. myfeedFl=(FrameLayout)findViewById(R.id.layout_myfeed);
  48. homeFl=(FrameLayout)findViewById(R.id.layout_home);
  49. moreFl=(FrameLayout)findViewById(R.id.layout_more);
  50. //实例化图片组件对象
  51. friendfeedIv=(ImageView)findViewById(R.id.image_friendfeed);
  52. myfeedIv=(ImageView)findViewById(R.id.image_myfeed);
  53. homeIv=(ImageView)findViewById(R.id.image_home);
  54. moreIv=(ImageView)findViewById(R.id.image_more);
  55. //实例化按钮图片组件
  56. toggleImageView=(ImageView)findViewById(R.id.toggle_btn);
  57. plusImageView=(ImageView)findViewById(R.id.plus_btn);
  58. }
  59. /**
  60. *初始化数据
  61. */
  62. privatevoidinitData(){
  63. //给布局对象设置监听
  64. friendfeedFl.setOnClickListener(this);
  65. myfeedFl.setOnClickListener(this);
  66. homeFl.setOnClickListener(this);
  67. moreFl.setOnClickListener(this);
  68. //给按钮图片设置监听
  69. toggleImageView.setOnClickListener(this);
  70. }
  71. @Override
  72. publicvoidonClick(Viewv){
  73. switch(v.getId()){
  74. //点击动态按钮
  75. caseR.id.layout_friendfeed:
  76. clickFriendfeedBtn();
  77. break;
  78. //点击与我相关按钮
  79. caseR.id.layout_myfeed:
  80. clickMyfeedBtn();
  81. break;
  82. //点击我的空间按钮
  83. caseR.id.layout_home:
  84. clickHomeBtn();
  85. break;
  86. //点击更多按钮
  87. caseR.id.layout_more:
  88. clickMoreBtn();
  89. break;
  90. //点击中间按钮
  91. caseR.id.toggle_btn:
  92. clickToggleBtn();
  93. break;
  94. }
  95. }
  96. /**
  97. *显示PopupWindow弹出菜单
  98. */
  99. privatevoidshowPopupWindow(Viewparent){
  100. if(popWindow==null){
  101. LayoutInflaterlayoutInflater=(LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  102. Viewview=layoutInflater.inflate(R.layout.popwindow_layout,null);
  103. //创建一个PopuWidow对象
  104. popWindow=newPopupWindow(view,LinearLayout.LayoutParams.FILL_PARENT,200);
  105. }
  106. //使其聚集,要想监听菜单里控件的事件就必须要调用此方法
  107. popWindow.setFocusable(true);
  108. //设置允许在外点击消失
  109. popWindow.setOutsideTouchable(true);
  110. //设置背景,这个是为了点击“返回Back”也能使其消失,并且并不会影响你的背景
  111. popWindow.setBackgroundDrawable(newBitmapDrawable());
  112. //设置菜单显示的位置
  113. popWindow.showAsDropDown(parent,Gravity.CENTER,0);
  114. //监听菜单的关闭事件
  115. popWindow.setOnDismissListener(newOnDismissListener(){
  116. @Override
  117. publicvoidonDismiss(){
  118. //改变显示的按钮图片为正常状态
  119. changeButtonImage();
  120. }
  121. });
  122. //监听触屏事件
  123. popWindow.setTouchInterceptor(newOnTouchListener(){
  124. publicbooleanonTouch(Viewview,MotionEventevent){
  125. //改变显示的按钮图片为正常状态
  126. changeButtonImage();
  127. returnfalse;
  128. }
  129. });
  130. }
  131. /**
  132. *点击了“动态”按钮
  133. */
  134. privatevoidclickFriendfeedBtn(){
  135. //实例化Fragment页面
  136. fragmentPage1=newFragmentPage1();
  137. //得到Fragment事务管理器
  138. FragmentTransactionfragmentTransaction=this.getSupportFragmentManager().beginTransaction();
  139. //替换当前的页面
  140. fragmentTransaction.replace(R.id.frame_content,fragmentPage1);
  141. //事务管理提交
  142. fragmentTransaction.commit();
  143. friendfeedFl.setSelected(true);
  144. friendfeedIv.setSelected(true);
  145. myfeedFl.setSelected(false);
  146. myfeedIv.setSelected(false);
  147. homeFl.setSelected(false);
  148. homeIv.setSelected(false);
  149. moreFl.setSelected(false);
  150. moreIv.setSelected(false);
  151. }
  152. /**
  153. *点击了“与我相关”按钮
  154. */
  155. privatevoidclickMyfeedBtn(){
  156. //实例化Fragment页面
  157. fragmentPage2=newFragmentPage2();
  158. //得到Fragment事务管理器
  159. FragmentTransactionfragmentTransaction=this.getSupportFragmentManager().beginTransaction();
  160. //替换当前的页面
  161. fragmentTransaction.replace(R.id.frame_content,fragmentPage2);
  162. //事务管理提交
  163. fragmentTransaction.commit();
  164. friendfeedFl.setSelected(false);
  165. friendfeedIv.setSelected(false);
  166. myfeedFl.setSelected(true);
  167. myfeedIv.setSelected(true);
  168. homeFl.setSelected(false);
  169. homeIv.setSelected(false);
  170. moreFl.setSelected(false);
  171. moreIv.setSelected(false);
  172. }
  173. /**
  174. *点击了“我的空间”按钮
  175. */
  176. privatevoidclickHomeBtn(){
  177. //实例化Fragment页面
  178. fragmentPage3=newFragmentPage3();
  179. //得到Fragment事务管理器
  180. FragmentTransactionfragmentTransaction=this.getSupportFragmentManager().beginTransaction();
  181. //替换当前的页面
  182. fragmentTransaction.replace(R.id.frame_content,fragmentPage3);
  183. //事务管理提交
  184. fragmentTransaction.commit();
  185. friendfeedFl.setSelected(false);
  186. friendfeedIv.setSelected(false);
  187. myfeedFl.setSelected(false);
  188. myfeedIv.setSelected(false);
  189. homeFl.setSelected(true);
  190. homeIv.setSelected(true);
  191. moreFl.setSelected(false);
  192. moreIv.setSelected(false);
  193. }
  194. /**
  195. *点击了“更多”按钮
  196. */
  197. privatevoidclickMoreBtn(){
  198. //实例化Fragment页面
  199. fragmentPage4=newFragmentPage4();
  200. //得到Fragment事务管理器
  201. FragmentTransactionfragmentTransaction=this.getSupportFragmentManager().beginTransaction();
  202. //替换当前的页面
  203. fragmentTransaction.replace(R.id.frame_content,fragmentPage4);
  204. //事务管理提交
  205. fragmentTransaction.commit();
  206. friendfeedFl.setSelected(false);
  207. friendfeedIv.setSelected(false);
  208. myfeedFl.setSelected(false);
  209. myfeedIv.setSelected(false);
  210. homeFl.setSelected(false);
  211. homeIv.setSelected(false);
  212. moreFl.setSelected(true);
  213. moreIv.setSelected(true);
  214. }
  215. /**
  216. *点击了中间按钮
  217. */
  218. privatevoidclickToggleBtn(){
  219. showPopupWindow(toggleImageView);
  220. //改变按钮显示的图片为按下时的状态
  221. plusImageView.setImageResource(R.drawable.toolbar_plusback);
  222. toggleImageView.setImageResource(R.drawable.toolbar_btn_pressed);
  223. }
  224. /**
  225. *改变显示的按钮图片为正常状态
  226. */
  227. privatevoidchangeButtonImage(){
  228. plusImageView.setImageResource(R.drawable.toolbar_plus);
  229. toggleImageView.setImageResource(R.drawable.toolbar_btn_normal);
  230. }
  231. }</span><spanstyle="font-size:18px;">
  232. </span>
6、Fragment其中一个页面,FragmentPage1.java:

[java] view plain copy
  1. packagecom.yangyu.mycustomtab03;
  2. importandroid.os.Bundle;
  3. importandroid.support.v4.app.Fragment;
  4. importandroid.view.LayoutInflater;
  5. importandroid.view.View;
  6. importandroid.view.ViewGroup;
  7. publicclassFragmentPage1extendsFragment{
  8. @Override
  9. publicViewonCreateView(LayoutInflaterinflater,ViewGroupcontainer,
  10. BundlesavedInstanceState){
  11. returninflater.inflate(R.layout.fragment_1,null);
  12. }
  13. }

到这里整个项目就基本上讲完了,大家还可以为此项目继续完善下去,实现点击菜单选项后实现的效果以及顶部标题栏的实现。对于这个项目,博主还有一个地方不明白,就是针对此项目,在弹出菜单后,有什么好的简单一点的方法将背景置为灰色?我也试了一些方法,但是效果都不是特别的理想,希望读者有什么想法可以给博主留言,大家可以互相交流学习一下。


源码下载地址

更多相关文章

  1. Android客户端如何从Web服务端加载图片
  2. Android实现多渠道打包,动态替换包名、Icon、图片等资源,解决因app
  3. android 图片处理 (滤镜,图片位置)
  4. 关于android图片的传输,android图片传输方式,xml传输图片,android
  5. Android UI组件进阶(1)——带进度条的按钮
  6. 【Android 内存优化】Bitmap 内存占用计算 ( Bitmap 图片内存占
  7. 转载——Android大图片裁剪终极解决方案
  8. Android ListView 图片异步加载和图片内存缓存

随机推荐

  1. Android简明开发教程十九:线程 Bezier曲线
  2. android HDMI (一):HDMI基础篇
  3. Android Uri获取资源文件(多种方式)
  4. 【Android】SerialPortFinder学习笔记,显
  5. 一个支持上下滚动动画的Android TextView
  6. Android应用程序打包签名、加固、二次打
  7. Android 复盘——帮你彻底了解消息机制
  8. Android UI基础——ViewPager+Fragment
  9. Android(安卓)异常 android.os.NetworkOn
  10. [置顶] 进击的Android注入术《五》