5. 首页模块（三）之首页

上一节对欢迎模块进行了综述(可参见 2. 欢迎模块 进行了解)，接下来将从首页模块开始详细介绍：

• 首页模块（一）之搭建服务器
• 首页模块（二）之工具类
• 首页模块（三）之首页
• [首页模块（四）之新闻详情]
• [首页模块（五）之Python学科]

知识点：

• 掌握首页模块的开发，独立制作首页模块
• 制作水平滑动广告栏
• 第三方下拉刷新
• 从服务器获取数据
• ViewPager控件的使用
• 事件捕获
• 开启异步线程访问网络

首页：

任务综述：

在项目开发中，程序在经过欢迎界面后直接进入主界面，也就是首页界面。首页界面分为上下两部分，上部分通过ViewPager与Fragment实现滑动广告展示，下部分通过一个自定义的WrapRecyclerView控件展示新闻推荐信息。由于项目使用的是Tomcat搭建的一个小型服务器，因此首页界面的所有数据必须存放在Tomcat根目录的JSON文件中，并通过JSON文件获取数据填充界面。

1. 水平滑动广告栏界面

任务分析：
水平滑动广告栏主要用于广告信息或者活动信息，由ViewPager控件、TextView控件以及一个自定义的线性布局ViewPagerIndicator组成。

任务实施：
（1）创建水平滑动广告栏界面：main_adbanner.xml。
（2）放置界面控件。一个ViewPager控件用于显示左右滑动的广告图片，由于广告栏左下角的标题与右下角的小圆点都随着图片的滑动而发生变化，因此需要一个TextView控件与一个自定义的ViewPagerIndicator控件分别显示标题和小圆点。

main_adbanner.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/adbanner_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <android.support.v4.view.ViewPager
        android:id="@+id/slidingAdvertBanner"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginBottom="1dp"
        android:background="@android:color/black"
        android:gravity="center" />
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#82000000">
        <TextView
            android:id="@+id/tv_advert_title"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_weight="1"
            android:ellipsize="end"
            android:gravity="left|center_vertical"
            android:padding="4dp"
            android:singleLine="true"
            android:textColor="@android:color/white"
            android:textSize="14sp" />
        <com.itheima.topline.view.ViewPagerIndicator
            android:id="@+id/advert_indicator"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_gravity="center_vertical"
            android:layout_marginRight="@dimen/activity_horizontal_margin"
            android:gravity="right|center_vertical"
            android:padding="4dp"/>
    </LinearLayout>
</RelativeLayout>

注意：
在上述文件中的Viewpager控件中，需要写出ViewPager的全路径。

（3）自定义ViewPagerIndicator控件。在实际开发中，很多时候Android自带的控件都不能满足用户的需求，此时需要一个控件。在此项目中，水平滑动广告栏底部的小圆点控件就需要通过自定义控件实现，因此可在com.XXXX.newsdemo下创建一个view包，然后在view包中创建一个ViewPagerIndicator类并继承LinearLayout类。

ViewPagerIndicator.java

public class ViewPagerIndicator extends LinearLayout {
    private int mCount; //小圆点的个数
    private int mIndex; //当前小圆点的位置
    private Context context;
    public ViewPagerIndicator(Context context) {
        this(context, null);
    }
    public ViewPagerIndicator(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
    }
    /**
     * 设置滑动到当前小圆点时其他圆点的位置
     */
    public void setCurrentPostion(int currentIndex) {
        mIndex = currentIndex; //当前小圆点
        this.removeAllViews(); //移除界面上存在的view
        int pex = context.getResources().getDimensionPixelSize(
                R.dimen.view_indicator_padding);
        for (int i = 0; i < this.mCount; i++) {
            //创建一个ImageView控件来放置小圆点
            ImageView imageView = new ImageView(context);
            if (mIndex == i) { //滑动到的当前界面
                //设置小圆点的图片为白色图片
                imageView.setImageResource(R.drawable.indicator_on);
            }else {
                //设置小圆点的图片为灰色图片
                imageView.setImageResource(R.drawable.indicator_off);
            }
            imageView.setPadding(pex, 0, pex, 0); //设置小圆点图片的上下左右的padding
            this.addView(imageView); //把此小圆点添加到自定义的ViewPagerIndicator控件上
        }
    }
    /**
     * 设置小圆点的数目
     */
    public void setCount(int count) {
        this.mCount = count;
    }
}

（4）修改dimens.xml文件。由于在ViewPagerIndicator类中使用到view_indicator_padding设置界面上圆点之间的距离，因此在res/values/dimens.xml中修改。

    <dimen name="view_indicator_padding">5dp</dimen>

（5）创建indicator_on.xml 和 indicator_off.xml文件。在自定义控件ViewPagerIndicator中分别有一个白色和一个灰色的小圆点图片，这两张图片是通过在drawable文件夹下分别创建indicator_on.xml 和 indicator_off.xml两个文件来实现的。

indicator_on.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size android:height="6dp" android:width="6dp"/>
    <solid android:color="#E9E9E9"/>
</shape>

indicator_off.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size android:height="6dp" android:width="6dp"/>
    <solid android:color="#BCBCBC"/>
</shape>

在上述代码中，shape用来设定形状，可以用于选择器和布局，shape默认为矩形（rectangle），可设置为椭圆形（oval）、线性形状（line）、环形（ring）；size表示大小，可设置宽和高；soild表示内部填充色。

2. 首页界面

任务分析：
首页界面主要由水平滑动广告栏、四个学科按钮以及一个新闻列表组成，广告栏主要用于展示广告或活动信息，四个学科按钮分别是Python学科、Java学科、PHP学科、Android学科。新闻列表主要用于展示新闻信息。

任务实施：
（1）创建首页界面。由于首页界面分为两部分，一部分是滑动广告栏与学科按钮，另一部分是新闻列表，因此在res/layout下创建两个布局文件fragment_home.xml 与 head_view.xml 文件中，通过标签将main_adbanner.xml（广告栏）引入。

（2）导入界面图片（4个）。

（3）引入第三方下拉刷新。在实际开发者中，很多时候都需要展示一些比较炫酷的功能效果，如果在程序中直接开发，则代码量会大幅增加，也会损毁大量的开发时间，因此项目中的下拉刷新功能是通过引入第三方下拉刷新框架实现的。

显示效果如下：

在AS中，选择File/New/Import Module选项把下拉刷新的框架导入项目，选择项目后右击选择Open Module Settings/Dependencies/“+”/Module Dependency选项，把下拉刷新加入主项目。

（4）在fragment_home.xml文件中放置界面控件。
一个自定义的PullToRefreshView控件，用于显示下拉刷新；
一个自定义的WrapRecyelerView控件，用于显示新闻列表信息。

fragment_home.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"
    android:orientation="vertical">
    <include layout="@layout/main_title_bar" />
    <com.itheima.PullToRefreshView
        android:id="@+id/pull_to_refresh"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#f6f6f6">
        <com.itheima.topline.view.WrapRecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:divider="@null"
            android:dividerHeight="0dp"
            android:fadingEdge="none" />
    </com.itheima.PullToRefreshView>
</LinearLayout>

（5）在head_view.xml文件中放置界面控件。
4个ImageView控件，用于显示4个学科所对应的控件；
4个Textiew控件，用于显示四个学科所对应的文字。

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="wrap_content"
    android:background="@android:color/white"
    android:orientation="vertical">
    <include layout="@layout/main_adbanner" />
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:orientation="horizontal">
        <LinearLayout
            android:id="@+id/ll_python"
            android:layout_width="0dp"
            android:layout_height="wrap_content"