Android 基础:Materia Design 定义视图阴影elevation和创建卡片CardView

原创 2015年07月10日 09:25:49

定义视图的 Elevation

视图可以投射阴影, elevation 值决定了阴影的大小和顺序。要设定 elevation 值,请使用  android:elevation  属性:

<TextView
android:id="@+id/my_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/next"
android:background="@color/white"
android:elevation="5dp" />

新的  translationZ  属性使得你可以设计临时变更 elevation 的动画。elevation 变化在做触摸反馈时很有用。


创建列表和卡片

RecyclerView 是一个可插入性更强的 ListView,它支持不同的 layout 类型,并可以提升性能。CardView 使得你可以在卡片
内显示一部分内容,并且和其他应用保持外观一致。以下是一段样例代码展示如何在 layout 中添加 CardView。

<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="200dp"
android:layout_height="200dp"
card_view:cardCornerRadius="3dp">
...
</android.support.v7.widget.CardView>

其中 card_view:cardCornerRadius 属性是改变卡片的四个角的半径的,如圆角,直角等。


下面通过官网的一个Sample来实例演示

效果图


项目结构


代码

activity_card_view.xml:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="com.example.android.cardview.CardViewActivity"
    tools:ignore="MergeRootFrame" />

fragment_card_view:

<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    >

    <LinearLayout android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:orientation="vertical"
                  android:paddingBottom="@dimen/activity_vertical_margin"
                  android:paddingTop="@dimen/activity_vertical_margin"
                  android:paddingLeft="@dimen/activity_horizontal_margin"
                  android:paddingRight="@dimen/activity_horizontal_margin"
        >
        <android.support.v7.widget.CardView
            android:id="@+id/cardview"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:elevation="100dp"
            card_view:cardBackgroundColor="@color/cardview_initial_background"
            card_view:cardCornerRadius="8dp"
            android:layout_marginLeft="@dimen/margin_large"
            android:layout_marginRight="@dimen/margin_large"
            >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/margin_medium"
                android:text="@string/cardview_contents"
                />
        </android.support.v7.widget.CardView>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margin_large"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_width="@dimen/seekbar_label_length"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:text="@string/cardview_radius_seekbar_text"
                />
            <SeekBar
                android:id="@+id/cardview_radius_seekbar"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/margin_medium"
                />
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_width="@dimen/seekbar_label_length"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:text="@string/cardview_elevation_seekbar_text"
                />
            <SeekBar
                android:id="@+id/cardview_elevation_seekbar"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/margin_medium"
                />
        </LinearLayout>
    </LinearLayout>
</ScrollView>

CardViewActivity:

public class CardViewActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_card_view);
        if (savedInstanceState == null) {
            getFragmentManager().beginTransaction()
                    .add(R.id.container, CardViewFragment.newInstance())
                    .commit();
        }
    }
}

CardViewFragment:

public class CardViewFragment extends Fragment {

    private static final String TAG = CardViewFragment.class.getSimpleName();

    /** The CardView widget. */
    //@VisibleForTesting
    CardView mCardView;

    /**
     * SeekBar that changes the cornerRadius attribute for the {@link #mCardView} widget.
     */
    //@VisibleForTesting
    SeekBar mRadiusSeekBar;

    /**
     * SeekBar that changes the Elevation attribute for the {@link #mCardView} widget.
     */
    //@VisibleForTesting
    SeekBar mElevationSeekBar;

    /**
     * Use this factory method to create a new instance of
     * this fragment using the provided parameters.
     *
     * @return A new instance of fragment NotificationFragment.
     */
    public static CardViewFragment newInstance() {
        CardViewFragment fragment = new CardViewFragment();
        fragment.setRetainInstance(true);
        return fragment;
    }

    public CardViewFragment() {
        // Required empty public constructor
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_card_view, container, false);
    }

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        mCardView = (CardView) view.findViewById(R.id.cardview);
        mRadiusSeekBar = (SeekBar) view.findViewById(R.id.cardview_radius_seekbar);
        mRadiusSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                Log.d(TAG, String.format("SeekBar Radius progress : %d", progress));
                mCardView.setRadius(progress);
            }
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                //Do nothing
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                //Do nothing
            }
        });

        mElevationSeekBar = (SeekBar) view.findViewById(R.id.cardview_elevation_seekbar);
        mElevationSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                Log.d(TAG, String.format("SeekBar Elevation progress : %d", progress));
                mCardView.setElevation(progress);
            }
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                //Do nothing
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                //Do nothing
            }
        });
    }
}


版权声明:本文为博主原创文章,未经博主允许不得转载。

CardView去除阴影,CardView动态改变item文字

CardView详解,别在项目中被坑了。动态改变CardView某个Item的文字,取出CardView阴影...
  • aheeyiqi
  • aheeyiqi
  • 2016年04月05日 14:19
  • 6803

Android cardview 去掉圆角和去掉背景

CardView,从本质上看,可以将CardView看做是FrameLayout在自身之上添加了圆角和阴影效果。请注意:CardView被包装为一种布局,并且经常在ListView和RecyclerV...
  • jdsjlzx
  • jdsjlzx
  • 2016年03月31日 20:21
  • 8661

关于CardView无法显示阴影的问题

一些声明本文只针对笔者所对应的环境有效,但是对其他人的开发环境有没有效果并不能保证。笔者的环境是 OS + Android studio 2.0 + VIVO X5M(5.0),虽然觉得应该和操作系...
  • Major_out
  • Major_out
  • 2016年05月04日 23:00
  • 9204

Android新特性之CardView的简单使用

Android新特性之CardView的简单使用 在上篇文章中,我们学习了RecyclerView的简单使用,这边文章我们学习下Android 5.0的另一个新增加的控件CardView。首先讲解写...
  • jdsjlzx
  • jdsjlzx
  • 2015年10月30日 14:23
  • 51682

CardView得使用 自带阴影

由于经常写一些listview布局 要求不高 就随便着了个布局来实现 用了 CardView 这个控件 方便之处在于 自带卡片状阴影 缺点就是两边不能最大到无边框 就是一个卡片形状 偷懒用的 还是导...
  • qq_34709056
  • qq_34709056
  • 2017年05月24日 17:44
  • 2655

androd中实现仿CardView的自定义阴影效果

android:shape="rectangle"          android:dither="true"          >                             ...
  • u013718120
  • u013718120
  • 2015年11月23日 16:25
  • 4104

Android应用开发:CardView的使用及兼容

引言 在Google I/O 2014上,Google公布了Android L Preview版本,此版本的UI有了非常大的改变,很炫很给力!同时,Google也给出了两个可以向下兼容的控件...
  • airk000
  • airk000
  • 2014年09月26日 23:23
  • 91435

CardView的使用

先上效果图:就像CardView的名字一样,就是卡片的效果。代码:
  • CodeNoodles
  • CodeNoodles
  • 2016年03月27日 10:07
  • 2663

Android5.0中Cardview的简单使用

CardView 写在前面,任何控件有其优点,就会有缺点。Android 5.0中增加一个全新的控件–CardView,从本质上看,可以将CardView看做是FrameLayout在自身之上添加了...
  • woshishui5577
  • woshishui5577
  • 2016年06月24日 17:39
  • 297

关于CardView底部显示不出来或者不全的解释

如果你的代码中使用了CardView 那么如果要在CardView内部放置控件什么的,或者让CardView显示一个圆角边框,那么你必须要做的是设置这些属性: android:layout_mar...
  • sinat_30822393
  • sinat_30822393
  • 2017年03月14日 17:24
  • 1741
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android 基础:Materia Design 定义视图阴影elevation和创建卡片CardView
举报原因:
原因补充:

(最多只允许输入30个字)