当前位置: 代码迷 >> Android >> 利用RecyclerView CardView实现快讯卡片样式
  详细解决方案

利用RecyclerView CardView实现快讯卡片样式

热度:96   发布时间:2016-04-24 11:59:39.0
利用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>

 

  相关解决方案