美文网首页Android TVAndroid知识Android进阶之路
针对Android Tv的自定义RecyclerView

针对Android Tv的自定义RecyclerView

作者: wenju_song | 来源:发表于2016-12-09 19:52 被阅读4882次

    前言:Android TV Launcher页在RecyclerView出来之前大家用GridView去实现。TV开发有五向键的监听,遥控器hover监听,点击事件等。用GridView去处理焦点是有一定挑战性的,往往会出现不可预料焦点错乱问题。这里封装了一个针对TV的RecyclerView,很方便的处理了这些事件。

    首先上效果图:

    tvRecycler.gif

    这里封装了RecyclerView实现了下面的一些功能:
    1.响应五向键,按下五向键的上下左右会跟着移动,并获得焦点,在获得焦点时会抬高。
    2.在鼠标hover在条目上时会获得焦点。
    3.添加了条目的点击和长按事件。
    4.添加了是否第一个可见条目和是否是最后一个可见条目的方法。
    5.在item获得焦点时和失去焦点时,这里有相应的回调方法。

    实现

    下面分析一些关键的点:
    1.鼠标滑动时避免跟着滑动,只响应五向键和左右箭头

     @Override
     public boolean dispatchTouchEvent(MotionEvent ev) {
       //在recyclerView的move事件情况下,拦截调,只让它响应五向键和左右箭头移动
       LogUtil.i(this, "CustomRecycleView.dispatchTouchEvent.");
       return ev.getAction() == MotionEvent.ACTION_MOVE || super.dispatchTouchEvent(ev);
    }
    
    

    2.使用StaggeredGridLayoutManager实现管理,如果使用GridLayoutManager会出现焦点的错乱,当使用五向键左右移动时,会从上面转移到下面。原因是GridLayoutManager会存在分组。

    //设置布局管理器
    StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.HORIZONTAL);
    mRecyclerView.setLayoutManager(layoutManager);
    

    3.设置RecyclerView的item有焦点。按五向键,焦点会跟着一起移动

    //item可以获得焦点,需要设置这个属性。
    holder.itemView.setFocusable(true);
    

    4,左右键,让RecyclerView跟着一起滚动,并获得焦点:

    @Override
    public boolean dispatchKeyEvent(KeyEvent event) {
            boolean result = super.dispatchKeyEvent(event);
            int dx = this.getChildAt(0).getWidth();
            View focusView = this.getFocusedChild();
            if (focusView != null) {
                switch (event.getKeyCode()) {
                    case KeyEvent.KEYCODE_DPAD_RIGHT:
                        if (event.getAction() == KeyEvent.ACTION_UP) {
                            return true;
                        } else {
                            View rightView = FocusFinder.getInstance().findNextFocus(this, focusView, View.FOCUS_RIGHT);
                            LogUtil.i(this, "rightView is null:" + (rightView == null));
                            if (rightView != null) {
                                rightView.requestFocusFromTouch();
                                return true;
                            } else {
                                this.smoothScrollBy(dx, 0);
                                return true;
                            }
                        }
                    case KeyEvent.KEYCODE_DPAD_LEFT:
                        View leftView = FocusFinder.getInstance().findNextFocus(this, focusView, View.FOCUS_LEFT);
                        LogUtil.i(this, "left is null:" + (leftView == null));
                        if (event.getAction() == KeyEvent.ACTION_UP) {
                            return true;
                        } else {
                            if (leftView != null) {
                                leftView.requestFocusFromTouch();
                                return true;
                            } else {
                                this.smoothScrollBy(-dx, 0);
                                return true;
                            }
                        }
                }
          }
     return result;
    }
    

    这里请求获取焦点的方法是:

    rightView.requestFocusFromTouch();
    

    TV的焦点的处理的逻辑比较复杂:

    可以参考这篇文章:http://www.cnblogs.com/myzh/p/3664544.html

    5.在holder里监听到焦点变化时做一些处理:

    holder.itemView.setOnFocusChangeListener(new View.OnFocusChangeListener() {
                    @Override
                    public void onFocusChange(View v, boolean hasFocus) {
                        if (hasFocus) {
                            focusStatus(v);
                        } else {
                            normalStatus(v);
                        }
                    }
                });
            /**
             * item获得焦点时调用
             *
             * @param itemView view
             */
            private void focusStatus(View itemView) {
                if (itemView == null) {
                    return;
                }
                if (Build.VERSION.SDK_INT >= 21) {
                    //抬高Z轴
                    ViewCompat.animate(itemView).scaleX(1.10f).scaleY(1.10f).translationZ(1).start();
                } else {
                    ViewCompat.animate(itemView).scaleX(1.10f).scaleY(1.10f).start();
                    ViewGroup parent = (ViewGroup) itemView.getParent();
                    parent.requestLayout();
                    parent.invalidate();
                }
                onItemFocus(itemView);
            }
            /**
             * 当item获得焦点时处理
             *
             * @param itemView itemView
             */
            protected abstract void onItemFocus(View itemView);
            /**
             * item失去焦点时
             *
             * @param itemView item对应的View
             */
            private void normalStatus(View itemView) {
                if (itemView == null) {
                    return;
                }
                if (Build.VERSION.SDK_INT >= 21) {
                    ViewCompat.animate(itemView).scaleX(1.0f).scaleY(1.0f).translationZ(0).start();
                } else {
                    ViewCompat.animate(itemView).scaleX(1.0f).scaleY(1.0f).start();
                    ViewGroup parent = (ViewGroup) itemView.getParent();
                    parent.requestLayout();
                    parent.invalidate();
                }
                onItemGetNormal(itemView);
            }
            /**
             * 当条目失去焦点时调用
             *
             * @param itemView 条目对应的View
             */
            protected abstract void onItemGetNormal(View itemView);
    
    

    这里抽象了两个方法,当item获得焦点和失去焦点时调用。获得焦点时条目会抬高,这里是抬高了Z轴。

    6.获取在第一个和最后一个可见的条目,根据这些状态去显示和隐藏左右箭头。

       /**
         * 第一个条目是否可见
         *
         * @return 可见返回true,不可见返回false
         */
        public boolean isFirstItemVisible() {
            LayoutManager layoutManager = getLayoutManager();
            if (layoutManager instanceof StaggeredGridLayoutManager) {
                int[] firstVisibleItems = null;
                firstVisibleItems = ((StaggeredGridLayoutManager) layoutManager).
                        findFirstCompletelyVisibleItemPositions(firstVisibleItems);
                int position = firstVisibleItems[0];
                return position == 0;
            } else if (layoutManager instanceof LinearLayoutManager) {
                int position = ((LinearLayoutManager) layoutManager).findFirstCompletelyVisibleItemPosition();
                return position == 0;
            }
            return false;
        }
        /**
         * 最后一个条目是否可见
         *
         * @param lineNum    行数
         * @param allItemNum item总数
         * @return 可见返回true,不可见返回false
         */
        public boolean isLastItemVisible(int lineNum, int allItemNum) {
            LayoutManager layoutManager = getLayoutManager();
            if (layoutManager instanceof StaggeredGridLayoutManager) {
                int[] lastVisibleItems = null;
                lastVisibleItems = ((StaggeredGridLayoutManager) layoutManager).findLastCompletelyVisibleItemPositions(lastVisibleItems);
                int position = lastVisibleItems[0];
                LogUtil.i(this, "lastVisiblePosition:" + position);
                boolean isVisible = position >= (allItemNum - lineNum);
                if (isVisible) {
                    scrollBy(1, 0);
                }
                return isVisible;
            } else if (layoutManager instanceof LinearLayoutManager) {
                int position = ((LinearLayoutManager) layoutManager).findLastCompletelyVisibleItemPosition();
                return position == allItemNum - 1;
            }
            return false;
        }
    

    下面说一个坑,在处理最后一个条目时可见时,我发现拿到的数据并不是一种情况,当一共有三行时。

    用下面的代码来打出位置:

    for (int i = 0; i < lastVisibleItems.length; i++) {
                    LogUtil.i(this, "order:"+i +"----->last position:" + lastVisibleItems[i]);
    }
    

    有三种情况:

    1.最后一列只有有一个时,打出的log是

    01-06 02:40:51.868 4135-4135/com.songwenju.customtvrecyclerview I/swjCustomRecyclerView: order:0----->last position:12
    01-06 02:40:51.869 4135-4135/com.songwenju.customtvrecyclerview I/swjCustomRecyclerView: order:1----->last position:10
    01-06 02:40:51.869 4135-4135/com.songwenju.customtvrecyclerview I/swjCustomRecyclerView: order:2----->last position:11
    

    2.当最后一列有两个时:

    01-06 02:41:54.285 6109-6109/com.songwenju.customtvrecyclerview I/swjCustomRecyclerView: order:0----->last position:12
    01-06 02:41:54.286 6109-6109/com.songwenju.customtvrecyclerview I/swjCustomRecyclerView: order:1----->last position:13
    01-06 02:41:54.286 6109-6109/com.songwenju.customtvrecyclerview I/swjCustomRecyclerView: order:2----->last position:11
    

    3.当最后一行有三个时:

    01-06 02:43:21.336 8818-8818/com.songwenju.customtvrecyclerview I/swjCustomRecyclerView: order:0----->last position:12
    01-06 02:43:21.337 8818-8818/com.songwenju.customtvrecyclerview I/swjCustomRecyclerView: order:1----->last position:13
    01-06 02:43:21.337 8818-8818/com.songwenju.customtvrecyclerview I/swjCustomRecyclerView: order:2----->last position:14
    

    所以这里的处理是传入行数:

    boolean isVisible = position >= (allItemNum - lineNum);来判断是否可见。
    

    7.在Recycler滚动时候去处理箭头的显示状态:

    private class MyOnScrollListener extends RecyclerView.OnScrollListener {
            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
            }
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                //在滚动的时候处理箭头的状态
                setLeftArrStatus();
                setRightArrStatus();
            }
        }
    

    结束:

    注意在使用该控件时,要设置RecyclerView的宽度是Item的整数倍,左右箭头点击滑动的距离也要设置为RecyclerView宽度。
    项目的地址:https://github.com/songwenju/CustomTvRecyclerView
    如果对你有帮助,欢迎star和fork。


    推荐:
    欢迎关注我创建的Android TV 简书专题,会定期给大家分享一些AndroidTv相关的内容:
    http://www.jianshu.com/c/37efc6e9799b
    版权声明:本文为博主原创文章,并已授权微信公众号Tamic开发社区独家发布。

    相关文章

      网友评论

      • 豆奶不好喝:TV 开发肯定都是遥控器操作,当滑动到右边最后一个,怎么在滑动的时候焦点能在右边箭头上啊?
        wenju_song:@豆奶不好喝 可以获得最后一个的位置。释放焦点就可以了。
      • zl_yuning:为啥你的项目在1920*1280的电视上不能用,整个布局都是乱的
        wenju_song:@zl_yuning布局需要调试啊,主要演示的是这种效果
      • ddcb8f910f13:哥们,加载更多怎么搞的
      • sing_song:很不错。
        wenju_song:@TheTwo 我这边也用到这个RecyclerView放在popWindow中纵向展示信息,今天把它添上,看看有没有这个问题。
        TheTwo:那个RecycleView用LinearManager纵向展示的话在onBindViewHolder中用holder.itemView.setFocusable(true); 展示出来的列表中焦点在这一页的最后一个,有没有遇到过,理想中想让焦点默认在第一个,但是加载出来在最后一个
        TheTwo:那个RecycleView用LinearManager纵向展示的话在onBindViewHolder中用holder.itemView.setFocusable(true); 展示出来的列表中焦点在这一页的最后一个,有没有遇到过,理想中想让焦点默认在第一个,但是加载出来在最后一个
      • hfk:😂tv开发,和安卓应用开发区别大吗
        wenju_song:@hfk 不算很大
      • e0505ef573ca:使用GridLayoutManager Vertical 按着下键不动焦点快速移动会丢失,一直解决不了。
        e0505ef573ca:@深藏孤与独 我最近也在尝试封装RecyclerView,卡在这个焦点这个卡了好久了,我也好想沸腾一下
        e0505ef573ca:@wenju_song 有啥好的解决办法没啊?在不控制下键事件分发的情况下
        wenju_song:@深藏孤与独 我们这边之前也有这个情况,这个控件封装好之后,当时就沸腾了,很多bug就不用解了。

      本文标题:针对Android Tv的自定义RecyclerView

      本文链接:https://www.haomeiwen.com/subject/bagemttx.html