【小白做项目-02】
本文为Karthus77原创,转载请说明
一、项目需求
- 仿照“知乎日报APP”设计
- 轮播图不做要求
- 评论楼中楼不做要求
- 用户系统不做要求
二、效果展示
三、项目分析
仿照知乎日报这个项目,是一个较为复杂的APP项目
该项目的核心是“数据获取”到“数据展示”的一个过程
核心知识点如下:
- Recyclerview多item
- Recyclview使用
- Json数据解析
- webview使用
- smartrefresh的使用
- 网络访问获取数据
- glide工具加载图片
四、实战操作
1.项目框架搭建
1.1 Activity搭建
该项目需要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