回来无事,看了翔哥推荐的学习资源,就想尝试翻译一下。
CardView的使用
Using the CardView
概述:
Android 5.0介绍了一个新的控件,CardView,可以把它作为一个带有圆角和阴影的FrameLayout,(继承自FrameLayout),请注意,CardView作为一个包装布局,一般被用在listview或者recylerView item中。
Android 5.0 introduces a new widget called CardView which essentially can be thought of as a FrameLayout with rounded corners and shadow based on its elevation. Note that a CardView wraps a layout and will often be the container used in a layout for each item within a ListView or RecyclerView.
CardView 被用来展示不同的内容,用在列表或者网格展示不同内容是极好的,因为卡片的边界会帮助用户快速扫描列表
CardView should be used when displaying heterogenous content. Using a list or a grid of tiles (non-cards) for homogenous content is preferred since the boundaries in a card can distract the user from quickly scanning a list.
使用卡片:
让我们假设你的布局像这样
Using CardView
Lets assume your layout looks something like this:
<FrameLayout xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content">
<!-- Main Content View -->
<RelativeLayout>
...
</RelativeLayout>
</FrameLayout>
用这个布局创建卡片,首先你需要build.gradle文件中导入依赖包
dependencies {
...
compile 'com.android.support:cardview-v7:23.2.1'
}
现在将FrameLayout替换为CardView
Now replace the FrameLayout with CardView.
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content">
<!-- Main Content View -->
<RelativeLayout>
...
</RelativeLayout>
</android.support.v7.widget.CardView>
就这样,用依赖库确保向后兼容,尽管在android系统运行时,对卡片的处理有些不同,所以参考旧平台的支持会比较详细。
Thats it! Using the support library ensures backward compatibility as well; although the visual treatment for cards are slightly different when running on versions prior to Android L. See Support on Older Platforms section for more details.
定制卡片:
卡片提供了默认的阴影和圆角,所以卡片有一个一致的外观在整个平台,然而,你可能会选择定制这个值如果你想这么做,我们也可以设置卡片的背景色。
Customizing CardView
CardView provides a default elevation and corner radius so that cards have a consistent appearance across the platforms. However, you may choose to customize these values if you desire to do so. We can also set the background color of the card.
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" card_view:cardBackgroundColor="#E6E6E6" card_view:cardCornerRadius="8dp" card_view:cardElevation="8dp">
<!-- Main Content View -->
<RelativeLayout>
...
</RelativeLayout>
</android.support.v7.widget.CardView>
就这样card_view:cardElevation 被用来决定阴影尺寸大小以显示真实描绘的深度,这些属性也可以用在编程中。
Note that the card_view:cardElevation is used to determine the size and softness of the shadow so as to realistically depict the depth. These properties can be set programmatically as well:
CardView card = ...
card.setCardBackgroundColor(Color.parseColor("#E6E6E6"));
card.setMaxCardElevation(0.0);
card.setRadius(5.0);
查看卡片文档获得更多属性
See the CardView docs for additional properties.
添加波纹效果
通常,一个卡片不是tappable而且没有任何触摸效果,当卡片被触摸时会提供给用户不一样触摸动画,要具备这个效果,给你的卡片添加这个关联属性
By default, a CardView is not tappable and it doesn't show any touch feedback. Touch feedback animations provide users with visual feedback when a CardView is touched. To enable this behavior, add the following attributes to your CardView .
<android.support.v7.widget.CardView
...
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground">
...
</android.support.v7.widget.CardView>
用了android:foreground=”?android:attr/selectableItemBackground” 属性会在触摸时具备波纹效果。
Using the android:foreground="?android:attr/selectableItemBackground" property on a CardView enables the ripple effect to originate from the touch origin.
支持旧平台
Support on Older Platforms
在安卓平台上,卡片添加了支持圆角,由于圆角裁剪是一个很昂贵的操作,相似的,卡片添加内容间隔和画阴影在那片区域,这个内容间隔基于elevation。
On platforms before Android L, CardView adds padding to support corner radius, since rounded corner clipping can be an expensive operation. Similarly, for shadows, before L, CardView adds content padding and draws shadows to that area. This content padding is based on the elevation, and as per the docs:
This padding amount is equal to maxCardElevation + (1 - cos45) * cornerRadius on the sides and maxCardElevation * 1.5 + (1 - cos45) * cornerRadius on top and bottom.
(怎么计算的现在看不懂了)
如果你想要明显的填充内容,你需要用card_view:contentPadding .属性。
相似的,要改变一个卡片的背景,你需要用新的属性card_view:cardBackgroundColor .
Thus, if you would like to specify custom padding on the content, you need to use a new attribute card_view:contentPadding .
Similarly, to change the background color of a CardView, you need to use a new attribute card_view:cardBackgroundColor .
索引
https://developer.android.com/reference/android/support/v7/widget/CardView.html
•http://www.google.com/design/spec/components/cards.html#cards-usage
自知翻译不好,全供参考,谢谢!