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

六、参考文章

http://www.runoob.com/w3cnote/android-tutorial-fragment-demo3.html