一、概述
在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,宽高等等属性。