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中设置，代码如下：

1. <resources>
2.     <style name="tvStyle">
3.         <item name="android:layout_width">wrap_content</item>
4.         <item name="android:layout_height">match_parent</item>
5.         <item name="android:padding">10dp</item>
6.         <item name="android:gravity">center</item>
7.         <item name="android:textSize">15sp</item>
8.     </style>
9.     <style name="tvInfo">
10.         <item name="android:layout_width">wrap_content</item>
11.         <item name="android:layout_height">wrap_content</item>
12.         <item name="android:layout_marginLeft">8dp</item>
13.         <item name="android:gravity">center_vertical</item>
14.         <item name="android:textSize">14sp</item>
15.         <item name="android:textColor">@color/gray_color</item>
16.     </style>
17.     <style name="ivImg">
18.         <item name="android:layout_width">0dp</item>
19.         <item name="android:layout_height">90dp</item>
20.         <item name="android:layout_weight">1</item>
21.         <!--ll_info为布局文件list_item_one.xml中的id-->
22.         <item name="android:layout_toRightOf">@+id/ll_info</item>
23.     </style>

复制代码

4.设置颜色值

仿本日头条推荐列表界面的配景为浅灰色，底部文字深灰色，在res/values/color.xml中设置

1. <resources>
2.     <color name="black">#FF000000</color>
3.     <color name="white">#FFFFFFFF</color>
4.     <color name="gray_color">#828282</color>     //深灰
5.     <color name="light_gray_color">#eeeeee</color>     //浅灰
7. </resources>

复制代码

5.创建标题栏

顶部有一个带有搜索框的标题栏，避免结构文件在文件代码太多，可单独放title_bar.xml文件中，详细代码如下：

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2.     android:layout_height="50dp"
3.     android:layout_width="match_parent"
4.     android:background="#d33d3c"
5.     android:orientation="horizontal"
6.     android:paddingLeft="10dp"
7.     android:paddingRight="10dp">
9.     <TextView
10.         android:layout_width="wrap_content"
11.         android:layout_height="wrap_content"
12.         android:layout_gravity="center"
13.         android:text="仿今日头条"
14.         android:textColor="@android:color/white"
15.         android:textSize="22sp"/>
16.     <EditText
17.         android:layout_width="match_parent"
18.         android:layout_height="35dp"
19.         android:layout_gravity="center_vertical"
20.         android:layout_marginStart="15dp"
21.         android:layout_marginLeft="5dp"
22.         android:layout_marginRight="15dp"
23.         android:background="@drawable/search_bg"
24.         android:gravity="center_vertical"
25.         android:textColor="@android:color/black"
26.         android:hint="搜你想搜的"
27.         android:textColorHint="@color/gray_color"
28.         android:textSize="14sp"
29.         android:paddingLeft="30dp"/>
31. </LinearLayout>

复制代码

6. 搭建列表界面

activity_main.xml文件中设置，其中列表必要RecyclerView来显示，这是recyclerview-v7库中的控件，详细代码如下：

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.     xmlns:app="http://schemas.android.com/apk/res-auto"
4.     xmlns:tools="http://schemas.android.com/tools"
5.     android:id="@+id/main"
6.     android:layout_width="match_parent"
7.     android:layout_height="match_parent"
8.     tools:context=".MainActivity"
9.     android:background="@color/light_gray_color"
10.     android:orientation="vertical">
11.     //把标题栏放进来
12.     <include layout="@layout/title_bar" />
14.     <LinearLayout
15.         android:layout_width="match_parent"
16.         android:layout_height="40dp"
17.         android:background="@android:color/white"
18.         android:orientation="horizontal">
19.         <TextView
20.             style="@style/tvStyle"
21.             android:text="推荐"
22.             android:textColor="@android:color/holo_red_dark" />
23.         <TextView
24.             style="@style/tvStyle"
25.             android:text="抗疫"
26.             android:textColor="@color/gray_color" />
27.         <TextView
28.             style="@style/tvStyle"
29.             android:text="小视频"
30.             android:textColor="@color/gray_color" />
31.         <TextView
32.             style="@style/tvStyle"
33.             android:text="北京"
34.             android:textColor="@color/gray_color" />
35.         <TextView
36.             style="@style/tvStyle"
37.             android:text="视频"
38.             android:textColor="@color/gray_color" />
39.         <TextView
40.             style="@style/tvStyle"
41.             android:text="热点"
42.             android:textColor="@color/gray_color" />
43.         <TextView
44.             style="@style/tvStyle"
45.             android:text="娱乐"
46.             android:textColor="@color/gray_color" />
47.     </LinearLayout>
48.     <View
49.         android:layout_width="match_parent"
50.         android:layout_height="1dp"
51.         android:background="#eeeeee" />
52.     <androidx.recyclerview.widget.RecyclerView
53.         android:id="@+id/rv_list"
54.         android:layout_width="match_parent"
55.         android:layout_height="match_parent"/>
57. </LinearLayout>

复制代码

8. 搭建列表界面的条目界面

界面条目有3种显示情势，第一种是不显示图片，第二种是显示1张，第三种是显示3张，不显示图片和显示1张的情势可以用用雷同条目界面，在list_item_one.xml结构文件中设置，显示3张在list_item_two.xml结构文件中设置
list_item_one.xml详细代码如下：

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.     android:layout_width="match_parent"
4.     android:layout_height="90dp"
5.     android:layout_marginBottom="8dp"
6.     android:background="@android:color/white"
7.     android:padding="8dp">
8.     <LinearLayout
9.         android:id="@+id/ll_info"
10.         android:layout_width="wrap_content"
11.         android:layout_height="wrap_content"
12.         android:orientation="vertical">
13.         <TextView
14.             android:id="@+id/tv_title"
15.             android:layout_width="280dp"
16.             android:layout_height="wrap_content"
17.             android:maxLines="2"
18.             android:textColor="#3c3c3c"
19.             android:textSize="16sp"/>
20.         <RelativeLayout
21.             android:layout_width="match_parent"
22.             android:layout_height="match_parent">
23.             <ImageView
24.                 android:id="@+id/iv_top"
25.                 android:layout_width="20dp"
26.                 android:layout_height="20dp"
27.                 android:layout_alignParentBottom="true"
28.                 android:src="@drawable/top"/>
29.             <LinearLayout
30.                 android:layout_width="match_parent"
31.                 android:layout_height="wrap_content"
32.                 android:layout_alignParentBottom="true"
33.                 android:layout_toRightOf="@+id/iv_top"
34.                 android:orientation="horizontal">
35.                 <TextView
36.                     android:id="@+id/tv_name"
37.                     style="@style/tvInfo"/>
38.                 <TextView
39.                     android:id="@+id/tv_comment"
40.                     style="@style/tvInfo"/>
41.                 <TextView
42.                     android:id="@+id/tv_time"
43.                     style="@style/tvInfo"/>
44.             </LinearLayout>
45.         </RelativeLayout>
46.     </LinearLayout>
47.     <ImageView
48.         android:id="@+id/iv_img"
49.         android:layout_width="match_parent"
50.         android:layout_height="90dp"
51.         android:layout_toRightOf="@+id/ll_info"
52.         android:padding="3dp"/>
53. </RelativeLayout>

复制代码

list_item_two.xml详细代码如下：

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.     android:layout_width="match_parent"
4.     android:layout_height="wrap_content"
5.     android:layout_marginBottom="8dp"
6.     android:background="@android:color/white">
7.     <TextView
8.         android:id="@+id/tv_title"
9.         android:layout_width="match_parent"
10.         android:layout_height="wrap_content"
11.         android:maxLines="2"
12.         android:padding="8dp"
13.         android:textColor="#3c3c3c"
14.         android:textSize="16sp"/>
15.     <LinearLayout
16.         android:id="@+id/ll_img"
17.         android:layout_width="match_parent"
18.         android:layout_height="wrap_content"
19.         android:layout_below="@+id/tv_title"
20.         android:orientation="horizontal">
21.         <ImageView
22.             android:id="@+id/iv_img1"
23.             style="@style/ivImg"/>
24.         <ImageView
25.             android:id="@+id/iv_img2"
26.             style="@style/ivImg"/>
27.         <ImageView
28.             android:id="@+id/iv_img3"
29.             style="@style/ivImg"/>
30.     </LinearLayout>
31.     <LinearLayout
32.         android:layout_width="wrap_content"
33.         android:layout_height="wrap_content"
34.         android:layout_below="@id/ll_img"
35.         android:orientation="vertical"
36.         android:padding="8dp">
37.         <LinearLayout
38.             android:layout_width="match_parent"
39.             android:layout_height="wrap_content"
40.             android:orientation="horizontal">
41.             <TextView
42.                 android:id="@+id/tv_name"
43.                 style="@style/tvInfo"/>
44.             <TextView
45.                 android:id="@+id/tv_comment"
46.                 style="@style/tvInfo"/>
47.             <TextView
48.                 android:id="@+id/tv_time"
49.                 style="@style/tvInfo"/>
50.         </LinearLayout>
51.     </LinearLayout>
53. </RelativeLayout>

复制代码

9.封装消息信息实体类

创建NewsBean来放置消息id，标题，图片，用户名，评论数，发布时间，范例等属性，详细代码如下：

1. package cn.itcast.headline;
3. import java.util.List;
5. public class NewsBean {
6.     private int id;
7.     private String title;
8.     private List<Integer> imList;
9.     private String name;
10.     private String comment;
11.     private String time;
12.     private int type;
13.     public int getId(){
14.         return id;
15.     }
16.     public void setId(int id){
17.         this.id = id;
18.     }
19.     public String getTitle(){
20.         return title;
21.     }
22.     public void setTitle(String title){
23.         this.title = title;
24.     }
25.     public String getName(){
26.         return name;
27.     }
28.     public void setName(String name){
29.         this.name = name;
30.     }
31.     public String getComment(){
32.         return comment;
33.     }
34.     public void setComment(String comment){
35.         this.comment = comment;
36.     }
37.     public String getTime(){
38.         return time;
39.     }
40.     public void setTime(String time){
41.         this.time = time;
42.     }
43.     public List<Integer> getImList(){
44.         return imList;
45.     }
46.     public void setImList(List<Integer> imList) {
47.         this.imList = imList;
48.     }
49.     public int getType(){
50.         return type;
51.     }
52.     public void setType(int type){
53.         this.type = type;
54.     }
55. }

复制代码

10.编写列表界面的数据适配器

创建一个继承RecyclerView.Adapter<RecyclerView.ViewHolder>类的NewsAdapter类，该类重写加载条目数onCreateViewHolder(),获取条目范例getItemViewType(),绑定界面数据onBindViewHolder(),获取条目总数getItemCount()的方法，详细代码如下：

1. package cn.itcast.headline;
3. import android.content.Context;
4. import android.view.LayoutInflater;
5. import android.view.View;
6. import android.view.ViewGroup;
7. import android.widget.ImageView;
8. import android.widget.TextView;
10. import androidx.annotation.NonNull;
11. import androidx.recyclerview.widget.RecyclerView;
14. import java.util.List;
16. public class NewsAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
17.     private Context mContext;
18.     private List<NewsBean> NewsList;
19.     public NewsAdapter(Context context,List<NewsBean> NewsList){
20.         this.mContext = context;
21.         this.NewsList = NewsList;
22.     }
24.     @NonNull
25.     @Override
26.     public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
27.         View itemView=null;
28.         RecyclerView.ViewHolder holder=null;
29.         if (viewType == 1){
30.             itemView = LayoutInflater.from(mContext).inflate(R.layout.list_item_one,parent,false);
31.             holder = new MyViewHolder1(itemView);
32.         } else if (viewType == 2) {
33.             itemView = LayoutInflater.from(mContext).inflate(R.layout.list_item_two,parent,false);
34.             holder = new MyViewHolder2(itemView);
35.         }
36.         return holder;
37.     }
39.     @Override
40.     public int getItemViewType(int position) {
41.         return NewsList.get(position).getType();
42.     }
43.     @Override
44.     public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder,int position) {
45.         NewsBean bean = NewsList.get(position);
46.         if (holder instanceof MyViewHolder1) {
47.             if (position == 0) {
48.                 ((MyViewHolder1) holder).iv_top.setVisibility(View.VISIBLE);
49.                 ((MyViewHolder1) holder).iv_img.setVisibility(View.GONE);
50.             } else {
51.                 ((MyViewHolder1) holder).iv_top.setVisibility(View.GONE);
52.                 ((MyViewHolder1) holder).iv_top.setVisibility(View.VISIBLE);
53.             }
54.             ((MyViewHolder1) holder).title.setText(bean.getTitle());
55.             ((MyViewHolder1) holder).name.setText(bean.getName());
56.             ((MyViewHolder1) holder).comment.setText(bean.getComment());
57.             ((MyViewHolder1) holder).time.setText(bean.getTime());
58.             if (bean.getImList().size() == 0) return;
59.             ((MyViewHolder1) holder).iv_img.setImageResource(bean.getImList().get(0));
60.         } else if (holder instanceof MyViewHolder2) {
61.             ((MyViewHolder2) holder).title.setText(bean.getTitle());
62.             ((MyViewHolder2) holder).name.setText(bean.getName());
63.             ((MyViewHolder2) holder).comment.setText(bean.getComment());
64.             ((MyViewHolder2) holder).time.setText(bean.getTime());
65.             ((MyViewHolder2) holder).iv_img1.setImageResource(bean.getImList().get(0));
66.             ((MyViewHolder2) holder).iv_img2.setImageResource(bean.getImList().get(1));
67.             ((MyViewHolder2) holder).iv_img3.setImageResource(bean.getImList().get(2));
68.         }
69.     }
70.     @Override
71.     public int getItemCount() {
72.         return NewsList.size();
73.     }
74.     class MyViewHolder1 extends RecyclerView.ViewHolder{
75.         ImageView iv_top,iv_img;
76.         TextView title,name,comment,time;
78.         public MyViewHolder1(View view) {
79.             super(view);
80.             iv_top = view.findViewById(R.id.iv_top);
81.             iv_img = view.findViewById(R.id.iv_img);
82.             title = view.findViewById(R.id.tv_title);
83.             name = view.findViewById(R.id.tv_name);
84.             comment = view.findViewById(R.id.tv_comment);
85.             time = view.findViewById(R.id.tv_time);
86.         }
87.     }
88.     class MyViewHolder2 extends RecyclerView.ViewHolder{
89.         ImageView iv_img1,iv_img2,iv_img3;
90.         TextView title,name,comment,time;
91.         public MyViewHolder2(View view) {
92.             super(view);
93.             iv_img1 = view.findViewById(R.id.iv_img1);
94.             iv_img2 = view.findViewById(R.id.iv_img2);
95.             iv_img3 = view.findViewById(R.id.iv_img3);
96.             title = view.findViewById(R.id.tv_title);
97.             name = view.findViewById(R.id.tv_name);
98.             comment = view.findViewById(R.id.tv_comment);
99.             time = view.findViewById(R.id.tv_time);
100.         }
101.     }
102. }

复制代码

11.显示列表的数据

在MainActivity中首先定义6个数组，分别是标题titles,用户名数据names,评论comments,发布时间times,icons1（显示一张图数据）,icons2（显示两张图数据），定义的数据添加到NewsList中，并将集合数据设置到NewsAdapter中，详细代码如下：

1. package cn.itcast.headline;
3. import android.os.Bundle;
5. import androidx.activity.EdgeToEdge;
6. import androidx.appcompat.app.AppCompatActivity;
7. import androidx.core.graphics.Insets;
8. import androidx.core.view.ViewCompat;
9. import androidx.core.view.WindowInsetsCompat;
10. import androidx.recyclerview.widget.RecyclerView;
12. import androidx.recyclerview.widget.RecyclerView;
13. import androidx.recyclerview.widget.LinearLayoutManager;
14. import java.util.ArrayList;
15. import java.util.List;
17. public class MainActivity extends AppCompatActivity {
18.     private String[] titles = {"各地餐企齐行动，杜绝餐饮浪费","花菜有人焯水，有人直接炒，都错了，看饭店大厨如何做",
19.             "睡觉时，双脚突然蹬一下，有踩空感，像高楼坠落，是咋回事？",
20.             "实拍外卖小哥砸开小吃店的卷帘门救火，灭火后淡定继续送外卖",
21.             "还没成熟就被迫提前采摘，8毛一斤却没人要，果农无奈：不摘不行",
22.             "大会、大展、大赛一起来，北京电竞“好嗨哟”"};
23.     private String[] names = {"央视新闻客户端","味美食记","民富康健康","生活小记","禾木报告","燕鸣"};
24.     private String[] comment = {"9884评","18评","78评","678评","189评","304评"};
25.     private String[] times = {"6小时前","刚刚","1小时前","2小时前","3小时前","4小时前"};
26.     private int[] icons1 = {R.drawable.food,R.drawable.takeout,R.drawable.e_sports};
27.     private int[] icons2 = {R.drawable.sleep1, R.drawable.sleep2, R.drawable.sleep3, R.drawable.fruit1, R.drawable.fruit2, R.drawable.fruit3};
28.     private int[] types = {1,1,2,1,2,1};
29.     private RecyclerView mRecyclerView;
30.     private NewsAdapter mAdapter;
31.     private List<NewsBean> NewsList;
32.     @Override
33.     protected void onCreate(Bundle savedInstanceState) {
34.         super.onCreate(savedInstanceState);
35.         setContentView(R.layout.activity_main);
36.         setData();
37.         mRecyclerView = findViewById(R.id.rv_list);
38.         mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
39.         mAdapter = new NewsAdapter(MainActivity.this,NewsList);
40.         mRecyclerView.setAdapter(mAdapter);
41.     }
42.     private void setData(){
43.         NewsList = new ArrayList<NewsBean>();
44.         NewsBean bean;
45.         for (int i = 0;i < titles.length;i++){
46.             bean = new NewsBean();
47.             bean.setId(i+1);
48.             bean.setTitle(titles[i]);
49.             bean.setName(names[i]);
50.             bean.setComment(comment[i]);
51.             bean.setTime(times[i]);
52.             bean.setType(types[i]);
53.             switch (i){
54.                 case 0:
55.                     List<Integer> imgList0 = new ArrayList<>();
56.                     bean.setImList(imgList0);
57.                     break;
58.                 case 1 :
59.                     List<Integer> imgList1 = new ArrayList<>();
60.                     bean.setImList(imgList1);
61.                     break;
62.                 case 2:
63.                     List<Integer> imgList2 = new ArrayList<>();
64.                     imgList2.add(icons2[i-2]);
65.                     imgList2.add(icons2[i-1]);
66.                     imgList2.add(icons2[i]);
67.                     bean.setImList(imgList2);
68.                     break;
69.                 case 3:
70.                     List<Integer> imgList3 = new ArrayList<>();
71.                     imgList3.add(icons1[i-2]);
72.                     bean.setImList(imgList3);
73.                     break;
74.                 case 4:
75.                     List<Integer> imgList4 = new ArrayList<>();
76.                     imgList4.add(icons2[i-1]);
77.                     imgList4.add(icons2[i]);
78.                     imgList4.add(icons2[i+1]);
79.                     bean.setImList(imgList4);
80.                     break;
81.                 case 5:
82.                     List<Integer> imgList5 = new ArrayList<>();
83.                     imgList5.add(icons1[i-3]);
84.                     bean.setImList(imgList5);
85.                     break;
86.             }
87.             NewsList.add(bean);
88.         }
89.     }
90. }

复制代码

12. 运行效果展示

到此就做完啦！感谢支持！
还有一些我在做的过程中遇到的一些问题，你本身做的时候是否也遇到了，请参考我 android报错 这个文章！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。