【小white做项目-02(仿知乎日报APP)】(联网,webview,Recyclerview多item,Json解析,刷新加载）手把手教你Android实战

【小白做项目-02】

本文为Karthus77原创，转载请说明

一、项目需求

1. 仿照“知乎日报APP”设计
2. 轮播图不做要求
3. 评论楼中楼不做要求
4. 用户系统不做要求

二、效果展示

三、项目分析

仿照知乎日报这个项目，是一个较为复杂的APP项目
该项目的核心是“数据获取”到“数据展示”的一个过程
核心知识点如下:

1. Recyclerview多item
2. Recyclview使用
3. Json数据解析
4. webview使用
5. smartrefresh的使用
6. 网络访问获取数据
7. glide工具加载图片

四、实战操作

1.项目框架搭建

1.1 Activity搭建

该项目需要3个活动页面

1. 主页面(展示新闻标题）
2. 内容页面(展示具体新闻内容)
3. 评论页面(展示用户评论)

1.2 添加网络访问权限

在AndroidManifest.xml文件中加入以下两行代码。
并在<application下方加入以下代码

 android:usesCleartextTraffic="true"

AndroidManifest是对应Android应用的一个配置文件，例如我在该文件中加入了联网许可，这个APP就可以联网。

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

1.3 添加依赖

首先,什么是依赖，为什么要去添加它呢？
简单的来说，依赖是一个程序，是一堆代码，这段程序或代码可以帮助我们解决很多问题。比如我们在写C语言程序是，要include头文件，头文件中就已经为我们写好了很多函数的定义。依赖就是如此，Android Studio内部没有实现的功能，我们以依赖方式添加，就可以实现依赖中的功能。
需要说明的是，依赖虽好，可不要频繁使用，因为依赖是别人写出来的，内部的实现功能你了解的并不清晰，并不理解，此种利弊，需要自己好好考量

在build.gradle中加入以下依赖（glide图片加载工具，smartrefresh刷新工具，recyclerview视图工具）

    implementation 'com.github.bumptech.glide:glide:4.11.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'
    implementation 'androidx.recyclerview:recyclerview:1.1.0'
    implementation 'com.scwang.smartrefresh:SmartRefreshLayout:1.1.2'
    implementation 'com.scwang.smartrefresh:SmartRefreshHeader:1.1.2'

2.UI界面搭建

2.1界面部分

由于UI界面参考“知乎日报APP”我们只需要模仿即可

我们只需要做出图片中红线包裹的UI即可

2.2状态栏透明效果设置

我们可以看到红框部分状态栏是图片背景的底色
设置方法，在xml文件对应的Activity的onCreate周期后面加入以下代码即可实现该效果

 if (Build.VERSION.SDK_INT >= 21){
   
            View decorView = getWindow().getDecorView();
            decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
            getWindow().setStatusBarColor(Color.TRANSPARENT);
        }

3.Recyclerview使用

什么是Recyclerview呢?它有什么用呢？
通俗的话，Recyclerview就是一个强大的控件，用于重复展示某一类东西。展示的每一个东西叫做item

如图中所示，每一个新闻就是Recyclerview中的一个item。同样在我们QQ聊天为微信聊天的地方，每一个联系人的小窗就是一个item，有了Recyclerview我们就可以做出知乎日报中新闻的效果了

3.1 Recyclerview工作原理

我们说Recyclerview是一个控件，也就是说它是类似与Textview，Editview的一种工具。我们在Activity中对Textview等可以进行一系列的操作。同样，我们在Activity对Recyclerview进行操作。

Recyclerview既然要以一个形式重复展示多组数据(item)，所以Recyclerview控件的本质功能就是“数据接收”到“数据展示”的一个工具。
那么如何进行数据的接受呢？数据的接受必须以一定的形式存贮起来，我们知道数据存贮的方式有数组，有链表，有结构体。而数据的展示就要用到Adapter适配器，即根据数据适配对应的展示形式。
Adapter能够将Recyclerview和Activity联系在一起，来展示信息。

3.2 布局文件中Recyclerview

在xml文件中加入Recyclerview

<com.scwang.smartrefresh.layout.SmartRefreshLayout
            android:id="@+id/refreshLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/recyclerView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>
        </com.scwang.smartrefresh.layout.SmartRefreshLayout>

由于需要刷新和加载功能，我们提前在Recyclerview中包裹我们的smartfresh

3.3 创建item布局

在 layout文件中新建一个layout XML file 文件用于写出每一条新闻文件
分析每一条新闻布局

可以看出每一个item有标题，小标题和图片三部分
这里给出该item的xml的代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/paper_item"
    android:layout_width="match_parent"
    android:layout_height="105dp">
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="100dp">


        <TextView
            android:id="@+id/titleArticle"
            android:layout_width="224sp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15sp"
            android:textSize="16sp"
            android:layout_marginTop="35sp"
            android:textStyle="bold"
            android:text="小事·怀孕，怕吗？"
            android:textColor="@color/black">

        </TextView>
        <TextView
            android:id="@+id/viceTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12sp"
            android:layout_below="@id/titleArticle"
            android:layout_marginTop="5sp"
            android:text="VOL·1244"
            android:layout_marginLeft="15sp">

        </TextView>
        <ImageView
            android:id="@+id/imageTitle"
            android:layout_width="75sp"
            android:layout_height="75sp"
            android:layout_alignParentRight="true"
            android:layout_marginTop="25sp"
            android:layout_marginRight="15sp">

        </ImageView>
        <TextView
            android:id="@+id/everyday"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/viceTitle"
            android:text=""
            android:textSize="10sp"
            android:layout_marginLeft="50sp"
            android:layout_marginTop="10sp">

        </TextView>


    </RelativeLayout>

</LinearLayout>

3.4 创建Adapter

新建Java Class 并命名为MyAd