仿今日头条项目介绍
添加RecyclerView依赖
在项目的 build.gradle (Module: app) 中添加依赖：
gradle
dependencies {
// RecyclerView核心库
implementation 'androidx.recyclerview:recyclerview:1.3.2'
// 图片加载库（配合RecyclerView使用）
implementation 'com.github.bumptech.glide:glide:4.16.0'
// 卡片布局（可选，增强视觉效果）
implementation 'androidx.cardview:cardview:1.0.0'
}
添加依赖后，同步项目，即可在代码中使用RecyclerView。
RecyclerView的布局资源（Layout Resources）
2.1 主布局中的RecyclerView（activity_main.xml）
RecyclerView首先需要在主布局文件中声明。以下是完整的主布局代码：
xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#FFFFFF">
<!-- 标题栏 -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:paddingLeft="12dp"
android:paddingRight="12dp">
<TextView
android:id="@+id/tv_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="仿今日头条"
android:textSize="20sp"
android:textColor="#D81E06"
android:textStyle="bold" />
<ImageView
android:id="@+id/iv_search"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:src="@drawable/ic_search" />
</RelativeLayout>
<!-- 频道栏 -->
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="44dp"
android:scrollbars="none">
<LinearLayout
android:id="@+id/ll_channels"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center_vertical"
android:paddingLeft="12dp"
android:paddingRight="12dp" />
</HorizontalScrollView>
<!-- 核心：RecyclerView -->
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv_news_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scrollbars="vertical"
android:overScrollMode="never" />
</LinearLayout>
RecyclerView属性详解：
| 属性 | 值 | 作用 |
|---|---|---|
android:id | @+id/rv_news_list | 为RecyclerView设置唯一标识，用于在Java代码中查找 |
android:layout_width | match_parent | 宽度填满父容器 |
android:layout_height | 0dp | 配合weight使用，不固定高度 |
android:layout_weight | 1 | 占据剩余所有空间 |
android:scrollbars | vertical | 显示垂直滚动条 |
android:overScrollMode | never | 取消过度滚动效果（更符合今日头条风格） |
2.2 RecyclerView的核心组件结构
RecyclerView本身只负责显示，不负责：
- 如何排列Item → 由LayoutManager决定
- Item长什么样 → 由Item布局决定
- 数据如何显示 → 由Adapter决定
- Item之间的分割线 → 由ItemDecoration决定
这种职责分离的设计，使RecyclerView极其灵活。
列表项布局（Item Layouts）
列表项布局是RecyclerView中最关键的布局资源。截图中显示了三种不同的卡片样式，因此我们需要多个Item布局。
3.1 普通新闻卡片布局（item_news_normal.xml）
对应截图中第一条新闻和第三条新闻（无特殊标记）。
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:paddingTop="12dp"
android:paddingBottom="12dp"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:orientation="horizontal"
android:background="?android:attr/selectableItemBackground">
<!-- 左侧文字区域 -->
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center_vertical">
<!-- 标题控件：TextView -->
<TextView
android:id="@+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textColor="#222222"
android:maxLines="2"
android:ellipsize="end"
android:text="各地餐企齐行动，杜绝餐饮浪费" />
<!-- 信息行：来源、评论、时间 -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:orientation="horizontal">
<!-- 来源控件 -->
<TextView
android:id="@+id/tv_source"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
android:textColor="#666666"
android:text="央视新闻客户端" />
<!-- 评论数控件 -->
<TextView
android:id="@+id/tv_comment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:textSize="12sp"
android:textColor="#666666"
android:text="9884评" />
<!-- 时间控件 -->
<TextView
android:id="@+id/tv_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:textSize="12sp"
android:textColor="#999999"
android:text="6小时前" />
</LinearLayout>
</LinearLayout>
<!-- 右侧图片区域 -->
<ImageView
android:id="@+id/iv_cover"
android:layout_width="100dp"
android:layout_height="70dp"
android:layout_marginLeft="12dp"
android:scaleType="centerCrop"
android:src="@drawable/ic_default_cover" />
</LinearLayout>
布局控件清单：
| 控件 | ID | 用途 |
|---|---|---|
| TextView | tv_title | 显示新闻标题 |
| TextView | tv_source | 显示新闻来源 |
| TextView | tv_comment | 显示评论数 |
| TextView | tv_time | 显示发布时间 |
| ImageView | iv_cover | 显示缩略图 |
3.2 特殊新闻卡片布局（item_news_special.xml）
对应截图中第二条新闻（带有MyViewHolder1标记）和第三条新闻（带有MyViewHolder2标记）。
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:paddingTop="12dp"
android:paddingBottom="12dp"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:orientation="horizontal"
android:background="?android:attr/selectableItemBackground">
<!-- 左侧文字区域 -->
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center_vertical">
<!-- 标题控件 -->
<TextView
android:id="@+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textColor="#222222"
android:maxLines="2"
android:ellipsize="end" />
<!-- 特殊标记控件（这就是截图中MyViewHolder1/2的来源） -->
<TextView
android:id="@+id/tv_special_tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:textSize="10sp"
android:textColor="#FFFFFF"
android:background="#D81E06"
android:paddingLeft="6dp"
android:paddingRight="6dp"
android:paddingTop="2dp"
android:paddingBottom="2dp"
android:text="推荐" />
<!-- 信息行 -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_source"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
android:textColor="#666666" />
<TextView
android:id="@+id/tv_comment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:textSize="12sp"
android:textColor="#666666" />
<TextView
android:id="@+id/tv_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:textSize="12sp"
android:textColor="#999999" />
</LinearLayout>
</LinearLayout>
<!-- 右侧图片 -->
<ImageView
android:id="@+id/iv_cover"
android:layout_width="100dp"
android:layout_height="70dp"
android:layout_marginLeft="12dp"
android:scaleType="centerCrop"
android:src="@drawable/ic_default_cover" />
</LinearLayout>
新增控件：tv_special_tag（特殊标记TextView）
这个控件正是截图中显示"推荐"、"视频"等标签的位置，也是MyViewHolder1/MyViewHolder2在UI上的体现。
RecyclerView的Adapter使用（核心内容）
4.1 什么是Adapter
Adapter（适配器）是RecyclerView和数据源之间的桥梁。它的工作包括：
- 创建列表项视图（onCreateViewHolder）
- 将数据绑定到视图上（onBindViewHolder）
- 告诉RecyclerView有多少条数据（getItemCount）
- 决定不同位置使用哪种布局（getItemViewType）
形象比喻：
- RecyclerView = 展示柜台
- Adapter = 售货员
- 数据 = 商品
- ViewHolder = 商品包装盒
售货员（Adapter）从仓库（数据源）取出商品（数据），装进合适的包装盒（ViewHolder），放到柜台（RecyclerView）上展示。
4.2 数据模型类（NewsItem.java）
在编写Adapter之前，需要定义数据模型：
java
package cn.edu.headline.model;
public class NewsItem {
// 定义Item类型常量
public static final int TYPE_NORMAL = 0; // 普通卡片
public static final int TYPE_SPECIAL = 1; // 特殊卡片（带标记）
private int type; // 卡片类型
private String title; // 标题
private String source; // 来源
private String comment; // 评论数
private String time; // 时间
private String imageUrl; // 图片地址
private String tag; // 特殊标记文字（如“推荐”、“视频”）
// 构造方法（普通卡片）
public NewsItem(int type, String title, String source, String comment, String time) {
this.type = type;
this.title = title;
this.source = source;
this.comment = comment;
this.time = time;
}
// 构造方法（带标记的特殊卡片）
public NewsItem(int type, String title, String source, String comment, String time, String tag) {
this.type = type;
this.title = title;
this.source = source;
this.comment = comment;
this.time = time;
this.tag = tag;
}
// Getter和Setter方法
public int getType() { return type; }
public void setType(int type) { this.type = type; }
public String getTitle() { return title; }
public void setTitle(String title) { this.title = title; }
public String getSource() { return source; }
public void setSource(String source) { this.source = source; }
public String getComment() { return comment; }
public void setComment(String comment) { this.comment = comment; }
public String getTime() { return time; }
public void setTime(String time) { this.time = time; }
public String getImageUrl() { return imageUrl; }
public void setImageUrl(String imageUrl) { this.imageUrl = imageUrl; }
public String getTag() { return tag; }
public void setTag(String tag) { this.tag = tag; }
}
4.3 ViewHolder类（MyViewHolder1和MyViewHolder2）
什么是ViewHolder：
ViewHolder是一个持有控件引用的容器。当RecyclerView滚动时，被移出屏幕的Item的ViewHolder会被回收，供新进入屏幕的Item使用，避免重复执行findViewById，极大提升性能。
MyViewHolder1
java
package cn.edu.headline.viewholder;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import com.bumptech.glide.Glide;
import cn.edu.headline.R;
import cn.edu.headline.model.NewsItem;
public class MyViewHolder1 extends RecyclerView.ViewHolder {
// 声明所有控件
TextView tvTitle;
TextView tvSource;
TextView tvComment;
TextView tvTime;
ImageView ivCover;
public MyViewHolder1(@NonNull View itemView) {
super(itemView);
// 通过findViewById找到控件（只执行一次）
tvTitle = itemView.findViewById(R.id.tv_title);
tvSource = itemView.findViewById(R.id.tv_source);
tvComment = itemView.findViewById(R.id.tv_comment);
tvTime = itemView.findViewById(R.id.tv_time);
ivCover = itemView.findViewById(R.id.iv_cover);
}
// 绑定数据方法
public void bind(NewsItem item) {
tvTitle.setText(item.getTitle());
tvSource.setText(item.getSource());
tvComment.setText(item.getComment());
tvTime.setText(item.getTime());
// 使用Glide加载图片
if (item.getImageUrl() != null && !item.getImageUrl().isEmpty()) {
Glide.with(itemView.getContext())
.load(item.getImageUrl())
.placeholder(R.drawable.ic_default_cover)
.into(ivCover);
}
}
}
MyViewHolder2
java
package cn.edu.headline.viewholder;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import com.bumptech.glide.Glide;
import cn.edu.headline.R;
import cn.edu.headline.model.NewsItem;
public class MyViewHolder2 extends RecyclerView.ViewHolder {
// 声明所有控件（比MyViewHolder1多一个tag控件）
TextView tvTitle;
TextView tvSource;
TextView tvComment;
TextView tvTime;
TextView tvSpecialTag;
ImageView ivCover;
public MyViewHolder2(@NonNull View itemView) {
super(itemView);
// 通过findViewById找到控件
tvTitle = itemView.findViewById(R.id.tv_title);
tvSource = itemView.findViewById(R.id.tv_source);
tvComment = itemView.findViewById(R.id.tv_comment);
tvTime = itemView.findViewById(R.id.tv_time);
tvSpecialTag = itemView.findViewById(R.id.tv_special_tag);
ivCover = itemView.findViewById(R.id.iv_cover);
}
// 绑定数据方法
public void bind(NewsItem item) {
tvTitle.setText(item.getTitle());
tvSource.setText(item.getSource());
tvComment.setText(item.getComment());
tvTime.setText(item.getTime());
// 设置特殊标记文字
if (item.getTag() != null) {
tvSpecialTag.setText(item.getTag());
tvSpecialTag.setVisibility(View.VISIBLE);
} else {
tvSpecialTag.setVisibility(View.GONE);
}
// 加载图片
if (item.getImageUrl() != null) {
Glide.with(itemView.getContext())
.load(item.getImageUrl())
.placeholder(R.drawable.ic_default_cover)
.into(ivCover);
}
}
}
4.4 Adapter完整代码
java
package cn.edu.headline.adapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.List;
import cn.edu.headline.R;
import cn.edu.headline.model.NewsItem;
import cn.edu.headline.viewholder.MyViewHolder1;
import cn.edu.headline.viewholder.MyViewHolder2;
public class NewsAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
// 数据源
private List<NewsItem> mDataList;
// 点击事件监听器
private OnItemClickListener mClickListener;
// 构造方法
public NewsAdapter(List<NewsItem> dataList) {
this.mDataList = dataList;
}
/**
* 方法1：getItemViewType
* 作用：根据位置返回Item类型
* 调用时机：onCreateViewHolder之前
*/
@Override
public int getItemViewType(int position) {
return mDataList.get(position).getType();
}
/**
* 方法2：onCreateViewHolder
* 作用：创建ViewHolder（加载布局，实例化ViewHolder）
* 调用时机：需要创建新的Item视图时
*/
@NonNull
@Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
LayoutInflater inflater = LayoutInflater.from(parent.getContext());
// 根据类型加载不同布局，创建不同ViewHolder
if (viewType == NewsItem.TYPE_NORMAL) {
View view = inflater.inflate(R.layout.item_news_normal, parent, false);
return new MyViewHolder1(view);
} else {
View view = inflater.inflate(R.layout.item_news_special, parent, false);
return new MyViewHolder2(view);
}
}
/**
* 方法3：onBindViewHolder
* 作用：将数据绑定到ViewHolder的控件上
* 调用时机：Item进入屏幕时
*/
@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
NewsItem item = mDataList.get(position);
// 根据ViewHolder类型分别绑定数据
if (holder instanceof MyViewHolder1) {
((MyViewHolder1) holder).bind(item);
// 设置点击事件
holder.itemView.setOnClickListener(v -> {
if (mClickListener != null) {
mClickListener.onItemClick(position, item);
}
});
} else if (holder instanceof MyViewHolder2) {
((MyViewHolder2) holder).bind(item);
holder.itemView.setOnClickListener(v -> {
if (mClickListener != null) {
mClickListener.onItemClick(position, item);
}
});
}
}
/**
* 方法4：getItemCount
* 作用：返回数据总数
* 调用时机：初始化、刷新数据时
*/
@Override
public int getItemCount() {
return mDataList == null ? 0 : mDataList.size();
}
/**
* 刷新数据方法
*/
public void setData(List<NewsItem> newData) {
this.mDataList = newData;
notifyDataSetChanged();
}
/**
* 局部刷新（性能更好）
*/
public void updateItem(int position, NewsItem newItem) {
mDataList.set(position, newItem);
notifyItemChanged(position);
}
/**
* 添加更多数据（分页加载）
*/
public void addMoreData(List<NewsItem> moreData) {
int startPos = mDataList.size();
mDataList.addAll(moreData);
notifyItemRangeInserted(startPos, moreData.size());
}
/**
* 点击事件接口
*/
public interface OnItemClickListener {
void onItemClick(int position, NewsItem item);
}
public void setOnItemClickListener(OnItemClickListener listener) {
this.mClickListener = listener;
}
}
4.5 Adapter中四个核心方法的执行时机
| 方法 | 执行时机 | 执行次数 |
|---|---|---|
getItemViewType | 需要知道position位置的Item类型时 | 每个位置至少1次 |
onCreateViewHolder | 需要创建新的Item视图，且缓存池中没有可用ViewHolder时 | 屏幕可见Item数量 + 少量缓冲 |
onBindViewHolder | Item需要显示数据时 | 每个进入屏幕的Item各1次 |
getItemCount | 需要知道列表总长度时 | 多次（初始化、滚动、刷新） |
Activity中使用RecyclerView
5.1 MainActivity完整代码
java
package cn.edu.headline;
import android.os.Bundle;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;
import java.util.List;
import cn.edu.headline.adapter.NewsAdapter;
import cn.edu.headline.model.NewsItem;
public class MainActivity extends AppCompatActivity {
private RecyclerView mRecyclerView;
private NewsAdapter mAdapter;
private List<NewsItem> mNewsList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 1. 初始化频道栏
initChannelBar();
// 2. 初始化RecyclerView
initRecyclerView();
// 3. 加载数据
loadData();
}
/**
* 初始化频道栏（动态添加频道）
*/
private void initChannelBar() {
LinearLayout llChannels = findViewById(R.id.ll_channels);
String[] channels = {"推荐", "抗疫", "小视频", "北京", "视频", "热点", "娱乐"};
for (String channel : channels) {
TextView tvChannel = new TextView(this);
tvChannel.setText(channel);
tvChannel.setTextSize(15);
tvChannel.setTextColor(getColor(R.color.text_title_black));
tvChannel.setPadding(48, 0, 48, 0);
tvChannel.setGravity(android.view.Gravity.CENTER);
// 设置频道点击事件
tvChannel.setOnClickListener(v -> {
Toast.makeText(this, "切换到：" + channel, Toast.LENGTH_SHORT).show();
// 实际项目中这里会切换数据源
});
llChannels.addView(tvChannel);
}
}
/**
* 初始化RecyclerView（核心步骤）
*/
private void initRecyclerView() {
// 步骤1：找到RecyclerView控件
mRecyclerView = findViewById(R.id.rv_news_list);
// 步骤2：设置LayoutManager（决定Item排列方式）
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
mRecyclerView.setLayoutManager(layoutManager);
// 步骤3：设置Adapter
mNewsList = new ArrayList<>();
mAdapter = new NewsAdapter(mNewsList);
mRecyclerView.setAdapter(mAdapter);
// 步骤4：性能优化（如果列表高度固定）
mRecyclerView.setHasFixedSize(true);
// 步骤5：设置Item点击事件
mAdapter.setOnItemClickListener((position, item) -> {
Toast.makeText(this, "点击了：" + item.getTitle(), Toast.LENGTH_SHORT).show();
// 实际项目中这里会跳转到详情页
});
}
/**
* 加载模拟数据（完全匹配截图内容）
*/
private void loadData() {
List<NewsItem> data = new ArrayList<>();
// 第1条：普通卡片（对应截图第一条）
NewsItem item1 = new NewsItem(
NewsItem.TYPE_NORMAL,
"各地餐企齐行动，杜绝餐饮浪费",
"央视新闻客户端",
"9884评",
"6小时前"
);
item1.setImageUrl("https://example.com/cover1.jpg");
data.add(item1);
// 第2条：特殊卡片（对应截图第二条，带MyViewHolder1标记）
NewsItem item2 = new NewsItem(
NewsItem.TYPE_SPECIAL,
"花菜有人焯水，有人直接炒，都错了，看饭店大厨如何做",
"味美食记",
"18评",
"刚刚"
);
item2.setTag("推荐"); // 这就是截图中标记的来源
item2.setImageUrl("https://example.com/cover2.jpg");
data.add(item2);
// 第3条：特殊卡片（对应截图第三条，带MyViewHolder2标记）
NewsItem item3 = new NewsItem(
NewsItem.TYPE_SPECIAL,
"睡觉时，双脚突然蹬一下，有踩空感，像从高楼坠落，是咋回事？",
"民富康健康",
"78评",
"1小时前"
);
item3.setTag("视频"); // 这就是截图中标记的来源
item3.setImageUrl("https://example.com/cover3.jpg");
data.add(item3);
// 添加更多数据模拟真实列表
for (int i = 4; i <= 20; i++) {
NewsItem item = new NewsItem(
i % 2 == 0 ? NewsItem.TYPE_NORMAL : NewsItem.TYPE_SPECIAL,
"新闻标题" + i + "：这是RecyclerView展示的第" + i + "条新闻",
"新闻来源" + i,
i * 100 + "评",
i + "小时前"
);
if (i % 2 == 1) {
item.setTag(i % 3 == 0 ? "热点" : "推荐");
}
data.add(item);
}
// 设置数据到Adapter
mAdapter.setData(data);
}
}
5.2 RecyclerView使用步骤总结
| 步骤 | 操作 | 代码 |
|---|---|---|
| 1 | 在布局中添加RecyclerView | <androidx.recyclerview.widget.RecyclerView .../> |
| 2 | 在Activity中找到RecyclerView | findViewById(R.id.rv_news_list) |
| 3 | 设置LayoutManager | setLayoutManager(new LinearLayoutManager(this)) |
| 4 | 创建Adapter | new NewsAdapter(dataList) |
| 5 | 设置Adapter | setAdapter(adapter) |
