Android开发之——跑马灯效果

前言

在看商城类的项目时，如淘宝头条，京东头条，经常会看到跑马灯效果，上下轮播显示热门商品！

跑马灯效果

实现跑马灯效果，我们可以借助于第三方和自己实现两种方式，下面我们将介绍一下：

借助于第三方提供

MarqueeView

• 项目地址：
  MarqueeView
• 使用方式：
  

XMarqueeView

• 项目地址：
  XMarqueeView
• 使用方式
  

自己实现

本文的跑马灯是借助于ViewFlipper实现的

ViewFlipper

将两个或更多的子view添加到它上面，每次只显示一个子view，按照周期依次显示子view(个人翻译)原文请参考：

自定义view

class NewsFlipperView @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : FrameLayout(context, attrs, defStyleAttr) {
private val mFlipperView: ViewFlipper

init 
{
    val rootView = View.inflate(context, R.layout.layout_news_flipper, null)
    mFlipperView = rootView.find(R.id.mFlipperView)
    mFlipperView.setInAnimation(context, R.anim.news_bottom_in)
    mFlipperView.setOutAnimation(context, R.anim.news_bottom_out)
    addView(rootView)
}


/*
    构建公告
 */
private fun buildNewsView(text: String): View 
{
    val textView = TextView(context)
    textView.text = text
    textView.textSize = px2sp(dimen(R.dimen.text_small_size))
    textView.layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)
    return textView
}

	/*
   	 设置公告数据
 	*/
	fun setData(data: Array<String>) 
	{
    	for (text in data) 
		{
      		var view=  buildNewsView(text)
        	mFlipperView.addView(view)
       		view.setOnClickListener({ _ ->
           	mOnItemClickListener!!.onItemClick( text)
            	})

    	}
    	mFlipperView.startFlipping()
	}
	private var mOnItemClickListener: OnItemClickListener<String>? = null
	interface OnItemClickListener<in String> 
	{
    	fun onItemClick(data: String)
	}

	fun <T> setOnItemClickListener(listener: OnItemClickListener<String>) 
	{
    	mOnItemClickListener = listener
	}
}

使用自定义view

	mNewsFlipperView.setData(arrayOf("小米MIX2发布","抢眼Couple装，点亮情人节"))
    mNewsFlipperView.setOnItemClickListener<String>(object : NewsFlipperView.OnItemClickListener<String> {
        override fun onItemClick( data: String) {
            toast(data)
        }

    })

效果

其他

参考：Github下载