作者地址http://www.jianshu.com/u/63915ef020e2

针对Android Tv的自定义RecyclerView

作者 wenju_song 关注

2016.12.09 19:52* 字数 814 阅读 1368评论 17喜欢 22

前言: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有焦点。按五向键,焦点会跟着一起移动

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端助力(转载)的更多相关文章

  1. Android为TV端助力 转载:RecyclerView分页加载

    package com.android.ryane.pulltoloaddata_recyclerview; import android.os.Handler;import android.os.L ...

  2. Android为TV端助力:(转载)修改TextView字体样式

    一.开篇 因为 Android 字体相关的内容还比较多的.有时候其实我们只需要调整一下属性就可以满足设计师的需求,或者是一个退后的方案(毕竟有发版的时间卡住了),有一些效果可以大概满足需求. 那么本文 ...

  3. Android为TV端助力转载:码农小阿飞(SpannableString)

    用SpannableString打造绚丽多彩的文本显示效果 引语 TeXtView大家应该都不陌生,文本展示控件嘛! 就用TextView显示普普通通的文本,OK,很简单,Android入门的都会,没 ...

  4. Android为TV端助力 转载:android MVC设计模式

    Controller控制器 import android.app.Dialog; import android.app.ProgressDialog; import android.os.Bundle ...

  5. Android为TV端助力 转载:Android绘图Canvas十八般武器之Shader详解及实战篇(上)

    前言 Android中绘图离不开的就是Canvas了,Canvas是一个庞大的知识体系,有Java层的,也有jni层深入到Framework.Canvas有许多的知识内容,构建了一个武器库一般,所谓十 ...

  6. Android为TV端助力 转载:Android绘图Canvas十八般武器之Shader详解及实战篇(下)

    LinearGradient 线性渐变渲染器 LinearGradient中文翻译过来就是线性渐变的意思.线性渐变通俗来讲就是给起点设置一个颜色值如#faf84d,终点设置一个颜色值如#CC423C, ...

  7. Android为TV端助力 转载:android自定义view实战(温度控制表)!

    效果图 package cn.ljuns.temperature.view; import com.example.mvp.R; import android.content.Context;impo ...

  8. Android为TV端助力 转载自jguangyou的博客,XML基本属性大全

    android:layout_width 指定组件布局宽度 android:layout_height 指定组件布局高度 android:alpha 设置组件透明度 android:backgroun ...

  9. Android为TV端助力 转载弩的博客

    Android.mk简介:Android.mk文件用来告知NDK Build 系统关于Source的信息. Android.mk将是GNU Makefile的一部分,且将被Build System解析 ...

  10. Android为TV端助力 转载:Java 泛型

    一. 泛型概念的提出(为什么需要泛型)? 首先,我们看下下面这段简短的代码: 1 public class GenericTest { 2 3 public static void main(Stri ...

随机推荐

  1. JS 将表格table导出excel

    function tableToExcel(id) { var tb = document.getElementById(id); var html = '<html><head&g ...

  2. [Swift]LeetCode88. 合并两个有序数组 | Merge Sorted Array

    Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note: T ...

  3. [Swift]LeetCode849. 到最近的人的最大距离 | Maximize Distance to Closest Person

    In a row of seats, 1 represents a person sitting in that seat, and 0 represents that the seat is emp ...

  4. IOS开发之尺寸

    在移动端或者前端开发中,UI图通常是带标注的,指定某个控件的长宽等属性,一般UI给的是68px,72px这样的样式,但是我们在开发过程中通常又并不是完全按照上面的标注去设置值,有时候需要将这个标注除以 ...

  5. 9.Flask Cookie和Session

    1.1.概念 cookie:在网站中,http请求是无状态的.也就是说即使第一次和服务器连接后并且登录成功后,第二次请求服务器依然不能知道当前请求是哪个用户.cookie的出现就是为了解决这个问题,第 ...

  6. Java核心技术及面试指南 多线程并发部分的面试题总结以及答案

    7.2.10.1有T1.T2.T3三个线程,如何保证T2在T1执行完后执行,T3在T2执行完后执行? 用join语句,在t3开始前join t2,在t2开始前join t1. 不过,这会破坏多线程的并 ...

  7. Django2.1.2创建默认管理后台

    1.在app的models.py中添加以下代码: from django.db import models # Create your models here. # Register your mod ...

  8. Python合并多个Excel数据

    安装模块 1.找到对应的模块  http://www.python-excel.org/ 2.用pip install 安装 pip install xlrdpip install XlsxWrite ...

  9. Lucene 07 - 对Lucene的索引库进行增删改查

    目录 1 添加索引 2 删除索引 2.1 根据Term删除索引 2.2 删除全部索引(慎用) 3 更新索引 数据保存在关系型数据库中, 需要实现增.删.改.查操作; 索引保存在索引库中, 也需要实现增 ...

  10. Android下实现数据绑定功能

    在编写Android应用的时候经常需要做的事情就是对View的数据进行设置,在Android下设置控件相对.net来说是件麻烦的事情,首先根据ID从view把控件找出来然后才能设置相应属性值:如果数据 ...