HeadLine仿今日头条项目实战博客—RecyclerView解析（含布局与控件详解）

NPC532
0 阅读11分钟

第一章 项目概述

1.1 项目背景

本项目是一个仿今日头条（HeadLine）的Android新闻列表应用，主要展示了如何利用RecyclerView来展示新闻列表数据。RecyclerView是Android开发中用于展示大量数据列表的控件，相比ListView具有更高的灵活性和更好的性能。

1.2 项目技术栈

  • 开发工具：Android Studio
  • 最低SDK版本：根据项目配置
  • 核心框架：RecyclerView（来自Android Support Library v7）
  • 布局系统：XML布局文件
  • 主要组件：Activity、Adapter、ViewHolder

第一章 项目概述

1.1 项目背景

本项目是一个仿今日头条（HeadLine）的Android新闻列表应用，主要展示了如何利用RecyclerView来展示新闻列表数据。RecyclerView是Android开发中用于展示大量数据列表的控件，相比ListView具有更高的灵活性和更好的性能。

1.2 项目技术栈

  • 开发工具：Android Studio
  • 最低SDK版本：根据项目配置
  • 核心框架：RecyclerView（来自Android Support Library v7）
  • 布局系统：XML布局文件
  • 主要组件：Activity、Adapter、ViewHolder

1.3 项目效果预览

本项目实现了类似今日头条的新闻列表界面，包含：

  • 顶部标题栏和搜索框
  • 频道标签栏（推荐、抗疫、小视频等）
  • 新闻列表，包含两种不同的布局样式
  • 新闻卡片包含标题、来源、评论数、发布时间和图片
  • 第二章 项目目录结构分析

2.1 项目完整目录结构

HeadLine/
├── app/
│   ├── src/
│   │   └── main/
│   │       ├── java/
│   │       │   └── cn/
│   │       │       └── edu/
│   │       │           └── headline/
│   │       │               ├── MainActivity.java          # 主活动类
│   │       │               ├── NewsAdapter.java            # RecyclerView适配器
│   │       │               └── NewsBean.java               # 新闻数据模型
│   │       └── res/
│   │           ├── drawable/                               # 矢量图资源
│   │           ├── drawable-hdpi/                          # 高清图片资源
│   │           ├── layout/                                 # 布局文件
│   │           └── values/                                 # 值资源（颜色、样式、字符串）
│   └── build/
└── build/

image.png

2.2 Java源码包结构

在cn.edu.headline包下，包含三个核心Java文件：

  1. MainActivity.java
    • 主活动类，负责界面初始化和数据加载
    • 创建RecyclerView并设置LayoutManager
    • 初始化测试数据并传递给适配器
  2. NewsAdapter.java
    • RecyclerView的数据适配器
    • 继承自RecyclerView.Adapter
    • 实现了多布局支持（两种不同的列表项布局）
  3. NewsBean.java
    • 新闻数据模型类
    • 使用标准的JavaBean模式
    • 包含新闻的标题、图片、来源、评论、时间和类型等属性
    • 2.3 资源文件结构

布局文件（layout目录）

文件名用途复杂度
activity_main.xml主界面布局中等
list_item_one.xml单图新闻列表项简单
list_item_two.xml三图新闻列表项中等
title_bar.xml顶部标题栏简单

值资源（values目录）

文件名用途
colors.xml定义项目使用的颜色
styles.xml定义可复用的样式
strings.xml定义字符串资源

图片资源（drawable目录）

图片名用途
top.png置顶标识图标
search_bg.png搜索框背景
e_sports.png电竞新闻图片
food.png美食新闻图片
takeout.png外卖新闻图片
sleep1/2/3.png睡眠相关图片组
fruit1/2/3.png水果新闻图片组

image.png 第三章 RecyclerView基础入门

3.1 什么是RecyclerView

RecyclerView是Android Support Library v7中的组件，是一种高效、可复用的列表视图组件。它通过回收和复用视图来展示大量数据，相比ListView具有以下优势：

  1. ViewHolder模式：强制使用ViewHolder，优化了findViewById的调用
  2. LayoutManager：支持多种布局方式（线性、网格、瀑布流）
  3. ItemDecoration：支持自定义分隔线
  4. ItemAnimator：支持自定义动画效果
  5. 多布局支持：可以通过getItemViewType实现不同类型列表项 3.2 RecyclerView的核心组件 RecyclerView的实现依赖于三个核心组件的协作：
┌─────────────────────────────────────────────────────────┐
│                      RecyclerView                        │
│  ┌─────────────────────────────────────────────────┐    │
│  │                   LayoutManager                  │    │
│  │         控制列表的布局方式和滚动行为              │    │
│  └─────────────────────────────────────────────────┘    │
│  ┌─────────────────────────────────────────────────┐    │
│  │                      Adapter                      │    │
│  │         数据适配器，将数据绑定到视图               │    │
│  └─────────────────────────────────────────────────┘    │
│  ┌─────────────────────────────────────────────────┐    │
│  │                   ViewHolder                     │    │
│  │              缓存视图，提高性能                    │    │
│  └─────────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────────┘

3.3 在XML中使用RecyclerView

在activity_main.xml中，RecyclerView的使用非常简单：

<android.support.v7.widget.RecyclerView
    android:id="@+id/rv_list"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

关键属性说明：

  • android:id="@+id/rv_list"：为RecyclerView设置唯一标识符
  • android:layout_width="match_parent"：宽度占满父容器
  • android:layout_height="match_parent"：高度占满父容器 注意：RecyclerView需要完整的包路径，因为它是支持库中的组件。

3.4 RecyclerView的命名空间

在XML中使用RecyclerView时，需要使用完整的命名空间：

<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rv_list"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

第四章 RecyclerView在MainActivity中的使用

4.1 MainActivity完整代码解析

package cn.edu.headline;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
    
    // 新闻标题数组
    private String[] titles = {"各地餐企齐行动，杜绝餐饮浪费",
            "花菜有人焯水，有人直接炒，都错了，看饭店大厨如何做",
            "睡觉时，双脚突然蹬一下，有踩空感，像从高楼坠落，是咋回事？",
            "实拍外卖小哥砸开小吃店的卷帘门救火，灭火后淡定继续送外卖",
            "还没成熟就被迫提前采摘，8毛一斤却没人要，果农无奈：不摘不行",
            "大会、大展、大赛一起来，北京电竞"好嗨哟""};
    
    // 新闻来源数组
    private String[] names = {"央视新闻客户端", "味美食记", "民富康健康", "生活小记",
            "禾木报告", "燕鸣"};
    
    // 评论数数组
    private String[] comments = {"9884评", "18评", "78评", "678评", "189评", "304评"};
    
    // 发布时间数组
    private String[] times = {"6小时前", "刚刚", "1小时前", "2小时前", "3小时前", "4个小时前"};
    
    // 单图新闻图片数组
    private int[] icons1 = {R.drawable.food, R.drawable.takeout, R.drawable.e_sports};
    
    // 多图新闻图片数组
    private int[] icons2 = {R.drawable.sleep1, R.drawable.sleep2, R.drawable.sleep3,
            R.drawable.fruit1,R.drawable.fruit2, R.drawable.fruit3};
    
    // 新闻类型数组：1表示单图或置顶新闻，2表示三图新闻
    private int[] types = {1, 1, 2, 1, 2, 1};
    
    // RecyclerView实例
    private RecyclerView mRecyclerView;
    
    // 适配器实例
    private NewsAdapter mAdapter;
    
    // 新闻数据列表
    private List<NewsBean> NewsList;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        // 初始化数据
        setData();
        
        // 获取RecyclerView实例
        mRecyclerView = findViewById(R.id.rv_list);
        
        // 设置LayoutManager - 线性布局管理器
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
        
        // 创建适配器实例
        mAdapter = new NewsAdapter(MainActivity.this, NewsList);
        
        // 将适配器设置给RecyclerView
        mRecyclerView.setAdapter(mAdapter);
    }

image.png 4.2 RecyclerView的初始化步骤 在MainActivity中，RecyclerView的使用遵循以下标准步骤：

步骤一：获取RecyclerView实例

mRecyclerView = findViewById(R.id.rv_list);

使用findViewById方法通过布局中定义的ID获取RecyclerView的引用。

步骤二：设置LayoutManager

mRecyclerView.setLayoutManager(new LinearLayoutManager(this));

LayoutManager是RecyclerView的核心组件之一，它决定了列表的布局方式。本项目使用的是LinearLayoutManager，即线性布局。 常用的LayoutManager类型：

LayoutManager说明
LinearLayoutManager线性布局（垂直或水平）
GridLayoutManager网格布局
StaggeredGridLayoutManager瀑布流布局

步骤三：创建并设置Adapter

mAdapter = new NewsAdapter(MainActivity.this, NewsList);
mRecyclerView.setAdapter(mAdapter);

适配器是连接数据和视图的桥梁，它负责创建视图并将数据绑定到视图上。

4.3 数据初始化方法详解

private void setData() {
    // 创建ArrayList实例
    NewsList = new ArrayList<NewsBean>();
    NewsBean bean;
    
    // 遍历标题数组，创建新闻数据
    for (int i = 0; i < titles.length; i++) {
        bean = new NewsBean();
        bean.setId(i + 1);
        bean.setTitle(titles[i]);
        bean.setName(names[i]);
        bean.setComment(comments[i]);
        bean.setTime(times[i]);
        bean.setType(types[i]);
        
        // 根据不同位置设置图片列表
        switch (i) {
            case 0: // 置顶新闻 - 无图片
                List<Integer> imgList0 = new ArrayList<>();
                bean.setImgList(imgList0);
                break;
            case 1: // 单图新闻
                List<Integer> imgList1 = new ArrayList<>();
                imgList1.add(icons1[i - 1]);
                bean.setImgList(imgList1);
                break;
            case 2: // 三图新闻
                List<Integer> imgList2 = new ArrayList<>();
                imgList2.add(icons2[i - 2]);
                imgList2.add(icons2[i - 1]);
                imgList2.add(icons2[i]);
                bean.setImgList(imgList2);
                break;
            // ... 其他case
        }
        NewsList.add(bean);
    }
}

第五章 RecyclerView数据适配器（Adapter）详解

5.1 NewsAdapter完整代码

package cn.edu.headline;
import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.List;
public class NewsAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    
    // 上下文引用
    private Context mContext;
    
    // 新闻数据列表
    private List<NewsBean> NewsList;
    
    // 适配器构造函数
    public NewsAdapter(Context context, List<NewsBean> NewsList) {
        this.mContext = context;
        this.NewsList = NewsList;
    }

5.2 Adapter的核心方法

RecyclerView.Adapter包含四个核心方法：

1. onCreateViewHolder() - 创建ViewHolder

@Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent,
                                                  int viewType) {
    View itemView = null;
    RecyclerView.ViewHolder holder = null;
    
    // 根据viewType选择不同的布局
    if (viewType == 1) {
        // 加载单图/置顶新闻布局
        itemView = LayoutInflater.from(mContext)
                .inflate(R.layout.list_item_one, parent, false);
        holder = new MyViewHolder1(itemView);
    } else if (viewType == 2) {
        // 加载三图新闻布局
        itemView = LayoutInflater.from(mContext)
                .inflate(R.layout.list_item_two, parent, false);
        holder = new MyViewHolder2(itemView);
    }
    return holder;
}

方法说明：

  • parent：RecyclerView本身
  • viewType：列表项类型标识
  • LayoutInflater.from(mContext)：获取布局填充器
  • inflate()：将XML布局转换为View对象

  • MyViewHolder2 - 三图新闻ViewHolder

class MyViewHolder2 extends RecyclerView.ViewHolder {
    ImageView iv_img1, iv_img2, iv_img3;  // 三张新闻图片
    TextView title, name, comment, time;  // 标题、来源、评论、时间
    
    public MyViewHolder2(View view) {
        super(view);
        
        // 初始化控件
        iv_img1 = view.findViewById(R.id.iv_img1);
        iv_img2 = view.findViewById(R.id.iv_img2);
        iv_img3 = view.findViewById(R.id.iv_img3);
        title = view.findViewById(R.id.tv_title);
        name = view.findViewById(R.id.tv_name);
        comment = view.findViewById(R.id.tv_comment);
        time = view.findViewById(R.id.tv_time);
    }
}

image.png

MyViewHolder1 - 单图/置顶新闻ViewHolder

class MyViewHolder1 extends RecyclerView.ViewHolder {
    ImageView iv_top, iv_img;    // 置顶图标和新闻图片
    TextView title, name, comment, time;  // 标题、来源、评论、时间
    
    public MyViewHolder1(View view) {
        super(view);
        
        // 初始化控件
        iv_top = view.findViewById(R.id.iv_top);
        iv_img = view.findViewById(R.id.iv_img);
        title = view.findViewById(R.id.tv_title);
        name = view.findViewById(R.id.tv_name);
        comment = view.findViewById(R.id.tv_comment);
        time = view.findViewById(R.id.tv_time);
    }
}

image.png

第六章 布局资源文件深度解析

6.1 主界面布局 - activity_main.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:background="@color/light_gray_color"
    android:orientation="vertical">
    
    <!-- 包含顶部标题栏 -->
    <include layout="@layout/title_bar" />
    
    <!-- 频道标签栏 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@android:color/white"
        android:orientation="horizontal">
        
        <!-- 频道标签 - 使用样式统一设置 -->
        <TextView
            style="@style/tvStyle"
            android:text="推荐"
            android:textColor="@android:color/holo_red_dark" />
        <TextView
            style="@style/tvStyle"
            android:text="抗疫"
            android:textColor="@color/gray_color" />
        <TextView
            style="@style/tvStyle"
            android:text="小视频"
            android:textColor="@color/gray_color" />
        <TextView
            style="@style/tvStyle"
            android:text="北京"
            android:textColor="@color/gray_color" />
        <TextView
            style="@style/tvStyle"
            android:text="视频"
            android:textColor="@color/gray_color" />
        <TextView
            style="@style/tvStyle"
            android:text="热点"
            android:textColor="@color/gray_color" />
        <TextView
            style="@style/tvStyle"
            android:text="娱乐"
            android:textColor="@color/gray_color" />
    </LinearLayout>
    
    <!-- 分隔线 -->
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#eeeeee" />
    
    <!-- 新闻列表 -->
    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

布局结构分析：

activity_main.xml 结构树：
LinearLayout (根布局，垂直排列)
├── include (引用title_bar.xml)
├── LinearLayout (频道栏，水平排列)
│   ├── TextView (推荐)
│   ├── TextView (抗疫)
│   ├── TextView (小视频)
│   ├── TextView (北京)
│   ├── TextView (视频)
│   ├── TextView (热点)
│   └── TextView (娱乐)
├── View (分隔线)
└── RecyclerView (新闻列表)

关键属性说明：

属性值说明
xmlns:androidschemas.android.com/apk/res/and…Android命名空间
android:layout_widthmatch_parent宽度匹配父容器
android:layout_heightmatch_parent高度匹配父容器
android:background@color/light_gray_color背景颜色
android:orientationvertical垂直排列方向

include标签的使用：

<include layout="@layout/title_bar" />

<include>标签用于复用布局文件，可以将常用的布局抽取为独立文件，然后在其他布局中引用。

6.2 单图新闻列表项 - list_item_one.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="90dp"
    android:layout_marginBottom="8dp"
    android:background="@android:color/white"
    android:padding="8dp">
    
    <!-- 左侧信息区域 -->
    <LinearLayout
        android:id="@+id/ll_info"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        
        <!-- 新闻标题 -->
        <TextView
            android:id="@+id/tv_title"
            android:layout_width="280dp"
            android:layout_height="wrap_content"
            android:maxLines="2"
            android:textColor="#3c3c3c"
            android:textSize="16sp" />
        
        <!-- 底部信息栏 -->
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            
            <!-- 置顶标识 -->
            <ImageView
                android:id="@+id/iv_top"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_alignParentBottom="true"
                android:src="@drawable/top" />
            
            <!-- 来源、评论、时间 -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_toRightOf="@id/iv_top"
                android:orientation="horizontal">
                
                <TextView
                    android:id="@+id/tv_name"
                    style="@style/tvInfo" />
                <TextView
                    android:id="@+id/tv_comment"
                    style="@style/tvInfo" />
                <TextView
                    android:id="@+id/tv_time"
                    style="@style/tvInfo" />
            </LinearLayout>
        </RelativeLayout>
    </LinearLayout>
    
    <!-- 右侧新闻图片 -->
    <ImageView
        android:id="@+id/iv_img"
        android:layout_width="match_parent"
        android:layout_height="90dp"
        android:layout_toRightOf="@id/ll_info"
        android:padding="3dp" />
</RelativeLayout>

布局结构分析：

list_item_one.xml 结构树：
RelativeLayout (根布局)
├── LinearLayout (id: ll_info，信息区域)
│   ├── TextView (id: tv_title，标题)
│   └── RelativeLayout (底部信息栏)
│       ├── ImageView (id: iv_top，置顶标识)
│       └── LinearLayout (来源评论时间)
│           ├── TextView (id: tv_name)
│           ├── TextView (id: tv_comment)
│           └── TextView (id: tv_time)
└── ImageView (id: iv_img，右侧图片)

RelativeLayout布局属性说明：

属性说明
android:layout_toRightOf位于指定ID控件的右侧
android:layout_alignParentBottom与父容器底部对齐
android:layout_alignParentLeft与父容器左侧对齐

TextView关键属性：

属性值说明
android:maxLines2最多显示2行文字
android:textColor#3c3c3c文字颜色（深灰色）
android:textSize16sp文字大小（16缩放像素）

6.3 三图新闻列表项 - list_item_two.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:background="@android:color/white">
    
    <!-- 新闻标题 -->
    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:maxLines="2"
        android:padding="8dp"
        android:textColor="#3c3c3c"
        android:textSize="16sp" />
    
    <!-- 图片区域 -->
    <LinearLayout
        android:id="@+id/ll_img"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_title"
        android:orientation="horizontal">
        
        <ImageView
            android:id="@+id/iv_img1"
            style="@style/ivImg"/>
        <ImageView
            android:id="@+id/iv_img2"
            style="@style/ivImg"/>
        <ImageView
            android:id="@+id/iv_img3"
            style="@style/ivImg"/>
    </LinearLayout>
    
    <!-- 底部信息栏 -->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/ll_img"
        android:orientation="vertical"
        android:padding="8dp">
        
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            
            <TextView
                android:id="@+id/tv_name"
                style="@style/tvInfo" />
            <TextView
                android:id="@+id/tv_comment"
                style="@style/tvInfo" />
            <TextView
                android:id="@+id/tv_time"
                style="@style/tvInfo" />
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

6.4 顶部标题栏 - title_bar.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="50dp"
    android:background="#d33d3c"
    android:orientation="horizontal"
    android:paddingLeft="10dp"
    android:paddingRight="10dp">
    
    <!-- 标题文字 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="仿今日头条"
        android:textColor="@android:color/white"
        android:textSize="22sp" />
    
    <!-- 搜索框 -->
    <EditText
        android:layout_width="match_parent"
        android:layout_height="35dp"
        android:layout_gravity="center_vertical"
        android:layout_marginStart="15dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="15dp"
        android:background="@drawable/search_bg"
        android:gravity="center_vertical"
        android:textColor="@android:color/black"
        android:hint="搜你想搜的"
        android:textColorHint="@color/gray_color"
        android:textSize="14sp"
        android:paddingLeft="30dp" />
</LinearLayout>

image.png

EditText关键属性说明：

属性说明
android:hint输入提示文字
android:textColorHint提示文字颜色
android:background输入框背景
android:gravity内容对齐方式
avatar
文章
阅读
粉丝