仿今日头条
1.创建程序
（1）创建一个例如叫HeadLine的应用程序，一共需要3个java文件和4个xml布局文件如图：
2. 添加recyclerview-v7库
不知道怎么添加可以看这个博主文章 http://t.csdnimg.cn/cWKnz
3.创建样式
我们可以看出仿今日头条推荐列表界面顶部一行文字样式一样，可以单独放在tvStyle中，每个条目下面底部灰色文字的样式也一样，单独放到tvInfo中，推荐列表界面显示的3张图片样式一样，所以也可单独放在ivImg中这三个都是在res/values/styles.xml中设置，代码如下：
<resources>
<style name="tvStyle">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">match_parent</item>
<item name="android:padding">10dp</item>
<item name="android:gravity">center</item>
<item name="android:textSize">15sp</item>
</style>
<style name="tvInfo">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_marginLeft">8dp</item>
<item name="android:gravity">center_vertical</item>
<item name="android:textSize">14sp</item>
<item name="android:textColor">@color/gray_color</item>
</style>
<style name="ivImg">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">90dp</item>
<item name="android:layout_weight">1</item>
<!--ll_info为布局文件list_item_one.xml中的id-->
<item name="android:layout_toRightOf">@+id/ll_info</item>
</style>
4.设置颜色值
仿今日头条推荐列表界面的背景为浅灰色，底部文字深灰色，在res/values/color.xml中设置
<resources>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="gray_color">#828282</color> //深灰
<color name="light_gray_color">#eeeeee</color> //浅灰
</resources>
5.创建标题栏
顶部有一个带有搜索框的标题栏，避免布局文件在文件代码太多，可单独放title_bar.xml文件中，具体代码如下：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="50dp"
android:layout_width="match_parent"
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>
6. 搭建列表界面
activity_main.xml文件中设置，其中列表需要RecyclerView来显示，这是recyclerview-v7库中的控件，具体代码如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
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" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv_list"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
8. 搭建列表界面的条目界面
界面条目有3种显示形式，第一种是不显示图片，第二种是显示1张，第三种是显示3张，不显示图片和显示1张的形式可以用用相同条目界面，在list_item_one.xml布局文件中设置，显示3张在list_item_two.xml布局文件中设置
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_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>
9.封装新闻信息实体类
创建NewsBean来放置新闻id，标题，图片，用户名，评论数，发布时间，类型等属性，具体代码如下：
package cn.itcast.headline;
import java.util.List;
public class NewsBean {
private int id;
private String title;
private List<Integer> imList;
private String name;
private String comment;
private String time;
private int type;
public int getId(){
return id;
}
public void setId(int id){
this.id = id;
}
public String getTitle(){
return title;
}
public void setTitle(String title){
this.title = title;
}
public String getName(){
return name;
}
public void setName(String name){
this.name = name;
}
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 List<Integer> getImList(){
return imList;
}
public void setImList(List<Integer> imList) {
this.imList = imList;
}
public int getType(){
return type;
}
public void setType(int type){
this.type = type;
}
}
10.编写列表界面的数据适配器
创建一个继承RecyclerView.Adapter<RecyclerView.ViewHolder>类的NewsAdapter类，该类重写加载条目数onCreateViewHolder(),获取条目类型getItemViewType(),绑定界面数据onBindViewHolder(),获取条目总数getItemCount()的方法，具体代码如下：
package cn.itcast.headline;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
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;
}
@NonNull
@Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View itemView=null;
RecyclerView.ViewHolder holder=null;
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;
}
@Override
public int getItemViewType(int position) {
return NewsList.get(position).getType();
}
@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder,int position) {
NewsBean bean = NewsList.get(position);
if (holder instanceof MyViewHolder1) {
if (position == 0) {
((MyViewHolder1) holder).iv_top.setVisibility(View.VISIBLE);
((MyViewHolder1) holder).iv_img.setVisibility(View.GONE);
} else {
((MyViewHolder1) holder).iv_top.setVisibility(View.GONE);
((MyViewHolder1) holder).iv_top.setVisibility(View.VISIBLE);
}
((MyViewHolder1) holder).title.setText(bean.getTitle());
((MyViewHolder1) holder).name.setText(bean.getName());
((MyViewHolder1) holder).comment.setText(bean.getComment());
((MyViewHolder1) holder).time.setText(bean.getTime());
if (bean.getImList().size() == 0) return;
((MyViewHolder1) holder).iv_img.setImageResource(bean.getImList().get(0));
} else if (holder instanceof MyViewHolder2) {
((MyViewHolder2) holder).title.setText(bean.getTitle());
((MyViewHolder2) holder).name.setText(bean.getName());
((MyViewHolder2) holder).comment.setText(bean.getComment());
((MyViewHolder2) holder).time.setText(bean.getTime());
((MyViewHolder2) holder).iv_img1.setImageResource(bean.getImList().get(0));
((MyViewHolder2) holder).iv_img2.setImageResource(bean.getImList().get(1));
((MyViewHolder2) holder).iv_img3.setImageResource(bean.getImList().get(2));
}
}
@Override
public int getItemCount() {
return NewsList.size();
}
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);
}
}
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);
}
}
}
11.显示列表的数据
在MainActivity中首先定义6个数组，分别是标题titles,用户名数据names,评论comments,发布时间times,icons1（显示一张图数据）,icons2（显示两张图数据），定义的数据添加到NewsList中，并将集合数据设置到NewsAdapter中，具体代码如下：
package cn.itcast.headline;
import android.os.Bundle;
import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;
import androidx.recyclerview.widget.RecyclerView;
import androidx.recyclerview.widget.RecyclerView;
import androidx.recyclerview.widget.LinearLayoutManager;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private String[] titles = {"各地餐企齐行动，杜绝餐饮浪费","花菜有人焯水，有人直接炒，都错了，看饭店大厨如何做",
"睡觉时，双脚突然蹬一下，有踩空感，像高楼坠落，是咋回事？",
"实拍外卖小哥砸开小吃店的卷帘门救火，灭火后淡定继续送外卖",
"还没成熟就被迫提前采摘，8毛一斤却没人要，果农无奈：不摘不行",
"大会、大展、大赛一起来，北京电竞“好嗨哟”"};
private String[] names = {"央视新闻客户端","味美食记","民富康健康","生活小记","禾木报告","燕鸣"};
private String[] comment = {"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};
private int[] types = {1,1,2,1,2,1};
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();
mRecyclerView = findViewById(R.id.rv_list);
mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
mAdapter = new NewsAdapter(MainActivity.this,NewsList);
mRecyclerView.setAdapter(mAdapter);
}
private void setData(){
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(comment[i]);
bean.setTime(times[i]);
bean.setType(types[i]);
switch (i){
case 0:
List<Integer> imgList0 = new ArrayList<>();
bean.setImList(imgList0);
break;
case 1 :
List<Integer> imgList1 = new ArrayList<>();
bean.setImList(imgList1);
break;
case 2:
List<Integer> imgList2 = new ArrayList<>();
imgList2.add(icons2[i-2]);
imgList2.add(icons2[i-1]);
imgList2.add(icons2[i]);
bean.setImList(imgList2);
break;
case 3:
List<Integer> imgList3 = new ArrayList<>();
imgList3.add(icons1[i-2]);
bean.setImList(imgList3);
break;
case 4:
List<Integer> imgList4 = new ArrayList<>();
imgList4.add(icons2[i-1]);
imgList4.add(icons2[i]);
imgList4.add(icons2[i+1]);
bean.setImList(imgList4);
break;
case 5:
List<Integer> imgList5 = new ArrayList<>();
imgList5.add(icons1[i-3]);
bean.setImList(imgList5);
break;
}
NewsList.add(bean);
}
}
}
12. 运行结果展示
到此就做完啦！感谢支持！
还有一些我在做的过程中遇到的一些问题，你自己做的时候是否也遇到了，请参考我 android报错 这个文章！
5062
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
