如何实现Label内文本向左滚动？仿新闻频道底部滚动效果

核心思路：让文本保持单行显示，超出容器的部分隐藏，通过循环动画控制文本水平位移，模拟新闻滚动效果。以下是主流平台的具体实现方案：

iOS（Swift）自定义滚动Label #

通过自定义UILabel，配置单行属性并添加循环平移动画：

import UIKit

class MarqueeLabel: UILabel {
    override func awakeFromNib() {
        super.awakeFromNib()
        setupMarquee()
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupMarquee()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupMarquee()
    }
    
    private func setupMarquee() {
        numberOfLines = 1
        lineBreakMode = .byClipping
        clipsToBounds = true
        startMarqueeAnimation()
    }
    
    private func startMarqueeAnimation() {
        guard let text = text, !text.isEmpty else { return }
        
        let labelWidth = bounds.width
        let textWidth = text.size(withAttributes: [.font: font!]).width
        
        guard textWidth > labelWidth else { return }
        
        let animationDistance = textWidth + labelWidth
        UIView.animate(withDuration: 10.0, delay: 0, options: [.repeat, .curveLinear], animations: {
            self.transform = CGAffineTransform(translationX: -animationDistance, y: 0)
        })
    }
}

使用时直接将界面上的Label替换为这个自定义类，设置文本即可自动触发滚动。

Android（Kotlin）实现方案 #

方案1：系统属性快速实现（需焦点） #

在XML中配置TextView，开启跑马灯模式：

<TextView
    android:id="@+id/marqueeText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="你的新闻文本内容"
    android:singleLine="true"
    android:ellipsize="marquee"
    android:marqueeRepeatLimit="marquee_forever"
    android:focusable="true"
    android:focusableInTouchMode="true" />

方案2：自定义无焦点滚动TextView #

如果需要TextView无需焦点也能滚动，自定义View强制开启跑马灯：

import android.content.Context
import android.util.AttributeSet
import android.widget.TextView

class MarqueeTextView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : TextView(context, attrs, defStyleAttr) {
    override fun isFocused(): Boolean {
        return true
    }
    
    override fun onAttachedToWindow() {
        super.onAttachedToWindow()
        isSelected = true
    }
}

XML中使用该自定义View，配合singleLine="true"和ellipsize="marquee"即可生效。

Web前端（HTML+CSS）实现 #

用CSS动画实现纯前端滚动效果，无需JS：

<div class="marquee-box">
    <span class="marquee-content">你的新闻文本内容，这是一段需要滚动的短句</span>
</div>

<style>
.marquee-box {
    width: 300px; /* 容器宽度按需调整 */
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid #eee;
}

.marquee-content {
    display: inline-block;
    animation: scroll-left 12s linear infinite;
}

@keyframes scroll-left {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}
</style>

调整12s参数可以控制滚动速度，数值越小速度越快。

内容的提问来源于stack exchange，提问作者Iagothz