TextView带有ImageView的滚动字幕

3
我需要在文本视图和图像视图上实现跑马灯效果,如图所示。当单击文本视图或ImageView时,它应该打开一个活动。有人能建议一种方法吗?
ImageView 应该是可点击的。
3个回答

3

我使用CountDownTimer在HorizontalView中实现了图像视图上的跑马灯,类似于你在问题中描述的方式。

对于你的问题,你需要将texviewImagview放置在HorizontalView的一个布局内,并在HorizontalView上应用跑马灯效果。

请查看代码#

    public class MyCounter extends CountDownTimer {

    public MyCounter(long millisInFuture, long countDownInterval) {
        super(millisInFuture, countDownInterval);
    }

    @Override
    public void onFinish() {
        if (leftToRight == true) {

            MCObject.cancel();
            //if (gallery.getScrollX() > (((imgv.length - 1) * multiplyValue)+addValue)) {

            if (gallery.getScrollX() > ((imgv.length - 1) * multiplyValue)+addValue) {
                count=((imgv.length - 1) *imageHeightWidth);
                leftToRight = false;
                MCObject.start();
            }

            if (count != gallery.getScrollX()) {
                gallery.scrollBy(1, 0);

                count++;
                MCObject.start();
            } else {
                count=((imgv.length - 1) * imageHeightWidth);
                leftToRight = false;
                MCObject.start();
            }
        } else {
            MCObject.cancel();
            if (gallery.getScrollX() <= 0) {
                count = -20;
                leftToRight = true;
                MCObject = new MyCounter(50, 1);
                MCObject.start();
            }

            if (count != 0) {
                gallery.scrollBy(-1, 0);

                // Log.d("test", ""+hsv.getScrollX());
                count--;
                MCObject.start();
            } else {

                count = -20;
                leftToRight = true;
                MCObject = new MyCounter(50, 1);
                MCObject.start();

            }
        }
    }

    @Override
    public void onTick(long millisUntilFinished) {

    }

}

它将从左到右滚动直到长度,然后从右到左反向滚动,形成双边滚动。

在运行时,我会在xml中声明的Horizontalview布局中添加图像,请检查此函数以在运行时添加图像。

public void LLImageView() {
    imgv = new ImageView[25];
    for (int j = 0; j < 25; j++) {
        imgv[j] = new ImageView(this);

        img = new ImageView(MainScreenAnim.this);
        para = new LinearLayout.LayoutParams(imageHeightWidth,imageHeightWidth);

        para.leftMargin = 10;
        para.topMargin = 5;
        imgv[j].setOnClickListener(MainScreenAnim.this);
        imgv[j].setBackgroundResource(Imgid[j]);

        layoutHorizontal.addView(imgv[j], para);

        images.add(Imgid[j].toString());

        System.out.println("string arraylist@@@@@@@" + images.get(j));
    }

}

在OnCreate中:

MCObject = new MyCounter(50, 1);
    MCObject.start();

我有一定数量的图片需要展示。要处理点击事件,请查看下面的代码片段。

    public void onClick(View v) {
    for (int j = 0; j < 25; j++) {
        if (v == imgv[j]) {

            //do something
        }
    }

}

1

创建自定义视图

public class MarqueeLayout extends ViewGroup {

private static final int VERTICAL_SPACING = 10;
private static final int HORIZONTAL_SPACING = 10;
private static final String TAG = MarqueeLayout.class.getName();
private int line_width;
private List<View> views; 
private Timer timer;

private int scrollX = 0;

public MarqueeLayout(Context context)
{
    super(context);
}
private Handler handler;
private int index = 0;
private int childCount;
public MarqueeLayout(Context context, AttributeSet attrs)
{
    super(context, attrs);
    handler = new Handler();
    timer = new Timer();
    timer.schedule(new TimerTask() {
        @Override
        public void run() {
            handler.post(new Runnable() {
                @Override
                public void run() {
                    requestLayout();
                }
            });
        }
    }, 1000, 200);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
    assert (MeasureSpec.getMode(widthMeasureSpec) != MeasureSpec.UNSPECIFIED);
    if(views == null) {
        views = new ArrayList<View>();
        childCount = getChildCount();
        for(int i = 0; i < childCount; i++) {
            views.add(getChildAt(i));
        }

    }
    final int width = MeasureSpec.getSize(widthMeasureSpec) - getPaddingLeft() - getPaddingRight();
    int height = MeasureSpec.getSize(heightMeasureSpec) - getPaddingTop() - getPaddingBottom();
    final int count = getChildCount();
    int line_height = 0;

    int xpos = getPaddingLeft();
    int ypos = getPaddingTop();

    int childHeightMeasureSpec;
    if (MeasureSpec.getMode(heightMeasureSpec) == MeasureSpec.AT_MOST)
    {
        childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.AT_MOST);
    }
    else
    {
        childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
    }

    for (int i = 0; i < count; i++)
    {
        final View child = getChildAt(i);
        if (child.getVisibility() != GONE)
        {
            child.measure(MeasureSpec.makeMeasureSpec(width, MeasureSpec.AT_MOST), childHeightMeasureSpec);
            final int childw = child.getMeasuredWidth();
            line_height = Math.max(line_height, child.getMeasuredHeight() + VERTICAL_SPACING);

            xpos += childw + HORIZONTAL_SPACING;
        }
    }
    this.line_width = xpos;

    setMeasuredDimension(width, height);
}

@Override
protected ViewGroup.LayoutParams generateDefaultLayoutParams()
{
    return new LayoutParams(1, 1); 
}

@Override
protected boolean checkLayoutParams(ViewGroup.LayoutParams p)
{
    if (p instanceof LayoutParams)
    {
        return true;
    }
    return false;
}

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b)
{
    Log.d(TAG, "onLayout called");
    int count = getChildCount();
    final int width = r - l;

    scrollX -= 20;
    if(line_width + scrollX < 0) {
        scrollX = 0;
    }
    int i = 0;
    while(count > 0) {
        View c = getChildAt(i);
        if(c == null) {
            break;
        }
        int w = c.getMeasuredWidth();
        Log.d(TAG, "scrollX : " + scrollX + " width : " + w);
        if(scrollX < -w) {
            this.removeViewAt(0);
            scrollX += w;
        } else {
            break;
        }
        i++;
        count--;
    }
    count = getChildCount();
    int xpos = getPaddingLeft() + scrollX;
    int ypos = getPaddingTop();
    for (i = 0; i < count; i++)
    {
        final View child = getChildAt(i);
        if (child.getVisibility() != GONE)
        {
            final int childw = child.getMeasuredWidth();
            final int childh = child.getMeasuredHeight();
            child.layout(xpos, ypos, xpos + childw, ypos + childh);
            xpos += childw + HORIZONTAL_SPACING;
        }
    }
    while(xpos < getWidth()) {
        View v = views.get(index % childCount);
        addView(v);
        xpos += v.getMeasuredWidth();
        index++;
    }
}} 

你可以在这个布局中放置任何类型的视图,你可以在XML中调用这个布局

<Your.Package.name.MarqueeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="this is textview 1"
        tools:context=".MainActivity" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="clicked"
        android:text="Click me 1" />

</Your.Package.name.MarqueeLayout>

1
  • 我使用了带有android:ellipsize="marquee"的TextView。它运行良好,但其中一个缺点是当跑马灯持续运行时,堆大小会在10到20分钟后增加,然后应用程序崩溃。因此,我使用了RecycleView选项。它运作得非常好,不会增加堆大小。

  • 通过使用RecycleView,可以设置文本以及图像。我浪费了两天的时间,最后找到了正确的解决方案RecycleView。请按照以下步骤进行操作。

步骤1:在您的片段或活动布局中使用RecycleView

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginTop="10dp"
    android:orientation="vertical">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/marqueList"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:clipToPadding="false" />

 </LinearLayout>

第二步:为recycleView创建适配器布局,命名为marque_adapter.xml。
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="2dp"
    android:layout_marginTop="2dp"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="15dp"
        android:layout_gravity="center_vertical"
        android:src="@mipmap/arrow_up"/>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:textSize="18sp"
        android:text="One"
        />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="15dp"
        android:layout_gravity="center_vertical"
        android:src="@mipmap/arrow_down"
        />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:textSize="18sp"
        android:text="Two"
       />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="15dp"
        android:layout_gravity="center_vertical"
        android:src="@mipmap/arrow_up"/>

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:textSize="18sp"
        android:text="Three"
        />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="wrap_content"
        android:layout_height="15dp"
        android:layout_gravity="center_vertical"
        android:src="@mipmap/arrow_down"/>

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:textSize="18sp"
        android:text="Four"
     />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical" />

</LinearLayout>

步骤3:为recycleView制作适配器,其名称为MarqueAdapter.java

public class MarqueAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

public class ViewHolderItem extends RecyclerView.ViewHolder {
    public ViewHolderItem(View view) {
        super(view);
 }
}

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    RecyclerView.ViewHolder viewHolder = null;

    View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.marque_adapter, parent, false);
    viewHolder = new ViewHolderItem(view);

    return viewHolder;
}

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
}

@Override
public int getItemCount() {
    // You can make count infinite time
    return 1000;
}}

步骤4:最后,在您定义recycleView的片段或活动中执行此操作。
  private final Handler mHandler = new Handler(Looper.getMainLooper());
  private final Runnable SCROLLING_RUNNABLE = new Runnable() {
    @Override
    public void run() {
        final int duration = 20;
        final int pixelsToMove = 20;
        mRecycleMarqueList.smoothScrollBy(pixelsToMove, 0);
        mHandler.postDelayed(this, duration);
    }
};

RecyclerView mRecycleMarqueList = (RecyclerView) view.findViewById(marqueList);
    LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity());
    layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
    mRecycleMarqueList.setLayoutManager(layoutManager);
    MarqueAdapter mMarqueAdapter = new MarqueAdapter();
    mRecycleMarqueList.setAdapter(mMarqueAdapter);
    mHandler.post(SCROLLING_RUNNABLE);

最终它看起来像下面的屏幕截图。

enter image description here

enter image description here


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接