登录 注册

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

本贴最后更新于 2357 天前，其中的信息可能已经时过境迁

在使用之前如果还没用过 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

package guanaj.com.weibo.pager;

import android.app.Activity;
import android.app.Fragment;
import android.content.Context;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import guanaj.com.weibo.R;

/**
 * Created by guanaj on 2017/2/14.
 */

public class HomeFragment extends Fragment {

    public Activity mActivity;
    public LayoutInflater mInflater;

    @Override
    public void onAttach(Context context) {

        super.onAttach(context);

    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //activity创建时回掉，在这里获去依赖的activity对象
        mActivity = getActivity();

    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        mInflater = inflater;//用来将xml文件实例化成View的类实例
        //在HomeFragment的xml文件渲染成view。
        View rootView = mInflater.inflate(R.layout.fragment_home,null);
        //返回的View即为fragment要显示的View
        return rootView;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        //fragment依赖的activity创建完成时回掉，一般在这里做fragment页面数据的初始化
    }

    @Override
    public void onStart() {
        super.onStart();
    }

    @Override
    public void onResume() {
        super.onResume();
    }

    @Override
    public void onPause() {
        super.onPause();
    }

    @Override
    public void onStop() {
        super.onStop();
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
    }

    @Override
    public void onDetach() {

        super.onDetach();
    }

}

​

2、HomeFragment 的布局文件为

R.layout.fragment_home

<?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>
​

2、MessageFragment.java

package guanaj.com.weibo.pager;

import android.app.Activity;
import android.app.Fragment;
import android.content.Context;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import guanaj.com.weibo.R;

/**
 * Created by guanaj on 2017/2/14.
 */

public class MessageFragment extends Fragment {

    public Activity mActivity;
    public LayoutInflater mInflater;

    @Override
    public void onAttach(Context context) {

        super.onAttach(context);

    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //activity创建时回掉，在这里获去依赖的activity对象
        mActivity = getActivity();

    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        mInflater = inflater;//用来将xml文件实例化成View的类实例
        //在HomeFragment的xml文件渲染成view。
        View rootView = mInflater.inflate(R.layout.fragment_message,null);

        //返回的View即为fragment要显示的View
        return rootView;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        //fragment依赖的activity创建完成时回掉，一般在这里做fragment页面数据的初始化
    }

    @Override
    public void onStart() {
        super.onStart();
    }

    @Override
    public void onResume() {
        super.onResume();
    }

    @Override
    public void onPause() {
        super.onPause();
    }

    @Override
    public void onStop() {
        super.onStop();
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
    }

    @Override
    public void onDetach() {

        super.onDetach();
    }

}

​

2、MessageFragment 的布局文件

R.layout.fragment_message

<?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>
​

其余两个类似

第三步：在 MainActivity 中动态的根据底部按钮的选中状态切换要显示的 fragment

MainActivity.java 的代码为：

package guanaj.com.weibo;

import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.FrameLayout;
import android.widget.RadioGroup;
import java.util.ArrayList;
import guanaj.com.weibo.pager.DiscoverFragment;
import guanaj.com.weibo.pager.HomeFragment;
import guanaj.com.weibo.pager.MessageFragment;
import guanaj.com.weibo.pager.ProfileFragment;

public class MainActivity extends AppCompatActivity {

    private static final String TAG = "MainActivity";

    private ArrayList<Fragment> fragmentList = new ArrayList<>();

    private RadioGroup radioGroup;
    private FragmentManager fragmentManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViews();
        initEvent();
        initData();

    }
    private void initViews() {
        //1、获取main_activity中的控件的实例化对象
        radioGroup = (RadioGroup) findViewById(R.id.radiogroup);
        //2、获取FragmentManager
        /*注意倒入的fragmentManager，如果你的fragment是android.support.v4.app包中的，
        你倒入的fragmentManager也要试v4v 包的，
        我这里的fragment是import android.app.Fragment; 所以我导入的fragmentManager也是android.app包下面的
        * */
        /*如果是v4包的要用this.getSupportFragmentManager();*/
        fragmentManager = this.getFragmentManager();

    }

    private void initEvent() {
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                    case R.id.radiobutton_home: {
                        setCurrentFragment(0);
                        break;
                    }
                    case R.id.radiobutton_message: {
                        setCurrentFragment(1);
                        break;
                    }
                    case R.id.radiobutton_discover: {
                        setCurrentFragment(2);
                        break;
                    }
                    case R.id.radiobutton_profile: {
                        setCurrentFragment(3);
                        break;
                    }
                    case R.id.radiobutton_post:{

                        break;
                    }
                    default: {

                    }

                }
//
            }
        });

    }

    private void initData() {
        /*3、数据的准备*/
        HomeFragment homeFragment = new HomeFragment();
        fragmentList.add(homeFragment);
        MessageFragment messageFragment = new MessageFragment();
        fragmentList.add(messageFragment);
        DiscoverFragment discoverFragment = new DiscoverFragment();
        fragmentList.add(discoverFragment);
        ProfileFragment profileFragment = new ProfileFragment();
        fragmentList.add(profileFragment);
        //默认显示第1个也就是fragmentList.get(0)
        setCurrentFragment(0);

    }

    /**
     * 显示fragment
     * @param index
     */
    private void setCurrentFragment(int index){
        //3 通过fragmentmanager获取fragment的事务管理对象
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        //4获取要显示的fragment
        Fragment fragment = fragmentList.get(index);
        //5、将要显示的fragment放入FragmentLayout中
        fragmentTransaction.replace(R.id.root_fragment_layout, fragment);
        //6、提交事务，确定显示
        fragmentTransaction.commit();
    }

}
​
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统，主要使用于便携设备。2005 年由 Google 收购注资，并拉拢多家制造商组成开放手机联盟开发改良，逐渐扩展到到平板电脑及其他领域上。

    335 引用 • 324 回帖 • 4 关注
  • fragment
    4 引用 • 1 回帖
713 3 40 127 55 69 2 32 376

相关帖子

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

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
angels
回帖
4
 帖子
61
 积分
485

近期热议

推荐标签 标签

  • 尊园地产

    昆明尊园房地产经纪有限公司，即：Kunming Zunyuan Property Agency Company Limited（简称“尊园地产”）于 2007 年 6 月开始筹备，2007 年 8 月 18 日正式成立，注册资本 200 万元，公司性质为股份经纪有限公司，主营业务为：代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 788 关注
  • Dubbo

    Dubbo 是一个分布式服务框架，致力于提供高性能和透明化的 RPC 远程服务调用方案，是 [阿里巴巴] SOA 服务化治理方案的核心框架，每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持，并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 615 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 1 关注
  • Google

    Google（Google Inc.，NASDAQ：GOOG）是一家美国上市公司（公有股份公司），于 1998 年 9 月 7 日以私有股份公司的形式创立，设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”，它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎，它提供了简单易用的免费服务。不作恶（Don't be evil）是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖
  • 周末

    星期六到星期天晚，实行五天工作制后，指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • HBase

    HBase 是一个分布式的、面向列的开源数据库，该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable：一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样，HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 57 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 830 关注
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖 • 1 关注
  • 笔记

    好记性不如烂笔头。

    310 引用 • 794 回帖
  • 链滴

    链滴是一个记录生活的地方。

    记录生活，连接点滴

    174 引用 • 3851 回帖
  • 友情链接

    确认过眼神后的灵魂连接，站在链在！

    24 引用 • 373 回帖 • 1 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计，是一款崇尚开发效率的全栈框架。

    20 引用 • 23 回帖 • 740 关注
  • Outlook
    1 引用 • 5 回帖 • 3 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎，它支持自动化部署、大规模可伸缩、应用容器化管理。

    116 引用 • 54 回帖
  • 大数据

    大数据（big data）是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合，是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖
  • 以太坊

    以太坊（Ethereum）并不是一个机构，而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity，使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物：投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 4 关注
  • SSL

    SSL（Secure Sockets Layer 安全套接层），及其继任者传输层安全（Transport Layer Security，TLS）是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 410 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息，资讯有时效性和地域性。

    56 引用 • 85 回帖 • 2 关注
  • GraphQL

    GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。GraphQL 并没有和任何特定数据库或者存储引擎绑定，而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 10 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作，它正在被越来越多的开发者和组织使用，并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 3 关注
  • DevOps

    DevOps（Development 和 Operations 的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。

    58 引用 • 25 回帖 • 1 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 31 关注
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 47 关注
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统，是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议，并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想，是一个性能稳定的多用户网络操作系统。

    952 引用 • 944 回帖 • 1 关注
  • 叶归
    6 引用 • 17 回帖 • 14 关注
  • 招聘

    哪里都缺人，哪里都不缺人。

    188 引用 • 1057 回帖
  • 爬虫

    网络爬虫（Spider、Crawler），是一种按照一定的规则，自动地抓取万维网信息的程序。

    106 引用 • 275 回帖

最新标签