Android选中添加边框,AndroidTV中利用MainUpView实现飞框选中效果

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

通过定义一个全局的焦点监听view.getViewTreeObserver().addOnGlobalFocusChangeListener,来定义焦点获得时的控件行为,比如放大、改变背景等

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

实现效果:

eb5ac4d0d856e6e612d2fb3af29c23e3.gif

简单的使用:

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

这里并不需要调整布局,因为飞框一般情况下我们设定为不可见的。在这里绑定了三个属性,一个是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控件的基本方法,当然还有不少拓展的功能,大家可以在熟悉使用后通过阅读源码继续挖掘。希望对大家有所帮助。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 要在Android Studio的圆形边框添加图片,您可以按照以下步骤进行操作: 1. 在res/drawable文件夹创建一个XML文件(例如circlular_border.xml),并添加以下代码: ``` <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <corners android:radius="50dp"/> <stroke android:width="2dp" android:color="@color/black"/> <solid android:color="@color/white"/> </shape> ``` 2. 在布局文件添加ImageView控件,并为其设置背景为刚刚创建的XML文件: ``` <ImageView android:id="@+id/imageView" android:layout_width="100dp" android:layout_height="100dp" android:background="@drawable/circular_border" /> ``` 3. 在Java代码加载您想要添加的图片,并将其设置为ImageView的源(src): ``` ImageView imageView = findViewById(R.id.imageView); imageView.setImageResource(R.drawable.your_image_file); ``` 这样,您就可以在圆形边框添加图片了。请注意,如果您想要实现圆形ImageView,可以使用CircleImageView库。 ### 回答2: 在Android Studio添加圆形边框并在其添加图片的步骤如下: 1. 首先,在drawable文件夹下创建一个圆形边框的XML文件。例如,创建一个名为circle_border.xml的文件。 2. 在circle_border.xml文件,使用shape标签定义一个圆形的形状,并设置边框的颜色和宽度。例如,可以使用solid标签设置边框的颜色,stroke标签设置边框的宽度。同时,设置一个size属性来限定圆形的大小。以下是circle_border.xml文件的示例代码: ```xml <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#FF0000" /> <stroke android:color="#000000" android:width="2dp" /> <size android:width="100dp" android:height="100dp" /> </shape> ``` 3. 在布局文件添加一个ImageView元素,并为它设置drawable属性为前面创建的circle_border.xml文件。例如,可以将drawable属性设置为@drawable/circle_border。以下是一个示例代码: ```xml <ImageView android:id="@+id/imageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/circle_border" /> ``` 4. 最后,在Java代码,使用Glide或者Picasso等图片加载库来加载要显示的图片,并将其设置到ImageView元素。以下是一个使用Glide库加载图片的示例代码: ```java ImageView imageView = findViewById(R.id.imageView); Glide.with(this) .load(R.drawable.your_image) .into(imageView); ``` 以上就是在Android Studio添加圆形边框添加图片的步骤。通过创建圆形边框的XML文件,并将该边框作为ImageView的drawable属性,再加载图片到ImageView,即可实现圆形边框添加图片的效果
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值