仿知乎日报(5)_主界面内容区加载布局

主界面MainFragment加载布局

1、效果

  

从上面两个图可以看出首页的布局是最上边一个TitleBar，接下来是一个ViewPager，ViewPager中有一个TextView，再下面是一个线性排列的小圆点，ViewPager下面是一个ListView。

日常心理学以及其他11个主题日报的布局是一样的。而从这13个布局还可以抽象出一个共用的布局，利用我们在前面在加载MenuFragment用到的，把ListView上面除去TitleBar部分作为一个HeadView添加到ListView中。而我们可以在headView中把用到的布局都加载上去，再根据不同的主题去判断要加载哪些控件。

2、代码

content_fragment.xml

上面的代码中最外层定义了一个线性布局，接着嵌套一个SwipeRefreshLayout布局，这个布局是MaterialUI推出的用于实现下滑刷新，值得注意的是这个这个控件只是实现刷新的效果，刷新的逻辑还是我们自己去实现的。

main_ content_ head_ view.xml

上面的代码定义了一个HeadView的布局，值得注意的是其中一个控件是笔者自定义的，关于为什么要去自定义一个控件后面再讲。

布局文件写好了接下来就要去代码加载出来了。

对于这13个页面，笔者采用的是切换Fragment的方式，当然也可以使用ViewPager来实现。

首先对对于这13个界面我们可以分成两组，即首页和12个主题页面，从主页和12个主题界面又可以抽出一些公共部分，因此笔者在fragment目录下，创建了一个BaseFragment.java用于初始化公共的部分

public abstract class BaseFragment extends Fragment {
    protected Context mContext;
    protected View view ;
    protected View headView;
    protected ListView lv_content_fragment;
    protected SwipeRefreshLayout refresh_layout;
    protected ImageView iv_main_content_pic;
    protected InterceptViewPager vp_main_content_pic;
    protected TextView tv_main_content_title;
    protected LinearLayout ll_main_content_point;
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mContext = getActivity();
    }

    @Override
    public void onStart() {
        super.onStart();
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        initView();
        return view;
    }

    protected void initView() {
        view = View.inflate(mContext, R.layout.content_fragment,null);
        lv_content_fragment = (ListView) view.findViewById(R.id.lv_content_fragment);
        refresh_layout = (SwipeRefreshLayout) view.findViewById(R.id.refresh_layout);

        headView = View.inflate(mContext, R.layout.main_content_head_view,null);
        iv_main_content_pic = (ImageView) headView.findViewById(R.id.iv_main_content_pic);
        vp_main_content_pic = (InterceptViewPager)headView.findViewById(R.id.vp_main_content_pic);
        tv_main_content_title = (TextView) headView.findViewById(R.id.tv_main_content_title);
        ll_main_content_point = (LinearLayout) headView.findViewById(R.id.ll_main_content_point);
        lv_content_fragment.addHeaderView(headView);


        initListener();
    }

    protected abstract void initListener();

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        initData();
    }

    protected abstract void initData();
}

接下来创建一个HomeFragment.java作为主页的fragment，然后创建一个otherfragment.java作为12个主题日报的基类，同时分别创建12个主题framgent继承于otherfragment.java。

HomeFragment.java
public class HomeFragment extends BaseFragment {

    ......


    @Override
    protected void initListener() {
        iv_main_content_pic.setVisibility(View.GONE);
        lv_content_fragment.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView parent, View view, int position, long id) {
                if(storiesBeans != null) {
                    String contentUrl = MyUrl.NEWSCONTENT + storiesBeans.get(position-1).getId();
                    turnToActivity(contentUrl);
                }
            }
        });
        refresh_layout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {

            }
        });
        vp_main_content_pic.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() {

    }

}