【android】使用RecyclerView和CardView,实现知乎日报精致布局
时间： 11:54:32
&&&& 阅读：49495
&&&& 评论：
&&&& 收藏：0
标签：完整代码，请参考我的博客园客户端，git地址：
在写博客园客户端的时候，突然想到，弄个知乎日报风格的简单清爽多好！不需要那么多繁杂的信息干扰视野。
先贴上效果图，左边是知乎日报的，右边是本方案的
本文所使用的ide是androidStudio
首先我们需要在项目中，引入RecyclerView、CardView
在build.gradle的 dependencies 添加两条引用语句，如
dependencies {
compile fileTree(include: [‘*.jar‘], dir: ‘libs‘)
compile ‘com.android.support:appcompat-v7:22.0.0‘
compile ‘com.android.support:cardview-v7:22.0.0‘
compile ‘com.android.support:recyclerview-v7:22.0.0‘
compile ‘com.android.support:support-v4:22.0.0‘
先来简单说下这两个控件
RecyclerView
support-v7包中的新组件，是一个强大的滑动组件，与经典的ListView相比，同样拥有item回收复用的功能，但是直接把viewholder的实现封装起来，用户只要实现自己的viewholder就可以了，该组件会自动帮你回收复用每一个item。它不但变得更精简，也变得更加容易使用，而且更容易组合设计出自己需要的滑动布局。
我们先来看下，在调试里面，开启布局边界选项，知乎日报是什么样子的
看到日期了没，如果某条新闻比前面新闻要早一天，头上就会出现日期。类似于按照日期分组的功能。
那么在ListView里，我们要实现这个功能，可能每个新闻里面都要添加个文本控件，如果早一天，则显示该控件。缺点不多说了，很丑陋
RecyclerView的强大之处在于，他将新闻要引用哪个布局的主动权，交给了新闻本身（而不是RecyclerView）。
也就是说，我可以有两个布局文件，
新闻带日期的
新闻不带日期的
具体使用哪个布局，子类自己决定。
这个控件倒没什么特别要说的，布局类似FrameLayout，但是加了很多特效：卡片的边框、阴影，duang，很酷、很炫。。
一点题外话：RecyclerView我之前接触了好几次，很想学，但是和ListView比起来，在很多功能上会有不同（这都是更先进的做法，吸取了ListView很多不足，不然谷歌也不会推出这个包），因此，如果你觉得熟练使用ListView就可以了，不需要了解RecyclerView的话，请相信我，花费的时间绝对值得！你可能会觉得使用ListView+CardView也能实现知乎日报的布局，但是抛开性能不说，CardView在ListView里面是没法使用布局属性的！也就是说layout_margin是无效的。你的卡片就只能挤在一起了！
好，介绍完了，咱们就开始探索，如何实现知乎日报的风格吧！
前台布局工作
1：在界面上使用RecyclerView控件
&android.support.v7.widget.RecyclerView
android:id="@+id/base_swipe_list"
android:layout_width="match_parent"
android:layout_height="wrap_content" /&
2：准备不带标题的CardView （fragment_base_swipe_list.xml）
里面包了一个线性布局，左边文字，右边图片
&?xml version="1.0" encoding="utf-8"?&
&android.support.v7.widget.CardView xmlns:android="/apk/res/android"
xmlns:app="/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_marginBottom="2dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="2dp"
app:cardCornerRadius="5dp"
app:elevation="1dp"&
&LinearLayout
android:id="@+id/base_swipe_item_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?selectorListItem"
android:orientation="horizontal"
android:padding="5dp"&
android:id="@+id/base_swipe_item_title"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="1"
android:gravity="left|center_vertical"
android:textColor="?titleColor"
android:textSize="21sp" /&
&ImageView
android:id="@+id/base_swipe_item_icon"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_gravity="center_vertical|right" /&
&/LinearLayout&
&/android.support.v7.widget.CardView&
3：带标题的CardView （fragment_base_swipe_group_item.xml）
我们使用include引入第二步不带标题的CardView（复用），在此基础上，添加了个TextView显示日期
&?xml version="1.0" encoding="utf-8"?&
&LinearLayout xmlns:android="/apk/res/android"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_marginBottom="2dp"
android:layout_marginTop="2dp"
android:orientation="vertical"&
android:id="@+id/base_swipe_group_item_time"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_marginLeft="10dp"
android:gravity="center_vertical"
android:textColor="?textColor"
android:textSize="17sp" /&
&include layout="@layout/fragment_base_swipe_item"&&/include&
&/LinearLayout&
后台绑定工作
下面我们开始逐步介绍关键的后台绑定类NewsListAdapter.java
ListView有一堆各式各样的Adapter可以绑定。那么对应RecyclerView，它的Adpter很简单，注意泛型参数必须继承自ViewHolder。
public class NewsListAdapter extends RecyclerView.Adapter&RecyclerView.ViewHolder& {
什么是ViewHolder，官方是这样解释的：
对于RecyclerView里面的某个元素，ViewHolder持有了该元素的布局和数据信息。我们实现ViewHolder时，最好可以添加一些属性，来缓存一些需要花费资源处理的结果。
是不是很熟悉？ListView里面，我们也有ViewHolder的，那套网上广泛流传的提高ListView性能的法则里面，就有一个使用自定义ViewHolder来缓存元素的布局信息以提高性能。
不记得啦？看看下面的代码吧
RecyclerView的强大之处就在于，它本身就提供了ViewHolder，我们只要继承自该ViewHolder就可以了，至于ViewHolder怎么存储，系统会自动帮我们搞定。
OK，解释清楚了什么是ViewHolder，接下来是咱自己实现的新闻、带标题的新闻ViewHolder
* 新闻标题
public class NormalItemHolder extends RecyclerView.ViewHolder {
TextView newsT
ImageView newsI
public NormalItemHolder(View itemView) {
super(itemView);
newsTitle = (TextView) itemView.findViewById(R.id.base_swipe_item_title);
newsIcon = (ImageView) itemView.findViewById(R.id.base_swipe_item_icon);
itemView.findViewById(R.id.base_swipe_item_container).setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
showNewsDetail(getPosition());
* 带日期新闻标题
public class GroupItemHolder extends NormalItemHolder {
TextView newsT
public GroupItemHolder(View itemView) {
super(itemView);
newsTime = (TextView) itemView.findViewById(R.id.base_swipe_group_item_time);
ViewHolder声明好了，那么Adapter如何知道该使用哪种呢？
我们重写父类RecyclerView.Adapter的两个方法就好了。
1：生成一个标志
* 决定元素的布局使用哪种类型
* @param position 数据源List的下标
* @return 一个int型标志，传递给onCreateViewHolder的第二个参数
public int getItemViewType(int position) {
2：根据第一步的标志调用对应的ViewHolder
* 渲染具体的ViewHolder
* @param viewGroup ViewHolder的容器
* @param i 一个标志，我们根据该标志可以实现渲染不同类型的ViewHolder
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
绑定ViewHolder的数据
重写父类的绑定方法就好了。
* 绑定ViewHolder的数据。
* @param viewHolder
* @param i 数据源list的下标
public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int i)
上面所述关键的三个父类方法，重写后就可以达到我们要求了，下面贴上完整的代码，构造方法有两个参数：activity，数据源List
供各位参考
package zhexian.app.zoschina.
import android.support.v7.widget.RecyclerV
import android.text.H
import android.view.LayoutI
import android.view.V
import android.view.ViewG
import android.widget.ImageV
import android.widget.TextV
import java.util.L
import zhexian.app.zoschina.R;
import zhexian.app.zoschina.base.BaseActionBarA
import zhexian.app.zoschina.lib.ZI
import zhexian.app.zoschina.util.ConfigC
public class NewsListAdapter extends RecyclerView.Adapter&RecyclerView.ViewHolder& {
private static final int NORMAL_ITEM = 0;
private static final int GROUP_ITEM = 1;
private BaseActionBarActivity mC
private List&NewsListEntity& mDataL
private LayoutInflater mLayoutI
public NewsListAdapter(BaseActionBarActivity mContext, List&NewsListEntity& mDataList) {
this.mContext = mC
this.mDataList = mDataL
mLayoutInflater = LayoutInflater.from(mContext);
* 渲染具体的ViewHolder
* @param viewGroup ViewHolder的容器
* @param i 一个标志，我们根据该标志可以实现渲染不同类型的ViewHolder
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
if (i == NORMAL_ITEM) {
return new NormalItemHolder(mLayoutInflater.inflate(R.layout.fragment_base_swipe_item, viewGroup, false));
return new GroupItemHolder(mLayoutInflater.inflate(R.layout.fragment_base_swipe_group_item, viewGroup, false));
* 绑定ViewHolder的数据。
* @param viewHolder
* @param i 数据源list的下标
public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int i) {
NewsListEntity entity = mDataList.get(i);
if (null == entity)
if (viewHolder instanceof GroupItemHolder) {
bindGroupItem(entity, (GroupItemHolder) viewHolder);
NormalItemHolder holder = (NormalItemHolder) viewH
bindNormalItem(entity, holder.newsTitle, holder.newsIcon);
public int getItemCount() {
return mDataList.size();
* 决定元素的布局使用哪种类型
* @param position 数据源List的下标
* @return 一个int型标志，传递给onCreateViewHolder的第二个参数
public int getItemViewType(int position) {
//第一个要显示时间
if (position == 0)
return GROUP_ITEM;
String currentDate = mDataList.get(position).getPublishDate();
int prevIndex = position - 1;
boolean isDifferent = !mDataList.get(prevIndex).getPublishDate().equals(currentDate);
return isDifferent ? GROUP_ITEM : NORMAL_ITEM;
public long getItemId(int position) {
return mDataList.get(position).getNewsID();
void bindNormalItem(NewsListEntity entity, TextView newsTitle, ImageView newsIcon) {
if (entity.getIconUrl().isEmpty()) {
if (newsIcon.getVisibility() != View.GONE)
newsIcon.setVisibility(View.GONE);
ZImage.getInstance().load(entity.getIconUrl(), newsIcon,
ConfigConstant.LIST_ITEM_IMAGE_SIZE_DP, ConfigConstant.LIST_ITEM_IMAGE_SIZE_DP, true, mContext.getMyApplication().canRequestImage());
if (newsIcon.getVisibility() != View.VISIBLE)
newsIcon.setVisibility(View.VISIBLE);
newsTitle.setText(Html.fromHtml(entity.getTitle()));
void bindGroupItem(NewsListEntity entity, GroupItemHolder holder) {
bindNormalItem(entity, holder.newsTitle, holder.newsIcon);
holder.newsTime.setText(entity.getPublishDate());
void showNewsDetail(int pos) {
NewsListEntity entity = mDataList.get(pos);
NewsDetailActivity.actionStart(mContext, entity.getNewsID(), entity.getRecommendAmount(), entity.getCommentAmount());
* 新闻标题
public class NormalItemHolder extends RecyclerView.ViewHolder {
TextView newsT
ImageView newsI
public NormalItemHolder(View itemView) {
super(itemView);
newsTitle = (TextView) itemView.findViewById(R.id.base_swipe_item_title);
newsIcon = (ImageView) itemView.findViewById(R.id.base_swipe_item_icon);
itemView.findViewById(R.id.base_swipe_item_container).setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
showNewsDetail(getPosition());
* 带日期新闻标题
public class GroupItemHolder extends NormalItemHolder {
TextView newsT
public GroupItemHolder(View itemView) {
super(itemView);
newsTime = (TextView) itemView.findViewById(R.id.base_swipe_group_item_time);
ps，咱在代码里面，将日期格式统一转换成友好格式（今日、昨日、6月6日星期6），在数据绑定的时候，和前面一条对比，如果不一样，则使用带日期的格式。就这样。
奉上日期友好格式生成代码
public static int daysOfTwo(Date originalDate, Date compareDateDate) {
Calendar aCalendar = Calendar.getInstance();
aCalendar.setTime(originalDate);
int originalDay = aCalendar.get(Calendar.DAY_OF_YEAR);
aCalendar.setTime(compareDateDate);
int compareDay = aCalendar.get(Calendar.DAY_OF_YEAR);
return originalDay - compareD
public static String FriendlyDate(Date compareDate) {
Date nowDate = new Date();
int dayDiff = daysOfTwo(nowDate, compareDate);
if (dayDiff &= 0)
return "今日";
else if (dayDiff == 1)
return "昨日";
else if (dayDiff == 2)
return "前日";
return new SimpleDateFormat("M月d日 E").format(compareDate);
写得非常详细&非常好&对于初学RecyclerView的人帮助很大&，特意注册一个号来评论&非常赞！！！！！！！！！
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！本科阶段怎么写出有质量的经济学论文？ - 知乎5453被浏览143095分享邀请回答1.1K63 条评论分享收藏感谢收起10911 条评论分享收藏感谢收起查看更多回答8 个回答被折叠（）leetcode 上面的题目在自己机子上测试可以通过，oj却不能accept? - 知乎4被浏览505分享邀请回答03 条评论分享收藏感谢收起01 条评论分享收藏感谢收起如何修改微信朋友圈分享链接后的小图标？ - 知乎143被浏览93688分享邀请回答mp./wiki/7/aaa137b55fb2e48dd613f.html-& 注意：
WeixinJSBridge在新版本的微信用已经没有了，所以看到这类的文章可以直接pass掉。文档写的很全面，自己研究吧~以下内容已过期，正在寻找新的案例 -& 请见
这是艺龙网的春节红包，妹子喜欢发各种红包就随便拿了一个，在任何浏览器上查看，调用开发者工具查看源码，会看到分享接口的调用。可以在微信浏览器上查看（网址通过网页版微信发到自己微信上打开），体验分享功能。这个文档很全面，语音识别，付款，定位，也可以控制微信右上角菜单显示。3320 条评论分享收藏感谢收起的效果219 条评论分享收藏感谢收起查看更多回答1 个回答被折叠（）从知乎上复制的【强迫症吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：72,412贴子：
从知乎上复制的收藏
还在用强迫症给自己贴上小可爱的标签。真想赶一万头***从你面前驶过。你们的回答甚至不如百度强迫症吧写的那么认真。建议小可爱的答友们去吧里看看案例，别在这意淫。你们觉得那些正在患病（对，它就是病！）的人有几个会在这里大大方方承认自己患病，并把自己患病的种种在外人看来可笑可爱自己看来异常恐怖无限折磨和绝望（对，它就是恐怖和折磨）的行为分享给你大家吗？只有真正见过强迫症患者，聆听他的心声，感受他的痛苦，才知道那有多可怕，而我以前的见解有多可笑。他只能和同样患病的人交流，相互勉励，或者看医生（他根本不相信医生），或者说给自己最信任的朋友听，缓解内心压力。他很少和普通人交流，会被取笑或者视为异类。他是我最好的朋友，我曾经为我不以为然而一度自责。你觉得你家书架上的书太乱，你受不了，非要整理整齐不可。你整理图书的时候，看到书本按照自己的意愿排列，心情逐渐变的舒畅。你觉得有些同样行为的强迫症患者在整理图书的时候也会觉得心情舒畅吗？那种用世界末日来临的心情去整理图书的人，焦躁，痛苦，不安，脱离常人的常事是你不能理解的。调侃强迫症，贴小可爱标签，这不公平啊！这对那些真正患症的人很不公平！他们会越来越不被常人理解（是理解是理解是理解是走心的理解啊，不是你适得其反的调侃啊），越来越得不到正视。写一行字，多个空格，用错几个标点符号，最后标注强迫症者已疯，或者逼死强迫症。他们真的可能会疯或者会死，不是因为你的调侃，而是因为得不到正视，得不到理解，不信任任何人，错过治疗进而引发抑郁症。抑郁症你们还想继续调侃吗？
强迫症与非强迫症的根本区别是：你是否痛恨自己的强迫症但又无法不强迫。典型的就是洁癖：如果一个人有洁癖但觉得一切还好那其实只是洁癖不是强迫，但一个人如果痛恨自己有洁癖但又不得不保持洁癖，这才是强迫。
登录百度帐号推荐应用}