垂直换行滚动广告

上个月，公司有个项目需要做垂直换行实现播放广告（又称滚动式广告）。我的第一反应是，Android原生的TextView控件只支持水平移动，或者外面嵌套一层ScrollView实现垂直方向的渐进式移动。那么，要实现垂直换行得需要自定义控件了。后来在GitHub上找到一个类似项目，GitHub上面有很多开源项目（即AOSP），建议大家常去GitHub浏览。感谢孙福生这位作者提供思路：自定义一个控件MarqueeView实现动画切入切出的垂直换行，可设置动画时间、换行时间价间隔，控制广告的播放与暂停，动态配置广告。可是，后来发现切换Activity，有时会发生文字重叠混乱的情况；有些机型在屏幕关闭重新唤醒后无法继续播放；广告有数字、英文等字符时无法准确换行。下面具体来描述实现过程约解决思路：

不同机型的像素不同，所以需要把手机屏幕像素转成实际字体大小：

    // 将px值转换为sp值，保证文字大小不变
    public static int px2sp(Context context, float pxValue) {
        final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
        return (int) (pxValue / fontScale + 0.5f);
    }

自定义动画属性：

    <declare-styleable name="MarqueeViewStyle">
        <attr name="mvInterval" format="integer|reference"/>
        <attr name="mvAnimDuration" format="integer|reference"/>
        <attr name="mvTextSize" format="dimension|reference"/>
        <attr name="mvTextColor" format="color|reference"/>
        <attr name="mvSingleLine" format="boolean"/>
        <attr name="mvGravity">
            <enum name="left" value="0"/>
            <enum name="center" value="1"/>
            <enum name="right" value="2"/>
        </attr>
    </declare-styleable>

xml布局引用自定义控件：

    <com.frank.marquee.view.MarqueeView
    android:id="@+id/marquee_view"
    android:layout_width="match_parent"
    android:layout_height="30dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    MarqueeViewStyle:mvAnimDuration="1000"
    MarqueeViewStyle:mvInterval="3000"
    MarqueeViewStyle:mvTextColor="#555555"
    MarqueeViewStyle:mvTextSize="16sp"
    MarqueeViewStyle:mvSingleLine="true"/>

值得注意的是，需要在父布局指定引用动画资源：

xmlns:MarqueeViewStyle="http://schemas.android.com/apk/res-auto"

测量手机屏幕宽度以及每行所能容纳的字数、广告行数。经过反复测试，可精确测出包含中文、英文、数字等字符，实现准确换行（感谢陈卓同事提供的改良算法）：

  private void startWithFixedWidth(String notice,int width) {
        char[] text = notice.toCharArray();
        TextPaint paint = new TextPaint();
        paint.setTextSize(realTextSize);
        if (width == 0) {
            throw new RuntimeException("Please set MarqueeView width !");
        }
        StringBuilder builder = new StringBuilder();
        for (int j = 0; j < text.length; j++) {
            builder.append(text[j]);
            float textWidth = paint.measureText(builder.toString());
            if (width < textWidth) {
                builder.deleteCharAt(builder.length() - 1);
                notices.add(builder.toString());
                builder.delete(0,builder.length());
                notice = notice.substring(j);
                text = notice.toCharArray();
                j = -1;
            }
        }
        if (builder.length() > 0)
            notices.add(builder.toString());
    }

在Activity引用MarqueeView实现垂直换行：

        marqueeView.startWithText(notice2);//启动marqueeView的自动换行播放
        
        List<String> mMarqueeList = new ArrayList<String>();
        mMarqueeList.add(notice1);
        mMarqueeList.add(notice2);
        marqueeView.startWithList(mMarqueeList);//播放list集合，一条一条循环播放

Activity切换时，可能会发生文字重叠混乱的情况。原因是，广告换行有个时间间隔，切换Activity时并没有暂停广告的播放。如果切换Activity的时间差与换行的时间间隔相等，那么就会看到上一行与下一行文字重叠。根据Activity的生命周期，可以在onPause方法里调用自定义控件提供的stopFlipping，当再次切回广告所在的Activity，执行onResume时调用startFlipping方法重新播放广告。这样就可以解决文字重叠显示的问题。

  protected void onResume() {
    	// TODO Auto-generated method stub
    	super.onResume();
    	marqueeView.startFlipping();//从其他activity回到当前activity，重新启动播放
    	Log.d("MarqueeState", "onResume");
    }
    
    @Override
    protected void onPause() {
    	// TODO Auto-generated method stub
    	super.onPause();
    	marqueeView.stopFlipping();//从当前activity跳转到其他activity，停止播放
    	Log.d("MarqueeState", "onPause");
    }

至于有些机型在关闭屏幕再次唤醒后，无法继续播放广告的情况，是因为手机制造商修改FrameWork层的类ViewFlipper。我们重新该类就可以解决。

实现效果如下：

这是我在工作项目中遇到问题的总结，发现自定义控件是灵活多变的，可根据具体需求来实现。希望能帮助到其他有此需求的开发者，如有问题希望大家指出。最后附上实现源码。点击打开链接