android MaterialDesign之CardView

最新推荐文章于 2024-05-23 18:47:22 发布

蓝天是蓝色的

最新推荐文章于 2024-05-23 18:47:22 发布

阅读量461

点赞数

分类专栏： android 文章标签： android 布局控件应用

本文链接：https://blog.csdn.net/qq_19385543/article/details/51252057

版权

android 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

android MaterialDesign是google5.0新推出的一种规范，提供了很多资源文件以及新控件。这篇博文主要讲CardView的使用。

CardView是一种卡片式布局，一种新型的布局，效果简约美观。以下是CardView的继承体系：

java.lang.Object
↳	android.view.View
	↳	android.view.ViewGroup
		↳	android.widget.FrameLayout
			↳	android.support.v7.widget.CardView

使用CardView需要导入相对应的包。如果是gradle那就比较简单，根据自己sdk的版本导入相对应的包

compile 'com.android.support:cardview-v7:23.3.0'

在eclipse则需要引入架包或者cardview的jar文件

先贴上xml的布局代码

<?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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    app:cardBackgroundColor="@android:color/holo_blue_dark"
    app:cardCornerRadius="5dp"
    app:cardElevation="@dimen/cardview_default_elevation"
    app:cardUseCompatPadding="true"
    android:clickable="true"
    android:foreground="?attr/selectableItemBackground"
    app:contentPadding="5dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/item_icon"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="fitXY"
            android:src="@mipmap/img1" />

        <TextView
            android:id="@+id/item_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:text="内容标题"
            android:textColor="#fff"
            android:textSize="16sp" />


        <TextView
            android:id="@+id/item_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:ellipsize="end"
            android:lines="2"
            android:maxLines="2"
            android:text="@string/content"
            android:textColor="#fff"
            android:textSize="16sp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/item_dw"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:src="@mipmap/dw" />

            <ImageView
                android:id="@+id/item_ss"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:src="@mipmap/search" />

            <ImageView
                android:id="@+id/item_fx"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@mipmap/fx" />
        </LinearLayout>
    </LinearLayout>

</android.support.v7.widget.CardView>

从上面的xml布局看出来使用还是很简单的，直接当做普通的布局容器来使用就行了。

cardBackgroundColor -----》设置cardview背景颜色

cardCornerRadius -----》设置cardview 圆角的半径

cardElevation----》设置cardview的阴影

contentPadding-----》设置cardview的内间距

5.x上面可以设置点击水波纹效果

android:foreground="?attr/selectableItemBackground"

cardPreventCornerOverlap ------》防止api20之前圆角与内容重叠，在21以后不会重叠

cardUseCompatPadding ----》设置为true 可以为不同L版提供内间距兼容，默认为false

更详细的请查阅android api文档

http://android.xsoftlab.net/reference/android/support/v7/widget/CardView.html

MainActivity代码

package com.ysm.cardview;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.Toast;

import com.ysm.cardview.adapter.RecyAdapter;
import com.ysm.cardview.bean.Card;
import com.ysm.cardview.listener.ICardItemCallback;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private RecyclerView mRecyclerView;
    private RecyAdapter mAdapter;
    private int[] icons = new int[]{R.mipmap.img1, R.mipmap.img2, R.mipmap.img3};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        mRecyclerView = (RecyclerView) findViewById(R.id.recy_cardview);
        setSupportActionBar(toolbar);
//        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
//        fab.setOnClickListener(new View.OnClickListener() {
//            @Override
//            public void onClick(View view) {
//                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
//                        .setAction("Action", null).show();
//            }
//        });
        initData();
        initListener();
    }

    //初始化数据
    private void initData() {
        List<Card> mDatas = new ArrayList<>();
        Card card1 = new Card(icons[0], "titile1", getString(R.string.content), 1);
        Card card2 = new Card(icons[1], 2);
        Card card3 = new Card(icons[2], "titile3", getString(R.string.content), 1);
        Card card4 = new Card(icons[0], "titile4", getString(R.string.content), 1);
        Card card5 = new Card(icons[1], "titile5", getString(R.string.content), 1);
        Card card6 = new Card(icons[2], 2);

        mDatas.add(card1);
        mDatas.add(card2);
        mDatas.add(card3);
        mDatas.add(card4);
        mDatas.add(card5);
        mDatas.add(card6);

        //设置适配器
        mAdapter = new RecyAdapter(mDatas, this);
        mRecyclerView.setAdapter(mAdapter);
        mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
    }

    //item点击事件
    private void initListener() {
        mAdapter.setOnCardViewListener(new ICardItemCallback() {
            @Override
            public void onCardItemClick(View v, int position) {
                Toast.makeText(MainActivity.this, "item" + position, Toast.LENGTH_SHORT).show();
            }
        });
    }
}

adapter代码

package com.ysm.cardview.adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.ysm.cardview.R;
import com.ysm.cardview.bean.Card;
import com.ysm.cardview.listener.ICardItemCallback;

import java.util.List;

/**
 * adapter
 */
public class RecyAdapter extends RecyclerView.Adapter<RecyAdapter.RecyHodler> {
    private List<Card> mDatas;
    private Context mContext;
    private LayoutInflater mInflater;

    private final int TYPE_A = 1;
    private final int TYPE_B = 2;
    private int TYPE;

    private ICardItemCallback callback;

    public void setOnCardViewListener(ICardItemCallback callback) {
        this.callback = callback;
    }

    public RecyAdapter(List<Card> datas, Context context) {
        this.mDatas = datas;
        this.mContext = context;
        mInflater = LayoutInflater.from(context);
    }

    @Override
    public RecyHodler onCreateViewHolder(ViewGroup parent, int viewType) {
        RecyHodler hodler;
        if (viewType == TYPE_A) {
            hodler = new RecyHodler(mInflater.inflate(R.layout.recy_item_cardview, parent, false));
            return hodler;
        } else {
            hodler = new RecyHodler(mInflater.inflate(R.layout.recy_item_cardview2, parent, false));
            return hodler;
        }
    }

    @Override
    public void onBindViewHolder(final RecyHodler holder, int position) {
        Card item = mDatas.get(position);
        if (TYPE == TYPE_A) {
            holder.icon.setImageResource(item.getIcon());
            holder.title.setText(item.getTitle());
            holder.content.setText(item.getContent());
        } else if (TYPE == TYPE_B) {
            holder.icon.setImageResource(item.getIcon());
        }
        if (callback != null) {
            holder.itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int item = holder.getLayoutPosition();
                    callback.onCardItemClick(v, item);
                }
            });
        }
    }

    @Override
    public int getItemViewType(int position) {
        int type = mDatas.get(position).getType();
        if (type == 1) {
            TYPE = TYPE_A;
            return TYPE_A;
        } else {
            TYPE = TYPE_B;
            return TYPE_B;
        }
    }

    @Override
    public int getItemCount() {
        return mDatas.size();
    }

    class RecyHodler extends RecyclerView.ViewHolder {
        ImageView icon;
        TextView title;
        TextView content;

        public RecyHodler(View itemView) {
            super(itemView);
            if (TYPE == TYPE_A) {
                icon = (ImageView) itemView.findViewById(R.id.item_icon);
                title = (TextView) itemView.findViewById(R.id.item_title);
                content = (TextView) itemView.findViewById(R.id.item_content);
            } else {
                icon = (ImageView) itemView.findViewById(R.id.item_icon2);
            }
        }
    }
}