Android之Fragment详解

文章大纲

一、 什么是fragment
二、 fragment生命周期
三、 fragment简单实例
四、fragment实战
五、项目源码下载
六、参考文章

 

一、 什么是fragment

fragment是android3.0后引入的一个新的api，他出现的初衷是为了适应大屏幕的平板电脑， 当然现在他仍然是平板app ui设计的宠儿，而且我们普通手机开发也会加入这个fragment， 我们可以把他看成一个小型的activity，又称activity片段！想想，如果一个很大的界面，我们 就一个布局，写起界面来会有多麻烦，而且如果组件多的话是管理起来也很麻烦！而使用fragment 我们可以把屏幕划分成几块，然后进行分组，进行一个模块化的管理！从而可以更加方便的在 运行过程中动态地更新activity的用户界面！另外fragment并不能单独使用，他需要嵌套在activity 中使用，尽管他拥有自己的生命周期，但是还是会受到宿主activity的生命周期的影响，比如activity 被destory销毁了，他也会跟着销毁！

下图是文档中给出的一个fragment分别对应手机与平板间不同情况的处理图：

 

二、 fragment生命周期

 

走一次生命周期图
①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

实现流程：

 

  定义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

实现流程：

 

image

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事务

 

3. fragment与activity的交互

 

四、fragment实战

1. textview+fragment实现底部导航

2. radiogroup + radiobutton+fragment实现底部导航

3. linearlayout+relativelayout+textview+fragment实现底部导航（重点讲解）

运行效果图如下所示

 

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"
                    android:layout_torightof="@id/tab_menu_setting"
                    android:visibility="gone"
                    android:src="@mipmap/partner_red" />

            </relativelayout>
        </linearlayout>

    </linearlayout>

    <view
        android:id="@+id/div_tab_bar"
        android:layout_width="match_parent"
        android:layout_height="2px"
        android:layout_above="@id/ly_tab_menu"
        android:background="@color/div_white" />


    <framelayout
        android:id="@+id/ly_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/div_tab_bar"
        android:layout_below="@id/ly_top_bar"/>


</relativelayout>

编写fragment界面布局以及类
fg_my.xml

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="5dp">

    <button
        android:id="@+id/btn_one"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="第一个显示信息"/>

    <button
        android:id="@+id/btn_two"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="第二个显示信息"/>

    <button
        android:id="@+id/btn_three"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="第三个显示信息"/>

    <button
        android:id="@+id/btn_four"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="第四个显示信息"/>

</linearlayout>

自定义的fragment类，这里的话我们通过getactivity.findviewbyid()来获得activity 中的小红点，这里仅仅是简单的控制显示而已！ myfragment.java代码如下所示：

public class myfragment extends fragment implements view.onclicklistener{

    private context mcontext;
    private button btn_one;
    private button btn_two;
    private button btn_three;
    private button btn_four;

    public myfragment() {

    }

    @override
    public view oncreateview(layoutinflater inflater, viewgroup container, bundle savedinstancestate) {
        view view = inflater.inflate(r.layout.fg_my,container,false);
        //ui object
        btn_one = (button) view.findviewbyid(r.id.btn_one);
        btn_two = (button) view.findviewbyid(r.id.btn_two);
        btn_three = (button) view.findviewbyid(r.id.btn_three);
        btn_four = (button) view.findviewbyid(r.id.btn_four);
        //bind event
        btn_one.setonclicklistener(this);
        btn_two.setonclicklistener(this);
        btn_three.setonclicklistener(this);
        btn_four.setonclicklistener(this);
        return view;
    }

    @override
    public void onclick(view v) {
        switch (v.getid()){
            case r.id.btn_one:
                textview tab_menu_channel_num = (textview) getactivity ().findviewbyid(r.id.tab_menu_channel_num);
                tab_menu_channel_num.settext("11");
                tab_menu_channel_num.setvisibility(view.visible);
                break;
            case r.id.btn_two:
                textview tab_menu_message_num = (textview) getactivity ().findviewbyid(r.id.tab_menu_message_num);
                tab_menu_message_num.settext("20");
                tab_menu_message_num.setvisibility(view.visible);
                break;
            case r.id.btn_three:
                textview tab_menu_better_num = (textview) getactivity ().findviewbyid(r.id.tab_menu_better_num);
                tab_menu_better_num.settext("99+");
                tab_menu_better_num.setvisibility(view.visible);
                break;
            case r.id.btn_four:
                imageview tab_menu_setting_partner = (imageview) getactivity ().findviewbyid(r.id.tab_menu_setting_partner);
                tab_menu_setting_partner.setvisibility(view.visible);
                break;
        }
    }
}

编写mainactivity
mainactivity.java

/**
 * created by coder-pig on 2015/8/30 0030.
 */
public class mainactivity extends appcompatactivity implements view.onclicklistener {

    //activity ui object
    private linearlayout ly_tab_menu_channel;
    private textview tab_menu_channel;
    private textview tab_menu_channel_num;
    private linearlayout ly_tab_menu_message;
    private textview tab_menu_message;
    private textview tab_menu_message_num;
    private linearlayout ly_tab_menu_better;
    private textview tab_menu_better;
    private textview tab_menu_better_num;
    private linearlayout ly_tab_menu_setting;
    private textview tab_menu_setting;
    private imageview tab_menu_setting_partner;
    private fragmentmanager fmanager;
    private fragmenttransaction ftransaction;
    private myfragment fg1;


    @override
    protected void oncreate(bundle savedinstancestate) {
        super.oncreate(savedinstancestate);
        setcontentview(r.layout.activity_main);
        bindviews();
        ly_tab_menu_channel.performclick();
        fg1 = new myfragment();
        fmanager = getfragmentmanager();
        ftransaction = fmanager.begintransaction();
        ftransaction.add(r.id.ly_content, fg1).commit();

    }

    private void bindviews() {
        ly_tab_menu_channel = (linearlayout) findviewbyid(r.id.ly_tab_menu_channel);
        tab_menu_channel = (textview) findviewbyid(r.id.tab_menu_channel);
        tab_menu_channel_num = (textview) findviewbyid(r.id.tab_menu_channel_num);
        ly_tab_menu_message = (linearlayout) findviewbyid(r.id.ly_tab_menu_message);
        tab_menu_message = (textview) findviewbyid(r.id.tab_menu_message);
        tab_menu_message_num = (textview) findviewbyid(r.id.tab_menu_message_num);
        ly_tab_menu_better = (linearlayout) findviewbyid(r.id.ly_tab_menu_better);
        tab_menu_better = (textview) findviewbyid(r.id.tab_menu_better);
        tab_menu_better_num = (textview) findviewbyid(r.id.tab_menu_better_num);
        ly_tab_menu_setting = (linearlayout) findviewbyid(r.id.ly_tab_menu_setting);
        tab_menu_setting = (textview) findviewbyid(r.id.tab_menu_setting);
        tab_menu_setting_partner = (imageview) findviewbyid(r.id.tab_menu_setting_partner);

        ly_tab_menu_channel.setonclicklistener(this);
        ly_tab_menu_message.setonclicklistener(this);
        ly_tab_menu_better.setonclicklistener(this);
        ly_tab_menu_setting.setonclicklistener(this);

    }

    @override
    public void onclick(view v) {
        switch (v.getid()) {
            case r.id.ly_tab_menu_channel:
                setselected();
                tab_menu_channel.setselected(true);
                tab_menu_channel_num.setvisibility(view.invisible);
                break;
            case r.id.ly_tab_menu_message:
                setselected();
                tab_menu_message.setselected(true);
                tab_menu_message_num.setvisibility(view.invisible);
                break;
            case r.id.ly_tab_menu_better:
                setselected();
                tab_menu_better.setselected(true);
                tab_menu_better_num.setvisibility(view.invisible);
                break;
            case r.id.ly_tab_menu_setting:
                setselected();
                tab_menu_setting.setselected(true);
                tab_menu_setting_partner.setvisibility(view.invisible);
                break;
        }
    }

    //重置所有文本的选中状态
    private void setselected() {
        tab_menu_channel.setselected(false);
        tab_menu_message.setselected(false);
        tab_menu_better.setselected(false);
        tab_menu_setting.setselected(false);
    }


}

4. viewpager+fragment实现滑动切换页面

五、项目源码下载

链接：https://pan.baidu.com/s/1fogcpo15c-3npceigcsmvg
提取码：bktf

六、参考文章