美文网首页Android开发经验谈
androidTV图文混排的一个解决方案

androidTV图文混排的一个解决方案

作者: waiwaaa | 来源:发表于2020-06-18 15:01 被阅读0次

目前碰到的一个需求是:一个页面上有文字简介,同时会有视频与图片若干。视频与图片每行排3个,视频与图片不要在同一行显示。

Android官方对TextView的图文混排提供了支持,我们可以从以下三种方式实现TextView的图文混排:

  • 1.在TextView中使用Compound Drawable属性,即在文本的四周指定图像
  • 2.在TextView中使用Spannable多样式显示;
  • 3.在TextView中显示HTML文本,嵌入webview
    但这些方式都不适合于tv端,因为图像即video无法获取到焦点,所以无法显示出来。为了得到焦点,这里采用的是recyclerview来做显示,把图像、视频、文本设置成单独对象,然后在recyclerview中显示。由于tv端都是横屏布局,因此layoutManager采用的是GridLayoutManager。

实现的关键点:
1.采用GridLayoutManager布局,文本占满宽度,需要重写SpanSizeLookup方法。

gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
                                                @Override
                                                public int getSpanSize(int position) {
                                                    if(list.size()==0)return 1;
                                                    return list.get(position).type==3 ? gridLayoutManager.getSpanCount():1;
                                                }
                                            }
        );
  1. 焦点的控制
    1.item的布局中,需要加android:focusable="true"使布局文件可以获得焦点,如果子对象需要获取焦点,你可能需要设置android:descendantFocusability
    2.如果文本的长度过大,一屏显示不下的时候,上下切换会导致看不全文本,因此我们需要对按键进行处理来平衡焦点切换与文本滚动。
text.setOnKeyListener(new View.OnKeyListener() {
                        @Override
                        public boolean onKey(View view, int i, KeyEvent keyEvent) {
                            if(keyEvent.getAction()==keyEvent.ACTION_DOWN){
                                if(keyEvent.getKeyCode()==20||keyEvent.getKeyCode()==130){//down
                                    recyclerView.scrollBy(0,100);
                                }
                            }
                            return false;
                        }
                    });

3.关于换行
1.文字的换行没有问题,因为文字本来就占满了整行
2.如果视频的个数不能占满行,下一个图片就需要在下一行显示。我网上查找了一下“GridLayoutManager强制换行”,没有发现可用的方法,最后采用增加空item的方式来实现,数据中增加空数据来显示占用格子来使之满,空的item不设焦点focusable就不会被选中了。

相关文章

网友评论

    本文标题:androidTV图文混排的一个解决方案

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