仿今日头条和qq侧滑和智慧北京的小项目 2

仿今日头条和QQ侧滑和智慧北京的小项目2

本项目图片素材均来自今日头条，QQ侧滑没有使用Android原生的NavigationDrawer，而使用的是第三方SlidingMenu，原因是这个控件暂时没有仔细研究（后期会研究并写demo），项目整体可以说是使用了一个Activity加多个Fragment，全部采用沉寂式。

前文摘要：仿今日头条和qq侧滑和智慧北京的小项目1

BasePager（新闻中心页面的基类，抽取共性方法）

初始化了全局上下文对象mActivity
初始化initView对象
初始化了initData方法，方便子类去实现

NewsCenterPager(主页面的新闻中心页面)

本项目主要实现新闻中心页面，继承自BasePager。



新闻中心页面的数据是从网络获取（从服务器获取数据，用的是xUtils）

private void getFromDataNet() {
HttpUtils httpUtils = new HttpUtils();
httpUtils.send(HttpRequest.HttpMethod.GET, ConstantUtils.NEWSCENTERURL, new RequestCallBack<Object>() {
@Override
public void onSuccess(ResponseInfo<Object> responseInfo) {
Log.d(TAG, "onSuccess: "+responseInfo.result);
//保存本地缓存
boolean putString = CacheUtils.putString(mActivity, ConstantUtils.NEWSCENTERURL, (String) responseInfo.result);
if (putString) {
Log.d(TAG, "onSuccess: "+"数据保存成功");
}
//解析Json数据
resolutionJson((String)responseInfo.result);
}

@Override
public void onFailure(HttpException e, String s) {
Log.d(TAG, "onFailure: ");
}
});
}

获取到json数据后解析

/**
* 用于解析json数据
* @param result
*/
private void resolutionJson(String result) {
Gson gson = new Gson();
NewsCenterBean newsCenterBean = gson.fromJson(result, NewsCenterBean.class);
leftMenuList = newsCenterBean.getData();

//当左侧菜单获取到数据，并设置后，需要初始化对应的页签
leftMenuBasePagerlist = new ArrayList<>();
//向集合中添加数据
NewsCenterBean.NewsCenterMenu newsCenterMenu = leftMenuList.get(0);
leftMenuBasePagerlist.add(new NewsPager(mActivity,newsCenterMenu));
leftMenuBasePagerlist.add(new ZhuanTiPager(mActivity));
leftMenuBasePagerlist.add(new PhotosPager(mActivity));
leftMenuBasePagerlist.add(new HudongPager(mActivity));

//把获取到的左侧菜单数据传给LeftMenuFragment(先发送数据)
sendLeftMenuFormlist(leftMenuList);

}

把解析结果发送给左侧侧栏了，让左侧侧拉栏初始化菜单（就需要获取到LeftMenuFragment对象，在MainActivity中提供一个方法）

MainActivity中
/**
* 用于获取子Fragment对象通过byTag
* @param byTag
* @return
*/
public Fragment getFragmentForByTag(String byTag){
return fm.findFragmentByTag(byTag);
}

NewsCenterPager 中
/**
* 把解析结果发送给左侧侧拉栏
* @param leftMenuList
*/
private void sendLeftMenuFormlist(List<NewsCenterBean.NewsCenterMenu> leftMenuList) {
//获取到LeftMenuFragment的对象
MainActivity newsCenterPagerActivity = (MainActivity) this.mActivity;
LeftMenuFragment leftMenuFragment = (LeftMenuFragment) newsCenterPagerActivity.getFragmentForByTag(newsCenterPagerActivity.LEFTMENUFRAGMENT);
leftMenuFragment.getLeftMenuData(leftMenuList);
}

LeftMenuFragment（接受数据，初始化菜单）

数据来自新闻中心页面发过来的。

初始化左侧菜单

/**
* 从NewsCenterPager那里获取到左侧菜单数据
* @param newsCenterMenuList
*/
public void getLeftMenuData(List<NewsCenterBean.NewsCenterMenu> newsCenterMenuList) {
leftMenList = newsCenterMenuList;
leftMenuAdapter = new LeftMenuAdapter();
//设置默认标签
currentItemEnable = 0;
switchNewsCenterPager(0);

listView.setAdapter(leftMenuAdapter);
listView.setOnItemClickListener(new listViewOnItemClickListener());
}

通过左侧菜单栏去切换NewsCenterPager的子页面

LeftMenuFragment 中
/**
* 切换新闻中心的详情页面（就需要拿到新闻中心页面的对象）
* @param position
*/
private void switchNewsCenterPager(int position) {
ContentFragment cf = (ContentFragment) ((MainActivity) mActivity).getFragmentForByTag(((MainActivity) mActivity).CONTENTFRAGMENT);
//集合中的第一个页面就是新闻中心页面
NewsCenterPager ncp = (NewsCenterPager) cf.basePagerList.get(1);
ncp.switchNewsCenterChildrenPager(position);
}

NewsCenterPager中 需要提供一个方法，来切换页面根据传过来的position

/**
* 提供一个方法给左侧菜单切换页面
* @param position
*/
public void switchNewsCenterChildrenPager(int position) {
//改变title
String title = leftMenuList.get(position).getTitle();
mTextViewTitle.setText(title);
LeftMenuBasePager leftMenuBasePager = leftMenuBasePagerlist.get(position);
View view = leftMenuBasePager.initView();
//在添加view之前移除已经存在的view
mFrameLayoutContent.removeAllViews();
mFrameLayoutContent.addView(view);
//初始化数据
leftMenuBasePager.initData();
}

NewsPager（左侧菜单选项1对应的页面）

通过LeftMenuFragment菜单选项，传递给NewsCenterPager，NewsCenterPager来切换到NewsPager页面。

在构造方法中接受NewsCenterPager传过来的json数据

public NewsPager(Activity mActivity, NewsCenterBean.NewsCenterMenu newsCenterMenu) {
super(mActivity);
//这个集合就是子页面对应的标签页
newsMenuTabList = newsCenterMenu.getChildren();
}

初始化View

上面Tab使用的是开源项目viewpagerindicator

<com.viewpagerindicator.TabPageIndicator
android:id="@+id/indicator"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
/>
下面是Viewpager
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>

初始化数据，给Viewpager设置数据

public void initData() {
super.initData();
//给viewpager设置数据之前先准备数据
tabPagerList = new ArrayList<>();
for (int i = 0; i < newsMenuTabList.size(); i++) {
tabPagerList.add(new TabPager(mActivity, newsMenuTabList.get(i)));
}

Log.d(TAG, "initData: " + "新闻页面数据初始化了");
LeftMenuPagerAdapter leftMenuPagerAdapter = new LeftMenuPagerAdapter();
pager.setAdapter(leftMenuPagerAdapter);
//给indicator设置数据
indicator.setViewPager(pager);
}

TabPageIndicator数据来自Viewpager，Adapter中的getPageTitle方法

class LeftMenuPagerAdapter extends PagerAdapter {
//给indicator设置数据
@Override
public CharSequence getPageTitle(int position) {
return newsMenuTabList.get(position).getTitle();
}

未完待续……

仿今日头条和qq侧滑和智慧北京的小项目 3

关于作者

- 个人主页：Hsia

- Email：xiaweifeng@live.cn

- 项目地址:https://github.com/swordman20/Zhbj