Android TV RecyclerView焦点移动飞框的实现

最新推荐文章于 2024-05-06 17:27:05 发布
最新推荐文章于 2024-05-06 17:27:05 发布
阅读量2.9k 收藏 6
点赞数 1
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq402164452/article/details/78151401
版权

上一篇文章讲了 Android TV 焦点移动飞框的实现 ，是在ViewGroup中实现的。这一篇文章主要在RecyclerView中实现焦点移动飞框，支持横向和竖向列表。实现效果如下图所示：
这里写图片描述

这里写图片描述

RecyclerView视图绑定

在Android TV端使用RecyclerView跟手机上的一样，都是通过绑定ViewHolder来实现视图的绑定，首先需要创建一个基类继承RecyclerView.ViewHolder，里面包含一个setUpView的抽象方法，让实现类在这个方法里面处理RecyclerView中Item视图的绑定：

public abstract  class BaseViewHolder<T> extends RecyclerView.ViewHolder {
    public View itemView;

    public BaseViewHolder(View itemView) {
        super(itemView);
    }

    public abstract void setUpView(T model, int position, RecyclerView.Adapter adapter);
}

然后创建一个MenuViewHolder子类继承BaseViewHolder基类，实现setUpView方法，setUpView方法有3个参数Movie model, final int position, RecyclerView.Adapter adapter，第一个参数是Bean模型，第二个参数是该Item在列表中的位置，第三个参数是与负责处理视图绑定的适配器类，在Adapter适配器类中的onBindViewHolder调用该方法实现视图的绑定和处理。：

public class MenuViewHolder extends BaseViewHolder<Movie> {
    private TextView title;
    private TextView content;

    public MenuViewHolder(View itemView) {
        super(itemView);
        title= (TextView) itemView.findViewById(R.id.Menu_Title);
        content= (TextView) itemView.findViewById(R.id.Menu_Content);
        this.itemView=itemView;
        itemView.setFocusable(true);
    }

    @Override
    public void setUpView(Movie model, final int position, RecyclerView.Adapter adapter) {
        title.setText(model.getTitle());
        content.setText(model.getContent());
        itemView.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View view, boolean b) {
                if(b){
                    focusStatus(view);
                }else{
                    normalStatus(view);
                }
            }
        });
        itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
//                Log.e("No"+position,"Click");
            }
        });
    }

    private void focusStatus(View itemView){
        if(itemView!=null){
            if(Build.VERSION.SDK_INT>=21){
//                ViewCompat.animate(itemView).scaleX(1.20f).scaleY(1.20f).translationZ(1).start();

                ObjectAnimator scaleX=ObjectAnimator.ofFloat(itemView,"scaleX",1.0f,1.20f);
                ObjectAnimator scaleY=ObjectAnimator.ofFloat(itemView,"scaleY",1.0f,1.20f);
                ObjectAnimator translationZ=ObjectAnimator.ofFloat(itemView,"translationZ",0f,1.0f);
                AnimatorSet animatorSet=new AnimatorSet();
                animatorSet.play(scaleX).with(scaleY).with(translationZ);
                animatorSet.setDuration(200);
                animatorSet.start();
            }else{
//                ViewCompat.animate(itemView).scaleX(1.20f).scaleY(1.20f).start();
                ObjectAnimator scaleX=ObjectAnimator.ofFloat(itemView,"scaleX",1.0f,1.20f);
                ObjectAnimator scaleY=ObjectAnimator.ofFloat(itemView,"scaleY",1.0f,1.20f);
                ObjectAnimator translationZ=ObjectAnimator.ofFloat(itemView,"translationZ",0f,1.0f);
                AnimatorSet animatorSet=new AnimatorSet();
                animatorSet.play(scaleX).with(scaleY).with(translationZ);
                animatorSet.setDuration(200);
                animatorSet.start();

                ViewGroup parent= (ViewGroup) itemView.getParent();
                parent.requestLayout();
                parent.invalidate();
            }
        }
    }

    private void normalStatus(View itemView){
        if(itemView!=null){
            if(Build.VERSION.SDK_INT>=21){
//                ViewCompat.animate(itemView).scaleX(1.0f).scaleY(1.0f).translationZ(0f).start();

                ObjectAnimator scaleX=ObjectAnimator.ofFloat(itemView,"scaleX",1.20f,1.0f);
                ObjectAnimator scaleY=ObjectAnimator.ofFloat(itemView,"scaleY",1.20f,1.0f);
                ObjectAnimator translationZ=ObjectAnimator.ofFloat(itemView,"translationZ",1.0f,0f);
                AnimatorSet animatorSet=new AnimatorSet();
                animatorSet.setDuration(200);
                animatorSet.play(scaleX).with(scaleY).with(translationZ);
                animatorSet.start();
            }else{
//                ViewCompat.animate(itemView).scaleX(1.0f).scaleY(1.0f).translationZ(0f).start();
                ObjectAnimator scaleX=ObjectAnimator.ofFloat(itemView,"scaleX",1.20f,1.0f);
                ObjectAnimator scaleY=ObjectAnimator.ofFloat(itemView,"scaleY",1.20f,1.0f);
                ObjectAnimator translationZ=ObjectAnimator.ofFloat(itemView,"translationZ",1.0f,0f);
                AnimatorSet animatorSet=new AnimatorSet();
                animatorSet.setDuration(200);
                animatorSet.play(scaleX).with(scaleY).with(translationZ);
                animatorSet.start();

                ViewGroup parent= (ViewGroup) itemView.getParent();
                parent.requestLayout();
                parent.invalidate();
            }

        }
    }
}

首先需要在MenuViewHolder的构造函数中实现视图的绑定，并设置该Item视图为可获得焦点的itemView.setFocusable(true)。然后在setUpView中处理与视图的填充，并在这里面实现得失焦点和点击的监听。Item中有两种状态，一种是获得焦点，一种是默认情况（没获得焦点），在同一时刻只能只有一个Item获得焦点。focusStatus方法是使获得焦点的View做放大并Z轴抬起的处理，normalStatus方法是使View重回默认状态，即做缩小并Z轴下降的处理。在这两个方法中使用ViewCompat.animate和ObjectAnimator都可以。

Adapter适配器实现

由于在onBindViewHolder中我们把与视图处理相关的逻辑都交给了ViewHolder中处理了，所以我们的Adapter很清爽：


public class MenuAdapter extends RecyclerView.Adapter<MenuViewHolder> {
    private List<Movie> list;

    public MenuAdapter(List<Movie> list){
        this.list=list;
    }

    @Override
    public MenuViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new MenuViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.recyclerview_item_menu,parent,false));
    }

    @Override
    public void onBindViewHolder(MenuViewHolder holder, int position) {
        holder.setUpView(list.get(position),position,this);
    }

    @Override
    public int getItemCount() {
        return list.size();
    }
}

Activity处理

由于这种效果类似于瀑布流，我们为RecyclerView使用了StaggeredGridLayoutManager交错网格布局管理器，每个格子的高度和宽度都可以不一样，支持水平方向和垂直方向，StaggeredGridLayoutManager中第一个参数是行数（水平方向）或者列数（垂直方法），第二个参数是方向参数：

        menuAdapter = new MenuAdapter(list);
        recyclerView.setLayoutManager(new StaggeredGridLayoutManager(5, StaggeredGridLayoutManager.VERTICAL));
        recyclerView.setAdapter(menuAdapter);

        recyclerView.post(new Runnable() {
            @Override
            public void run() {
                flyBorder.attachToRecyclerView(recyclerView);
                recyclerView.getChildAt(0).setFocusable(true);
                recyclerView.getChildAt(0).setFocusableInTouchMode(true);
                recyclerView.getChildAt(0).requestFocus();
            }
        });

recyclerView.post底层是使用handler发送message到MainLooper主线程去处理，由于RecyclerView绑定adapter后子视图有可能还未初始化，getChildAt(0)方法可能会为null。所以使用post方法等RecyclerView中的视图都初始化完后再令第一个Item获取焦点，并实现flyBorderView与RecyclerView的绑定。

扩展FlyBorderView 支持RecyclerView

首先FlyBorderView 还是上一节中的那个类，在这个类中做扩展以支持RecyclerView，添加一个attachToRecyclerView方法实现FlyBorderView 与RecyclerView的绑定。

final DisplayMetrics displayMetrics = getContext().getApplicationContext().getResources().getDisplayMetrics();

public void attachToRecyclerView(final RecyclerView recyclerView) {
        View childView = recyclerView.getChildAt(0);
        final int childWidth = childView.getWidth();
        final int childHeight = childView.getHeight();
        startTotalAnim(childWidth + 2 * borderWidth, childHeight + 2 * borderWidth,
                childView.getLeft() - borderWidth, childView.getTop() - borderWidth);
 StaggeredGridLayoutManager layoutManager = (StaggeredGridLayoutManager) recyclerView.getLayoutManager();

        switch (layoutManager.getOrientation()) {
            case StaggeredGridLayoutManager.HORIZONTAL:
                recyclerView.getViewTreeObserver().addOnGlobalFocusChangeListener(new ViewTreeObserver.OnGlobalFocusChangeListener() {
                    @Override
                    public void onGlobalFocusChanged(View oldFocus, View newFocus) {

                        if (newFocus.getLayoutParams() instanceof RecyclerView.LayoutParams) {
                            int left;
                            if (newFocus.getLeft() >= displayMetrics.widthPixels - childWidth) {
                                left = displayMetrics.widthPixels - childWidth;
                            } else if (newFocus.getLeft() <= 0) {
                                left = 0;
                            } else {
                                left = newFocus.getLeft();
                            }
                            int widthInc = newFocus.getWidth() + 2 * borderWidth - getWidth();
                            int heightInc = newFocus.getHeight() + 2 * borderWidth - getHeight();
                            int translationX = left - borderWidth;
                            int translationY = newFocus.getTop() - borderWidth;
                            startTotalAnim(widthInc, heightInc, translationX, translationY);
                        }

                    }
                });
                break;
            case StaggeredGridLayoutManager.VERTICAL:
                recyclerView.getViewTreeObserver().addOnGlobalFocusChangeListener(new ViewTreeObserver.OnGlobalFocusChangeListener() {
                    @Override
                    public void onGlobalFocusChanged(View oldFocus, View newFocus) {

                        if (newFocus.getLayoutParams() instanceof RecyclerView.LayoutParams) {
                            int top;
                            if (newFocus.getTop() >= displayMetrics.heightPixels - childHeight) {
                                top = displayMetrics.heightPixels - childHeight;
                            } else if (newFocus.getTop() <= 0) {
                                top = 0;
                            } else {
                                top = newFocus.getTop();
                            }
                            int widthInc = newFocus.getWidth() + 2 * borderWidth - getWidth();
                            int heightInc = newFocus.getHeight() + 2 * borderWidth - getHeight();
                            int translationX = newFocus.getLeft() - borderWidth;
                            int translationY = top - borderWidth;
                            startTotalAnim(widthInc, heightInc, translationX, translationY);
                        }
                    }
                });
                break;
            default:
                Toast.makeText(getContext(), "Error", Toast.LENGTH_SHORT).show();
        }


    }

attachToRecyclerView方法中前4行主要是令焦点框初始化到RecyclerView中第一个View的位置。然后根据StaggeredGridLayoutManager的getOrientation方法分水平和垂直方法进行处理。实现RecyclerView中监听焦点变化的主要是获取RecyclerView的视图树并设置焦点监听器来监听，跟在ViewGroup中监听焦点的变化差不多，recyclerView.getViewTreeObserver().addOnGlobalFocusChangeListener。

在水平方向上，有两种特殊情况：
第一种情况是最右边的Item并没有完全显示：
这里写图片描述

这时候RecyclerView向右滚动，最右边Item完全显示，但是获取的newFocus.getLeft()的左上角x轴位置值并不准确，焦点框并不能与Item的View对齐，位置值有可能会大于等于displayMetrics.widthPixels - childWidth（即最后一个Item完全显示的坐标值），所以需要将最右边的Item完全显示的y轴位置值设置为left = displayMetrics.widthPixels - childWidth。

第二种情况是最左边的Item并没有完全显示：
这里写图片描述

这时候RecyclerView向左滚动，最左边Item完全显示，但是获取的newFocus.getLeft()的左上角x轴位置值并不准确，焦点框并不能与Item的View对齐，位置值会小于0，焦点飞框移动后会看不到。所以需要将最左边的Item完全显示的y轴位置值设置为left = 0;

在垂直方向上也同样有两种情况，类似于水平方向上的两种特殊情况，只不过要判断处理的是y轴方向上的便宜量，即view.getTop坐标值。

在ViewGroup和RecyclerView中的焦点飞框的实现已经处理完毕了，下一个坑估计就是多RecyclerView联动焦点移动飞框的实现了，即飞框可以从一个RecyclerView移动到另一个RecyclerView。

本位项目Demo源码：
https://github.com/QQ402164452/FlyBorderViewDemo/branches

JasonChen嘉生
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Android TV使用属性动画绘制平移焦点框
学无止境
08-07 1886
Android系统一开始就提供了两种实现动画的方式： View Animation（补间动画 Tweened animation） Drawable Animation（逐帧动画 Frame Animation） 逐帧动画就不用说了，补间动画可以实现4种基本变换—平移、旋转、缩放、透明度，但是也存在一定的缺点 作用对象局限于View 没有改变View的属性，只是改变视觉效果 动画效果单一...
Android中RecyclerView的使用(焦点控制)
Zou_pl的博客
01-01 1万+
注：第一篇博客，是因为项目中遇到一个RecyclerViewView使用时焦点出错问题，研究半天才解决，先写这么多，后续会专门整理RecyclerView的博客。
Android TV焦点框动画效果
会飞的猫的博客
12-29 4257
背景意义 对于TV端来说,各种Android事件的处理,依赖于遥控操作,不像移动终端可以通过Touch主观感觉焦点存在位置,TV焦点需要通过图像显示出来.因此焦点框显示效果非常影响用户体验,一般焦点效果常见的是控件背景加高亮框,或通过触发事件切换背景,亦或伸缩控件大小.实际上,我们可以实现具有动画效果的焦点框.实现的动画效果为:使用平移动画绘制焦点框移动轨迹,同时焦点框随着控件形状动态改
RecyclerView通过DPAD按键上下切换焦点 切换到界面外的控件时焦点会左右乱跳
mowwwcom的专栏
07-21 1064
RecyclerView上下切换焦点左右乱跳
android TV app适配遥控器思路，recycleview选中放大
最新发布
简公子的博客
05-06 566
再将adapter中的item布局中，只设置一个view的focusable是true，其他的都设置成false，这样，遥控器就可以进行选择了，同时遥控器中的ok键，就是click事件；这样就可以响应遥控器的操作了，并且还有失去、获取焦点，view放大缩小的动画；当遥控器遥控盒子，app内是有一套机制，响应遥控器的操作，
android tv 长布局,Android TV 焦点框移动的实现方法
weixin_35011300的博客
05-26 246
Tv开发，最重要的当然是焦点框的移动，有了焦点框我们才能知道当前选中的是哪一个，我们来看下效果图：那它是怎么实现的呢，我们一起来看下。原理布局上使用一个view，背景是.9图片做焦点框，选中一个控件的时候把这个view移动选中的控件的位置。怎么样，是不是很简单，行动起来。先看下布局codeing布局：xmlns:tools="http://schemas.android.com/tools"and...
android 控制焦点,Android应用开发：NO.2--RecyclerView 焦点控制
weixin_35719380的博客
05-31 1329
本文主要介绍了Android应用开发的NO.2--RecyclerView 焦点控制，希望对大家学习Android应用开发有所帮助。android TV使用 RecyclerView ，用焦点控制item首先在item中的xml中，的最外层添加 android:focusable="true"，此句是为RecyclerView 的item添加焦点属性，添加完属性后，在RecyclerView 的 ...
Android TV 上使用的RecyclerView和焦点框架，焦点框移动效果，完胜androidTvwidget的MainUpView
05-11
本文将深入探讨如何在Android TV上利用`RecyclerView`和焦点框架实现高效且美观的焦点移动效果，以及如何通过优化这些组件来超越传统`androidTvwidget`中的`MainUpView`。 首先，`RecyclerView`是Android平台上的一...
Android-AndroidTV上使用的RecyclerView和焦点框架
08-12
1. 焦点移动：Android TV的焦点管理框架确保用户可以使用遥控器上的方向键流畅地在界面元素间切换。开发者需要设置焦点移动规则，例如使用`setFocusable()`和`setFocusableInTouchMode()`方法。 2. 焦点样式：为每...
androidTV 自定义RecyclerView让当前焦点item显示在中间
09-10
AndroidTV中自定义RecyclerView 让当前焦点item显示在中间，调用smoothToCenter（pos）就可以。
用于 Android TV 上的 RecyclerView和焦点框架、焦点框移动效果，完胜androidTvwidget的MainUpView
12-21
本项目针对Android TV平台，提供了一种优化的解决方案，旨在提升`RecyclerView`的焦点框效果和移动行为，显著优于传统的`androidTvwidget.MainUpView`。 `RecyclerView`是Android系统中一个强大的视图组件，它允许...
Android RecyclerView的焦点记忆封装
01-20
本篇文章主要介绍如何通过自定义RecyclerView实现焦点记忆功能，以及如何添加额外的特性，如限制焦点移动方向和监听焦点变化事件。 首先，我们创建一个名为`FocusKeepRecyclerView`的自定义RecyclerView类，继承自`...
内部RecyclerView与外部RecyclerView的点击事件保持一致
SkySmile1992的博客
11-07 2969
先看一张图： 图中的列表是有两个RecyclerVew组合成的，外部RecyclerView的LayoutManager为LinearLayoutManager，内部RecyclerView的LayoutManager为GridLayoutManager。区域1是外部Item，区域2是内部Item，区域3是内部RecyclerView。因为内部RecyclerView的item个数较少，所以...
androidTV中使用recyclerview并使其item在获取焦点后获取边框，并伴随放大，凸显效果
热门推荐
qq_35697312的博客
11-03 1万+
androidTV端开发小程序员讲讲item获取焦点后的放大凸显效果，不同版本下的凸显效果的处理
Android TV中使用RecyclerView左右长按或者连续按键焦点飞掉的问题
lb687的专栏
05-26 345
【代码】Android TV中使用RecyclerView左右长按或者连续按键焦点飞掉的问题。
RecyclerView嵌套RecyclerView,内层RecyclerView区域无法响应Item点击
qq_34912760的博客
11-01 270
rv.setOnTouchListener((v, event) -> ViewHolder.view.onTouchEvent(event));
电视TV端使用RecyclerView开发遇到的问题
Singleton1900的专栏
09-15 1万+
最近在做一个TV端使用的相册。偷偷展示一下，相册大概长这个样子： 相册也支持多选删除： 非删除模式下点击单一图片会进入单一图片展示界面。单一图片可以左右翻页。 从展示界面返回相册界面，光标定位到展示图片所在的相册位置。主要控件使用了CardView 和RecyclerView。 TV开发和手机开发有个不同的就是焦点问题。
Android TV 焦点移动飞框的实现
qq402164452的博客
09-25 3040
目前国内传统厂商和互联网厂商所开发的Android智能电视的UI都很类似，其中最常见的就是获得焦点的选中项飞框动画效果的实现了，看上去动画效果很炫酷，能够正确的指引使用者当前所选择的条目。Android电视和Android手机有很大的区别，Android手机带有触摸屏，一般不用特别指示用户所选中的项；而Android电视则不同，不带有触摸屏，一切操作都需要通过遥控或者手机（带红外线）来实现远程操控，
RecyclerView焦点跳转BUG优化
Dawish的专栏
04-01 1万+
RecyclerView的焦点跳转bug优化
"Android RecyclerView实现下拉刷新和上拉加载详解
总的来说，实现Android RecyclerView的下拉刷新和上拉加载是一件非常有必要的事情。无论是使用SwipeRefreshLayout来手动实现底部自动加载，还是使用第三方库SwipeToLoadLayout来简化开发，都能够为我们的项目带来更...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值