所需要的库及库工程
库:
android-support-v7-recyclerview.jar :v21.x
android-support-v4.jar :v21.x
库工程:
android-support-v7-appcompat:v21.x
android-support-v7-cardview
注意:cardView必须使用库工程,而不能使用jar包,原因是其引用了自定义属性
但是,如果必须要使用cardView而不导入工程,建议使用cardview源码,主要步骤如下:
①将自定义attr,color,dimens,styles拷贝至工程目录下
②修改源码中的 import android.support.v7.cardview.R; 成当前工程的R资源
③认真完成以上2步骤
效果预览
Activity文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
package st.app.base.rcp;
import java.lang.reflect.Method;
import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.internal.view.menu.MenuBuilder;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
public class WaterfallActivity extends ActionBarActivity {
private Toolbar mToolbar;
private RecyclerView mRecyclerView;
private List<String> mDatas = null ;
private SimpleRecyclerCardAdapter mSimpleRecyclerAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mToolbar = (Toolbar) findViewById(R.id.toolbar);
mRecyclerView = (RecyclerView) findViewById(R.id.app_recyclerview);
initAppToolBar();
initDataAndView();
}
private void initDataAndView()
{
mDatas = new ArrayList<String>();
for ( int i= 'A' ;i<= 'z' ;i++)
{
mDatas.add(String.valueOf(( char )i));
}
mSimpleRecyclerAdapter = new SimpleRecyclerCardAdapter( this , mDatas);
mRecyclerView.setAdapter(mSimpleRecyclerAdapter);
//设置网格布局管理器
mRecyclerView.setLayoutManager( new StaggeredGridLayoutManager( 3 , StaggeredGridLayoutManager.VERTICAL));
mSimpleRecyclerAdapter.setOnItemActionListener( new SimpleRecyclerCardAdapter.OnItemActionListener() {
@Override
public boolean onItemLongClickListener(View v, int pos)
{
Toast.makeText(activity, "-长按-" +pos, Toast.LENGTH_SHORT).show();
return false ;
}
@Override
public void onItemClickListener(View v, int pos) {
Toast.makeText(activity, "-单击-" +pos, Toast.LENGTH_SHORT).show();
}
});
}
/**
* init app bar
*/
private void initAppToolBar()
{
mToolbar.setNavigationIcon(R.drawable.ktv_ic_main_hot_pressed);
mToolbar.setTitle( "Rocko" ); // 标题的文字需在setSupportActionBar之前,不然会无效
mToolbar.inflateMenu(R.menu.main);
setShortcutsVisible(mToolbar.getMenu());
mToolbar.setOnMenuItemClickListener( new Toolbar.OnMenuItemClickListener() {
@Override public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_settings:
break ;
case R.id.action_mail:
break ;
case R.id.action_plus:
break ;
default :
break ;
}
return true ;
}
});
mToolbar.setNavigationOnClickListener( new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.e( "Navigation" , "Click" );
}
});
}
private void setShortcutsVisible(Menu menu)
{
if (MenuBuilder. class .isInstance(menu))
{
MenuBuilder builder = (MenuBuilder) menu;
builder.setShortcutsVisible( true );
try {
Method m = menu.getClass().getDeclaredMethod(
"setOptionalIconsVisible" , Boolean.TYPE);
m.setAccessible( true );
m.invoke(builder, true );
} catch (Exception ie) {
}
}
}
} |
Adapter+ViewHolder
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
import java.util.ArrayList;
import java.util.List;
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.RecyclerView.ViewHolder;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
public class SimpleRecyclerCardAdapter extends RecyclerView.Adapter<SimpleCardViewHolder>{
private Context mCtx;
private LayoutInflater mInflater;
private final List<String> mDataSource = new ArrayList<String>();
private OnItemActionListener mOnItemActionListener;
public SimpleRecyclerCardAdapter(Context mCtx, List<String> dataList) {
super ();
this .mCtx = mCtx;
mInflater = LayoutInflater.from(mCtx);
this .mDataSource.addAll(dataList);
}
@Override
public int getItemCount() {
return mDataSource.size();
}
@Override
public void onBindViewHolder( final SimpleCardViewHolder viewHolder, int i) {
viewHolder.itemTv.setText(mDataSource.get(i));
int resId = mCtx.getResources().getIdentifier( "img_" +i, "drawable" , mCtx.getPackageName());
if (resId!= 0 )
{
viewHolder.itemIv.setImageResource(resId);
}
if (mOnItemActionListener!= null )
{
viewHolder.itemView.setOnClickListener( new View.OnClickListener() {
@Override
public void onClick(View v) {
//注意这里必须使用viewHolder.getPosition()而不能用i,因为为了保证动画,没有使用NotifyDatasetChanged更新位置数据
mOnItemActionListener.onItemClickListener(v,viewHolder.getPosition());
}
});
viewHolder.itemView.setOnLongClickListener( new View.OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
//注意这里必须使用viewHolder.getPosition()而不能用i,因为为了保证动画,没有使用NotifyDatasetChanged更新位置数据
return mOnItemActionListener.onItemLongClickListener(v, viewHolder.getPosition());
}
});
}
}
@Override
public SimpleCardViewHolder onCreateViewHolder(ViewGroup viewgroup, int i) {
View v = mInflater.inflate(R.layout.simple_card_item, viewgroup, false );
SimpleCardViewHolder simpleViewHolder = new SimpleCardViewHolder(v);
simpleViewHolder.setIsRecyclable( true );
return simpleViewHolder;
}
/**********定义点击事件**********/
public interface OnItemActionListener
{
public void onItemClickListener(View v, int pos);
public boolean onItemLongClickListener(View v, int pos);
}
public void setOnItemActionListener(OnItemActionListener onItemActionListener) {
this .mOnItemActionListener = onItemActionListener;
}
} class SimpleCardViewHolder extends ViewHolder
{ public TextView itemTv;
public ImageView itemIv;
public SimpleCardViewHolder(View layout) {
super (layout);
itemTv = (TextView) layout.findViewById(R.id.item_title);
itemIv = (ImageView) layout.findViewById(R.id.item_img);
}
} |
布局文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<LinearLayout 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:orientation= "vertical"
android:background= "@android:color/white"
tools:context= "st.app.base.rcp.MainActivity" >
<android.support.v7.widget.Toolbar
android:id= "@+id/toolbar"
android:layout_width= "match_parent"
android:layout_height= "wrap_content"
android:background= "@color/material_deep_teal_500"
android:minHeight= "?attr/actionBarSize"
app:popupTheme= "@style/AppBarTheme"
app:theme= "@style/ThemeOverlay.AppCompat.ActionBar" >
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.RecyclerView
android:id= "@+id/app_recyclerview"
android:layout_width= "match_parent"
android:layout_height= "match_parent"
/>
</LinearLayout> |
item布局文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<?xml version= "1.0" encoding= "utf-8" ?>
<android.support.v7.widget.CardView xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:app= "http://schemas.android.com/apk/res-auto"
android:id= "@+id/cardview" android:layout_margin= "0dp" android:layout_height= "83dp"
app:cardBackgroundColor= "@android:color/white" app:cardCornerRadius= "5dp" app:cardElevation= "5dp"
app:contentPadding= "5dip"
android:layout_width= "match_parent" >
<RelativeLayout
android:layout_width= "match_parent" android:layout_height= "match_parent"
>
<ImageView
android:id= "@+id/item_img" android:layout_width= "match_parent" android:layout_height= "wrap_content" android:layout_centerHorizontal= "true" android:scaleType= "fitCenter" />
<TextView
android:id= "@+id/item_title" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:layout_below= "@+id/item_img" android:layout_centerHorizontal= "true" android:textColor= "@color/material_deep_teal_500"
android:paddingLeft= "@dimen/activity_horizontal_margin" android:paddingRight= "@dimen/activity_horizontal_margin" />
</RelativeLayout>
</android.support.v7.widget.CardView> |
主题样式
AppBarBaseTheme
1
2
3
4
|
<style name= "Theme.AppCompat.NoActionBar" >
<item name= "windowActionBar" > false </item>
<item name= "android:windowNoTitle" > true </item>
</style>
|
styles
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<style name= "AppBarTheme" parent= "ThemeOverlay.AppCompat.Light" >
<item name= "actionDropDownStyle" > @style /AppBaseToolBarMenuDropDownStyle</item>
<item name= "actionOverflowMenuStyle" > @style /AppBaseToolbarOverflowMenuStyle</item>
<item name= "android:textColor" > @android :color/white</item>
</style>
<style name= "AppBaseToolBarMenuDropDownStyle" parent= "@style/Base.Widget.AppCompat.Spinner.DropDown.ActionBar" >
<item name= "overlapAnchor" > false </item>
<item name= "android:popupBackground" > @color /material_deep_teal_500</item>
<item name= "android:dropDownHorizontalOffset" >-4dip</item>
</style>
<style name= "AppBaseToolbarOverflowMenuStyle" parent= "@style/Widget.AppCompat.Light.PopupMenu.Overflow" >
<item name= "overlapAnchor" > false </item>
<item name= "android:popupBackground" > @color /material_deep_teal_500</item>
<item name= "android:textColorPrimary" > @android :color/white</item>
</style>
|
附加一点Palettel小知识,该工具用于位图取色,使用环境为换肤,换title,或者取色(取色可以动态截图的方式)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() {
@Override public void onGenerated(Palette palette) {
Palette.Swatch vibrant =
palette.getVibrantSwatch();
if (vibrant != null ) {
int rgb = vibrant.getRgb();
int titleTextColor = vibrant.getTitleTextColor();
int bodyTextColor = vibrant.getBodyTextColor();
}
}
});
|
git demo address:https://github.com/oasis2008/PinterestListView
相关推荐
主要为大家详细介绍了RecyclerView+CardView实现横向卡片式滑动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
RecyclerView结合CardView的实现照片瀑布流效果
RecycleView+CardView实现瀑布流(类in界面效果)
一个集成RecyclerView+CardView+Palette的Demo
配合博客:Android框架之路——Glide加载图片(结合RecyclerView、CardView)
CoordinatorLayout+AppBarLayout+Toolbar+TabLayout+ViewPager+RecyclerView+CardView的使用,详细说明 http://blog.csdn.net/amazing7/article/details/51918623
RecycleView+CardView实现瀑布流(仿in界面效果,加载网络图片)
类似淘宝的订单列表展示,单个订单多于两个商品时可收起显示更多
可以通过设置LayoutManager来快速实现listview、gridview、瀑布流的效果,而且还可以设置横向和纵向显示,添加动画效果也非常简单 (自带了ItemAnimation,可以设置加载和移除时的动画,方便做出各种动态浏览的效果),...
android5.0 RecycelerView和CardView结合的一个小例子
OverlayCardViewPager 层叠卡片效果的ViewPage
Android Training学习笔记——Navigation 参考源码,文章地址:http://blog.csdn.net/xroocky/article/details/50804762
android 新组件RecyclerView及CardView 使用详解
基于RecyclerView和CardView的瀑布流布局方式,增加SmartRefreshLayout刷新库,解决数据变更时数据的跳动或数据错乱问题.
该demo使用DrawerLayout实现了侧滑栏效果,RecyclerView+CardView实现瀑布流效果,glide实现图片加载,photoView实现了图片的查看效果,HorizontalScrollView+RadioGroup实现了横向滑动显示,类似于某视频网站的视频...
Android之 RecyclerView,CardView 详解和相对应的上拉刷新下拉加载,博客地址:http://blog.csdn.net/dickyqie/article/details/54913289
RecyclerView和CardView实现列表功能,用LeanCloud所存储的数据中填充RecyclerView
在RecyclerView中嵌套CardView
使用android RecyclerView和CardView两个组件