android 实现仿今日头条推荐列表界面

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，标题，图片，用户名，评论数，发布时间，类型等属性，具体代码如下：

扫描二维码关注公众号，回复： 17532257 查看本文章

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报错 这个文章！