文章目錄
列表頁面設計
效果圖
具體實現
添加Glide依賴
implementation 'com.github.bumptech.glide:glide:3.7.0'
添加主頁面和兩個列表佈局
fragmet_new_list
<?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">
<com.handmark.pulltorefresh.library.PullToRefreshListView
android:id="@+id/pull_listview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
一個圖片的列表佈局
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">
<ImageView
android:id="@+id/item_image"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:scaleType="centerCrop"
android:layout_width="150dp"
android:layout_height="100dp" />
<TextView
android: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" />
<TextView
android: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">
<TextView
android:id="@+id/item_title_three"
android:layout_width="match_parent"
android:lines="1"
android:textSize="18sp"
android:text="我是標題"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_centerVertical="true"
>
<ImageView
android:id="@+id/item_image1_three"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="100dp"
android:scaleType="centerCrop"/>
<ImageView
android:id="@+id/item_image2_three"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_marginLeft="5dp"
android:layout_height="100dp"
android:scaleType="centerCrop"/>
<ImageView
android: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>
<TextView
android: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;
@Override
protected View getMyView() {
//4.加載佈局
fragmentView = View.inflate(getContext(), R.layout.fragment_new_list,null);
return fragmentView;
}
//5.請求服務端數據
@Override
public 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>() {
@Override
public void onResponse(Call<NewListData> call, Response<NewListData> response) {
//將請求的數據傳給視圖
setDataToView(response.body().data);
}
@Override
public 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;
}
@Override
public int getViewTypeCount() {
//返回兩種視圖,一種是一圖的,一種是三圖的
return 2;
}
@Override
public 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
}
}
@Override
public int getCount() {
return listData.size();
}
@Override
public Object getItem(int position) {
return null;
}
@Override
public long getItemId(int position) {
return 0;
}
@Override
public 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);
}
}
@NonNull
private 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;
}
//當視圖是一張圖片時
@NonNull
private 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;
}
}
}