Android新手开发之旅-实现跑马灯效果

liu

Android新手开发之旅目录




要实现跑马灯效果只需要在TextView中添加如下代码即可

[XML] 纯文本查看 复制代码

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

例如：

[XML] 纯文本查看 复制代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:ellipsize="marquee"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:singleLine="true"
        android:text="跑马灯效果啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊" />
</LinearLayout>

效果图：

               


如果同时放入两个这样的TextView，则第二个TextView不会有跑马灯效果，因为获取不了焦点，想要实现跑马灯效果我们可以自定义view来实现，使两个TextView都能获取焦点

[Java] 纯文本查看 复制代码

import android.content.Context;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.widget.TextView;

/**
 * Created by Administrator on 2019/1/16.
 */

public class MarqueeTextView extends TextView {
    public MarqueeTextView(Context context) {
        super(context);
    }

    public MarqueeTextView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public MarqueeTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public boolean isFocused() {
        return true;
    }
}

然后在activity_main.xml中使用自定义的view

[XML] 纯文本查看 复制代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <com.company.test.MarqueeTextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:ellipsize="marquee"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:singleLine="true"
        android:text="跑马灯效果啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊" />

    <com.company.test.MarqueeTextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:ellipsize="marquee"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:singleLine="true"
        android:text="跑马灯效果啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊" />
</LinearLayout>

效果图：


            



实现垂直方向的跑马灯效果

[XML] 纯文本查看 复制代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <ViewFlipper
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:autoStart="true"
        android:inAnimation="@anim/trans_in"
        android:outAnimation="@anim/trans_out"
        android:background="@android:color/black"
        android:flipInterval="2000">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="1111"
            android:textColor="@android:color/white"
            android:textSize="18sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="2222"
            android:textColor="@android:color/white"
            android:textSize="18sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="3333"
            android:textColor="@android:color/white"
            android:textSize="18sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="4444"
            android:textColor="@android:color/white"
            android:textSize="18sp" />
    </ViewFlipper>
</LinearLayout>

trans_in.xml:

[XML] 纯文本查看 复制代码

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="1000"
        android:fromYDelta="100%p"
        android:toYDelta="0" />
</set>

trans_out.xml:

[XML] 纯文本查看 复制代码

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="1000"
        android:fromYDelta="0"
        android:toYDelta="-100%p" />
</set>

效果图：

            

Amy

强烈支持楼主ing……

范范

我只是路过打酱油的。

竹林风

我只是路过打酱油的。