UI--单行文本水平触摸滑动效果

爱被打了一巴掌 2022-08-19 12:13 124阅读 0赞

### 1.初衷 ###

最近做应用的时候有用到TextView单行长文本，当文本内容过长时候又想实现触摸水平滑动效果。网上找了很多，都没有看到有效解决方案。   
　　其中，看到最常见的也是最笨拙滴采用重写TextView并继承实现touch 和 Gesture手势。个人觉得很麻烦。

##### 　　后来经提醒发现了其实最简单的方案： #####

直接使用 EditText 就好了。 因为EditText需要编辑和移动光标的缘故，使得它是可以水平滑动的。因此我们只需要设置其为透明背景，并且不可以获得焦点。

效果图：   
![单行文本水平滑动][20150507215849181]

### 2.具体实现 ###

定义EditText，并设置背景透明，不能获得焦点。

> android:background=”@android:color/transparent”   
> android:focusable=”false”

（注：不能使用 editable=“false”，因为这样就不能编辑滑动。而通过使用 focusable=”false” 同样不可编辑同时可以滑动）

### 3.补充 ###

补充一点，要隐藏光标，只用设置

> android:cursorVisible=”false”//隐藏

或

> setCursorVisible(false);

#### 代码示例 ####

<code class="language-java hljs  has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><EditText
            android:id=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/tt"</span>
            android:layout_width=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"0dip"</span>
            android:layout_height=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"wrap_content"</span>
            android:layout_weight=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"1"</span>
            android:layout_margin=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"15dip"</span>
            android:background=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@android:color/transparent"</span>
            android:focusable=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"false"</span>
            android:singleLine=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"true"</span>
            android:cursorVisible=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"false"</span>
            android:text=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"简易实现 TextView单行文本水平触摸滑动效果。简易实现 TextView单行文本水平触摸滑动效果。简易实现 TextView单行文本水平触摸滑动效果"</span>
            android:textColor=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#000"</span>
            android:textSize=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"20dip"</span> /></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li></ul>

附上下载地址：   
[示例源码下载地址][Link 1]

[20150507215849181]: /images/20220731/2102f3001e9f4b5993b6a164abd7e8f1.png
[Link 1]: http://download.csdn.net/detail/u011254308/8667625

发表评论取消回复

表情：

评论列表（有 0 条评论，124人围观）

还没有评论，来说两句吧...

相关阅读

相关单行文本溢出隐藏

text-content \{ background:yellow; /\* 指定宽度超出这个宽度就显示省略号 begin */ width:100px; ...

小灰灰/ 2024年04月18日 21:27/ 0 赞/ 51 阅读

相关单行文本垂直居中

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</titl

逃离我推掉我的手/ 2023年02月16日 06:03/ 0 赞/ 11 阅读

相关 html 单行文本(input text)

`<input>` 元素的text 类型创建基础的单行文本框. <table> <thead> <tr> <th>属性</th> <th>描述</t

朱雀/ 2022年10月27日 01:40/ 0 赞/ 4 阅读

相关 CSS 实现文本的单行和多行溢出省略效果

![6044920c21cf4ec5c06d8ec987393a55.png][] 单行文本 .text { overflow: hidden;

迷南。/ 2022年09月07日 14:43/ 0 赞/ 160 阅读

相关 UI--单行文本水平触摸滑动效果

1.初衷　　最近做应用的时候有用到TextView单行长文本，当文本内容过长时候又想实现触摸水平滑动效果。网上找了很多，都没有看到有效解决方案。　　其中，看到最

爱被打了一巴掌/ 2022年08月19日 12:13/ 0 赞/ 125 阅读

相关 swiper实现触摸滑动

引入需要的文件 <link href="css/swiper.min.css" rel="stylesheet" type="text/css"

骑猪看日落/ 2022年08月05日 02:43/ 0 赞/ 270 阅读

相关水平滑动的图片浏览器

以下是较为简单的水平滑动的图片浏览器，主要用CSS来实现的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional

水深无声/ 2022年07月16日 14:14/ 0 赞/ 160 阅读

相关 LayaAir UI 组件 # HSlider,VSlider(水平/垂直滑动条)

目录 HSlider 组件默认资源 VSlider 组件自定义资源 -------------------- HSlider 组件 <table> <

我不是女神ヾ/ 2022年04月10日 06:59/ 0 赞/ 327 阅读

相关单行文本省略号设置方法

一、单行文本省略号设置必须满足以下四个条件，缺一不可： 1.固定的宽度 width : value; 2.强制在一行显示 white-space:nowrap; 3

野性酷女/ 2022年04月01日 12:46/ 0 赞/ 437 阅读

相关移动端web轮播图，包括触摸左右滑动切换效果

移动端web轮播图，包括触摸左右滑动切换效果 <!DOCTYPE html> <html lang="en"> <head> <met

不念不忘少年蓝@/ 2021年10月29日 11:28/ 0 赞/ 330 阅读