你的位置:首页 > 操作系统

[操作系统]利用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.

<??><android.support.v7.widget.RecyclerView    ="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.

<??><RelativeLayout ="http://schemas.android.com/apk/res/android"  ="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.

<??><RelativeLayout ="http://schemas.android.com/apk/res/android"  ="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>