文章大纲
一、 什么是Fragment
二、 Fragment生命周期
三、 Fragment简单实例
四、Fragment实战
五、项目源码下载
六、参考文章
![](https://i-blog.csdnimg.cn/blog_migrate/0a2ccd26ff58762b02366b87bfa53663.webp?x-image-process=image/format,png)
一、 什么是Fragment
Fragment是Android3.0后引入的一个新的API,他出现的初衷是为了适应大屏幕的平板电脑, 当然现在他仍然是平板APP UI设计的宠儿,而且我们普通手机开发也会加入这个Fragment, 我们可以把他看成一个小型的Activity,又称Activity片段!想想,如果一个很大的界面,我们 就一个布局,写起界面来会有多麻烦,而且如果组件多的话是管理起来也很麻烦!而使用Fragment 我们可以把屏幕划分成几块,然后进行分组,进行一个模块化的管理!从而可以更加方便的在 运行过程中动态地更新Activity的用户界面!另外Fragment并不能单独使用,他需要嵌套在Activity 中使用,尽管他拥有自己的生命周期,但是还是会受到宿主Activity的生命周期的影响,比如Activity 被destory销毁了,他也会跟着销毁!
下图是文档中给出的一个Fragment分别对应手机与平板间不同情况的处理图:
![](https://i-blog.csdnimg.cn/blog_migrate/c3da0e4dd73ca1c370f774675e356119.webp?x-image-process=image/format,png)
二、 Fragment生命周期
![](https://i-blog.csdnimg.cn/blog_migrate/c334ba58b090f6bcc93aea7b5756edae.webp?x-image-process=image/format,png)
走一次生命周期图
①Activity加载Fragment的时候,依次调用下面的方法: onAttach -> onCreate -> onCreateView -> onActivityCreated -> onStart ->onResume
②当我们弄出一个悬浮的对话框风格的Activity,或者其他,就是让Fragment所在的Activity可见,但不获得焦点 onPause
③当对话框关闭,Activity又获得了焦点: onResume
④当我们替换Fragment,并调用addToBackStack()将他添加到Back栈中 onPause -> onStop -> onDestoryView !!注意,此时的Fragment还没有被销毁哦!!!
⑤当我们按下键盘的回退键,Fragment会再次显示出来: onCreateView -> onActivityCreated -> onStart -> onResume
⑥如果我们替换后,在事务commit之前没有调用addToBackStack()方法将 Fragment添加到back栈中的话;又或者退出了Activity的话,那么Fragment将会被完全结束, Fragment会进入销毁状态 onPause -> onStop -> onDestoryView -> onDestory -> onDetach
三、 Fragment简单实例
1. 创建Fragment
静态加载Fragment
实现流程:
![](https://i-blog.csdnimg.cn/blog_migrate/0f3431a0fdaa20f93d04e11f60b4ee94.webp?x-image-process=image/format,png)
定义Fragment的布局,就是fragment显示内容的,方法是自定义一个Fragment类,需要继承Fragment或者他的子类,重写onCreateView()方法 在该方法中调用:inflater.inflate()方法加载Fragment的布局文件,接着返回加载的view对象,具体代码如下所示:
public class Fragmentone extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment1, container,false); return view; } }
在需要加载Fragment的Activity对应的布局文件中添加fragment的标签, 记住,name属性是全限定类名哦,就是要包含Fragment的包名,如下所示:
<fragment
android:id="@+id/fragment1"
android:name="com.jay.example.fragmentdemo.Fragmentone"
android:layout_width="match_parent"
android:layout_height="0dp" android:layout_weight="1" />
Activity在onCreate( )方法中调用setContentView()加载布局文件即可!
动态加载Fragment
实现流程:
![](https://i-blog.csdnimg.cn/blog_migrate/98d98c2031b8309f352bd6de5d0af943.webp?x-image-process=image/format,png)
MainActivity的关键代码如下:
public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Display dis = getWindowManager().getDefaultDisplay(); if(dis.getWidth() > dis.getHeight()) { Fragment1 f1 = new Fragment1(); getFragmentManager().beginTransaction().replace(R.id.LinearLayout1, f1).commit(); } else { Fragment2 f2 = new Fragment2(); getFragmentManager().beginTransaction().replace(R.id.LinearLayout1, f2).commit(); } } }
2. Fragment管理与Fragment事务
![](https://i-blog.csdnimg.cn/blog_migrate/7a4359dda9872f5d2704c1501d63e99f.webp?x-image-process=image/format,png)
3. Fragment与Activity的交互
![](https://i-blog.csdnimg.cn/blog_migrate/e91edabf5988be97de1f6bd9e3255697.webp?x-image-process=image/format,png)
四、Fragment实战
1. TextView+Fragment实现底部导航
2. RadioGroup + RadioButton+Fragment实现底部导航
3. LinearLayout+RelativeLayout+TextView+Fragment实现底部导航(重点讲解)
运行效果图如下所示
![](https://i-blog.csdnimg.cn/blog_migrate/035b090354262e4bed69d1dd846d6145.webp?x-image-process=image/format,png)
drawable系列的资源
文字资源:tab_menu_text.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="@color/text_yellow" android:state_selected="true" /> <item android:color="@color/text_gray" /> </selector>
图标资源:tab_menu_better.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@mipmap/tab_better_pressed" android:state_selected="true" /> <item android:drawable="@mipmap/tab_better_normal" /> </selector>
activity的布局代码
style.xml
<style name="tab_menu_text"> <item name="android:layout_marginTop">5dp</item> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">48dp</item> <item name="android:layout_centerInParent">true</item> <item name="android:textColor">@drawable/tab_menu_text</item> </style> <style name="tab_menu_bgnum"> <item name="android:layout_width">20dp</item> <item name="android:layout_height">20dp</item> <item name="android:background">@mipmap/bg_num</item> <item name="android:layout_marginLeft">-10dp</item> <item name="android:textSize">12sp</item> <item name="android:gravity">center</item> <item name="android:textColor">@color/text_white</item> </style>
activity.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <RelativeLayout android:id="@+id/ly_top_bar" android:layout_width="match_parent" android:layout_height="48dp" android:background="@color/bg_topbar"> <TextView android:id="@+id/txt_topbar" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_centerInParent="true" android:gravity="center" android:text="信息" android:textColor="@color/text_topbar" android:textSize="18sp" /> <View android:layout_width="match_parent" android:layout_height="2px" android:layout_alignParentBottom="true" android:background="@color/div_white" /> </RelativeLayout> <LinearLayout android:id="@+id/ly_tab_menu" android:layout_width="match_parent" android:layout_height="56dp" android:layout_alignParentBottom="true" android:background="@color/bg_white" android:orientation="horizontal"> <LinearLayout android:id="@+id/ly_tab_menu_channel" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center"> <RelativeLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:padding="5dp"> <TextView android:id="@+id/tab_menu_channel" style="@style/tab_menu_text" android:drawableTop="@drawable/tab_menu_channel" android:text="@string/tab_menu_alert" /> <TextView android:id="@+id/tab_menu_channel_num" style="@style/tab_menu_bgnum" android:layout_toRightOf="@+id/tab_menu_channel" android:text="99+" android:visibility="gone" /> </RelativeLayout> </LinearLayout> <LinearLayout android:id="@+id/ly_tab_menu_message" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center"> <RelativeLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:padding="5dp"> <TextView android:id="@+id/tab_menu_message" style="@style/tab_menu_text" android:drawableTop="@drawable/tab_menu_message" android:text="@string/tab_menu_profile" /> <TextView android:id="@+id/tab_menu_message_num" style="@style/tab_menu_bgnum" android:layout_toRightOf="@+id/tab_menu_message" android:text="99+" android:visibility="gone" /> </RelativeLayout> </LinearLayout> <LinearLayout android:id="@+id/ly_tab_menu_better" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center"> <RelativeLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:padding="5dp"> <TextView android:id="@+id/tab_menu_better" style="@style/tab_menu_text" android:drawableTop="@drawable/tab_menu_better" android:text="@string/tab_menu_pay" /> <TextView android:id="@+id/tab_menu_better_num" style="@style/tab_menu_bgnum" android:layout_toRightOf="@+id/tab_menu_better" android:text="99+" android:visibility="gone" /> </RelativeLayout> </LinearLayout> <LinearLayout android:id="@+id/ly_tab_menu_setting" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center"> <RelativeLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:padding="5dp"> <TextView android:id="@+id/tab_menu_setting" style="@style/tab_menu_text" android:drawableTop="@drawable/tab_menu_setting" android:text="@string/tab_menu_alert" /> <ImageView android:id="@+id/tab_menu_setting_partner" android:layout_width="12dp" android:layout_height="12dp" android:layout_marginLeft="-5dp"