AndroidTV中实现飞框选中效果

相信很多从事AndroidTV开发的朋友都对如何展示item的选中效果感到苦恼,电视端开发与移动端最大的不同是用户只能通过一个遥控器进行控制(当然如果你的电视是触屏的话除外……),在这个时候,我们需要让用户知道当前选中的到底是哪一个项目,通常来说,有几种常见的实现方法:

  • 通过给item的background属性定义一个selector,为不同状态下(focused、selected)定义不同的背景样式来展现选中的效果。
  • 通过定义一个全局的焦点监听view.getViewTreeObserver().addOnGlobalFocusChangeListener,来定义焦点获得时的控件行为,比如放大、改变背景等

以上两种方法虽然不需要另外增加元素,操作起来比较简单,但是效果比较生硬且单一,如果我们想要更丰富的动画效果,显然上面两种方式不能满足我们的需求。在这里,给大家介绍一个AndroidTV开发的套件Android-tv-widget。这是一个开源的AndroidTV开发框架,里面有不少为TV端适配的UI控件跟函数,可以方便我们实现不少所需的功能。在其中的com.open.androidtvwidget.view.MainUpView,就是一个可以帮助我们实现飞框选中效果的控件。

实现效果:

简单的使用:

1.首先可以在我们的页面根布局下添加这一控件

<com.open.androidtvwidget.view.MainUpView        android:id="@+id/mainUpView"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:tag="upView"        bind:effect_bridge="@{viewmodel.bridge}"        bind:rect_padding="@{viewmodel.rectPadding}"        bind:up_rect_drawable="@{viewmodel.rectDrawable}" />

</RelativeLayout>

这里并不需要调整布局,因为飞框一般情况下我们设定为不可见的。在这里绑定了三个属性,一个是effect_bridge,一个是rect_padding,一个是up_rect_drawable.我们可以看一下这三个属性的定义。在ViewModel中我们添加如下三个成员(对于databinding的具体内容不在这里细述):

@Bindable
public int rectDrawable = R.drawable.white_light_10;

@Bindable
public EffectNoDrawBridge bridge = new EffectNoDrawBridge();

@Bindable
public Rect rectPadding = new Rect(0, 10, 0, 10);

effect_bridge是飞框对象,我们控制飞框的聚焦跟移动都是操作这一个对象,rect_padding是飞框的内边距,可以调整这个Rect对象的大小,来调整飞框离内部四个边缘的距离,我们可以根据实际的状态适当调整,而rectDrawable则是具体的飞框样式,这里推荐使用9-Patch格式的图片,这样飞框在缩放的时候不容易变形。

实际需要我们操作的是mainupview本身以及对应的bridge对象。

MainUpView mainUpView = (MainUpView) mainView.findViewById(R.id.mainUpView);
OpenEffectBridge bridge = (OpenEffectBridge) mainUpView.getEffectBridge();

在首页中,我们可以获取mainupview对象,并通过getEffectBridge()方法获取对应的bridge。

    mainUpView.setFocusView(newFocus, scale);
    mainUpView.setFocusView(newFocus, oldFocus, scale);

利用这两个函数,我们可以使mainUpView捕获当前获得焦点的View对象,飞框也随之移动并显示。传入的scale参数是飞框捕获view后的放大系数,用于实现放大的效果。

当然了,当屏幕上view的布局不均匀的时候,飞框效果可能比较突兀,因为可以看到一个白色的框在屏幕上闪过,如果屏幕两个控件之间的空隙较大,效果并不美观。我们可以设置飞框的动画监听,让飞框在移到目的控件后才显示。

bridge.setOnAnimatorListener(new OpenEffectBridge.NewAnimatorListener() {
                        @Override
                        public void onAnimationStart(OpenEffectBridge bridge, View view, 
                                                                    Animator animation) {
                            bridge.setVisibleWidget(true);
                        }

                        @Override
                        public void onAnimationEnd(OpenEffectBridge bridge, View view,
                                                                 Animator animation) {
                            if (mSaveBridge == bridge && view.hasFocus())
                                bridge.setVisibleWidget(false);
                        }
                    });

在这里,setVisibleWidget方法控制bridge是否显示,传入为true的时候隐藏。我们的操作是在动画开始的时候隐藏bridge,动画结束后再重新显示。

以上就是使用MainUpView控件的基本方法,当然还有不少拓展的功能,大家可以在熟悉使用后通过阅读源码继续挖掘。希望对大家有所帮助。

时间: 2024-10-01 02:35:10

AndroidTV中实现飞框选中效果的相关文章

asp.net mvc中 下拉框联动效果 添加方法

首页查询第一级菜单的所有集合List,取到第一级的第一个下标,根据第一个下标查询第二级集合. 这样在页面就显示了 两个下拉select菜单,默认是从数据库查询的是第一个. 根据下拉框选择相应的第二级数据,在页面上面需要写一个ajax提交方法, $(function () { $('#sltCampus').on('change', function() { $.ajax({ type: "POST", url: '/Member/GetRestaurant', data: { camp

如何创建TWaver 3D的轮廓选中效果

在一般的游戏中,物体的选中效果会是这样: TWaver 3D中,物体的默认的选中效果一般都是一个方方正正的外框.在HTML5的Mono版本中,TWaver提供了轮廓线样式的选中效果. 通过如下代码把几个基本形状进行捏合,生成新的组合体: 1 var node=new mono.ComboNode(nodes, ops); 2 node.s({ 3     'm.color':'#343AD3', 4     //或使用图片贴图:'m.texture.image':'test.png', 5   

判断复选框中是否有被选中的代码实例

判断复选框中是否有被选中的代码实例:复选框中一般多项,有时候我们需要判断这些付选中是否有被选中的项,下面就通过一个实例简单介绍一下如何实现此效果.代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta name="author" content="http://www.softwhy.com/" /> <t

iscroll中使用input框的话是导致无法选中input框

在使用iscroll的移动端的时候如果在iscroll中使用input框的话是导致无法选中input框 原因:iscroll需要一直监听用户的touch操作,以便灵敏的做出对应效果,所以它把其余的默认事件屏蔽了. iscroll.js源码: onBeforeScrollStart: function (e) { e.preventDefault(); }, 更改: onBeforeScrollStart: function (e) { var target = e.target; while (

单击行,自动选中当前行中的单选框按钮

需求:单击行,自动选中当前行中的单选框按钮. aspx页面: <asp:Repeater ID="rptRecordList" runat="server"> <HeaderTemplate> <table style="width: 100%;" id="tbList"> </HeaderTemplate> <ItemTemplate> <tr class=&

ExtJS4.2 Grid知识点五:多选行(可以点击行选中记录与只能点击多选框选中记录)

本节主要学习ExtJS4.2 Grid多选行知识,示例图片: 在线演示  /  示例代码 主要内容如下: 可以点击行选中记录与只能点击多选框选中记录 选中Grid中数据加载到Form 获取Grid中多行数据,生成JSON格式 1.可以点击行来选中记录,此时多选Grid只需要配置selType: 'checkboxmodel',此时有一个缺陷,当你通过多选框勾选多条记录时,如果不小心点击某行,则当前点击行被选中,其它选中的记录行都被取消选择了. 2.只能点击多选框选中记录,此时多选Grid需要配置

C# Word中插入复选框选中符号

object fontname = "Wingdings 2";  object uic = true;    doc.Bookmarks.get_Item(ref lblmark).Range.InsertSymbol(-4014, ref fontname, ref uic, ref missing); C# Word中插入复选框选中符号,布布扣,bubuko.com

实现文本框中输入限制字数的效果

实现文本框中输入限制字数的效果: <!DOCTYPE html> <html> <head lang="zh"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8" /> <title>采销商品基本信息</title> </head>

JS复选框向一个文本框中传值的多选效果

选择一个复选框,那么这个复选框的值就传到一个文本框中,如果这个文本框里有了就不用加了,没有则加.如果取消选择,则从文本框中取掉传的值.中间以“,”分隔,最后结尾没有“,”分隔符. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q