利用RecyclerView CardView实现新闻卡片样式
引入的包:
demo结构:
测试代码:
News.java:
package com.zzw.testcardview; import java.io.Serializable; public class News implements Serializable { // 新闻标题,内容,图片 private String title; private String desc; private int photoId; public News(String title, String desc, int photoId) { super(); this.title = title; this.desc = desc; this.photoId = photoId; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getDesc() { return desc; } public void setDesc(String desc) { this.desc = desc; } public int getPhotoId() { return photoId; } public void setPhotoId(int photoId) { this.photoId = photoId; } }
MainActivity.java:
package com.zzw.testcardview; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.os.Bundle; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; public class MainActivity extends Activity { private RecyclerView recyclerView; private List<News> newsList; private RecyclerViewAdapter adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); LinearLayoutManager layoutManager = new LinearLayoutManager(this); recyclerView = (RecyclerView) findViewById(R.id.recyclerView); initPersonData(); adapter = new RecyclerViewAdapter(newsList, MainActivity.this); recyclerView.setHasFixedSize(true); recyclerView.setLayoutManager(layoutManager); recyclerView.setAdapter(adapter); } private void initPersonData() { newsList = new ArrayList<>(); // 添加新闻 newsList.add(new News(getString(R.string.news_one_title), getString(R.string.news_one_desc), R.drawable.news_one)); newsList.add(new News(getString(R.string.news_two_title), getString(R.string.news_two_desc), R.drawable.news_two)); newsList.add(new News(getString(R.string.news_three_title), getString(R.string.news_three_desc), R.drawable.news_three)); newsList.add(new News(getString(R.string.news_four_title), getString(R.string.news_four_desc), R.drawable.news_four)); } }
RecyclerViewAdapter.java:
package com.zzw.testcardview; import java.util.List; import android.content.Context; import android.content.Intent; import android.graphics.Color; import android.support.v7.widget.CardView; import android.support.v7.widget.RecyclerView; import android.support.v7.widget.RecyclerView.Adapter; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.Button; import android.widget.ImageView; import android.widget.TextView; public class RecyclerViewAdapter extends Adapter<RecyclerViewAdapter.NewsViewHolder> { private List<News> newses; private Context context; public RecyclerViewAdapter(List<News> newses, Context context) { super(); this.newses = newses; this.context = context; } // 自定义ViewHolder类 static class NewsViewHolder extends RecyclerView.ViewHolder { CardView cardView; ImageView news_photo; TextView news_title; TextView news_desc; Button share; Button readMore; public NewsViewHolder(View itemView) { super(itemView); cardView = (CardView) itemView.findViewById(R.id.card_view); news_photo = (ImageView) itemView.findViewById(R.id.news_photo); news_title = (TextView) itemView.findViewById(R.id.news_title); news_desc = (TextView) itemView.findViewById(R.id.news_desc); share = (Button) itemView.findViewById(R.id.btn_share); readMore = (Button) itemView.findViewById(R.id.btn_more); // 设置TextView背景为半透明 news_title.setBackgroundColor(Color.argb(20, 0, 0, 0)); } } @Override public int getItemCount() { return newses == null ? 0 : newses.size(); } @Override public void onBindViewHolder( RecyclerViewAdapter.NewsViewHolder personViewHolder, int position) { final int j = position; personViewHolder.news_photo.setImageResource(newses.get(position) .getPhotoId()); personViewHolder.news_title.setText(newses.get(position).getTitle()); personViewHolder.news_desc.setText(newses.get(position).getDesc()); // 为btn_share btn_readMore cardView设置点击事件 // 为btn_share btn_readMore cardView设置点击事件 personViewHolder.cardView .setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(context, NewsActivity.class); intent.putExtra("News", newses.get(j)); context.startActivity(intent); } }); personViewHolder.share.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(Intent.ACTION_SEND); intent.setType("text/plain"); intent.putExtra(Intent.EXTRA_SUBJECT, "分享"); intent.putExtra(Intent.EXTRA_TEXT, newses.get(j).getDesc()); intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK); context.startActivity(Intent.createChooser(intent, newses .get(j).getTitle())); } }); personViewHolder.readMore .setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(context, NewsActivity.class); intent.putExtra("News", newses.get(j)); context.startActivity(intent); } }); } @Override public RecyclerViewAdapter.NewsViewHolder onCreateViewHolder( ViewGroup viewGroup, int arg1) { View view = LayoutInflater.from(context).inflate(R.layout.news_item, null); NewsViewHolder nvh = new NewsViewHolder(view); return nvh; } }
NewsActivity.java:
package com.zzw.testcardview; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.widget.ImageView; import android.widget.TextView; public class NewsActivity extends Activity{ private ImageView newsPhoto; private TextView newsTitle; private TextView newsDesc; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_news); newsPhoto= (ImageView) findViewById(R.id.news_info_photo); newsTitle= (TextView) findViewById(R.id.news_info_title); newsDesc= (TextView) findViewById(R.id.news_info_desc); Intent intent=getIntent(); News item= (News) intent.getSerializableExtra("News"); newsPhoto.setImageResource(item.getPhotoId()); newsTitle.setText(item.getTitle()); newsDesc.setText(item.getDesc()); } }
布局代码:
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v7.widget.RecyclerView>
news_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:layout_width="match_parent" android:layout_height="match_parent" android:padding="5dp" > <!-- android:clickable="true" //cardView是否可点击,默认是不可点击的 --> <!-- app:cardCornerRadius="3dp" //圆角 --> <!-- app:cardElevation="8dp" //阴影 --> <android.support.v7.widget.CardView android:id="@+id/card_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:clickable="true" android:foreground="?android:attr/selectableItemBackground" app:cardCornerRadius="3dp" app:cardElevation="8dp" > <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" > <RelativeLayout android:id="@+id/news_header" android:layout_width="match_parent" android:layout_height="wrap_content" > <ImageView android:id="@+id/news_photo" android:layout_width="match_parent" android:layout_height="150dp" android:layout_alignParentTop="true" android:scaleType="centerCrop" /> <TextView android:id="@+id/news_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:gravity="center" android:maxLines="1" android:padding="5dp" android:textColor="#ffffff" android:textSize="20sp" /> </RelativeLayout> <TextView android:id="@+id/news_desc" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/news_header" android:layout_margin="15dp" android:maxLines="2" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/news_desc" android:orientation="horizontal" > <Button android:id="@+id/btn_share" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginRight="20dp" android:background="#00000000" android:text="SHARE" /> <Button android:id="@+id/btn_more" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#00000000" android:text="READ MORE" android:textColor="#7AD3E0" /> </LinearLayout> </RelativeLayout> </android.support.v7.widget.CardView> </RelativeLayout>
activity_news.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:layout_width="match_parent" android:layout_height="match_parent" android:padding="20dp"> <android.support.v7.widget.CardView android:id="@+id/card_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:foreground="?android:attr/selectableItemBackground" android:clickable="true" app:cardCornerRadius="3dp" app:cardElevation="8dp"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <RelativeLayout android:id="@+id/news_header" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true"> <ImageView android:id="@+id/news_info_photo" android:scaleType="centerCrop" android:layout_alignParentTop="true" android:layout_width="match_parent" android:layout_height="180dp"/> <TextView android:id="@+id/news_info_title" android:layout_alignParentLeft="true" android:layout_below="@+id/news_info_photo" android:textSize="20sp" android:padding="5dp" android:layout_width="match_parent" android:layout_height="wrap_content"/> </RelativeLayout> <TextView android:id="@+id/news_info_desc" android:lineSpacingExtra="5dp" android:layout_below="@+id/news_header" android:layout_margin="15dp" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </RelativeLayout> </android.support.v7.widget.CardView> </RelativeLayout>