安卓小项目之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中就行了