Android 开发之实用 FragmentLayout+fragment 实现新浪微博的四个主页面

在使用之前如果还没用过 fragment 的同学可以先了解下 fragment 的相关知识

1、Fragment：

Fragment 可以做为 Activity 的一个界面的一个组成部分，Activity 的界面可以完全由不同的 Fragment 组成，注意的是 Fragment 拥有自己的生命周期和接收、处理用户的事件，这样就不必在 Activity 写一堆控件的事件处理的代码了。更为重要的是，你可以动态的添加、替换和移除某个 Fragment。当然，你可以把 fragment 当成普通的控件一样放在 activity 的 xml 布局文件中。

Fragment 必须是依存与 Activity 而存在的，因此 Activity 的生命周期会直接影响到 Fragment 的生命周期。官网这张图很好的说明了两者生命周期的关系：

可以看到 Fragment 比 Activity 多了几个额外的生命周期回调方法：
onAttach(Activity)
当 Fragment 与 Activity 发生关联时调用。
onCreateView(LayoutInflater, ViewGroup,Bundle)
创建该 Fragment 的视图
onActivityCreated(Bundle)
当 Activity 的 onCreate 方法返回时调用
onDestoryView()
与 onCreateView 想对应，当该 Fragment 的视图被移除时调用
onDetach()
与 onAttach 相对应，当 Fragment 与 Activity 关联被取消时调用

注意：除了 onCreateView，其他的所有方法如果你重写了，必须调用父类对于该方法的实现，

参考自：http://blog.csdn.net/lmj623565791/article/details/37970961/

Android之Fragment优点 - 沙翁 - 博客园

FragmentManager：你可以把 FragmentManager 想象成管理一系列的 fragment 的隐藏展示的一个类

接下来我们就来实现四个页面

最终效果：

第一步：布局 MainActivity 的布局文件

首先，我们在 main_activity.xml 中使用 fragmentlayout 来动态的装载我们要动态切换的四个 fragment

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="guanaj.com.weibo.MainActivity">

    <FrameLayout
        android:id="@+id/root_fragment_layout"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="match_parent" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#cccccc" />

    <RadioGroup
        android:id="@+id/radiogroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingBottom="10dp"
        android:paddingTop="10dp">

        <RadioButton
            android:id="@+id/radiobutton_home"
            style="@style/main_radiobutton_stype"
            android:checked="true"
            android:drawableTop="@drawable/rb_select_home"
            android:text="主页" />

        <RadioButton
            android:id="@+id/radiobutton_message"
            style="@style/main_radiobutton_stype"
            android:drawableTop="@drawable/rb_select_message"
            android:text="消息" />

        <RadioButton
            android:id="@+id/radiobutton_post"

            style="@style/main_radiobutton_stype"
            android:text="发布" />

        <RadioButton
            android:id="@+id/radiobutton_discover"
            style="@style/main_radiobutton_stype"

            android:drawableTop="@drawable/rb_select_discover"
            android:text="发现" />

        <RadioButton
            android:id="@+id/radiobutton_profile"
            style="@style/main_radiobutton_stype"

            android:drawableTop="@drawable/rb_select_profile"
            android:text="我" />

    </RadioGroup>
</LinearLayout>

可以看到，底部我就先用 RadioGroup+RadioButton 实现，中间用一个 View 来实现一个灰色的分割线

底部按钮的样式为了统一管理，我们可以把他公共的样式抽取出来放到 res/values/styles.xml 文件中

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="main_radiobutton_stype">
        <item name="android:gravity">center</item>
        <item name="android:button">@null</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_weight">1</item>
        <item name="android:layout_height">wrap_content</item>
    </style>

</resources>

底部按钮的选中和不选中状态我们可以是用 select 选择器来实现，代码分别如下

rb_select_home.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tabbar_home_selected" android:state_checked="true"/>
    <item android:drawable="@drawable/tabbar_home" android:state_checked="false"/>
</selector>

state_checked='true'表示被选中时显示的图片，其余三个类似

好的，布局文件准备好了，接下来我们要来准备四个 fragment

第二步：实现四个 Fragment

1、HomeFragment.java

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    /**
    * Created by guanaj on .
    */
    <TextView
        android:text="消息"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>