Android TV

Android TV TextView如何实现增加滚动条

2017-11-22  本文已影响47人  老肖79

这两天在进行TV端应用商店的版本迭代,其中应用详情界面有这样一个需求,“应用介绍在焦点落在其上时,字数超过3行,需要有滚动条,并可上下滚动查看内容,当滚动滑到底,再按下键,焦点可离开应用介绍;如果向上滚动,当滚动到顶部,再按上键,焦点也可离开应用介绍”。当看到这个需求时,立即想到要给应用介绍所在的TextView增加一个滚动条,并且可以获取到焦点,这样才可以上下滚动。

思路有了,于是开始撸代码。

首先第一步,

要让应用介绍所在的TextView获取到焦点,这个很容易,只需要增加如下两个属性即可实现,

android:focusable="true"

android:focusableInTouchMode="true"

这里简单介绍一下这两个属性,android:focusable="true"表示此控件是否能够获取到焦点,android:focusableInTouchMode="true"表示是否可以通过touch或方向键来获得焦点,在手机开发上一般不会设置,因为大多手机都是触摸式的,触摸后会直接响应按键事件了。而盒子或TV上在移动方向键时需要控件先获取焦点,然后再点击确认键才能响应按键消息。

第二步,

设置最大行数,增加滚动条响应。

在xml布局文件中增加如下两行,

android:maxLines="3"

android:scrollbars="vertical"

其中android:maxLines="3"表示最多显示3行数据,android:scrollbars="vertical"滚动条设置为纵向。同时,需要需修改代码,

TextView textView = (TextView)findViewById(R.id.tv_appDesc);

textView.setMovementMethod(ScrollingMovementMethod.getInstance());

此方法的作用是给TextView增加一个滚动的方法对象,可以直接调用ScrollingMovementMethod的静态方法getInstance()生成此对象。

第三步,

设置焦点选中后的效果。

意思就是在焦点落在此控件时,增加一个选中效果,这里根据效果图,自己自定义了一个selector,代码如下所示,

textview_selector.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_focused="true" >

        <shape

            android:shape="rectangle" >

            <stroke

                android:width="2px"

                android:color="#ffffff" />

            <corners android:radius="4px"/>

        </shape>

    </item>

</selector>

焦点选中时是一个白色的矩形框,矩形角的弧度为4px,未选中什么也不显示。

然后在布局中将其设置成背景。

android:background="@drawable/textview_selector"

至此,需求的雏形已经实现。

但有些细节还需要继续调试,比如,默认的滚动条太暗或者随着应用主题而改变,我们想保持不变,那可以设置滚动条的图片。滚动条由两部分可以设置,滚动图片和滚动轨道。

分别对应这两个属性,

android:scrollbarThumbVertical和android:scrollbarTrackVertical

我用到了android:scrollbarThumbVertical属性,重新指定了一个滚动图片,图片是UI提供的一个.9图。如下所示:

android:scrollbarThumbVertical="@drawable/scrollbar"

滚动条设置完毕后,发现滚动条和文字贴的很近,于是进行了一下优化。

滚动条有这样一个属性android:scrollbarStyle,它可以设置4种值,4种可选值有insideOverlay、insideInset、outsideOverlay、outsideInset四种。

四种值分别表示:

insideOverlay:默认值,表示在padding区域内并且覆盖在view上,如下所示,

insideInset:表示在padding区域内并且插入在view后面,如下所示,

outsideOverlay:表示在padding区域外并且覆盖在view上,如下所示,

outsideInset:表示在padding区域外并且插入在view后面,如下所示,

再对比四种效果后,我最终选择了outsideInset方式。xml中进行如下设置,

android:paddingRight="20px"

android:scrollbarStyle="outsideInset"

最后,设置完成后,需求基本实现,但是,发现在从应用介绍上面的控件按向下,或者下面的控件在按向上键时,有时TextView并不能获取到焦点,于是增加了如下代码,

android:nextFocusDown="@+id/recycler_view"

android:nextFocusUp="@id/re_progressbar"

这里的nextFocusDown和nextFocusUp表示当焦点离开这个控件时,并且按的是向下键时就跳转到recycler_view控件,向上时跳转到re_progressbar控件。

并给re_progressbar按钮指定向下的控件,

android:nextFocusDown="@+id/tv_appDesc"

给recycler_view列表指定向上的控件,

android:nextFocusUp="@id/tv_appDesc"

这样上下移动焦点后,逻辑才能正常。

怎么样,还可以吧。

欢迎您扫一扫上面的微信公众号,订阅我的个人公众号!
上一篇下一篇

猜你喜欢

热点阅读