首先简单的介绍下fragment,fragment是android3.0新增的概念,其中文意思是碎片,它与activity非常相似,用来在一个activity中描述一些行为或一部分用户界面。使用锁个fragment可以再一个单独的activity中建立多个UI面板,也可以在多个activity中重用fragment,一个fragment必须被嵌入到一个activity中,它的生命周期直接受其所宿主的activity的生命周期的影响。
    首先创建一个fragment,要创建一个fragment,必须创建一个fragment的子类,或者继承自另外一个已经存在的Fragment的子类,并重写相应的方法。

    编写Fragment的xml文件和类文件,这里我写了四个,贴出来其中两个代码,其他的copy就行。

fragment_main.xml

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. tools:context=".MainActivity" >
  6.  
  7. <TextView
  8. android:layout_height="wrap_content"
  9. android:layout_width="wrap_content"
  10. android:gravity="center"
  11. android:text="主页面"
  12. />
  13.  
  14. </RelativeLayout>

MainFragment.java

  1. public class MainFragment extends Fragment{
  2.  
  3. @Override
  4. public View onCreateView(LayoutInflater inflater, ViewGroup container,
  5. Bundle savedInstanceState) {
  6. View view = inflater.inflate(R.layout.fragment_main, container,false);
  7. return view;
  8. }
  9.  
  10. @Override
  11. public void onActivityCreated(Bundle savedInstanceState) {
  12. super.onActivityCreated(savedInstanceState);
  13. }
  14.  
  15. }

fragment_grxx.xml

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. tools:context=".MainActivity" >
  6.  
  7. <com.qyh.view.TitleView
  8. android:id="@+id/title"
  9. android:layout_width="match_parent"
  10. android:layout_height="wrap_content" />
  11.  
  12. <TextView
  13. android:layout_height="wrap_content"
  14. android:layout_width="wrap_content"
  15. android:gravity="center"
  16. android:text="个人信息"
  17. />
  18.  
  19. </RelativeLayout>

GrxxFragment.java

  1. public class GrxxFragment extends Fragment{
  2. private TitleView titleView;
  3. private FragmentActivity mActivity;
  4. private View mParent;
  5.  
  6. @Override
  7. public View onCreateView(LayoutInflater inflater, ViewGroup container,
  8. Bundle savedInstanceState) {
  9. View view = inflater.inflate(R.layout.fragment_grxx, container,false);
  10. return view;
  11. }
  12.  
  13. @Override
  14. public void onActivityCreated(Bundle savedInstanceState) {
  15. super.onActivityCreated(savedInstanceState);
  16. mActivity = getActivity();
  17. mParent = getView();
  18. titleView = (TitleView) mActivity.findViewById(R.id.title);
  19. titleView.setTitle("个人信息");
  20. titleView.setBackButton(new TitleView.OnBackButtonClickListener() {
  21. @Override
  22. public void onClick(View button) {
  23. getFragmentManager().beginTransaction()
  24. .hide(com.qyh.main.MainActivity.mFragments[1])
  25. .show(com.qyh.main.MainActivity.mFragments[0]).commit();
  26. FragmentIndicator.setIndicator(0);
  27. }
  28. });
  29. }
  30.  
  31. }

自定义底部工具栏

FragmentIndicator.java

  1. public class FragmentIndicator extends LinearLayout implements OnClickListener {
  2.  
  3. private static String TAG = "FragmentIndicator";
  4. private int mDefaultIndicator = 0;// 默认位置
  5. private static int mCurIndicator;// 当前位置
  6. private static View[] mIndicators;
  7. private OnIndicateListener mOnIndicateListener;
  8.  
  9. private static final String TAG_ICON_0 = "icon_tag_0";
  10. private static final String TAG_ICON_1 = "icon_tag_1";
  11. private static final String TAG_ICON_2 = "icon_tag_2";
  12. private static final String TAG_ICON_3 = "icon_tag_3";
  13.  
  14. private FragmentIndicator(Context context) {
  15. super(context);
  16. }
  17.  
  18. public FragmentIndicator(Context context, AttributeSet attrs) {
  19. super(context, attrs);
  20. mCurIndicator = mDefaultIndicator;
  21. setOrientation(LinearLayout.HORIZONTAL);
  22. initView();
  23. }
  24.  
  25. private View createIndicator(int iconResID, int stringResID,
  26. int stringColor, String iconTag, String textTag) {
  27. LinearLayout view = new LinearLayout(getContext());
  28.  
  29. view.setOrientation(LinearLayout.HORIZONTAL);
  30. view.setLayoutParams(new LinearLayout.LayoutParams(
  31. LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT,1));
  32. view.setGravity(Gravity.CENTER);
  33.  
  34. ImageView iconView = new ImageView(getContext());
  35. iconView.setTag(iconTag);
  36. iconView.setLayoutParams(new LinearLayout.LayoutParams(
  37. LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT, 1));
  38. iconView.setImageResource(iconResID);
  39. view.addView(iconView);
  40. return view;
  41. }
  42.  
  43. private void initView() {
  44. mIndicators = new View[4];
  45. mIndicators[0] = createIndicator(R.drawable.main_home, 0, 0, TAG_ICON_0,
  46. null);
  47. mIndicators[0].setBackgroundResource(R.drawable.indic_select);
  48. mIndicators[0].setTag(Integer.valueOf(0));
  49. mIndicators[0].setOnClickListener(this);
  50. addView(mIndicators[0]);
  51.  
  52. mIndicators[1] = createIndicator(R.drawable.main_user, 0, 0, TAG_ICON_1,
  53. null);
  54. mIndicators[1].setBackgroundResource(Color.alpha(0));
  55. mIndicators[1].setTag(Integer.valueOf(1));
  56. mIndicators[1].setOnClickListener(this);
  57. addView(mIndicators[1]);
  58.  
  59. mIndicators[2] = createIndicator(R.drawable.main_set, 0, 0, TAG_ICON_2,
  60. null);
  61. mIndicators[2].setBackgroundResource(Color.alpha(0));
  62. mIndicators[2].setTag(Integer.valueOf(2));
  63. mIndicators[2].setOnClickListener(this);
  64. addView(mIndicators[2]);
  65.  
  66. mIndicators[3] = createIndicator(R.drawable.main_more, 0, 0,
  67. TAG_ICON_3, null);
  68. mIndicators[3].setBackgroundResource(Color.alpha(0));
  69. mIndicators[3].setTag(Integer.valueOf(3));
  70. mIndicators[3].setOnClickListener(this);
  71.  
  72. addView(mIndicators[3]);
  73. }
  74.  
  75. public static void setIndicator(int which) {
  76. // 以前状态
  77. mIndicators[mCurIndicator].setBackgroundColor(Color.alpha(0));
  78. ImageView prevIcon;
  79. switch (mCurIndicator) {
  80. case 0:
  81. prevIcon = (ImageView) mIndicators[mCurIndicator]
  82. .findViewWithTag(TAG_ICON_0);
  83. prevIcon.setImageResource(R.drawable.main_home);
  84. break;
  85. case 1:
  86. prevIcon = (ImageView) mIndicators[mCurIndicator]
  87. .findViewWithTag(TAG_ICON_1);
  88. prevIcon.setImageResource(R.drawable.main_user);
  89. break;
  90. case 2:
  91. prevIcon = (ImageView) mIndicators[mCurIndicator]
  92. .findViewWithTag(TAG_ICON_2);
  93. prevIcon.setImageResource(R.drawable.main_set);
  94. break;
  95. case 3:
  96. prevIcon = (ImageView) mIndicators[mCurIndicator]
  97. .findViewWithTag(TAG_ICON_3);
  98. prevIcon.setImageResource(R.drawable.main_more);
  99. break;
  100. default:
  101. break;
  102. }
  103. Log.i(TAG, "setIndicator:mCurIndicator=" + mCurIndicator);
  104. // 更新当前状态
  105. mIndicators[which].setBackgroundResource(R.drawable.indic_select);
  106. ImageView currIcon;
  107. switch (which) {
  108. case 0:
  109. currIcon = (ImageView) mIndicators[which]
  110. .findViewWithTag(TAG_ICON_0);
  111. currIcon.setImageResource(R.drawable.main_home_hover);// 选中后的图片
  112. break;
  113. case 1:
  114. currIcon = (ImageView) mIndicators[which]
  115. .findViewWithTag(TAG_ICON_1);
  116. currIcon.setImageResource(R.drawable.main_user_hover);
  117. break;
  118. case 2:
  119. currIcon = (ImageView) mIndicators[which]
  120. .findViewWithTag(TAG_ICON_2);
  121. currIcon.setImageResource(R.drawable.main_set_hover);
  122. break;
  123. case 3:
  124. currIcon = (ImageView) mIndicators[which]
  125. .findViewWithTag(TAG_ICON_3);
  126. currIcon.setImageResource(R.drawable.main_more_hover);
  127. break;
  128. default:
  129. break;
  130. }
  131. mCurIndicator = which;
  132. }
  133.  
  134. public interface OnIndicateListener {
  135. public void onIndicate(View v, int which);
  136. }
  137.  
  138. public void setOnIndicateListener(OnIndicateListener listener) {
  139. mOnIndicateListener = listener;
  140. }
  141.  
  142. @Override
  143. public void onClick(View v) {
  144. if (mOnIndicateListener != null) {
  145. int tag = (Integer) v.getTag();
  146. switch (tag) {
  147. case 0:
  148. if (mCurIndicator != 0) {
  149. mOnIndicateListener.onIndicate(v, 0);
  150. setIndicator(0);
  151. }
  152. break;
  153. case 1:
  154. if (mCurIndicator != 1) {
  155. mOnIndicateListener.onIndicate(v, 1);
  156. setIndicator(1);
  157. }
  158. break;
  159. case 2:
  160. if (mCurIndicator != 2) {
  161. mOnIndicateListener.onIndicate(v, 2);
  162. setIndicator(2);
  163. }
  164. break;
  165. case 3:
  166. if (mCurIndicator != 3) {
  167. mOnIndicateListener.onIndicate(v, 3);
  168. setIndicator(3);
  169. }
  170. break;
  171. default:
  172. break;
  173. }
  174.  
  175. }
  176.  
  177. }
  178.  
  179. }

自定义顶部工具栏

title_view.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="fill_parent"
  4. android:layout_height="48dip"
  5. android:background="#18222E" >
  6.  
  7. <ImageButton
  8. android:id="@+id/ib_back"
  9. android:layout_width="48dp"
  10. android:layout_height="match_parent"
  11. android:src="@drawable/ic_titleback"
  12. />
  13.  
  14. <TextView
  15. android:id="@+id/tv_title"
  16. android:layout_width="match_parent"
  17. android:layout_height="match_parent"
  18. android:layout_gravity="center"
  19. android:text="个人信息"/>
  20.  
  21. <ImageButton
  22. android:id="@+id/ib_handle"
  23. android:layout_width="wrap_content"
  24. android:layout_height="match_parent"
  25. android:layout_gravity="right"
  26. android:layout_marginRight="12dp"
  27. android:visibility="gone"/>
  28.  
  29. </FrameLayout>

TitleView.java

  1. /**
  2. * 功能描述:自定义顶部工具栏
  3. */
  4. public class TitleView extends FrameLayout implements View.OnClickListener {
  5. public OnBackButtonClickListener mOnBackButtonClickListener;
  6. public OnHandleButtonClickListener mHandleButtonClickListener;
  7. private TextView mTitle;
  8. private ImageButton mBackButton;
  9. private ImageButton ib_handle;
  10.  
  11. public TitleView(Context context) {
  12. this(context, null);
  13. }
  14.  
  15. public TitleView(Context context, AttributeSet attrs) {
  16. this(context, attrs, 0);
  17. }
  18.  
  19. public TitleView(Context context, AttributeSet attrs, int defStyle) {
  20. super(context, attrs, defStyle);
  21.  
  22. LayoutInflater inflater = (LayoutInflater) context
  23. .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  24. inflater.inflate(R.layout.title_view, this, true);
  25. mBackButton = (ImageButton) findViewById(R.id.ib_back);
  26. mBackButton.setOnClickListener(this);
  27. mTitle = (TextView) findViewById(R.id.tv_title);
  28. mTitle.setVisibility(View.INVISIBLE);
  29. ib_handle = (ImageButton) findViewById(R.id.ib_handle);
  30. ib_handle.setOnClickListener(this);
  31. }
  32.  
  33. public interface OnBackButtonClickListener {
  34. public void onClick(View button);
  35. }
  36.  
  37. public interface OnHandleButtonClickListener {
  38. public void onClick(View button);
  39. }
  40.  
  41. /**
  42. * 标题返回按钮
  43. *
  44. * @param listener
  45. */
  46. public void setBackButton(OnBackButtonClickListener listener) {
  47. mOnBackButtonClickListener = listener;
  48. }
  49.  
  50. public void showBackBtn(){
  51. mBackButton.setVisibility(View.VISIBLE);
  52. }
  53.  
  54. public void hiddenBackBtn(){
  55. mBackButton.setVisibility(View.GONE);
  56. }
  57.  
  58. /**
  59. * 标题操作按钮
  60. *
  61. * @param listener
  62. */
  63. public void setHandleButton(OnHandleButtonClickListener listener) {
  64. mHandleButtonClickListener = listener;
  65. }
  66.  
  67. public void hiddenHandleBtn(){
  68. ib_handle.setVisibility(View.GONE);
  69. }
  70.  
  71. public void showHandleBtn(int iamgeBtnID){
  72. ib_handle.setImageResource(iamgeBtnID);
  73. ib_handle.setVisibility(View.VISIBLE);
  74. }
  75. //设置标题
  76. public void setTitle(String text) {
  77. mTitle.setVisibility(View.VISIBLE);
  78. mTitle.setText(text);
  79. }
  80.  
  81. public void setTitle(int stringID) {
  82. mTitle.setVisibility(View.VISIBLE);
  83. mTitle.setText(stringID);
  84. }
  85.  
  86. @Override
  87. public void onClick(View v) {
  88. switch (v.getId()) {
  89. case R.id.ib_back:
  90. if (mOnBackButtonClickListener != null) {
  91. mOnBackButtonClickListener.onClick(v);
  92. }
  93. break;
  94. case R.id.ib_handle:
  95. if (mHandleButtonClickListener != null) {
  96. mHandleButtonClickListener.onClick(v);
  97. }
  98. break;
  99. default:
  100. break;
  101. }
  102. }
  103.  
  104. }

在main.xml里面添加相关fragment和自定义底部工具栏,注意name属性

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:orientation="vertical" >
  6.  
  7. <fragment
  8. android:id="@+id/fragment_main"
  9. android:layout_width="fill_parent"
  10. android:layout_height="fill_parent"
  11. android:layout_weight="1"
  12. android:name="com.qyh.fragment.MainFragment" />
  13.  
  14. <fragment
  15. android:id="@+id/fragment_grxx"
  16. android:layout_width="fill_parent"
  17. android:layout_height="fill_parent"
  18. android:layout_weight="1"
  19. android:name="com.qyh.fragment.GrxxFragment" />
  20.  
  21. <fragment
  22. android:id="@+id/fragment_sz"
  23. android:layout_width="fill_parent"
  24. android:layout_height="fill_parent"
  25. android:layout_weight="1"
  26. android:name="com.qyh.fragment.SzFragment" />
  27.  
  28. <fragment
  29. android:id="@+id/fragment_others"
  30. android:layout_width="fill_parent"
  31. android:layout_height="fill_parent"
  32. android:layout_weight="1"
  33. android:name="com.qyh.fragment.OthersFragment" />
  34.  
  35. <!--此处为自定义底部菜单栏 -->
  36. <com.qyh.fragment.FragmentIndicator
  37. android:id="@+id/indicator"
  38. android:layout_width="fill_parent"
  39. android:layout_height="48dp"
  40. />
  41.  
  42. </LinearLayout>

在主线程中对fragment做相关操作

  1. public class MainActivity extends FragmentActivity {
  2.  
  3. public static Fragment[] mFragments;
  4.  
  5. @Override
  6. protected void onCreate(Bundle savedInstanceState) {
  7. super.onCreate(savedInstanceState);
  8. requestWindowFeature(Window.FEATURE_NO_TITLE);
  9. setContentView(R.layout.activity_main);
  10. setFragmentIndicator(0);
  11.  
  12. }
  13.  
  14. private void setFragmentIndicator(int whichIsDefault) {
  15. mFragments = new Fragment[4];
  16. mFragments[0] = getSupportFragmentManager().findFragmentById(
  17. R.id.fragment_main);
  18. mFragments[1] = getSupportFragmentManager().findFragmentById(
  19. R.id.fragment_grxx);
  20. mFragments[2] = getSupportFragmentManager().findFragmentById(
  21. R.id.fragment_sz);
  22. mFragments[3] = getSupportFragmentManager().findFragmentById(
  23. R.id.fragment_others);
  24. getSupportFragmentManager().beginTransaction().hide(mFragments[0])
  25. .hide(mFragments[1]).hide(mFragments[2]).hide(mFragments[3])
  26. .show(mFragments[whichIsDefault]).commit();
  27.  
  28. FragmentIndicator mIndicator = (FragmentIndicator) findViewById(R.id.indicator);
  29. FragmentIndicator.setIndicator(whichIsDefault);
  30. mIndicator.setOnIndicateListener(new OnIndicateListener() {
  31.  
  32. @Override
  33. public void onIndicate(View v, int which) {
  34. getSupportFragmentManager().beginTransaction()
  35. .hide(mFragments[0]).hide(mFragments[1])
  36. .hide(mFragments[2]).hide(mFragments[3])
  37. .show(mFragments[which]).commit();
  38. }
  39. });
  40. }
  41. }

运行相关效果图

自定义底部工具栏及顶部工具栏和Fragment配合使用demo的更多相关文章

  1. TabBottomFragmentLayout【自定义底部选项卡区域(搭配Fragment)】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义底部选项卡布局LinearLayout类,然后配合Fragment,实现切换Fragment功能. 缺点: 1.底部选项卡区域 ...

  2. 【Android UI设计与开发】5.底部菜单栏(二)使用Fragment实现底部菜单栏

    既然 Fragment 取代了TabActivity,当然 TabActivity 的能实现的菜单栏,Fragment 当然也能实现.主要其实就是通过菜单栏的点击事件切换 Fragment 的显示和隐 ...

  3. Android自定义底部带有动画的Dialog

    Android自定义底部带有动画的Dialog 效果图 先看效果图,是不是你想要的呢 自定义Dialog package --.view; import android.app.Dialog; imp ...

  4. Android 自定义底部公用菜单

    注释:此案例主要展示自定义底部菜单,一处封装处处调用.使用起来相当方便 一.初始的Activity package com.example.myapi.buttommenu; import andro ...

  5. 微信小程序-自定义底部导航

    代码地址如下:http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  6. [RN] React Native 自定义 底部 弹出 选择框 实现

    React Native 自定义 底部选择框 实现 效果如图所示: 实现方法: 一.组件封装 CustomAlertDialog.js import React, {Component} from ' ...

  7. 15 Flutter BottomNavigationBar自定义底部导航条 以及实现页面切换 以及模块化

    效果: /**  * Flutter  BottomNavigationBar 自定义底部导航条.以及实现页面切换:  * BottomNavigationBar是底部导航条,可以让我们定义底部Tab ...

  8. C# 自定义样式实现菜单和工具栏的分割线

    在做WinForm界面布局时,菜单和工具栏必不可少!但是MenuStrip和ToolStrip不能够对边框的样式直接设置,如果想实现菜单和工具栏之间的分割线就不容易实现:今天查阅了一下msdn找到了一 ...

  9. XAF ListView 移除顶部工具栏

    此方法适用于C/S及B/S,无需分别写在web和win中. Module下新建ViewController,代码如下: public partial class GongZuoJiaoShen_Yin ...

随机推荐

  1. C# ~ 从 XML 到 Linq 到 Linq to XML

    .XML 可扩展标记语言 (Extensible Markup Language), 标记 (markup) 是关键部分,是标准通用标记语言 (Standard Generalized Markup ...

  2. Java并发编程:Timer和TimerTask(转载)

    Java并发编程:Timer和TimerTask(转载) 下面内容转载自: http://blog.csdn.net/xieyuooo/article/details/8607220 其实就Timer ...

  3. Oracle中的数据分页

    --数据分页脚本 --创建包含数据分页代码元素声明的包头结构create or replace package data_controlis type type_cursor_data is ref ...

  4. pm2 配置

    ---恢复内容开始--- 1. ecosystem.json { "apps": [ { "name": "name", // 项目名 &q ...

  5. Guava学习笔记:Guava新增集合类型-Multiset

    Guava引进了JDK里没有的,但是非常有用的一些新的集合类型.所有这些新集合类型都能和JDK里的集合平滑集成.Guava集合非常精准地实现了JDK定义的接口.Guava中定义的新集合有: Multi ...

  6. java 编译时的初始化顺序

    有的时候,java的初始化会对我的工作照成很大影响,所以简单介绍一下, 首先介绍简单的变量的初始化:在类的内部,变量定义的先后顺序决定了初始化的顺序,即使变量定义散布于方法定义之间,它也会先于构造器和 ...

  7. Twproject Gantt – 开源的 JavaScript 甘特图组件

    Twproject Gantt 是一款基于 jQuery 开发的甘特图组件,也可以创建其它图表,例如任务树(Task Trees).内置编辑.缩放和 CSS 皮肤等功能.更重要的是,它是免费开源的. ...

  8. L20n – Mozilla 推出的 Web 本地化框架

    L20n是 Mozilla 开发的用于 Web 开发的本地化框架.它允许本地化开发者把逻辑细分为本地化的资源. L20n 的框架不再需要开发人员深入理解自然语言的具体细节,并提供了机会为本地化创造更好 ...

  9. Dynatable – 基于 HTML5 & jQuery 的交互表格插件

    Dynatable 一款有趣的,语义化,交互式的表格插件,使用 jQuery,HTML5 和 JSON 实现.Dynatable 的目的是提供一种简单的.可扩展的 API,能够轻松的浏览和操作大规模的 ...

  10. Java2_J2EE体系架构

    J2EE是Java2平台企业版(Java 2 Platform,Enterprise Edition),它的核心是一组技术规范与指南,提供基于组件的方式来设计.开发.组装和部署企业应用.J2EE使用多 ...