Androdi TV开发之ImageCardView

一、概述

在Android TV开发中，常常需要在图片获得焦点时，显示它的描述性文字，失去焦点时，隐藏描述。对这样的需求很容易就可以实现，我们可以写一个自定义View，包括图片和文字，文字默认隐藏，再设置一个焦点选中监听，获得焦点显示文字，失去焦点隐藏文字。在leanback库中，有一个这样的控件，我们不需要再去自己写一个，他就是ImageCardView。

二 、使用

ImageCardView的使用非常简单，在布局中声明或者直接构造它，获取到他的实例后需要对他进行一些设置，控制的行为。

	imageCardView.setCardType(BaseCardView.CARD_TYPE_INFO_UNDER);

setCardType用于控制它显示类型，有四个值可以设置：

    public static final int CARD_TYPE_MAIN_ONLY = 0;
    public static final int CARD_TYPE_INFO_OVER = 1;
    public static final int CARD_TYPE_INFO_UNDER = 2;
    public static final int CARD_TYPE_INFO_UNDER_WITH_EXTRA = 3;

CARD_TYPE_MAIN_ONLY 表示只显示图片；
CARD_TYPE_INFO_OVER 表示有图片和info，info显示在图片上，重叠显示；
CARD_TYPE_INFO_UNDER 和 CARD_TYPE_INFO_UNDER_WITH_EXTRA 表示有图片和info，info显示在图片下面。

	imageCardView.setInfoVisibility(BaseCardView.CARD_REGION_VISIBLE_SELECTED);

setInfoVisibility用于控制info何时显示，有三种类型：

    public static final int CARD_REGION_VISIBLE_ALWAYS = 0;
    public static final int CARD_REGION_VISIBLE_ACTIVATED = 1;
    public static final int CARD_REGION_VISIBLE_SELECTED = 2;

CARD_REGION_VISIBLE_ALWAYS 表示一直显示；
CARD_REGION_VISIBLE_ACTIVATED 表示ACTIVATED状态时显示；
CARD_REGION_VISIBLE_SELECTED 表示选中状态(获得焦点)时显示。

	imageCardView.setInfoAreaBackgroundColor(Color.TRANSPARENT);
	imageCardView.setInfoAreaBackground(drawabale);

setInfoAreaBackgroundColor 和 setInfoAreaBackground 用于设置info区域的背景。

另外，info区域可以通过下面代码获取到，从而进行一些操作：

	ViewGroup infoAreaView = imageCardView.findViewById(R.id.info_field);

	imageCardView.setMainImageDimensions(120,80);

setMainImageDimensions用于设置图片的宽高。

	imageCardView.getMainImageView();

getMainImageView可以获取到图片控件。

默认情况下(没有修改info的样式)，info区域会有两个TextView，可以通过下面代码获取：

 	imageCardView.findViewById(R.id.title_text);
 	imageCardView.findViewById(R.id.content_text);

	imageCardView.setBadgeImage(drawable);

setBadgeImage用于设置info区域的icon，默认显示在info区域的右边，可以在style指定在左边还是右边。

三、style设置

上面提到的某些属性，都可以在style中统一指定：

    <style name="AppTheme" parent="@style/Theme.Leanback">
        <item name="imageCardViewStyle">@style/CustomImageCardViewStyle</item>
        <item name="imageCardViewInfoAreaStyle">@style/ImageCardViewColoredInfoArea</item>
        <item name="imageCardViewImageStyle">@style/ImageCardViewImageStyle</item>
        <item name="imageCardViewTitleStyle">@style/ImageCardViewColoredTitle</item>
        <item name="imageCardViewContentStyle">@style/ImageCardViewContentStyle</item>
    </style>

imageCardViewStyle
用来设置imageCardView的样式，cardType属性对应setCardType方法。
infoVisibility对应setInfoVisibility方法。lbImageCardViewType有下面几种类型：

• Content 表示info区域包含Content TextView
• Title 表示info区域包含Title TextView
• IconOnRight 表示badge在info区域右边
• IconOnLeft 表示badge在info区域左边
• mageOnly 表示只有图片

infoAreaBackground对应设置info区域背景

    <style name="CustomImageCardViewStyle"  parent="Widget.Leanback.ImageCardViewStyle">
        <item name="cardType">infoUnder</item>
        <item name="infoVisibility">selected</item>
        <item name="lbImageCardViewType">Content|Title</item>
        <item name="infoAreaBackground">@null</item>
    </style>

imageCardViewInfoAreaStyle用来设置info区域的样式

    <style name="ImageCardViewColoredInfoArea"  parent="Widget.Leanback.ImageCardView.InfoAreaStyle">
        <item name="android:layout_width">@dimen/item_width</item>
        <item name="android:layout_height">20dp</item>
        <item name="android:background">@color/menu_bg_color</item>
    </style>

imageCardViewImageStyle用来设置图片的样式

    <style name="ImageCardViewImageStyle"  parent="Widget.Leanback.ImageCardView.ImageStyle">
        <item name="android:layout_width">@dimen/item_width</item>
        <item name="android:layout_height">80dp</item>
        <item name="android:scaleType">fitCenter</item>
        <item name="android:background">@android:color/white</item>
    </style>

imageCardViewTitleStyle 和 imageCardViewContentStyle
用于设置title 和 content 两个TextView 的样式，看看默认的设置：

    <style name="Widget.Leanback.ImageCardView.TitleStyle">
        <item name="android:id">@id/title_text</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:maxLines">1</item>
        <item name="android:layout_marginBottom">@dimen/lb_basic_card_info_text_margin</item>
        <item name="android:textAlignment">viewStart</item>
        <item name="android:ellipsize">end</item>
        <item name="android:textAppearance">@style/TextAppearance.Leanback.ImageCardView.Title</item>
    </style>

    <style name="Widget.Leanback.ImageCardView.ContentStyle">
        <item name="android:id">@id/content_text</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_alignParentStart">true</item>
        <item name="android:layout_below">@+id/title_text</item>
        <item name="android:layout_toStartOf">@+id/extra_badge</item>
        <item name="android:maxLines">1</item>
        <item name="android:textAlignment">viewStart</item>
        <item name="android:ellipsize">end</item>
        <item name="android:textAppearance">@style/TextAppearance.Leanback.ImageCardView.Content</item>
    </style>

可以设置他们的id，宽高等等属性。