您的位置:首页 > 移动开发 > Android开发

Android学习之CardView文档翻译

2016-04-06 21:28 465 查看
回来无事,看了翔哥推荐的学习资源,就想尝试翻译一下。

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

自知翻译不好,全供参考,谢谢!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: