标签:
最近实现了一个使用最新推出的CardView和RecyclerView实现列表功能的Demo,
接下来一一介绍:
1.首先介绍我使用了哪些工具
(1)LeanCloud的存储功能
(2)RecyclerView
(3)CardView
(4)ImageLoader
2.既然是列表,所以它里面的实现方式和ListView差不多,
一个(含有RecyclerView)主界面布局(activity_fm_item.xml),
一个Adapter(RecyclerView.Adapter),在这先把布局文件贴出来:
(1)activity_fm.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@color/white">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="@color/basicColor_two">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/ic_arrow_back_black_24dp"
android:id="@+id/fm_backBtn"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="8dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center"
android:text="用心聆听世界的声音"
android:textSize="20sp"
android:textColor="@color/white"
/>
</RelativeLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/fm_recyclerView"
>
</android.support.v7.widget.RecyclerView>
</LinearLayout>
第一个RelativeLayout的布局实现的是ActionBar的布局,第二个里是RecyclerView的布局
(2)activity_fm_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="360dp"
android:background="@color/white">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
android:layout_marginBottom="16dp"
android:textColor="@color/txt_low"
android:id="@+id/fm_date"/>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="296dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_below="@+id/fm_date"
android:background="@color/white"
app:cardCornerRadius="8dp"
app:cardElevation="16dp"
android:id="@+id/view">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="148dp"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/fm_cardBack"
android:scaleType="fitXY"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:layout_marginBottom="16dp"
android:textColor="@color/white"
android:textSize="24sp"
android:id="@+id/fm_title"/>
</FrameLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="148dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/fm_summary"
android:layout_alignParentTop="true"
android:layout_marginTop="16dp"
android:textSize="16sp"
/>
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
应该根据Material Design的设计理念对cardView进行布局,比如标题的text的大小,正文的Text的大小等等,可以去官网中查一查
3.设置一个ItemBean,对数据进行封装
public class fm_itemBean {
String fm_imageUrl;
String fm_title;
String fm_summary;
String fm_date;
public String getFm_date() {
return fm_date;
}
public void setFm_date(String fm_date) {
this.fm_date = fm_date;
}
public fm_itemBean(String fm_imageUrl, String fm_title, String fm_summary, String fm_date) {
this.fm_imageUrl = fm_imageUrl;
this.fm_title = fm_title;
this.fm_summary = fm_summary;
this.fm_date = fm_date;
}
public String getFm_imageUrl() {
return fm_imageUrl;
}
public void setFm_imageUrl(String fm_imageUrl) {
this.fm_imageUrl = fm_imageUrl;
}
public String getFm_title() {
return fm_title;
}
public void setFm_title(String fm_title) {
this.fm_title = fm_title;
}
public String getFm_summary() {
return fm_summary;
}
public void setFm_summary(String fm_summary) {
this.fm_summary = fm_summary;
}
}
4.实现对于一个列表必须的Adapter--RecyclerView.Adapter,
从该Adapter看出Goolge已经开始强制使用ViewHolder模式了。介绍一下该Adapter所需要复写的方法--在
onCreateViewHolder中进行创建ViewHolder(相当于初始化控件--我是这么理解的),
getItemCount返回的是数据的数量,还需创建一个内部类来继承ViewHolder
public class MyRecyclerAdapter_fm extends RecyclerView.Adapter<MyRecyclerAdapter_fm.MyViewHolder>{
private LayoutInflater mInflater;
private List<fm_itemBean> mDatas=new ArrayList<>();
MyImageLoader myImageLoader;
public MyRecyclerAdapter_fm(Context context, List<fm_itemBean> mDatas) {
this.mDatas = mDatas;
mInflater=LayoutInflater.from(context);
myImageLoader=new MyImageLoader();
}
/*
实现接口的三步走:1.定义一个接口,在定义里写出对方法的定义
2.实例化一个接口对象,通过set方法将接口设置进来
3.在相应的地方使用(onBindViewHolder中)
*/
private OnItemClickListener onItemClickListener;
public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
this.onItemClickListener = onItemClickListener;
}
interface OnItemClickListener{
void onItemClick(View view,int position);
void onItemLongClick(View view ,int position);
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view=mInflater.inflate(R.layout.activity_fm_item,parent,false);
return new MyViewHolder(view);
}
@Override
public void onBindViewHolder(final MyViewHolder holder, final int position) {
//给每个控件设置数据
holder.fm_txt_title.setText(mDatas.get(position).fm_title);
holder.fm_txt_summary.setText(mDatas.get(position).fm_summary);
holder.fm_date.setText(mDatas.get(position).fm_date);
String mUrl=mDatas.get(position).fm_imageUrl;
//给每个ImageView根据url设置相应的图片,使用的是ImageLoader方式。还可以使用多线程和AsyncTask
myImageLoader.setBitmapFromUrl(holder.fm_image_cardBack,mUrl);
// new ImageLoader().showImageByThread(holder.fm_image_cardBack,mUrl);
//实现点击事件的第三部
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (onItemClickListener!=null)
onItemClickListener.onItemClick(holder.itemView,position);
}
});
holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
if (onItemClickListener!=null)
onItemClickListener.onItemLongClick(holder.itemView,position);
return false;
}
});
}
@Override
public int getItemCount() {
return mDatas.size();
}
public class MyViewHolder extends RecyclerView.ViewHolder{
ImageView fm_image_cardBack;//CardView的背景
TextView fm_txt_title;//CardView的title
TextView fm_txt_summary;//cardView的summary
TextView fm_date;//每个CardView的时间
public MyViewHolder(View itemView) {
super(itemView);//初始化相应的控件,即item中所包含的控件
fm_image_cardBack= (ImageView) itemView.findViewById(R.id.fm_cardBack);
fm_txt_title= (TextView) itemView.findViewById(R.id.fm_title);
fm_txt_summary= (TextView) itemView.findViewById(R.id.fm_summary);
fm_date= (TextView) itemView.findViewById(R.id.fm_date);
}
}
}
5.在将url转成相应的图片使用了ImageLoader的模式
ImageLoader需要两个东西 (1)BitmapCache(使用LruCache)
(2)ImageLoaderListener
public class BitmapCache implements ImageLoader.ImageCache {
public LruCache<String ,Bitmap> cache;//使用LruCache
public int max=10*1024*1024;//缓存的大小
public BitmapCache(){
//初始化LruCache ,max为缓存的大小,sizeOf方法返回的是bitmap的大小
cache=new LruCache<String, Bitmap>(max){
@Override
protected int sizeOf(String key, Bitmap value) {
return value.getRowBytes()*value.getRowBytes();
}
};
}
@Override
public Bitmap getBitmap(String s) {
return cache.get(s);
}
@Override
public void putBitmap(String s, Bitmap bitmap) {
cache.put(s,bitmap);
}
}
ImageLoader:将根据图片的url给相应的控件设置url所对应的图片
public class MyImageLoader {//ImageLoader需要三个东西,一个是Queues,第二个是ImageCahe,第三个是Listener
BitmapCache mBitmapCache=new BitmapCache();
public void setBitmapFromUrl(ImageView imageView,String url){
com.android.volley.toolbox.ImageLoader mImageLoader=new ImageLoader(MyApplication.getQueues(),mBitmapCache);
ImageLoader.ImageListener listener=ImageLoader.getImageListener(imageView, R.drawable.touxiang,R.drawable.touxiang);
mImageLoader.get(url,listener);
}
}
Application:(还需要在AndroidManifest.xml中设置application的
:name=.MyApplication)
public class MyApplication extends Application {
public static RequestQueue queues;
@Override
public void onCreate() {
super.onCreate();
queues= Volley.newRequestQueue(getApplicationContext());
AVOSCloud.initialize(this,AVCloudKey);//初始化AVcloud
}
public static RequestQueue getQueues() {
return queues;
}
}
接下来是主程序:在主程序中使用了Leancloud,因为我将所有的数据都放在了上面,并不是通过Json数据解析得来的
public class Activity_fm extends AppCompatActivity {
List<fm_itemBean> mDatas;
RecyclerView mRecyclerView;
ImageButton backBtn;
MyRecyclerAdapter_fm adapterFm;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fm);
initView();
initDatas();
}
private void initDatas() {
mDatas=new ArrayList<>();
AVQuery<AVObject> query=new AVQuery<>("FM");//从Leancloud的fm表中查询数据
query.findInBackground(new FindCallback<AVObject>() {
@Override
public void done(List<AVObject> list, AVException e) {//遍历FM 表
for (AVObject avObject:list){
//返回相应字段的值
String title= (String) avObject.get("title");
String summary= (String) avObject.get("summary");
String imageUrl= (String) avObject.get("imageUrl");
String date= (String) avObject.get("date");
//fm_itemBean实现数据的封装
fm_itemBean itemBean_fm=new fm_itemBean(imageUrl,title,summary,date);
mDatas.add(itemBean_fm);
adapterFm.notifyDataSetChanged();//此句不加会导致RecyclerView显示不出来
}
}
});
//给每个item设置点击事件
adapterFm=new MyRecyclerAdapter_fm(Activity_fm.this,mDatas);
adapterFm.setOnItemClickListener(new MyRecyclerAdapter_fm.OnItemClickListener() {
@Override
public void onItemClick(View view, int position) {
Intent intent=new Intent(Activity_fm.this,Activity_fm_content.class);
String title=mDatas.get(position).fm_title;
intent.putExtra("title",title);
startActivity(intent);
}
@Override
public void onItemLongClick(View view, int position) {
}
});
mRecyclerView.setAdapter(adapterFm);
//实现返回按钮
backBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent=new Intent(Activity_fm.this,MainActivity.class);
startActivity(intent);
}
});
}
//初始化控件
private void initView() {
mRecyclerView= (RecyclerView) findViewById(R.id.fm_recyclerView);
backBtn= (ImageButton) findViewById(R.id.fm_backBtn);
mRecyclerView.setLayoutManager(new LinearLayoutManager(Activity_fm.this));
}
}
RecyclerView和CardView实现列表功能,用LeanCloud所存储的数据中填充RecyclerView
标签:
原文地址:http://blog.csdn.net/qq_33073453/article/details/51364110