android文字横向滚动的自定义view

Posted 2023-05-18

求实现android文字滚动的自动以view或textview，要求：
文字滚动平滑
从屏幕左边界开始，由右向左滚动
可自定义滚动速度
平滑循环滚动
信息之间间隔可自定义，不能是整个屏幕的宽度
最好是当文字长度不够屏幕宽度时，文字居中不滚动（不做强制要求）
可以参考美团商家上面的滚动信息
直接发类文件到wuning2的163邮箱，谢谢

这还不简单吗？直接加个动画就行了！

现在我做下补充：

package com.qiulong.textscrolldemo;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;


public class CustomScrollText extends View 
//背景画笔
private Paint backPaint;
//背景颜色
private int backColor = Color.GRAY;

//文本画笔
private Paint textPaint;
//字体颜色
private int textColor = Color.BLACK;
//字体大小
private int textSize = 20;
//文字内容
private String textContent = "textView";


//X轴偏移量
private float OffsetX = 0;
//刷新线程
private RefreshRunnable mRefreshRunnable;


public CustomScrollText(Context context) 
super(context);
init();


public CustomScrollText(Context context, AttributeSet attrs) 
super(context, attrs);
init();


public CustomScrollText(Context context, AttributeSet attrs, int defStyle) 
super(context, attrs, defStyle);
init();


/**
 * 初始化画笔
 */
private void init()
backPaint = new Paint();
backPaint.setAntiAlias(true);
backPaint.setColor(backColor);
backPaint.setStyle(Paint.Style.FILL);

textPaint = new Paint();
     textPaint.setAntiAlias(true);
     textPaint.setColor(textColor);
     textPaint.setStyle(Paint.Style.FILL);
     textPaint.setTextSize(textSize);



    @Override
    protected void onAttachedToWindow() 
        super.onAttachedToWindow();
        //启动刷新
        mRefreshRunnable = new RefreshRunnable();
        post(mRefreshRunnable);
    

    @Override
    protected void onDetachedFromWindow() 
        super.onDetachedFromWindow();
        //关闭刷新
        removeCallbacks(mRefreshRunnable);
    


@Override
protected void onDraw(Canvas canvas) 
super.onDraw(canvas);
//绘制背景
canvas.drawRect(0, 0, getWidth(), textSize+10, backPaint);// 长方形
       //绘制文本内容
       canvas.drawText(textContent, OffsetX, textSize, textPaint);



/**
 * 测量控件宽高 
 */
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) 
int width = measure(widthMeasureSpec);
int height = measure(heightMeasureSpec);
setMeasuredDimension(width, height);


private int measure(int measureSpec) 
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
int result = 70;
if (specMode == MeasureSpec.AT_MOST) //最大可获空间
result = specSize;
 else if (specMode == MeasureSpec.EXACTLY) //精确尺寸
result = specSize;

return result;



/**
 * 刷新线程
 * @author qiulong
 *
 */
    private class RefreshRunnable implements Runnable 
        public void run() 
            synchronized (CustomScrollText.this) 
             OffsetX--;
             //获取字体宽度
             float txtWidth = textPaint.measureText(textContent, 0, textContent.length());
             if((0 - OffsetX) >= txtWidth)
             OffsetX = getWidth();
            
                invalidate();
                postDelayed(this, 5);
            
        
    

    
/**
 * 设置文本内容
 * @param value
 */
public void setTextContent(String value)
this.textContent = value;


/**
 * 获取文本内容
 * @return
 */
public String getTextContent()
return textContent;


/**
 * 设置文本颜色
 * @param color
 */
public void setTextColor(int color)
this.textColor = color;
textPaint.setColor(textColor);


/**
 * 获取文本颜色
 * @return
 */
public int getTextColor()
return textColor;


/**
 * 设置文本大小
 * @param size
 */
public void setTextSize(int size)
this.textSize = size;
     textPaint.setTextSize(textSize);


/**
 * 获取文本大小
 * @return
 */
public int getTextSize()
return textSize;


/**
 * 设置背景颜色
 */
public void setBackgroundColor(int color)
this.backColor = color;
backPaint.setColor(backColor);


/**
 * 获取背景颜色
 * @return
 */
public int getBackgroundColor()
return backColor;

下面是MainActivity.class :

package com.qiulong.textscrolldemo;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;

public class MainActivity extends Activity 

private CustomScrollText mtext;

@Override
protected void onCreate(Bundle savedInstanceState) 
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

mtext = (CustomScrollText)findViewById(R.id.mtext);
mtext.setTextContent("你加个我看看，说谁都会说，你怎么不干脆说让他直接滚动起来就好了，回答问题也要有点诚意好不");
mtext.setTextSize(30);
mtext.setTextColor(Color.BLUE);
mtext.setBackgroundColor(Color.GREEN);

 然后至于你说的速度控制方面，也很简单！你可以尝试修改下，我就不一五一十的全帮你写了！另外还有一个你说的信息间距我没搞懂是什么意思！

追问

你这个运行的时候有没有发现总是等着一段话完全滚动出屏幕了，下一条才会开始出来，循环的两条之间有一个屏幕宽度的距离，如何缩小这个距离。我一共找了5个例子了，你这种效果，5个都能实现，关键就是自定义的view必须得等到整条信息都滚动完毕，都不在屏幕上之后，下一条才显示

追答

你的意思是有很多组字符串内容？然后每一组之间的间距可以随意控制？而不是一组完全滚动出屏幕，下一组才出来？是这意思么？

参考技术A TextView实现文字滚动需要以下几个要点： 1.文字长度长于可显示范围：android:singleLine=”true” 2.设置可滚到，或显示样式
TextView实现文字滚动需要以下几个要点：
1.文字长度长于可显示范围：android:singleLine=”true”
2.设置可滚到，或显示样式：android:ellipsize=”marquee”
3.TextView只有在获取焦点后才会滚动显示隐藏文字，因此需要在包中新建一个类，继承TextView。重写isFocused方法，这个方法默认行为是，如果TextView获得焦点，方法返回true，失去焦点则返回false。跑马灯效果估计也是用这个方法判断是否获得焦点，所以把它的返回值始终设置为true。
自定义一个
AlwaysMarqueeTextView 类
public class AlwaysMarqueeTextView extends TextView public AlwaysMarqueeTextView(Context context) super(context); public AlwaysMarqueeTextView(Context context, AttributeSet attrs) super(context, attrs); public AlwaysMarqueeTextView(Context context, AttributeSet attrs, int defStyle) super(context, attrs, defStyle); @Override public boolean isFocused() return true;
在布局XML文件中加入这么一个AlwaysMarqueeTextView，这个加入方法也是刚刚学的。
<com.examples.AlwaysMarqueeTextView android:id=“@+id/AMTV1″ android:layout_width=“fill_parent” android:layout_height=“wrap_content” android:lines=“1″ android:focusable=“true” android:focusableInTouchMode=“true” android:scrollHorizontally=“true” android:marqueeRepeatLimit=“marquee_forever” android:ellipsize=“marquee” android:background=“@android:color/transparent” />
ellipsize属性
设置当文字过长时,该控件该如何显示。有如下值设置：”start”—–省略号显示在开头；”end”——省略号显示在结尾；”middle”—-省略号显示在中间；”marquee” ——以跑马灯的方式显示(动画横向移动)
marqueeRepeatLimit属性
在ellipsize指定marquee的情况下，设置重复滚动的次数，当设置为marquee_forever时表示无限次。
focusable属性
自己猜测的，应该是能否获得焦点，同样focusableInTouchMode应该是滑动时能否获得焦点。
组合View的问题：
< LinearLayout xmlns:android =“http://schemas.android.com/apk/res/android” android:orientation =“vertical” android:gravity =“center_vertical” android:background =“@drawable/f_background” android:layout_width =“fill_parent” android:focusable =“true” android:layout_height =“50px” > < TextView android:id =“@+id/info_text” android:focusable =“true” android:layout_width =“fill_parent” android:layout_height =“wrap_content” android:text =“test marquee .. “ android:textColor =“@color/black” android:singleLine =“true” android:ellipsize =“marquee” android:marqueeRepeatLimit =“3″ android:textSize =“18sp” /> < TextView android:id =“@+id/date_text” android:layout_width =“fill_parent” android:layout_height =“wrap_content” android:layout_gravity =“bottom” android:textColor =“@color/gray” android:text =“2010/05/28″ android:textSize =“12sp” /> </ LinearLayout >
上面示例中2个TextView组合为一个View,由于设置了LinearLayout为focusable而TextView就没法取得焦点了,这样 这个TextView的跑马灯效果就显示不出来,就算你也设置TextView的 参考技术B

textView或者其子类的属性设置为：

android:ellipsize="marquee"
        android:focusableInTouchMode="true"
        android:focusable="true"
        android:singleLine="true"

微信小程序-scroll-view横向滚动和上拉加载

今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方。
先看最终效果。

横向滚动

1.设置滚动项display：inline-block;
2.设置滚动视图容器white-space: nowrap;
3.滚动项不要用float

为什么会有以上三点要求呢？
其实横向滚动官方文档中是没有做太多说明的，只说明需要定义scroll-view滚动方向scroll-x=true允许横向滚动，但是我在实践的时候我发现，你要横向滚动，首先你得是一排吧。所以才发现需要定义滚动项及容器的一些属性，浮动是不能让所有的滚动项一排显示的。

上拉加载

<scroll-view scroll-y="true" bindscrolltolower="pullUpLoad" style="height: 58%;" class="content-wrap">

实现上拉加载，只需要绑定bindscrolltolower 事件处理，当滚动到底部/左边的时候，触发这个处理函数，逻辑上就是去请求下一页的数据，并且视图上显示正在加载的样式，当数据请求成功，将其拼合到之前的数据中，并隐藏正在加载的样式。

//下拉加载
pullUpLoad: function(){
    var that = this;
    console.log("====下拉====")
    if (!that.data.hidden) {
        that.data.params.pageNo += 1;
        that.setData({
            params: that.data.params,
        })
        if(that.data.params.pageNo <= that.data.totalPages){
            that.setData({
                hidden: true,
            })
            that.getShareList();
        }else{
            that.setData({
                hidden: false,
            })
        }
    }
}

如何设置scroll-view满屏滚动

文档中说到：使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。

那么我们想让小程序满屏滚动该如何设置高度呢，直接设置height:100%?好像不是很好用，原因是因为这个高度没有参照物，以前我们是设置body的高度，类似，我们这里发现小程序页面渲染出来的容器是Page，那我们就先设置Page的高度100%，再设置scroll-view高度100%，问题得到解决。

官方推荐的loading效果

onLoad:function(options){
    wx.showToast({
        title: '加载中',
        icon: 'loading',
        duration: 10000//loading时间
    });
    //wx.hideToast();隐藏loading
}