如何利用Android仿微博正文链接交互效果

目录
  • 前言
  • 一、链接的匹配和显示交互
  • 二、链接的点击交互
  • 总结

前言

社区内容经常会有插入链接的需要,这时就产生了对链接的UI和点击交互的需求,我们在微博中也经常会在列表页面和详情页面看到。下边我们就此功能分析一下具体实现。

一、链接的匹配和显示交互

首先我们先分析一下链接的组成部分,可以肯定的是需要一个显示的标题,我们可能会对这个标题在UI表现上做些处理(常见的是一个链接的标志和设置不同的颜色)来提示和吸引用户的注意,另外还需要点击时跳转的链接,这条链接可以是内部也可以是外部(这就属于业务的需求)。关于链接的匹配方式可能会有不同的方案,我们这里选择了使用a标签的匹配方式,也就是接口会把链接的数据以a标签的形式给我们,客户端来进行匹配数据,下边我们简单的举一个例子,接口返回数据如下:

"你说的<a href="https://www.qq.com" rel="external nofollow"  rel="external nofollow" >我是链接</a>11111<a href="https://www.baidu.com" rel="external nofollow"  rel="external nofollow" >我也是链接</a>好开心啊,哈哈哈哈"

接下来我们对数据的处理:

/**
 * 匹配a标签直接插入链接
 */
suspend fun computeLenFilterLink(text: String, mContext: Context): SpannableStringBuilder =
    withContext(Dispatchers.Default) {

        var strings = SpannableStringBuilder(text)
        val pattern = "<a \s*href\s*=\s*(?:.*?)>(.*?)</a\s*>"
        val p = Pattern.compile(pattern)
        val matcher = p.matcher(strings)
        while (matcher.find()) {
            val str = matcher.group()
            val linkTitle = matcher.group(1) ?: ""

            //a标签链接正则匹配
            val patternUrlString =
                "\s*(?i)href\s*=\s*("([^"]*")|'[^']*'|([^'">\s]+))"
            val patternUrl = Pattern.compile(
                patternUrlString,
                Pattern.CASE_INSENSITIVE
            )
            //链接url
            val matcherUrL = patternUrl.matcher(strings)
            var linkUrl = ""
            while (matcherUrL.find()) {
                linkUrl = matcherUrL.group()
                linkUrl = linkUrl.replace("href\s*=\s*(['|"]*)".toRegex(), "")
                linkUrl = linkUrl.replace("['|"]".toRegex(), "")
                linkUrl = linkUrl.trim { it <= ' ' }
                break
            }
            //设置颜色
            val sb = SpannableString("#$linkTitle")
            sb.setSpan(
                ForegroundColorSpan(
                    ContextCompat.getColor(mContext, R.color.link_color)
                ), 0,
                sb.length,
                Spanned.SPAN_INCLUSIVE_INCLUSIVE
            )

            sb.setSpan(
                object : MyLinkClickSpan(mContext) {
                    override fun onSpanClick(widget: View?) {
                        //链接跳转
                        Toast.makeText(mContext, "点击链=$linkUrl", Toast.LENGTH_SHORT).show()

                    }
                },
                0, sb.length, Spanned.SPAN_INCLUSIVE_INCLUSIVE
            )
            val start = strings.indexOf(str)
            strings.delete(start, start + str.length)
            //插入链接
            strings.insert(start, sb)
        }
        return@withContext strings
    }

这里我们是用正则匹配的方式取出链接的标题和跳转链接,然后设置链接的标志和颜色替换原来的a标签插入正文数据中。接下来就是设置显示的数据:

val string = "你说的<a href="https://www.qq.com" rel="external nofollow"  rel="external nofollow" >我是链接</a>11111<a href="https://www.baidu.com" rel="external nofollow"  rel="external nofollow" >我也是链接</a>好开心啊,哈哈哈哈"
lifecycleScope.launch {
    val contentString = LinkCheckHelper.computeLenFilterLink(string,this@MainActivity)
    tvLink.text = contentString
}

二、链接的点击交互

参考微博的交互效果我们会发现当我们触摸链接内容时其背景会由透明变为链接文字的颜色,手指抬起时又置回透明。细心的你肯定发现我们在刚才链接数据的插入时设置了MyLinkClickSpan做了对链接点击的处理,那么背景颜色的改变就要在ClickSpan中的 updateDrawState(ds: TextPaint)方法中进行处理,代码如下:

class MyLinkClickSpan(private val context: Context) :
    ClickableSpan(), IPressedSpan {
    private var isPressed = false
    abstract fun onSpanClick(widget: View?)
    override fun onClick(widget: View) {
        if (ViewCompat.isAttachedToWindow(widget)) {
            onSpanClick(widget)
        }
    }

    override fun setPressed(pressed: Boolean) {
        isPressed = pressed
    }

    override fun updateDrawState(ds: TextPaint) {
        if (isPressed) {
            ds.bgColor = ContextCompat.getColor(context, R.color.link_bg_color)
        } else {
            ds.bgColor = ContextCompat.getColor(context, android.R.color.transparent)
        }
        ds.isUnderlineText = false
    }
}

我们发现背景颜色的变化是需要对手指按下和抬起分别进行处理,所以这时不可避免的我们就要对触摸事件进行处理:

class LinkTextView(context: Context, attrs: AttributeSet?) :
    AppCompatTextView(context, attrs) {
    private var mPressedSpan: IPressedSpan? = null
    init {
        isFocusable = false
        isLongClickable = false
//        有链接点击需求不设置则点击无效
        movementMethod = MyLinkMovementMethod.instance
        highlightColor = Color.TRANSPARENT
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        val text = text
        val spannable = Spannable.Factory.getInstance().newSpannable(text)
        if (event.action == MotionEvent.ACTION_DOWN) {
            //按下时记下clickSpan
            mPressedSpan = getPressedSpan(this, spannable, event)
        }
        return if (mPressedSpan != null) {
            //如果有clickSpan就走MyLinkMovementMethod的onTouchEvent
            MyLinkMovementMethod.instance.onTouchEvent(this, getText() as Spannable, event)
        } else {
            super.onTouchEvent(event)
        }
    }

    private fun getPressedSpan(
        textView: TextView, spannable: Spannable,
        event: MotionEvent
    ): IPressedSpan? {
        var mTouchSpan: IPressedSpan? = null
        var x = event.x.toInt()
        var y = event.y.toInt()
        x -= textView.totalPaddingLeft
        x += textView.scrollX
        y -= textView.totalPaddingTop
        y += textView.scrollY
        val layout = textView.layout
        val line = layout.getLineForVertical(y)
        try {
            var off = layout.getOffsetForHorizontal(line, x.toFloat())
            if (x < layout.getLineLeft(line) || x > layout.getLineRight(line)) {
                // 实际上没点到任何内容
                off = -1
            }
            val linkSpans =
                spannable.getSpans(off, off, IPressedSpan::class.java)
            if (!linkSpans.isNullOrEmpty()) {
                mTouchSpan = linkSpans[0]
            }
            return mTouchSpan
        } catch (e: IndexOutOfBoundsException) {
            Log.d(this.toString(), "getPressedSpan", e)
        }
        return null
    }
}
class MyLinkMovementMethod : LinkMovementMethod() {
    override fun onTouchEvent(widget: TextView, buffer: Spannable, event: MotionEvent): Boolean {
        return (sHelper.onTouchEvent(widget, buffer, event))
    }

    companion object {
        val instance: MyLinkMovementMethod
            get() {
                if (sInstance == null) {
                    sInstance = MyLinkMovementMethod()
                }
                return sInstance as MyLinkMovementMethod
            }
        private var sInstance: MyLinkMovementMethod? = null
        private val sHelper = SpanClickHelper()
    }
}
class SpanClickHelper {
    private var mPressedSpan: IPressedSpan? = null

    fun onTouchEvent(
        textView: TextView,
        spannable: Spannable,
        event: MotionEvent
    ): Boolean {
        return when (event.action) {
            MotionEvent.ACTION_DOWN -> {
                mPressedSpan = getPressedSpan(textView, spannable, event)
                if (mPressedSpan != null) {
                    //手指按下 设置按下为true,修改对应的链接文字背景颜色
                    mPressedSpan!!.setPressed(true)
                    //设置选中区域
                    Selection.setSelection(
                        spannable, spannable.getSpanStart(mPressedSpan),
                        spannable.getSpanEnd(mPressedSpan)
                    )
                }

                mPressedSpan != null
            }
            MotionEvent.ACTION_MOVE -> {
                val touchedSpan = getPressedSpan(textView, spannable, event)
                if (mPressedSpan != null && touchedSpan != mPressedSpan) {
                    //手指移动时 设置按下为false,对应的链接文字背景颜色置回透明
                    mPressedSpan!!.setPressed(false)
                    mPressedSpan = null
                    //移除选中区域
                    Selection.removeSelection(spannable)
                }
                mPressedSpan != null
            }
            MotionEvent.ACTION_UP -> {
                var touchSpanHint = false
                if (mPressedSpan != null) {
                    touchSpanHint = true
                    //手指抬起时 设置按下为false,对应的链接文字背景颜色置回透明
                    mPressedSpan!!.setPressed(false)
                    //传递点击事件回调
                    mPressedSpan!!.onClick(textView)
                }
                mPressedSpan = null
                Selection.removeSelection(spannable)
                touchSpanHint
            }
            else -> {
                if (mPressedSpan != null) {
                    //其它收拾 都设置按下为false,对应的链接文字背景颜色置回透明
                    mPressedSpan!!.setPressed(false)
                }
                //移除选中区域
                Selection.removeSelection(spannable)
                false
            }
        }
    }

    /**
     * 判断手指是否点击在链接上
     */
    private fun getPressedSpan(
        textView: TextView,
        spannable: Spannable,
        event: MotionEvent
    ): IPressedSpan? {
        var x = event.x.toInt()
        var y = event.y.toInt()
        x -= textView.totalPaddingLeft
        y -= textView.totalPaddingTop
        x += textView.scrollX
        y += textView.scrollY
        val layout = textView.layout
        val line = layout.getLineForVertical(y)

        try {
            var off = layout.getOffsetForHorizontal(line, x.toFloat())
            if (x < layout.getLineLeft(line) || x > layout.getLineRight(line)) {
                // 实际上没点到任何内容
                off = -1
            }
            val link = spannable.getSpans(
                off, off,
                IPressedSpan::class.java
            )
            var touchedSpan: IPressedSpan? = null
            if (link.isNotEmpty()) {
                touchedSpan = link[0]
            }
            return touchedSpan
        } catch (e: IndexOutOfBoundsException) {
            Log.d(this.toString(), "getPressedSpan", e)

        }
        return null
    }
}

代码比较简单,就是对点击区域判断是否为链接,然后根据手势的操作分别设置给ClickSpan是否按下,来改变链接的背景颜色。

另外需要注意一点的是必须要调用下边的代码:

movementMethod = MyLinkMovementMethod.instance

此方法设置链接的点击。 另外,不同的机型上系统会有一个链接的高亮颜色,我们需要调用

highlightColor = Color.TRANSPARENT

来取消掉。

这样,链接的显示和点击交互就完成了。 具体效果:

点击获取源码

总结

到此这篇关于如何利用Android仿微博正文链接交互效果的文章就介绍到这了,更多相关Android微博正文链接内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Android新浪微博下拉刷新(最新消息显示在最上面)

    查看最新消息要用到类似新浪微博下拉刷新 功能!把最新的消息显示在最上面! 代码如下: PullToRefreshListView类代码 复制代码 代码如下: package com.markupartist.android.widget; import java.util.Date; import com.markupartist.android.example.pulltorefresh.R; import android.content.Context; import android.uti

  • Android实现新浪微博一键分享的实例代码

    写在本章前 愈来愈多的APP支持一键分享至QQ空间.微信朋友圈.新浪微博的功能,同时支持第三方账号登录,如QQ.微信.新浪微博等第三方平台的账号.本章结合当下流行的设计,兼顾免费的开源ShareSDK,结合项目中的实际需求,整合出一套分享源码,版权所有,如需转载请注明转载地址. 1. 开发环境及SDK下载 开发工具:Android studio2.1.3版本 ShareSDK:Mob官网(www.mob.com)下载最新社会化分享ShareSDK2.7.7版本,解压如图示 进入ShareSDK

  • Android仿微博加载长图滚动查看效果

    本文实例为大家分享了Android加载长图片的具体代码,供大家参考,具体内容如下 解决步骤 1.将图片缩放到与控件等宽 2.判断缩放后的图片高度,如果高度大于控件高度较多(这里设置的是1.5倍),认定为长图,可滑动查看图片                      |-如果高度小于控件高度的1.5倍,以控件高度为基准,重新缩放图片 package org.wandcf_ces.fairproject.widgets; import android.annotation.TargetApi; im

  • Android APP集成新浪微博分享功能

    本文为大家分享了新浪微博分享功能集成,供大家参考,具体内容如下 下载新浪微博Android SDK 直接导入weibosdkcore.jar:适用于只需要授权.分享.网络请求框架功能的项目. 无论使用哪一种方式,都需要先将demo中lib目录下的对应的全部 libweibosdkcore.so文件目录拷贝到你的目标工程中Demo.在app–>src–>main中新建文件夹jniLibs,将demo 中lib目录下的对应的全部 libweibosdkcore.so文件目录拷贝到其中,不要改变任何

  • Android 仿微博的点赞功能的实现原理(持续点赞再取消)

    产品需求,实现类似微博的持续点赞再取消功能,因为自己也偶尔刷微博,对这功能有一定的使用上的了解, 至于微博点赞的具体实现我并不知道,微博点赞在断网的情况下依然能点赞,不会提示网络异常,等有网络之后 重新刷新,实际是没有点赞的,那就针对这现象去实现吧. 避免并发,减少CPU压力,我个人会想到 HandlerThread ,不懂可以自行科普,这里只说我实现的点赞功能原理. private Timer mTimer;//定时器 private TimerTask mTask; mMap = new H

  • 如何利用Android仿微博正文链接交互效果

    目录 前言 一.链接的匹配和显示交互 二.链接的点击交互 总结 前言 社区内容经常会有插入链接的需要,这时就产生了对链接的UI和点击交互的需求,我们在微博中也经常会在列表页面和详情页面看到.下边我们就此功能分析一下具体实现. 一.链接的匹配和显示交互 首先我们先分析一下链接的组成部分,可以肯定的是需要一个显示的标题,我们可能会对这个标题在UI表现上做些处理(常见的是一个链接的标志和设置不同的颜色)来提示和吸引用户的注意,另外还需要点击时跳转的链接,这条链接可以是内部也可以是外部(这就属于业务的需

  • Android仿微博个人详情页滚动到顶部的实例代码

    个人详情页滑动到顶部 最近产品提了个新需求,需要实现点击App内的某个按钮跳转到个人详情页并且滑动到顶部,个人详情页的页面交互稍微复杂,技术角度上包含了状态栏颜色变换,view滑动联动等问题,技术实现上采用了Google出的CoordinatorLayout那套组件,由于App的个人详情页跟微博的相似,这里就拿微博为例来描述.微博默认的效果以及手动滑动到顶部的效果图如下. 个人详情页技术实现分析: 先看看xml布局的伪代码: <?xml version="1.0" encodin

  • Android仿微博首页Tab加号弹窗功能

    本文实例为大家分享了Android微博首页Tab加号弹窗展示的具体代码,供大家参考,具体内容如下 Activity部分的代码 package com.ting.tab; import android.os.Bundle; import android.view.MotionEvent; import android.view.View; import android.view.ViewGroup; import android.view.animation.Animation; import a

  • Android实现微博菜单弹出效果

    先上Android仿微博菜单弹出效果图,这个截图不是很流畅,大家可以下载apk试一下. 说一下实现思路: 1.截取当前窗口,对图片做高斯模糊处理,将处理后的图片做popupwindow的背景图片: 2.创建popupwindow,完成布局,这儿要注意:View的移动范围是由parent的大小决定的,就是只能在parent的范围内移动: 3.给买个View添加进入动画,每个比前一个延期50ms播放动画,关闭窗口时相反: 4.为View的动画添加回弹插值器: MoreWindow.java窗口 pa

  • Android 仿微信底部渐变Tab效果

    先来看一下效果图 除了第三个的发现Tab有所差别外,其他的基本还原了微信的底部Tab渐变效果 每个Tab都是一个自定义View,根据ImageView的tint属性来实现颜色渐变效果,tint属性的使用可以看我的上一篇文章 我将自定义View命名为ShadeView,包含四个自定义属性 意思分别为图标.背景色.底部文本.底部文本大小 <declare-styleable name="ShadeView"> <attr name="icon" for

  • Android仿qq消息拖拽效果

    本文实例为大家分享了Android仿qq消息拖拽效果展示的具体代码,供大家参考,具体内容如下 这是一个仿qq消息拖拽效果,View和拖拽实现了分离,TextView.Button.Imageview等都可以实现相应的拖拽效果:在触发的地方调用 MessageBubbleView.attach(findViewById(R.id.text_view), new MessageBubbleView.BubbleDisappearListener() { @Override public void d

  • Android仿新版微信浮窗效果

    阅读公众号或其他文章,经常需要暂时退出文章. 在新版微信中,可以把浏览的文章缩小为浮窗.点击浮窗继续阅读.对于经常在微信里阅读的人来说,这简直就是人类之光. 微信效果如下 微信效果 对于这功能我进行了仿写. 效果如下 仿写效果 微信的大佬一定用了了不起的技术,我这里只是实现效果. 简单写了一个库,一句代码即可实现效果 github.com/SherlockQi/- //在AppDelegate中将类名传入即可 [HKFloatManager addFloatVcs:@[@"HKSecondVie

  • Android仿qq顶部消息栏效果

    android仿照qq的顶部栏效果,主要就是利用fragment manager把fragment设置显示内容 (1)在activity_main.xml布局中添加控件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="

  • Android仿斗鱼直播的弹幕效果

    记得之前有位朋友在我的公众号里问过我,像直播的那种弹幕功能该如何实现?如今直播行业确实是非常火爆啊,大大小小的公司都要涉足一下直播的领域,用斗鱼的话来讲,现在就是千播之战.而弹幕则无疑是直播功能当中最为重要的一个功能之一,那么今天,我就带着大家一起来实现一个简单的Android端弹幕效果. 分析 首先我们来看一下斗鱼上的弹幕效果,如下图所示: 这是一个Dota2游戏直播的界面,我们可以看到,在游戏界面的上方有很多的弹幕,看直播的观众们就是在这里进行讨论的. 那么这样的一个界面该如何实现呢?其实并

随机推荐