MaterialCardView

官方

样式

使用

布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="@dimen/dp_12"
    tools:context="example.materialcard.MaterialCardActivity">
    <!--
    默style="@style/Widget.MaterialComponents.CardView"
    -->
    <com.google.android.material.card.MaterialCardView
        android:id="@+id/materialCardActivityMcvCardOne"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_90"
        android:layout_marginBottom="@dimen/dp_10">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/cardOne" />
    </com.google.android.material.card.MaterialCardView>
    <!--
    短点无需而长点需
    android:clickable="true"
    android:focusable="true"
    -->
    <com.google.android.material.card.MaterialCardView
        android:id="@+id/materialCardActivityMcvCardTwo"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_90"
        android:checkable="true"
        android:clickable="true"
        android:focusable="true"
        app:cardElevation="@dimen/dp_4">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/cardTwo" />
    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/materialCardActivityMcvCardThree"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_90"
        app:cardElevation="@dimen/dp_6"
        app:cardPreventCornerOverlap="false"
        app:cardUseCompatPadding="true">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/cardThree" />
    </com.google.android.material.card.MaterialCardView>
</LinearLayout>

主代码

package example.materialcard;

import android.os.Bundle;
import android.view.View;

import com.google.android.material.card.MaterialCardView;
import com.zsp.materialdesign.R;
import com.zsp.utilone.toast.ToastUtils;

import base.BaseActivity;
import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;
import butterknife.OnLongClick;

/**
 * @decs: MaterialCard
 * @author: 郑少鹏
 * @date: 2019/5/15 16:11
 */
public class MaterialCardActivity extends BaseActivity {
    @BindView(R.id.materialCardActivityMcvCardTwo)
    MaterialCardView materialCardActivityMcvCardTwo;

    @Override
    protected void initContentView(Bundle savedInstanceState) {
        setContentView(R.layout.activity_material_card);
        ButterKnife.bind(this);
    }

    @Override
    protected void stepUi() {

    }

    @Override
    protected void initConfiguration() {

    }

    @Override
    protected void initData() {

    }

    @Override
    protected void startLogic() {

    }

    @Override
    protected void setListener() {

    }

    @OnClick({R.id.materialCardActivityMcvCardOne,
            R.id.materialCardActivityMcvCardThree})
    public void onViewClicked(View view) {
        switch (view.getId()) {
            case R.id.materialCardActivityMcvCardOne:
                ToastUtils.shortShow(this, "卡片一");
                break;
            case R.id.materialCardActivityMcvCardThree:
                ToastUtils.shortShow(this, "卡片三");
                break;
            default:
                break;
        }
    }

    @OnLongClick({R.id.materialCardActivityMcvCardTwo})
    public boolean onViewLongClicked(View view) {
        if (view.getId() == R.id.materialCardActivityMcvCardTwo) {
            ToastUtils.shortShow(this, "卡片二");
            materialCardActivityMcvCardTwo.setChecked(!materialCardActivityMcvCardTwo.isChecked());
        }
        return true;
    }
}

覆盖

场景

RelativeLayout含MaterialCardView与TextView，MaterialCardView覆TextView。

分析

FrameLayout默下标签自覆上标签，MaterialCardView属FrameLayout。其elevation属性可改FrameLayout顺序，有阴影时不遵循自覆逻辑，elevation最大于最上层。

解决

app:cardElevation="@dimen/dp_0"

Demo