Android 实践：做一款新闻 APP

跟代码相关的工作，大多唯手熟尔，所以这里花了点时间做了款简易版的新闻 APP，虽然都是些基础的内容，不过还是可以加深自己对部分代码的理解。至少，可以加深自己的记忆

---

步骤

---

1. 依赖库
2. 网络请求
3. 网络解析
4. 界面布局
5. 最后
6. 运行界面
7. 运行GIF
8. 完整代码下载地址（github）

---

依赖库

---

过程中需要用到一些开源依赖库文件，先在 build.grade 中声明：

    compile 'com.google.code.gson:gson:2.8.0'       //网络解析
    compile 'com.squareup.okhttp3:okhttp:3.7.0'     //网络请求
    compile 'com.github.bumptech.glide:glide:3.8.0' //图片加载
    compile 'com.android.support:design:24.2.1'     //Material Design中用到的依赖库
    compile 'de.hdodenhof:circleimageview:2.1.0'    //显示圆形图片

---

网络请求

---

在包下创建一个文件夹 util 用来存放工具类，创建文件 HttpUtil.class 用来请求数据：

public class HttpUtil {
    public static void sendOkHttpRequest(String address, okhttp3.Callback callback){
        OkHttpClient client = new OkHttpClient();
        Request request = new Request.Builder()
                .url(address).build();
        client.newCall(request).enqueue(callback);
    }
}

这里用到的是 okhttp3.Callback 的回调接口，结果会返回到 callback 的回调函数中，后面会进行处理

---

网络解析

---

我们先从数据解析开始，毕竟这才是这个小项目的重点。这次项目使用的数据来源是天行数据（http://www.tianapi.com/ ）的新闻资讯 API ，先看 API 的说明：

可以看到返回数据为 JSON, 默认返回 10 条参数。请求地址为：

其中， APIKEY 需要用个人的 API KEY 代替，可以在个人中心中看到，其他的请求地址也是大同小异

JSON 返回示例：

还有错误返回码，用来判断返回数据的异常情况：

根据 gson 的返回示例，我们可以写出对应的实体类文件，通过 gson 将返回数据转化为对应的类型。先创建一个 gson 文件夹存放实体类文件。

在 gson 文件夹下创建 New.class 文件：

public class News {
    @SerializedName("ctime")
    public String time;

    public String title;

    public String description;

    public String picUrl;

    public String url;

}

创建 NewsList.class 文件：

public class NewsList {

    public int code;

    public String msg;

    @SerializedName("newslist")
    public List newsList ;

}

至此，我们就已经创建好了与返回数据对应的实体类。

在 util 文件夹下创建文件 Utility.class 文件：

public class Utility {
    public static NewsList parseJsonWithGson(final String requestText){
        Gson gson = new Gson();
        return gson.fromJson(requestText, NewsList.class);
    }

}

将请求得到的数据解析为 NewList 实体类对象。现在网络请求和解析都准备好了，就开始界面文件了

---

界面布局

---

修改 values 目录下的 styles.xml 文件：

<resources>
    
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        -- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary
        "colorPrimaryDark">@color/colorPrimary
        "colorAccent">@color/colorAccent
    style>

resources>

修改通知栏颜色和标题栏颜色一样，是处于视觉统一的原因，也可以不修改（非必须）

---

主要采用的是 Material Design 的设计，整体布局采用的是滑动菜单，主界面内容为 ToolBar 和 ListView（这里为了方便，就直接使用）,侧边栏内容为 NavigationView

---

主界面：
因为要用 ToolBar 替代 ActionBar, 我们先修改 values 下面的 styles 文件，修改主题为：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

在layout 下创建 nav_header 文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:background="@color/colorPrimary"
    android:padding="10dp">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/icon_image"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_centerInParent="true"
        android:src="@drawable/nav_icon" />

    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="https://github.com/lentitude"
        android:textColor="@color/color_White"
        android:textSize="14sp" />


    <TextView
        android:id="@+id/mail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/username"
        android:text="lentitude"
        android:textColor="@color/color_White"
        android:textSize="14sp" />

RelativeLayout>

这里在头部文件中放置了一个CircleImageView，两个 TextView,没有什么理解难度

---

在 res 目录下创建 menu 文件夹，新建 nav_menu.xml 文件：

version="1.0" encoding="utf-8"?>
"http://schemas.android.com/apk/res/android">
    "single">
        <item
            android:id="@+id/nav_society"
            android:title="社会新闻" />
        <item
            android:id="@+id/nav_county"
            android:title="国内新闻" />
        <item
            android:id="@+id/nav_internation"
            android:title="国际新闻" />
        <item
            android:id="@+id/nav_fun"
            android:title="娱乐新闻" />
        <item
            android:id="@+id/nav_sport"
            android:title="体育新闻" />
        <item
            android:id="@+id/nav_nba"
            android:title="NBA新闻" />
        <item
            android:id="@+id/nav_football"
            android:title="足球新闻" />
        <item
            android:id="@+id/nav_technology"
            android:title="科技新闻" />
        <item
            android:id="@+id/nav_work"
            android:title="创业新闻" />
        <item
            android:id="@+id/nav_apple"
            android:title="苹果新闻" />
        <item
            android:id="@+id/nav_war"
            android:title="军事新闻" />
        <item
            android:id="@+id/nav_internet"
            android:title="移动互联" />
        <item
            android:id="@+id/nav_travel"
            android:title="旅游咨询" />
        <item
            android:id="@+id/nav_health"
            android:title="健康知识" />
        <item
            android:id="@+id/nav_strange"
            android:title="奇闻异事" />
        <item
            android:id="@+id/nav_looker"
            android:title="美女图片" />
        <item
            android:id="@+id/nav_vr"
            android:title="VR科技" />
        <item
            android:id="@+id/nav_it"
            android:title="IT资讯" />


    

这里创建了若干个 ITEM 子项，只有 title，没有 icon，大家可以自行放置

主界面 activity_main.xml：

"1.0" encoding="utf-8"?>
.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    .support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        .support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            .support.v7.widget.Toolbar
                android:id="@+id/tool_bar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:contentInsetStart="0dp"
                app:titleTextColor="@color/color_White"
                android:background="@color/colorPrimary"
                />


        .support.design.widget.AppBarLayout>


        .support.v4.widget.SwipeRefreshLayout
            android:id="@+id/swipe_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            "@+id/list_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:divider="@color/color_Background"
                android:dividerHeight="1dp"

                />


        .support.v4.widget.SwipeRefreshLayout>

    .support.design.widget.CoordinatorLayout>


    .support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu"
        />


.support.v4.widget.DrawerLayout>

因为是一步到位，所以……大家最好之前用过使用过相同的布局设计（比如：第一行代码）

DrawerLayout 中有两个直接子布局文件：
1. CoordinatorLayout：一种 FrameLayout, 作为显示主界面内容的最外层布局
2. NavigationView：作为显示侧边栏的最外层布局，不过已经封装好了，可以直接通过 app:headerLayout 和 app:menu 属性引用之前我们已经写好的 头部和菜单布局文件

CoordinatorLayout 中有两个直接子布局文件：
1. AppBarLayout ：通过 AppBarLayout 属性，可以将 ToolBar 和 ListView 分隔开，可以对滚动事件进行响应，实现 Material 效果
2. SwipeRefreshLayout：用来刷新 ListView 中的内容

创建 list_view_item.xml 文件，设计 ListView 的子项布局：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="@color/color_White">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp">

        <ImageView
            android:id="@+id/title_pic"
            android:layout_width="80dp"
            android:layout_height="60dp"
            android:layout_centerVertical="true"
            android:layout_alignParentRight="true"
            android:scaleType="centerCrop"/>

        <TextView
            android:id="@+id/title_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16sp"
            android:layout_marginRight="10dp"
            android:layout_alignTop="@+id/title_pic"
            android:layout_alignParentLeft="true"
            android:layout_toLeftOf="@+id/title_pic"
            />

        <TextView
            android:id="@+id/descr_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="8sp"
            android:layout_marginRight="10dp"
            android:layout_alignBottom="@+id/title_pic"
            android:layout_alignParentLeft="true"
            />

    RelativeLayout>


RelativeLayout>

子项布局内包含 3 个控件，ImageView 显示返回的图片，TextView 显示返回的标题和出处

创建一个 Title.class类：

public class Title {
    private String title;
    private String descr;
    private String imageUrl;
    private String uri;

    public Title(String title,String descr, String imageUrl, String uri){
        this.title = title;
        this.imageUrl = imageUrl;
        this.descr = descr;
        this.uri = uri;
    }

    public String getTitle() {
        return title;
    }

    public String getImageUrl() {
        return imageUrl;
    }

    public String getDescr() {
        return descr;
    }

    public String getUri() {
        return uri;
    }
}

这里之所以除了 标题，出处，图片显示在 ListViw 中，uri 传入另一个布局，显示内容文件

接下来就是 TitleAdapter.class

public class TitleAdapter extends ArrayAdapter<Title> {
    private int resourceId;

    public TitleAdapter(@NonNull Context context, @LayoutRes int resource, @NonNull List