当前位置：首页 > 编程资源 > 编程问答 >内容正文

编程问答

（仿头条APP项目）5.列表页面设计实现

发布时间：2025/3/20 编程问答 40 豆豆

生活随笔收集整理的这篇文章主要介绍了（仿头条APP项目）5.列表页面设计实现小编觉得挺不错的,现在分享给大家,帮大家做个参考.

文章目录

列表页面设计
- 效果图
- 具体实现
- - 添加Glide依赖
  - 添加主页面和两个列表布局
  - 用GsonFormat快速创建NewListData实体类存放新闻列表数据
  - MyApi添加一个获取新闻列表的方法
  - 主页面具体代码实现

列表页面设计

效果图

具体实现

添加Glide依赖

implementation 'com.github.bumptech.glide:glide:3.7.0'

添加主页面和两个列表布局

fragmet_new_list

一个图片的列表布局
item_new_one

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout android:orientation="vertical" 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:layout_width="match_parent"android:padding="10dp"android:layout_height="match_parent"><ImageViewandroid:id="@+id/item_image"android:layout_centerVertical="true"android:layout_alignParentRight="true"android:scaleType="centerCrop"android:layout_width="150dp"android:layout_height="100dp" /><TextViewandroid:id="@+id/item_title"android:layout_alignTop="@id/item_image"android:layout_width="280dp"android:lines="2"android:textSize="18sp"android:text="我是标题"android:layout_height="wrap_content" /><TextViewandroid:id="@+id/item_date"android:layout_alignBottom="@id/item_image"android:layout_width="match_parent"android:lines="1"android:textSize="18sp"android:text="2020"android:layout_height="wrap_content" /> </RelativeLayout>

三个图片的列表布局
item_new_three

<?xml version="1.0" encoding="utf-8"?> <LinearLayout android:orientation="vertical" 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:layout_width="match_parent"android:layout_height="match_parent"android:padding="10dp"><TextViewandroid:id="@+id/item_title_three"android:layout_width="match_parent"android:lines="1"android:textSize="18sp"android:text="我是标题"android:layout_height="wrap_content" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:layout_centerVertical="true"><ImageViewandroid:id="@+id/item_image1_three"android:layout_weight="1"android:layout_width="0dp"android:layout_height="100dp"android:scaleType="centerCrop"/><ImageViewandroid:id="@+id/item_image2_three"android:layout_weight="1"android:layout_width="0dp"android:layout_marginLeft="5dp"android:layout_height="100dp"android:scaleType="centerCrop"/><ImageViewandroid:id="@+id/item_image3_three"android:layout_weight="1"android:layout_width="0dp"android:layout_height="100dp"android:layout_marginLeft="5dp"android:scaleType="centerCrop"/></LinearLayout><TextViewandroid:id="@+id/item_date_three"android:layout_width="wrap_content"android:layout_gravity="right"android:lines="1"android:textSize="15sp"android:text="2020"android:layout_height="wrap_content" /> </LinearLayout>

用GsonFormat快速创建NewListData实体类存放新闻列表数据

NewListData

package com.xzit.bean;import java.util.List;public class NewListData {/*** data : {"countcommenturl":"http://jrtt.qianlong.com/client/content/countComment/","more":"10007/list_2.json","news":[{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35319","id":35311,"listimage":"/jrtt/10007/1.jpg","pubdate":"2014-10-1113:18","title":"网上大讲堂第368期预告：义务环保人人有责","type":0,"url":"/jrtt/10007/724D6A55496A11726628.html","listimage1":"/jrtt/10007/4.jpg","listimage2":"/jrtt/10007/5.jpg"},{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35319","id":35312,"listimage":"/jrtt/10007/2.jpg","pubdate":"2014-10-1111:20","title":"马路改建为停车场车位年费高达3000元","type":0,"url":"/jrtt/10007/724D6A55496A11726628.html"},{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35319","id":35313,"listimage":"/jrtt/10007/3.jpg","listimage1":"/jrtt/10007/4.jpg","listimage2":"/jrtt/10007/5.jpg","pubdate":"2014-10-1110:34","title":"北京两年内将迁出1200家工业污染企业","type":1,"url":"/jrtt/10007/724D6A55496A11726628.html"},{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35319","id":35314,"listimage":"/jrtt/10007/6.jpg","pubdate":"2014-10-1110:08","title":"大雾再锁京城机场航班全部延误","type":0,"url":"/jrtt/10007/724D6A55496A11726628.html"},{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35319","id":35315,"listimage":"/jrtt/10007/7.jpg","listimage1":"/jrtt/10007/8.jpg","listimage2":"/jrtt/10007/9.jpg","pubdate":"2014-10-1110:03","title":"APEC会议期间调休企业员工盼同步放假","type":1,"url":"/jrtt/10007/724D6A55496A11726628.html"},{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35319","id":35316,"listimage":"/jrtt/10007/10.jpg","pubdate":"2014-10-1109:59","title":"机械\u201c龙马\u201d巡演17日亮相奥园","type":0,"url":"/jrtt/10007/724D6A55496A11726628.html"},{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35319","id":35310,"listimage":"/jrtt/10007/11.jpg","listimage1":"/jrtt/10007/12.jpg","listimage2":"/jrtt/10007/13.jpg","pubdate":"2014-10-1109:54","title":"门头沟获批100套限价房","type":1,"url":"/jrtt/10007/724D6A55496A11726628.html"},{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35319","id":35318,"listimage":"/jrtt/10007/14.jpg","pubdate":"2014-10-1109:52","title":"APEC期间净空区放带灯风筝可拘留","type":0,"url":"/jrtt/10007/724D6A55496A11726628.html"},{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35314","id":35314,"listimage":"/jrtt/10007/15.jpg","pubdate":"2014-10-1109:48","title":"今起两自住房摇号","type":0,"url":"/jrtt/10007/724D6A55496A11726628.html"},{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35117","id":35117,"listimage":"/jrtt/10007/16.jpg","listimage1":"/jrtt/10007/17.jpg","listimage2":"/jrtt/10007/18.jpg","pubdate":"2014-10-1109:45","title":"故宫神武门广场拟夜间开放停车","type":1,"url":"/jrtt/10007/724D6A55496A11726628.html"}],"title":"北京","topic":[{"description":"11111111","id":10101,"listimage":"/jrtt/10007/1452327318UU91.jpg","sort":1,"title":"北京","url":"/jrtt/10007/list_1.json"},{"description":"22222222","id":10100,"listimage":"/jrtt/10007/1452327318UU91.jpg","sort":2,"title":"222222222222","url":"/jrtt/10007/list_1.json"}],"topnews":[{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35301","id":35301,"pubdate":"2020-04-0814:24","title":"蜗居生活","topimage":"/jrtt/10007/1452327318UU91.jpg","type":"news","url":"/jrtt/10007/724D6A55496A11726628.html"},{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35125","id":35125,"pubdate":"2020-04-0809:09","title":"中秋赏月","topimage":"/jrtt/10007/1452327318UU92.jpg","type":"news","url":"/jrtt/10007/724D6A55496A11726628.html"},{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35125","id":35126,"pubdate":"2020-04-0809:09","title":"天空翱翔","topimage":"/jrtt/10007/1452327318UU93.jpg","type":"news","url":"/jrtt/10007/724D6A55496A11726628.html"},{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35125","id":35127,"pubdate":"2020-04-0809:09","title":"感官设计","topimage":"/jrtt/10007/1452327318UU94.png","type":"news","url":"/jrtt/10007/724D6A55496A11726628.html"}]}* retcode : 200*/public DataBean data;public int retcode;public static class DataBean {/*** countcommenturl : http://jrtt.qianlong.com/client/content/countComment/* more : 10007/list_2.json* news : [{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35319","id":35311,"listimage":"/jrtt/10007/1.jpg","pubdate":"2014-10-1113:18","title":"网上大讲堂第368期预告：义务环保人人有责","type":0,"url":"/jrtt/10007/724D6A55496A11726628.html"},{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35319","id":35312,"listimage":"/jrtt/10007/2.jpg","pubdate":"2014-10-1111:20","title":"马路改建为停车场车位年费高达3000元","type":0,"url":"/jrtt/10007/724D6A55496A11726628.html"},{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35319","id":35313,"listimage":"/jrtt/10007/3.jpg","listimage1":"/jrtt/10007/4.jpg","listimage2":"/jrtt/10007/5.jpg","pubdate":"2014-10-1110:34","title":"北京两年内将迁出1200家工业污染企业","type":1,"url":"/jrtt/10007/724D6A55496A11726628.html"},{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35319","id":35314,"listimage":"/jrtt/10007/6.jpg","pubdate":"2014-10-1110:08","title":"大雾再锁京城机场航班全部延误","type":0,"url":"/jrtt/10007/724D6A55496A11726628.html"},{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35319","id":35315,"listimage":"/jrtt/10007/7.jpg","listimage1":"/jrtt/10007/8.jpg","listimage2":"/jrtt/10007/9.jpg","pubdate":"2014-10-1110:03","title":"APEC会议期间调休企业员工盼同步放假","type":1,"url":"/jrtt/10007/724D6A55496A11726628.html"},{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35319","id":35316,"listimage":"/jrtt/10007/10.jpg","pubdate":"2014-10-1109:59","title":"机械\u201c龙马\u201d巡演17日亮相奥园","type":0,"url":"/jrtt/10007/724D6A55496A11726628.html"},{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35319","id":35310,"listimage":"/jrtt/10007/11.jpg","listimage1":"/jrtt/10007/12.jpg","listimage2":"/jrtt/10007/13.jpg","pubdate":"2014-10-1109:54","title":"门头沟获批100套限价房","type":1,"url":"/jrtt/10007/724D6A55496A11726628.html"},{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35319","id":35318,"listimage":"/jrtt/10007/14.jpg","pubdate":"2014-10-1109:52","title":"APEC期间净空区放带灯风筝可拘留","type":0,"url":"/jrtt/10007/724D6A55496A11726628.html"},{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35314","id":35314,"listimage":"/jrtt/10007/15.jpg","pubdate":"2014-10-1109:48","title":"今起两自住房摇号","type":0,"url":"/jrtt/10007/724D6A55496A11726628.html"},{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35117","id":35117,"listimage":"/jrtt/10007/16.jpg","listimage1":"/jrtt/10007/17.jpg","listimage2":"/jrtt/10007/18.jpg","pubdate":"2014-10-1109:45","title":"故宫神武门广场拟夜间开放停车","type":1,"url":"/jrtt/10007/724D6A55496A11726628.html"}]* title : 北京* topic : [{"description":"11111111","id":10101,"listimage":"/jrtt/10007/1452327318UU91.jpg","sort":1,"title":"北京","url":"/jrtt/10007/list_1.json"},{"description":"22222222","id":10100,"listimage":"/jrtt/10007/1452327318UU91.jpg","sort":2,"title":"222222222222","url":"/jrtt/10007/list_1.json"}]* topnews : [{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35301","id":35301,"pubdate":"2020-04-0814:24","title":"蜗居生活","topimage":"/jrtt/10007/1452327318UU91.jpg","type":"news","url":"/jrtt/10007/724D6A55496A11726628.html"},{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35125","id":35125,"pubdate":"2020-04-0809:09","title":"中秋赏月","topimage":"/jrtt/10007/1452327318UU92.jpg","type":"news","url":"/jrtt/10007/724D6A55496A11726628.html"},{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35125","id":35126,"pubdate":"2020-04-0809:09","title":"天空翱翔","topimage":"/jrtt/10007/1452327318UU93.jpg","type":"news","url":"/jrtt/10007/724D6A55496A11726628.html"},{"comment":true,"commentlist":"/jrtt/10007/comment_1.json","commenturl":"http://jrtt.qianlong.com/client/user/newComment/35125","id":35127,"pubdate":"2020-04-0809:09","title":"感官设计","topimage":"/jrtt/10007/1452327318UU94.png","type":"news","url":"/jrtt/10007/724D6A55496A11726628.html"}]*/public String countcommenturl;public String more;public String title;public List<NewsBean> news;public List<TopicBean> topic;public List<TopnewsBean> topnews;public static class NewsBean {/*** comment : true* commentlist : /jrtt/10007/comment_1.json* commenturl : http://jrtt.qianlong.com/client/user/newComment/35319* id : 35311* listimage : /jrtt/10007/1.jpg* pubdate : 2014-10-1113:18* title : 网上大讲堂第368期预告：义务环保人人有责* type : 0* url : /jrtt/10007/724D6A55496A11726628.html* listimage1 : /jrtt/10007/4.jpg* listimage2 : /jrtt/10007/5.jpg*/public boolean comment;public String commentlist;public String commenturl;public int id;public String listimage;public String pubdate;public String title;public int type;public String url;public String listimage1;public String listimage2;}public static class TopicBean {/*** description : 11111111* id : 10101* listimage : /jrtt/10007/1452327318UU91.jpg* sort : 1* title : 北京* url : /jrtt/10007/list_1.json*/public String description;public int id;public String listimage;public int sort;public String title;public String url;}public static class TopnewsBean {/*** comment : true* commentlist : /jrtt/10007/comment_1.json* commenturl : http://jrtt.qianlong.com/client/user/newComment/35301* id : 35301* pubdate : 2020-04-0814:24* title : 蜗居生活* topimage : /jrtt/10007/1452327318UU91.jpg* type : news* url : /jrtt/10007/724D6A55496A11726628.html*/public boolean comment;public String commentlist;public String commenturl;public int id;public String pubdate;public String title;public String topimage;public String type;public String url;}} }

MyApi添加一个获取新闻列表的方法

MyApi

public interface MyApi {//注解与方法组成实现类@GET("home.json")public Call<ResponseData> getType();@GET("10007/list_1.json")public Call<NewListData> getNewList(); }

主页面具体代码实现

import android.graphics.Color; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.Gravity; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import android.widget.TextView;import com.bumptech.glide.Glide; import com.example.administrator.zhjrtt.R; import com.google.gson.Gson; import com.handmark.pulltorefresh.library.PullToRefreshListView; import com.xzit.bean.NewListData; import com.xzit.fragment.BaseFragment; import com.xzit.net.MyApi;import java.util.List;import retrofit2.Call; import retrofit2.Callback; import retrofit2.Response; import retrofit2.Retrofit; import retrofit2.converter.gson.GsonConverterFactory;//1.继承BaseFragment public class Page1Fragment extends BaseFragment {//2.重写getMyView//3.布局列表View fragmentView;@Overrideprotected View getMyView() {//4.加载布局fragmentView = View.inflate(getContext(), R.layout.fragment_new_list,null);return fragmentView;}//5.请求服务端数据@Overridepublic void onActivityCreated(@Nullable Bundle savedInstanceState) {super.onActivityCreated(savedInstanceState);Retrofit retrofit = new Retrofit.Builder()//创建器.baseUrl("http://192.168.31.114:8080/jrtt/")//项目路径，以/结束.addConverterFactory(GsonConverterFactory.create(new Gson())).build();//执行创建//6.执行请求retrofit.create(MyApi.class).getNewList().enqueue(new Callback<NewListData>() {@Overridepublic void onResponse(Call<NewListData> call, Response<NewListData> response) {//将请求的数据传给视图setDataToView(response.body().data);}@Overridepublic void onFailure(Call<NewListData> call, Throwable t) {}});}//7.显示private void setDataToView(NewListData.DataBean data) {//查找空间PullToRefreshListView pullToRefreshListView = fragmentView.findViewById(R.id.pull_listview);//赋值一个适配器NewListAdapter adapter = new NewListAdapter(data.news);pullToRefreshListView.setAdapter(adapter);}class ViewHolderOne{public TextView title;public TextView date;public ImageView image;}class ViewHolderThree extends ViewHolderOne{public ImageView image1;public ImageView image2;}//8.定义适配器class NewListAdapter extends BaseAdapter {private List<NewListData.DataBean.NewsBean> listData;public NewListAdapter( List<NewListData.DataBean.NewsBean> list) {listData = list;}@Overridepublic int getViewTypeCount() {//返回两种视图，一种是一图的，一种是三图的return 2;}@Overridepublic int getItemViewType(int position) {NewListData.DataBean.NewsBean bean = listData.get(position);if(bean.type==0){//一图return 0;//R.layout.item_new_one.xml}else {//三图return 1;R.layout.item_new_three.xml}}@Overridepublic int getCount() {return listData.size();}@Overridepublic Object getItem(int position) {return null;}@Overridepublic long getItemId(int position) {return 0;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {ViewHolderOne holderOne = null;ViewHolderThree holderThree = null;//获取数据NewListData.DataBean.NewsBean newsBean = listData.get(position);//判断当前的视图是一图还是三图int type = getItemViewType(position);if(type==0){//一图return setDataToOneView(convertView, newsBean);}else {//三图return setDataToThreeView(convertView, newsBean);}}@NonNullprivate View setDataToThreeView(View convertView, NewListData.DataBean.NewsBean newsBean) {ViewHolderThree holderThree;if(convertView == null){convertView = View.inflate(getContext(),R.layout.item_new_three,null);holderThree = new ViewHolderThree();holderThree.title = convertView.findViewById(R.id.item_title_three);holderThree.date = convertView.findViewById(R.id.item_date_three);holderThree.image = convertView.findViewById(R.id.item_image1_three);holderThree.image1 = convertView.findViewById(R.id.item_image2_three);holderThree.image2 = convertView.findViewById(R.id.item_image3_three);convertView.setTag(holderThree);}else {holderThree = (ViewHolderThree) convertView.getTag();}holderThree.title.setText(newsBean.title);holderThree.date.setText(newsBean.pubdate);String imageUrl= "http://192.168.31.114:8080"+newsBean.listimage;String imageUrl1= "http://192.168.31.114:8080"+newsBean.listimage1;String imageUrl2= "http://192.168.31.114:8080"+newsBean.listimage2;Glide.with(getContext()).load(imageUrl).into(holderThree.image);Glide.with(getContext()).load(imageUrl1).into(holderThree.image1);Glide.with(getContext()).load(imageUrl2).into(holderThree.image2);return convertView;}//当视图是一张图片时@NonNullprivate View setDataToOneView(View convertView, NewListData.DataBean.NewsBean newsBean) {ViewHolderOne holderOne;if(convertView ==null){//视图不是重用时convertView = View.inflate(getContext(),R.layout.item_new_one,null);holderOne = new ViewHolderOne();holderOne. title = convertView.findViewById(R.id.item_title);holderOne. date = convertView.findViewById(R.id.item_date);holderOne. image = convertView.findViewById(R.id.item_image);convertView.setTag(holderOne);}else {//视图重用holderOne= (ViewHolderOne) convertView.getTag();}holderOne. title.setText(newsBean.title);holderOne. date.setText(newsBean.pubdate);String imageUrl= "http://192.168.31.114:8080"+newsBean.listimage;Glide.with(getContext()).load(imageUrl).into(holderOne.image);return convertView;}} }

总结

以上是生活随笔为你收集整理的（仿头条APP项目）5.列表页面设计实现的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。

上一篇：（Java）关于泛型
下一篇：（仿头条APP项目）6.点击过的新闻列表