仿知乎日报第六篇：为MainFragement加载数据

栏目：综合技术时间：2016-10-04 11:31:23

1.前面讲了，MainFragment的布局就是1个ViewPager，而ViewPager的1个个页面就是首页，平常心理学，用户推荐日报，电影日报，不准无聊，设计日报，大公司日报，财经日报，互联网安全，开始游戏，音乐日报，动漫日报，体育日报这13个页面组成。

所以呢，接下来我们要创建这13个页面，大致思路就是将这13个页面共同的内容和逻辑抽取为BasePage，然后13个页面继承这个BasePage，在各自的Page里面写各自不同的东西。

那BasePage里面的结构仍然是MVC结构，initView()方法里面是加载布局，initData()方法里面是加载数据，initListener()方法里面是加载各种事件。其中我们会为这13个页面写1个共同的布局文件，然后在initView()里面加载出来。这个时候这个布局应当设为成员变量，然后用getRoot()方法得到这个布局。要这个布局有甚么用呢？我们前面说这13个页面是ViewPager的页面，在ViewPager的instantiateItem()方法里面需要加载13个页面的View。

1.说了这么多，首先我们要看看13个页面究竟是甚么样的。

注意：这13个页面布局除首页不1样，其他12个页面都是1样的，就像上面设计日报的布局1样。接下来我们用代码来说到底实现的

代码：（main_fragment_base_page.xml）

效果：

全部就是1个LinearLayout，上面是1个自己定义的ActionBar，就是1个RelativeLayout,里面有两个ImageButton，1个TextView。左侧的ImageButton是开关toggle，右侧的ImageButton是设置setting。这个setting的ImageButton只有首页有，其他页面都没有，所以设为看不见，home页面的时候再设为看得见。下面就是1个ListView。

这时候候你会好奇，中间的东西呢，我特地用半透明的黑色遮住了。这部份布局为何不直接放在ListView的上面呢？如果真的把这部份布局放在ListView上面，那末你的手指往上滑的时候，只有ListView的内容是往上面转动的，这部份布局是不动的，由于它不是ListView的1部份，怎样会随着ListView1起滚呢。所以我们把部份抽取出来，单独放在1个布局文件，再在代码中把布局加载成1个View，作为ListView的头，用ListView的addHeaderView()方法将头布局加载进来。

3.ListView的头布局文件（main_content_head_view.xml）

效果：

全部就是1个LinearLayout，上面是1个RelativeLayout，用黄色框起来的部份在首页是ViewPager，在其他页面是ImageView，大小都是1样，都是match父布局RelativeLayout。现在我们的需求就是ViewPager和ImageView位于相同的位置，只是在不同的页面1个显示1个不显示。怎样实现呢？很简单，只要将这两个布局都放在FrameLayout里面就能够FrameLayout会把他们叠放在1起，这个时候呢，只要在首页显示ViewPager，隐藏ImageView，在其他页面显示ImageView，隐藏ViewPager就能够了

蓝色框起来的部份也是这样，TextView和LinearLayout都放在FrameLayout里面，在首页显示TextView，隐藏LinearLayout，在其他页面显示LinearLayout，隐藏TextView。

首页的ViewPager的下脸部分会生成和ViewPager的页面数量相同的灰色的点，当滑倒相应的页面的时候，相应位置的点会动态变成白色。说起来好像不好理解，其实大部份人在实际使用App的时候应当或多或少地遇到过，联系下实际就能够了。

4.还有1个地方需要特别讲授1下首页的ViewPager又不是正常的ViewPager，而是1个自定义的InterceptViewPage。我们要继承1下ViewPager，对它进行1点修改。

代码：

public class InterceptViewPager extends ViewPager { private float mDownX; private float mDownY; public InterceptViewPager(Context context, AttributeSet attrs){ super(context, attrs); // TODO自动生成的构造函数存根 } public InterceptViewPager(Context context) { super(context); // TODO自动生成的构造函数存根 } @Override public boolean dispatchTouchEvent(MotionEvent ev) { switch (ev.getAction()) { case MotionEvent.ACTION_DOWN: mDownX = ev.getX(); mDownY = ev.getY(); break; case MotionEvent.ACTION_MOVE: float moveX = ev.getX(); float moveY = ev.getY(); float dX = moveX - mDownX; float dY = moveY - mDownY; // <span style="white-space:pre"> </span> 如果是横向滑动 if (Math.abs(dX) > Math.abs(dY)) { // 要求父控件不拦截Touch事件，自己来处理 getParent().requestDisallowInterceptTouchEvent(true); } break; default: break; } return super.dispatchTouchEvent(ev); } }

其实代码很简单，就是当横向滑动的时候，滑动事件让父组件不要拦截，由自己来处理。如果不做这样1个小修改的话，你会发现从左往右滑的时候没有问题，1旦从右往左滑的时候会把菜单区域滑出来，由于父组件也有滑动事件。

3.我们布局都准备好了，现在要回到BasePage页面把它们加载进来（BasePage.java）

public abstract class BasePage { // 权限为protected，则所有的子类可以直接使用 protected ImageButton ibLogin; protected ImageButton ibSetting; protected ImageButton ibToggleButton; protected TextView tvTitle; protected ListView lvNews; protected ViewPager vpLunboPic; protected LinearLayout llLunboPoints; protected TextView tvLunboTitle; protected MainActivity mainActivity; protected TextView tvHomeTitle; protected LinearLayout llEditorPics; protected LinearLayout llEditors; private View mBaseView; protected FrameLayout mFlLunboPoints; protected ImageView ivPic; public BasePage(MainActivity mainActivity) { // 把上下文传进来，即MainActivity，MainActivity是Activity，也是Context的子类 this.mainActivity = mainActivity; // 加载布局 initView(); // 初始化事件 initListener(); } /** * 初始化事件 */ protected void initListener() { // 开关1点击，则拿到SlidingMenu，用toggle方法控制菜单区域的开关 ibToggleButton.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { mainActivity.getSlidingMenu().toggle(); } }); // 设置按钮1点击，则进入设置的Activity ibSetting.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(mainActivity,SettingActivity.class); mainActivity.startActivity(intent); } }); } /** * * @param themeDailyNumber主题日报的序号 * MainFragment中的ViewPager的instantiateItem方法中调用该方法为布局加载数据 */ public void initData(String themeDailyNumber){ }; protected void initView() { // 加载布局 mBaseView = View.inflate(mainActivity, R.layout.main_fragment_base_page, null); ibSetting = (ImageButton) mBaseView.findViewById(R.id.ib_base_setting); tvTitle = (TextView) mBaseView.findViewById(R.id.tv_base_title); lvNews = (ListView) mBaseView.findViewById(R.id.lv_main_content_news); ibToggleButton = (ImageButton) mBaseView .findViewById(R.id.ib_base_toggle); /* vpLunboPic= (ViewPager) mBaseView .findViewById(R.id.vp_main_content_luobopic); llLunboPoints = (LinearLayout) mBaseView .findViewById(R.id.ll_main_content_lunbo_points); tvLunboTitle = (TextView) mBaseView .findViewById(R.id.tv_main_content_news_title); tvHomeTitle = (TextView) mBaseView .findViewById(R.id.tv_main_content_home_title); llEditorPics = (LinearLayout) mBaseView .findViewById(R.id.ll_main_content_editor_pics); llEditors = (LinearLayout) mBaseView .findViewById(R.id.ll_main_content_editors);*/ // 为ListView加载头布局 initHeadView(); } private void initHeadView() { // 加载头布局，并拿出里面的组件 View headView = View.inflate(mainActivity, R.layout.main_content_head_view, null); vpLunboPic = (ViewPager) headView .findViewById(R.id.vp_main_content_luobopic); ivPic = (ImageView) headView.findViewById(R.id.iv_main_content_pic); llLunboPoints = (LinearLayout) headView .findViewById(R.id.ll_main_content_lunbo_points); tvLunboTitle = (TextView) headView .findViewById(R.id.tv_main_content_news_title); tvHomeTitle = (TextView) headView .findViewById(R.id.tv_main_content_home_title); llEditorPics = (LinearLayout) headView .findViewById(R.id.ll_main_content_editor_pics); llEditors = (LinearLayout) headView .findViewById(R.id.ll_main_content_editors); mFlLunboPoints = (FrameLayout) headView.findViewById(R.id.fl_main_content_lunbo_points); // 把头布局加进ListView中 lvNews.addHeaderView(headView); } /** * @return布局View，MainFragment中的ViewPager的instantiateItem调用这个方法， * 可以把页面的布局显示在ViewPager上面 */ public View getRoot() { return mBaseView; } }

4. 创建首页，平常心理学，用户推荐日报，电影日报，不准无聊，设计日报，大公司日报，财经日报，互联网安全，开始游戏，音乐日报，动漫日报，体育日报这13个页面。

所有页面都继承BasePage,并重写initData()方法，super.initData(themeDailyNumber)履行父类的initData()方法中的所有逻辑，然后再履行自己的方法

以设计日报DesignPage为例：

public class DesignPage extends ThemeDailyBasePage { public DesignPage(MainActivity mainActivity) { super(mainActivity); // TODO自动生成的构造函数存根 } @Override public void initData(String themeDailyNumber) { tvTitle.setText("设计日报"); super.initData(themeDailyNumber); } }

其他的页面都是这样，页面就加载好了，怎样为各个页面加载数据后面会讲。

5.13个页面终究创建好了，现在我们要把他们作为数据源添加到ViewPager里面去

public class MainFragment extends BaseFragment { // 13个页面的集合 private List<BasePage> allPages = new ArrayList<BasePage>(); private MyViewPager mViewPager; // 12个主题日报的id，例如平常心理学的id为13，用户推荐日报对应的id为12， // 后面获得相应的主题日报的url为http://news-at.zhihu.com/api/4/theme/ + id // 例如要拿到平常心理学日报的数据url为http://news-at.zhihu.com/api/4/theme/13 private String[] themeDailyNumber = { "13", "12", "3", "11", "4", "5", "6", "10", "2", "7", "9", "8" }; private int selectedPosition = 0; @Override protected View initView() { // 加载布局 View root = View.inflate(mainActivity, R.layout.main_fragment_base, null); // 拿到布局中的ViewPager组件 mViewPager = (MyViewPager) root.findViewById(R.id.vp_base_fragment); return root; } @Override protected void initData() { super.initData(); // 创建13个页面对象，作为ViewPager的数据源 HomeBasePage homeBasePage = new HomeBasePage(mainActivity); DailyPsychologyPage dailyPsychologyPage = newDailyPsychologyPage(mainActivity); UserRecommendPage userRecommendPage = new UserRecommendPage(mainActivity); MoviePage moviePage = new MoviePage(mainActivity); NoBoringPage noBoringPage = new NoBoringPage(mainActivity); DesignPage designPage = new DesignPage(mainActivity); BigCompanyPage bigCompanyPage = new BigCompanyPage(mainActivity); FinancePage financePage = new FinancePage(mainActivity); InternetPage internetPage = new InternetPage(mainActivity); GamePage gamePage = new GamePage(mainActivity); MusicPage musicPage = new MusicPage(mainActivity); CartoonPage cartoonPage = new CartoonPage(mainActivity); SportsPage sportsPage = new SportsPage(mainActivity); // 13个页面加进集合 allPages.add(homeBasePage); allPages.add(dailyPsychologyPage); allPages.add(userRecommendPage); allPages.add(moviePage); allPages.add(noBoringPage); allPages.add(designPage); allPages.add(bigCompanyPage); allPages.add(financePage); allPages.add(internetPage); allPages.add(gamePage); allPages.add(musicPage); allPages.add(cartoonPage); allPages.add(sportsPage); // 为ViewPager设置Adapter MyAdapter myAdapter = new MyAdapter(); mViewPager.setAdapter(myAdapter); } // 根据传进来的位置编号在13个页面之间切换 public void switchPage(int position){ // selectedPosition成员变量记录传进来的编号 this.selectedPosition = position; // 这个方法会调用Adapter中的getView方法 mViewPager.setCurrentItem(position); } private class MyAdapter extends PagerAdapter{ @Override public int getCount() { // TODO自动生成的方法存根 return allPages.size(); } @Override public boolean isViewFromObject(View arg0, Object arg1) { // TODO自动生成的方法存根 return arg0 == arg1; } @Override public void destroyItem(ViewGroup container, int position, Objectobject) { // TODO自动生成的方法存根 container.removeView((View) object); } @Override public Object instantiateItem(ViewGroup container, int position) { // 根据position拿到相应的页面 BasePage selectedPage = allPages.get(position); // 拿到相应页面的View，加到容器中 container.addView(selectedPage.getRoot()); // 在这里调用initData()方法加载13个页面的数据。 // 如果selectedPosition为0，则为首页 // 如果selectedPosition不为0，则是其他12个主题日报，把对应的id传进去 if (selectedPosition != 0) { selectedPage.initData(themeDailyNumber[selectedPosition ⑴]); }else { selectedPage.initData(""); } return selectedPage.getRoot(); } } }

上面的进程也容易：

1）创建13页面的对象，加进集合中作为ViewPager的数据源

2）用数据源为ViewPager创建Adapter

3）为ViewPager设置Adapter

你们只需要看懂上面进程的代码就能够了，其他的后面会讲到

------分隔线----------------------------

上一篇 项目和UCenter如何整合

下一篇 大数据系列修炼-Scala课程40

------分隔线----------------------------