Android实现新闻效果原来如此简单
大家好，本篇文章教大家如何实现一个类似今日头条的效果。如果您熟悉RecyclerView的用法那么本篇文章会提供一个思路，如果您不会RecyclerView。本篇文章也会带你学习它。同时，在本文中您将会学会如何上拉加载，下拉刷新控件的用法。本文效果不仅仅限于新闻效果，同时比如购物列表，动态列表等效果都可以用本思路实现。效果图如下：
本文的知识点如下：
一：RecycerView+CommonPullToRefresh的实现上拉加载下拉刷新
二：每个item根据不同的类型加载不同的布局
三：解析JSON数据设置到每个item上
第一步：编写几种不同类型type的item布局
我们知道新闻列表有好几种item类型。本文只编写了2种布局，真正的新闻列表可能还包括视频布局，图集新闻等多种item类型。不过咱们以不变应万变，再多的item类型也不用担心。
单图文布局recyclerview_item_type_02.xml如下：
效果如下：
多图文布局recyclerview_item_type_01.xml如下：
效果图如下：
第二步：添加依赖，导入RecyclerView和CommonPullToRefresh控件。
compile 'com.android.support:recyclerview-v7:24.0.0-alpha1'
compile 'com.chanven.lib:cptr:1.1.0'第三步：创建主布局，实例化RecyclerView控件并为其设置Adapter适配器
package com.example.mulrecyclerviewdemo;
import android.os.Bundle;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.widget.Toast;
import com.chanven.lib.cptr.PtrClassicFrameLayout;
import com.chanven.lib.cptr.PtrDefaultHandler;
import com.chanven.lib.cptr.PtrFrameLayout;
import com.chanven.lib.cptr.loadmore.OnLoadMoreListener;
import com.chanven.lib.cptr.recyclerview.RecyclerAdapterWithHF;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private String strJson="{\"pages\":1,\"data\":[{\"type\":0,\"title\":\"澳大利亚向非洲捐赠1000万美元\",\"time\":\"1小时前\",\"author\":\"卡尔网\",\"imgs\":[\"http://52sjw.com/images/jasdhisah.img\"]},{\"type\":1,\"title\":\"澳大利亚向非洲捐赠1000万美元\",\"time\":\"1小时前\",\"author\":\"卡尔网\",\"imgs\":[\"http://52sjw.com/images/jasdhisah.img\",\"http://52sjw.com/images/jasdhisah.img\",\"http://52sjw.com/images/jasdhisah.img\"]},{\"type\":0,\"title\":\"澳大利亚向非洲捐赠1000万美元\",\"time\":\"1小时前\",\"author\":\"卡尔网\",\"imgs\":[\"http://52sjw.com/images/jasdhisah.img\"]},{\"type\":1,\"title\":\"澳大利亚向非洲捐赠1000万美元\",\"time\":\"1小时前\",\"author\":\"卡尔网\",\"imgs\":[\"http://52sjw.com/images/jasdhisah.img\",\"http://52sjw.com/images/jasdhisah.img\",\"http://52sjw.com/images/jasdhisah.img\"]},{\"type\":0,\"title\":\"澳大利亚向非洲捐赠1000万美元\",\"time\":\"1小时前\",\"author\":\"卡尔网\",\"imgs\":[\"http://52sjw.com/images/jasdhisah.img\"]},{\"type\":1,\"title\":\"澳大利亚向非洲捐赠1000万美元\",\"time\":\"1小时前\",\"author\":\"卡尔网\",\"imgs\":[\"http://52sjw.com/images/jasdhisah.img\",\"http://52sjw.com/images/jasdhisah.img\",\"http://52sjw.com/images/jasdhisah.img\"]},{\"type\":0,\"title\":\"澳大利亚向非洲捐赠1000万美元\",\"time\":\"1小时前\",\"author\":\"卡尔网\",\"imgs\":[\"http://52sjw.com/images/jasdhisah.img\"]},{\"type\":1,\"title\":\"澳大利亚向非洲捐赠1000万美元\",\"time\":\"1小时前\",\"author\":\"卡尔网\",\"imgs\":[\"http://52sjw.com/images/jasdhisah.img\",\"http://52sjw.com/images/jasdhisah.img\",\"http://52sjw.com/images/jasdhisah.img\"]},{\"type\":0,\"title\":\"澳大利亚向非洲捐赠1000万美元\",\"time\":\"1小时前\",\"author\":\"卡尔网\",\"imgs\":[\"http://52sjw.com/images/jasdhisah.img\"]},{\"type\":1,\"title\":\"澳大利亚向非洲捐赠1000万美元\",\"time\":\"1小时前\",\"author\":\"卡尔网\",\"imgs\":[\"http://52sjw.com/images/jasdhisah.img\",\"http://52sjw.com/images/jasdhisah.img\",\"http://52sjw.com/images/jasdhisah.img\"]}]}";
private RecyclerView recyclerView;
private PtrClassicFrameLayout ptrClassicFrameLayout;
private Handler handler=new Handler();
private int page = 0;
private List list = new ArrayList();
private MulRecyclerViewAdapter adapter;
private RecyclerAdapterWithHF mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_acitivity);
initView();
adapter = new MulRecyclerViewAdapter(this,list);
mAdapter = new RecyclerAdapterWithHF(adapter);
recyclerView.setAdapter(mAdapter);
ptrClassicFrameLayout.postDelayed(new Runnable() {
@Override
public void run() {
ptrClassicFrameLayout.autoRefresh(true);
}
}, 150);
ptrClassicFrameLayout.setPtrHandler(new PtrDefaultHandler() {
@Override
public void onRefreshBegin(PtrFrameLayout frame) {
handler.postDelayed(new Runnable() {
@Override
public void run() {
page= 0;
list.clear();
try {
JSONObject jsonObject = new JSONObject(strJson);
JSONArray jsonArray = jsonObject.getJSONArray("data");
for(int i = 0;i<10;i++){
NewsPhotoBean newsPhotoBean = new NewsPhotoBean();
newsPhotoBean.setType(jsonArray.getJSONObject(i).getInt("type"));
newsPhotoBean.setTitle(jsonArray.getJSONObject(i).getString("title"));
newsPhotoBean.setF_time(jsonArray.getJSONObject(i).getString("time"));
newsPhotoBean.setAuthor(jsonArray.getJSONObject(i).getString("author"));
int len = jsonArray.getJSONObject(i).getJSONArray("imgs").length();
List ls = new ArrayList<>();
for(int j = 0;j ls = new ArrayList<>();
for(int j = 0;j 第四步：创建RecyclerView的适配器。
package com.example.mulrecyclerviewdemo;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.support.v7.widget.RecyclerView;
import android.util.Base64;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import java.util.List;
import static android.R.attr.author;
import static android.R.attr.type;
import static android.R.id.list;
import static android.media.CamcorderProfile.get;
/**
* Created by chenlei on 2017/10/11.
*/
public class MulRecyclerViewAdapter extends RecyclerView.Adapter {
private static final int NEW_SIMPLE_TYPE = 0;//单图文模式
private static final int NEW_MUL_TYPE = 1;//多图文模式
private static final int NEW_OTHER_TYPE = 2;//多图文模式
private Context context;
private List list;
MulRecyclerViewAdapter(Context context, List list) {
this.context = context;
this.list = list;
}
//重写getItemViewType方法,通过此方法来判断应该加载是哪种类型布局
@Override
public int getItemViewType(int position) {
int type = list.get(position).getType();
switch (type) {
case 0:
return NEW_SIMPLE_TYPE;
case 1:
return NEW_MUL_TYPE;
}
return NEW_OTHER_TYPE;
}
//根据不同的item类型来加载不同的viewholder
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
LayoutInflater inflater = LayoutInflater.from(context);
switch (viewType) {
case NEW_SIMPLE_TYPE:
return new NewsPhotoViewHolder(inflater.inflate(R.layout.recyclerview_item_type_02, parent, false));
case NEW_MUL_TYPE:
return new NewsPhotosViewHolder(inflater.inflate(R.layout.recyclerview_item_type_01, parent, false));
}
return null;
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
//把对应位置的数据得到
String title = list.get(position).getTitle();
String time = list.get(position).getF_time();
String author = list.get(position).getAuthor();
List ls = list.get(position).getList();//这里是json数据中的图片集合，也就是封面。不同类型item的封面图片数量是不一样的
// //无论是否单图文，标题和更新时间以及作者不变
//如果单图文
if (holder instanceof NewsPhotoViewHolder) {
((NewsPhotoViewHolder) holder).tx_news_simple_photos_title.setText(title);
((NewsPhotoViewHolder) holder).tx_news_simple_photos_time.setText(time);
((NewsPhotoViewHolder) holder).tx_news_simple_photos_author.setText(author);
// ((NewsPhotoViewHolder) holder).img_news_simple_photos_01.setImageBitmap(btm_01);//单图文不用遍历直接将图片转换bitmap对象设置到ImageView上
return;
}
//如果多图文
if (holder instanceof NewsPhotosViewHolder) {
((NewsPhotosViewHolder) holder).tx_news_mul_photos_title.setText(title);
((NewsPhotosViewHolder) holder).tx_news_mul_photos_time.setText(time);
((NewsPhotosViewHolder) holder).tx_news_mul_photos_author.setText(author);
// ((NewsPhotosViewHolder) holder).img_news_mul_photos_01.setImageBitmap(btm_01);//多图文需要遍历list将每个图片链接转换成Bitmap对象设置到ImageView上
// ((NewsPhotosViewHolder) holder).img_news_mul_photos_02.setImageBitmap(btm_02);
// ((NewsPhotosViewHolder) holder).img_news_mul_photos_03.setImageBitmap(btm_03);
return;
}
}
//具体item数据等于pages*10，每页10条
@Override
public int getItemCount() {
return list.size();
}
/**
* NewsPhotoViewHolder为单图文模式
*/
class NewsPhotoViewHolder extends RecyclerView.ViewHolder {
private TextView tx_news_simple_photos_title;//标题
private ImageView img_news_simple_photos_01;//单图文模式的唯一一张图
private TextView tx_news_simple_photos_time;//单图文模式的更新时间
private TextView tx_news_simple_photos_author;//单图文模式的新闻作者
public NewsPhotoViewHolder(View itemView) {
super(itemView);
tx_news_simple_photos_title = (TextView) itemView.findViewById(R.id.tx_news_simple_photos_title);//标题
// img_news_simple_photos_01 = (ImageView) itemView.findViewById(R.id.tx_news_simple_photos_01);//单图文模式的唯一一张图
tx_news_simple_photos_time = (TextView) itemView.findViewById(R.id.tx_news_simple_photos_time);//单图文模式的更新时间
tx_news_simple_photos_author = (TextView) itemView.findViewById(R.id.img_news_simple_photos_author);//单图文模式的新闻作者
}
}
/**
* NewsPhotosViewHolder为多图模式
*/
class NewsPhotosViewHolder extends RecyclerView.ViewHolder {
private TextView tx_news_mul_photos_title;//标题
// private ImageView img_news_mul_photos_01;//多图文模式的第一张图
// private ImageView img_news_mul_photos_02;//多图文模式的第二张图
// private ImageView img_news_mul_photos_03;//多图文模式的第三张图
private TextView tx_news_mul_photos_time;//多图文模式的更新时间
private TextView tx_news_mul_photos_author;//多图文模式的新闻作者
public NewsPhotosViewHolder(View itemView) {
super(itemView);
tx_news_mul_photos_title = (TextView) itemView.findViewById(R.id.tx_news_mul_photos_title);
// img_news_mul_photos_01 = (ImageView) itemView.findViewById(R.id.img_news_mul_photos_01);
// img_news_mul_photos_02 = (ImageView) itemView.findViewById(R.id.img_news_mul_photos_02);
// img_news_mul_photos_03 = (ImageView) itemView.findViewById(R.id.img_news_mul_photos_03);
tx_news_mul_photos_time = (TextView) itemView.findViewById(R.id.tx_news_mul_photos_time);
tx_news_mul_photos_author = (TextView) itemView.findViewById(R.id.tx_news_mul_photos_author);
}
}
}
第五步:封装每条item的数据到实体类中
NewsPhotoBean.java实体类代码：
主布局main_acitivity.xml代码：
package com.example.mulrecyclerviewdemo;
import android.graphics.Bitmap;
import android.widget.ImageView;
import java.util.List;
import static android.R.attr.type;
/**
* Created by chenlei on 2017/10/11.
*/
public class NewsPhotoBean {
public List list;//封面图片的集合
private int type;//排版类型
private String title;//标题
private String f_time;//发布时间
private String author;//作者
public List getList() {
return list;
}
public void setList(List list) {
this.list = list;
}
public int getType() {
return type;
}
public void setType(int type) {
this.type = type;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getF_time() {
return f_time;
}
public void setF_time(String f_time) {
this.f_time = f_time;
}
public String getAuthor() {
return author;
}
public void setAuthor(String author) {
this.author = author;
}
}
给大家总结一下：
- 导入上拉加载跟多下拉刷新控件CommonPullToRefresh和RecyclerView控件。
- 编写item布局，有多少种item就编写多少种。
- 在下拉刷新上拉加载更多控件中嵌套RecyclerView控件
- 在主布局中实例化2个控件，并且重写CommonPullToRefresh的一些方法，具体的看该控件的用法，github项目中有用法说明，详情上拉加载更多下拉刷新控件的用法
- 编写RecyclerView适配器。
- 根据list传入的数据获取item的类型。
- 根据item类型编写不同的ViewHolder。
- 根据不同的ViewHolder进行数据和行为的绑定。