ViewPager+Fragment+ViewPager+Fragment
最近一段时间，Android行业大不如从前轻松，企业要求越来越高了，就算入职了很多时候Android这块也不太受重视，现在Android开发者还能经常接到新需求就算是很幸运的事了，我最近的工作也是没什么活，闲来无事就整理一下Android的一些东西，以免遗忘。
这次要做的类似于许多新闻资讯类app，底部tab切换不同的功能页面，首页中又可以切换不同的新闻类型页面，当切换到最后一个新闻fragment时，再向后滑则父viewpager滑动，具体实现是用的ViewPager+Fragment+ViewPager+Fragment，tab用的是desgin库中的TabLayout，fragment实现懒加载，数据源用的是聚合数据（https://www.juhe.cn/），网络框架用的是张鸿洋大神的OkhttpUtils，因为只是做一个效果，就不搭建Rxjava+Retrofit网络请求框架了，主要用到的三方依赖如下：
compile "com.android.support:design:25.+"
compile 'com.google.code.gson:gson:2.8.2'
compile 'com.zhy:okhttputils:2.6.2'
compile 'com.android.support:recyclerview-v7:25+'
一、准备工作
1. BaseApplica
可以自定义一个Application，一是为了初始化OkhttpUtils，另一个是为了获取一个使用较为方便的Context，因为fragment嵌套过多，使得Context获取比较麻烦
public class BaseApplication extends Application {
private static Context context;
@Override
public void onCreate() {
super.onCreate();
context = getApplicationContext();
OkHttpClient okHttpClient = new OkHttpClient.Builder()
// .addInterceptor(new LoggerInterceptor("TAG"))
.connectTimeout(10000L, TimeUnit.MILLISECONDS)
.readTimeout(10000L, TimeUnit.MILLISECONDS)
//其他配置
.build();
OkHttpUtils.initClient(okHttpClient);
}
public static Context getContext(){
return context;
}
}
2. SharedPreferencesHelper
定义一个SharedPreferences用户偏好存储主要是因为我想实现一个可以添减新闻类型的效果，不过因为昨晚感觉时间有点晚了，而且代码量对博客而言已经不少了，就给这个思路，有兴趣或者有这个需求的兄弟可以参考下这个思路完成。
public class SharedPreferencesHelper {
private SharedPreferences sharedPreferences;
private SharedPreferences.Editor editor;
public SharedPreferencesHelper(Context context,String preferenceName){
sharedPreferences = context.getSharedPreferences(preferenceName,Context.MODE_PRIVATE);
editor = sharedPreferences.edit();
}
public void setSharedPreferencesString(String tag,boolean isFirst) {
editor.putBoolean(tag,isFirst);
editor.commit();
}
public boolean getSharedPreferencesString(String tag) {
return sharedPreferences.getBoolean(tag,false);
}
public void setSharedPreferencesList(String tag, List list){
if (null==list||list.size()==0) {
return;
}
Gson gson = new Gson();
String s = gson.toJson(list);
editor.clear();
editor.putString(tag,s);
editor.commit();
}
public List getSharedPreferencesList(String tag) {
List datas = new ArrayList<>();
String string = sharedPreferences.getString(tag, null);
if (null==string) {
return datas;
}
Gson gson = new Gson();
datas = gson.fromJson(string,new TypeToken>(){}.getType());
return datas;
}
}
这个类很简单，初始化的时候传入Context和存储名，创建sharedPreferences和Editor，然后存取文字一对方法，存取list集合一对方法，因为SharedPreferences存储只能存一些基本类型，所以先用Gson将list转化为String类型再进行存储，取的时候再用Gson把数据转化为list。使用也很简单，在MainActivity中进行是否初次进入判断，初次进入赋给喜欢新闻类型的list集合初始值，当然一般app的设计都是有几个新闻类型是一定存在的，这个无所谓，实现上大同小异。然后在初始化浏览新闻页面时，获取新闻类型集合，根据集合的数量创建相应个数的fragment，每个fragment根据新闻类型再进行网络访问获取新闻内容，具体实现如下。
二、页面设计
1. MainActivity
MainActivity是承载整个ViewPager+Fragment+ViewPager+Fragment的载体，专业来说是他们的父布局，我对它的设计很简单，就是上边一个ViewPager滑动页卡，下边一个TabLayout存放tab，然后在viewPager中添加fragment，TabLayout中添加tab，最后将二者关联起来：
public class MainActivity extends AppCompatActivity {
private TabLayout tabLayout;
private ViewPager viewPager;
private List fragments = new ArrayList<>();
private List pageTitle = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
SharedPreferencesHelper isFirstSave = new SharedPreferencesHelper(this, "isFirstSave");
if (!isFirstSave.getSharedPreferencesString("isFirst")) {
isFirstSave.setSharedPreferencesString("isFirst",true);
List list = new ArrayList<>();
list.add("头条");
list.add("社会");
list.add("科技");
new SharedPreferencesHelper(BaseApplication.getContext(),"newsDatasSave").setSharedPreferencesList("newsDatas",list);
}
viewPager = (ViewPager) findViewById(R.id.activity_main_pager);
tabLayout = (TabLayout) findViewById(R.id.activity_main_tab);
initPager();
initTab();
tabLayout.setupWithViewPager(viewPager);//关联viewPager和fragment
for (int i = 0; i < fragments.size(); i++) {
tabLayout.getTabAt(i).setText(pageTitle.get(i)).setIcon(R.mipmap.ic_launcher);//设置tab显示文字和图片
}
}
private void initPager() {
fragments.add(new MainFragment());
fragments.add(new MsgFragment());
fragments.add(new MineFragment());
pageTitle.add("首页");
pageTitle.add("消息");
pageTitle.add("我的");
ActivityFragmentAdapter activityFragmentAdapter = new ActivityFragmentAdapter(getSupportFragmentManager());
viewPager.setAdapter(activityFragmentAdapter);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void initTab() {
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
class ActivityFragmentAdapter extends FragmentPagerAdapter {
public ActivityFragmentAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
// 这里设置的文字值将会在tab上显示
// @Override
// public CharSequence getPageTitle(int position) {
// return pageTitle.get(position);
// }
}
} 这里需要注意的一点事tab文字和图片的设置一定要放在viewpager和fragment关联之后或者在getPageTitle方法中仅设置显示文字，否则设置的文字不会显示。
2. BaseFragment
接下来就要设计Fragment，寿险我们要设计一个基类，用作实现懒加载。所谓懒加载就是只有当fragment显示且无数据才加载数据，当数据加载完毕，我们要将其显示到控件，所以此时控件必须已加载完毕，否则会报空指针，综上，我们共需要三个判断。
public abstract class BaseFragment extends Fragment {
private boolean isInitData = false;//是否初始化数据
private boolean isVisibleToUser = false;//是否可见
private boolean isPrepareView = false;//view是否加载完成
protected List newsDatas;//子fragment对应的tab集合
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(getLayoutId(), container, false);
}
protected abstract int getLayoutId();
@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
newsDatas = new SharedPreferencesHelper(BaseApplication.getContext(), "newsDatasSave").getSharedPreferencesList("newsDatas");
isPrepareView = true;
}
@Override
public void setUserVisibleHint(boolean isVisibleToUser) {
super.setUserVisibleHint(isVisibleToUser);
this.isVisibleToUser = isVisibleToUser;
lazyInitData();
}
private void lazyInitData() {
if(!isInitData&&isVisibleToUser&&isPrepareView){
isInitData = true;
initData();
}
}
protected abstract void initData();
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
lazyInitData();
}
}
onViewCreated方法执行我们可以获取到view已初始化完毕的信息，setUserVisibleHint方法获取的是此fragment是否呈现的信息，当呈现时我们可以试着做第一次懒加载，如果无数据获取则讲数据获取的值改为true，并进行数据获取。为了防止fragment第一次可见未加载数据，在onActivityCreated再次做一个加载判断。
由于我最初的设想是显示新闻内容的fragment个数是可变的，而且fragment只有一个类，所以要获取页卡是什么新闻类型，最简单的实现应该就是把这两个参数放到基类里面，父tab显示的新闻类型在基类中获取。
3. MainFragment
显示新闻页卡的父fragment，布局实现和MainActivity差不多
public class MainFragment extends BaseFragment {
private TabLayout tabLayout;
private ViewPager viewPager;
@Override
protected int getLayoutId() {
return R.layout.fragment_main;
}
@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
tabLayout = (TabLayout) view.findViewById(R.id.fragment_main_tab);
viewPager = (ViewPager) view.findViewById(R.id.fragment_main_pager);
initTab();
initPager();
tabLayout.setupWithViewPager(viewPager);
for (int i = 0; i < newsDatas.size(); i++) {
tabLayout.getTabAt(i).setText(newsDatas.get(i));
}
}
private void initTab() {
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
private void initPager() {
final List fragments = new ArrayList<>();
for (int i = 0; i < newsDatas.size(); i++) {
NewsFragment newsFragment = new NewsFragment();
fragments.add(newsFragment);
newsFragment.setPosition(i);
}
viewPager.setAdapter(new FragmentPagerAdapter(getChildFragmentManager()) {
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
// @Override
// public CharSequence getPageTitle(int position) {
// return newsDatas.get(position);
// }
});
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
@Override
protected void initData() {
}
}
这里要注意的问题是新闻fragment集合fragments的初始化，fragment经常会出现突然多一块白色区域，嵌套时多了白色页卡或者页卡被挤在一旁等等，这些要注意的问题是fragment中view大小设置和viewpager的list个数变化，此demo中如果fragments在类中初始化话，方法initPager中就会不断添加list数据，导致视图被挤在一旁。
还有一点需要注意就是FragmentManager 的使用，总的来说三种获取方式：getFragmentManager()、getSupportFragmentManager()和getChildFragmentManager()，Android V4扩展包获取的FragmentManager 使用getSupportFragmentManager()，android.app获取使用getFragmentManager()，像这种嵌套的使用getChildFragmentManager()。我就直接说使用，具体区别有兴趣的可以去搜下。
4. NewsFragment
显示新闻的fragment，简单期间，我就直接用RecyclerView显示标题实现了
public class NewsFragment extends BaseFragment {
private List newsDatasValue = new ArrayList<>();//子fragment内获取的新闻内容
private RecyclerView recyclerView;
private NewsAdapter newsAdapter = new NewsAdapter();
private int position;
@Override
protected int getLayoutId() {
return R.layout.fragment_main_news;
}
@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
recyclerView = (RecyclerView) view.findViewById(R.id.fragment_main_news_recycler);
recyclerView.setLayoutManager(new LinearLayoutManager(BaseApplication.getContext()));
recyclerView.setAdapter(newsAdapter);
}
@Override
protected void initData() {
String url = "";
switch (newsDatas.get(position)) {
case "头条":
url = "http://v.juhe.cn/toutiao/index?type=top&key=28aa4ac2a689c881a4e6e51cf918d695";
break;
case "社会":
url = "http://v.juhe.cn/toutiao/index?type=shehui&key=28aa4ac2a689c881a4e6e51cf918d695";
break;
case "科技":
url = "http://v.juhe.cn/toutiao/index?type=keji&key=28aa4ac2a689c881a4e6e51cf918d695";
break;
default:
url = "http://v.juhe.cn/toutiao/index?type=top&key=28aa4ac2a689c881a4e6e51cf918d695";
break;
}
OkHttpUtils
.get()
.url(url)
.build()
.execute(new StringCallback() {
@Override
public void onError(Call call, Exception e, int id) {
}
@Override
public void onResponse(String response, int id) {
NewsBean newsBean = new Gson().fromJson(response, NewsBean.class);
if (newsBean.getError_code() == 0) {
newsDatasValue = newsBean.getResult().getData();
newsAdapter.notifyDataSetChanged();
}
}
});
}
class NewsAdapter extends RecyclerView.Adapter {
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return new ViewHolder(LayoutInflater.from(BaseApplication.getContext()).inflate(R.layout.item_news, parent, false));
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
holder.tv.setText(newsDatasValue.get(position).getTitle());
}
@Override
public int getItemCount() {
return newsDatasValue.size();
}
public class ViewHolder extends RecyclerView.ViewHolder {
TextView tv;
public ViewHolder(View itemView) {
super(itemView);
tv = (TextView) itemView.findViewById(R.id.item_news_tv);
}
}
}
//fragment所在页卡序号
public void setPosition(int position){
this.position = position;
}
} 还是很简单的，主要就是要注意定义fragment页卡所在序号用来区分fragment。
三、总结
其实像ViewPager+Fragment+ViewPager+Fragment这种不像知识点，更像是思路，当有这个需求的时候，又没做过，可以参考一下这个思路，然后根据自身情况再修改，有想法的人应该会看着博客写，出来的东西却完全不一样，如果真的用到项目上，肯定要提取Adapter，甚至写出各种不同的Adapter基类，还要抽离网络框架，界面设计的更美，要考虑适配问题，可能会做很多性能优化，复用、压缩、缓存。。。。。。线程要注意线程池和信息传递这些，页面多了也会有很多问题，譬如上边说的fragment多出白色区域，还有newsPosition这样的传值问题，不过代码的乐趣就是这些吧，头脑风暴，陷入进去真的会上瘾，根本停不下来。
这是我CSDN有排名后的第一篇博客（150万+......），现在我确实是个菜鸡，但希望以后能快速的成长，也能写出更好的博客，同时也祝福看到这篇博客的码友们，工作顺利，跳槽的都能找到更好的平台，祝Android行业越来越好。不要如我现在，java后端、web前端都是核心技术人员，唯独移动开发像个打杂的，现在妹子都不联系了就想找个好平台【害羞......】