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

编程问答

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

發布時間：2025/3/20 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了（仿头条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.点击过的新闻列表