安卓小项目之Everyday(1)---使用fragment实现选项卡

从今天开始我们实现一个安卓项目-----Everyday,这个app分为四个模块，每日笑话，历史今日，每日新闻，每日心情，而且前三个模块的数据从网站上获取，因为是心血来潮才想做的，所以也没有具体的计划，大致思索后就开始动工了，好了今天实现的是用fragment来实现选项卡（tab）功能，先上效果图（中间的文字有点小，可能看不清，但是文字是随着选项的切换而切换的）

                                                                                  

实现思路：

1、建立主界面布局

2、建立对应的fragment

3、动态加载fragment

4、切换标题时修改对应效果

1、建立主界面布局

代码：

<?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"
     >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <TextView
            android:id="@+id/tv_tab_joke"
            android:textSize="18.0dip"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="每日笑话"
            android:layout_height="wrap_content" />
        <TextView
            android:id="@+id/tv_tab_history"
            android:textSize="18.0dip"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="历史今天"
            android:layout_height="wrap_content" />
        <TextView
            android:id="@+id/tv_tab_news"
            android:textSize="18.0dip"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="每日新闻"
            android:layout_height="wrap_content" />
        <TextView
            android:id="@+id/tv_tab_mood"
            android:textSize="18.0dip"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="每日心情"
            android:layout_height="wrap_content" />

    </LinearLayout>
    <LinearLayout
        android:orientation="vertical"
        android:id="@+id/ll"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </LinearLayout>
</LinearLayout>

效果图：

2、建立对应的fragment：

class代码（只展示其中的一个，其他三个类似）

package com.everyday.wei.everyday;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by wei on 2017/10/10.
 */

public class Joke extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.tab_joke,null);
        return view;
    }
}

布局代码（只展示其中的一个，其他三个类似）

<?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">
<TextView
    android:text="这是tab1"
    android:textSize="30dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
</LinearLayout>

效果图：

3、动态加载fragment

代码：

@Override
protected void onStart() {
    super.onStart();
    //得到碎片管理器
    fm=getFragmentManager();
    //发出开始管理信号
    ft=fm.beginTransaction();
    //执行替换  这里表示进入主页面时默认显示第一个碎片内容
    ft.replace(R.id.ll,new Joke());
    tv_tab_joke.setTextColor(Color.parseColor("#FF0000"));
    tv_tab_joke.setTextSize(22.0f);
    //提交执行的改变
    ft.commit();
}

@Override
public void onClick(View v) {
    ft = fm.beginTransaction();
    switch (v.getId()) {
        case R.id.tv_tab_joke:
            ft.replace(R.id.ll, new Joke());
            ChangeStyle(true,false,false,false);
            break;
        case R.id.tv_tab_history:
            ft.replace(R.id.ll, new History());
            ChangeStyle(false,true,false,false);
            break;
        case R.id.tv_tab_news:
            ft.replace(R.id.ll, new News());
            ChangeStyle(false,false,true,false);
            break;
        case R.id.tv_tab_mood:
            ft.replace(R.id.ll, new Mood());
            ChangeStyle(false,false,false,true);
            break;
        default:
            break;
    }
    ft.commit();
}

大致思路是：先给四个标题都设置点击事件，然后获得碎片管理器，通过碎片管理器在我们点击对应的标题时，将主布局中的id为ll的linearlayout替换为对应的碎片,最后不要忘了commit

4、切换标题时修改对应效果

代码：

public void onClick(View v) {
    ft = fm.beginTransaction();
    switch (v.getId()) {
        case R.id.tv_tab_joke:
            ft.replace(R.id.ll, new Joke());
            ChangeStyle(true,false,false,false);
            break;
        case R.id.tv_tab_history:
            ft.replace(R.id.ll, new History());
            ChangeStyle(false,true,false,false);
            break;
        case R.id.tv_tab_news:
            ft.replace(R.id.ll, new News());
            ChangeStyle(false,false,true,false);
            break;
        case R.id.tv_tab_mood:
            ft.replace(R.id.ll, new Mood());
            ChangeStyle(false,false,false,true);
            break;
        default:
            break;
    }
    ft.commit();
}

//统一改变样式
private void ChangeStyle(boolean isTrueOfJoke,boolean isTrueOfHistory,boolean isTrueOfNews,boolean isTrueOfMood)
{
  if(isTrueOfJoke)
  {
      tv_tab_joke.setTextColor(Color.parseColor("#FF0000"));
      tv_tab_joke.setTextSize(22.0f);
  }
  else
  {
      tv_tab_joke.setTextColor(Color.parseColor("#000000"));
      tv_tab_joke.setTextSize(18.0f);
  }
    if(isTrueOfHistory)
    {
        tv_tab_history.setTextColor(Color.parseColor("#FF0000"));
        tv_tab_history.setTextSize(22.0f);
    }
    else
    {
        tv_tab_history.setTextColor(Color.parseColor("#000000"));
        tv_tab_history.setTextSize(18.0f);
    }
    if(isTrueOfNews)
    {
        tv_tab_news.setTextColor(Color.parseColor("#FF0000"));
        tv_tab_news.setTextSize(22.0f);
    }
    else
    {
        tv_tab_news.setTextColor(Color.parseColor("#000000"));
        tv_tab_news.setTextSize(18.0f);
    }
    if(isTrueOfMood)
    {
        tv_tab_mood.setTextColor(Color.parseColor("#FF0000"));
        tv_tab_mood.setTextSize(22.0f);
    }
    else
    {
        tv_tab_mood.setTextColor(Color.parseColor("#000000"));
        tv_tab_mood.setTextSize(18.0f);
    }

}

切换的效果无非是1、将标题栏的字体颜色修改为红色，2、将标题栏的字体大小放大一点

实现时，为了方便阅读，我们写了一个ChangeStyle的函数，在这个函数中实现对四个标题样式的修改，这样做使程序

看上去简洁，以后如果有问题也方便调试，至此，功能实现完毕

反思与总结：

1、每次点击时都会加载四个fragment,性能不高

2、初始化第一个标题时其实是有问题的，比如说这样

为啥会出现这样的问题呢，这就得提一下activity的生命周期了，我们知道当activity进入了onPause后，也就是

activity不可见之后，如果内存不足，那么activity可能被杀死，再次进去这个activity时会重新加载，但是图中

第三个标签也是红的，所以排除activity被杀死的情况；另一种是onRestart，此时程序又会调用一次onStart，所以

在onStart中又会进行初始化，所以造成了第一个标题和第三个标题样式都改变了的情况。所以，解决方案是将第一个

标题初始化的操作放在onCreate中就行了