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

主界面MainFragment加载布局

1、效果

  

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

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

2、代码

content_fragment.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:onClick="true"
    android:orientation="vertical">

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/refresh_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ListView
            android:id="@+id/lv_content_fragment"
            android:background="#ffffff"
            android:divider="@null"
            android:dividerHeight="0dp"
            android:cacheColorHint="@null"
            android:layout_width="match_parent"
            android:layout_height="match_parent"></ListView>

    </android.support.v4.widget.SwipeRefreshLayout>



</LinearLayout>

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

main_ content_ head_ view.xml

<?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">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="230dp">


        <ImageView
            android:id="@+id/iv_main_content_pic"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#696969"
            android:scaleType="fitXY" />

        <com.eyckwu.readbar.view.InterceptViewPager
            android:id="@+id/vp_main_content_pic"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        </com.eyckwu.readbar.view.InterceptViewPager>

        <TextView
            android:id="@+id/tv_main_content_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="63dp"
            android:text="知乎读吧"
            android:textColor="#ffffff"
            android:textSize="23dp" />

        <LinearLayout
            android:id="@+id/ll_main_content_point"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="16dp"
            android:orientation="horizontal">

        </LinearLayout>

    </RelativeLayout>

</LinearLayout>

上面的代码定义了一个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() {

    }

}