This article has been published exclusively by guolin_blog, an official wechat account

Android custom MarqueeView implementation MarqueeView effect – Use instructions

Android custom MarqueeView implementation of MarqueeView – Principle part

preface

As we know, Android TextView supports running light effect by default, but it is not flexible enough, for example, it cannot support setting animation execution duration, animation effect, etc.

Github also has some excellent and useful open source libraries.

The author Open source library star The difference between Realize the principle of
sunfusheng MarqueeView 2.5 k + Support View reuse, only support TextView (internal up to three TextView) Implementation based on ViewFilp
gongwen MarqueeViewLibrary 1.7 k + View reuse is not supported. Various views are supported Implementation based on ViewFilp

So, I think, can develop a support to View reuse, at the same time support a variety of View custom control out. Finally, it paid off. The supported functions are

  • Supports various views, distinguished by type
  • Views are internally reused, and there are as many views as there are types.
  • Support view placement (want to do, right, center)
  • Support all kinds of animation, from top to bottom, from left to right, etc., set the animation duration
  • Support custom animation
  • Supports listening for click events on each item
  • Support to monitor the flip event, that is, the current flip to which item

rendering

Let’s have a look at the picture first.

Directions for use

There are three steps to using MarqueeView:

Step 1: Configure the Gradle file:

implementation 'com.xj:marqueeView:marqueeView:<latest-version>'
Copy the code

The latest version is 0.1.20. The latest version can be viewed at marqueeView

 implementation 'com. Xj. MarqueeView: marqueeView: 0.1.20'
Copy the code

Step 2: Use in an XML file

<com.xj.marqueeview.MarqueeView
    android:id="@+id/mv_multi_text5"
    android:layout_width="match_parent"
    android:layout_height="@dimen/mv_multi_text_height"
    android:layout_marginTop="10dp"
    android:background="@mipmap/bg"
    app:mvAnimDuration="500"
    app:mvDirection="top_to_bottom"
    app:mvInterval="3000">

</com.xj.marqueeview.MarqueeView>


Copy the code

Custom attribute description

attribute instructions
mvAnimDuration Animation execution time
mvInterval View Page-turning interval
mvGravity View position left, center, right
mvDirection Animation scrolling directions :bottom_to_top, top_to_bottom, right_to_left, left_to_right

Step 3: Set up the Adapater for the MarqueeView

First, if the MarqueeView has only one ViewType, then you only need to inherit CommonAdapter

public class SimpleTextAdapter extends CommonAdapter<String> { public SimpleTextAdapter(Context context, List<String> datas) { super(context, R.layout.item_simple_text, datas); } @Override protected void convert(ViewHolder viewHolder, String item, int position) { TextView tv = viewHolder.getView(R.id.tv); tv.setText(item); }}Copy the code
SimpleTextAdapter simpleTextAdapter = new SimpleTextAdapter(mContext, datas);
simpleTextAdapter.setOnItemClickListener(new MultiItemTypeAdapter.OnItemClickListener() {
    @Override
    public void onItemClick(int position, View view) {
        Log.i(TAG, "onItemClick: position = " + position);
        if (marqueeView.isStart()) {
            marqueeView.stopFilp();
        } else{ marqueeView.startFlip(); }}}); marqueeView.setAdapter(simpleTextAdapter);Copy the code

Take a look at the effect:

More usage

Different viewtypes are supported

From the GIF renderings, we can see that there are three types:

  • Contains only TextView
  • It has an ImageView and a TextView
  • It has two TextViews and an ImageView

To achieve this, there are two steps:

The first step: Inheriting from ItemViewDelegate, override getItemViewLayoutId, isForViewType, convert methods, where getItemViewLayoutId means return layout layoutId, The convert method is called when the current View is refreshed and can be used to refresh data

/**
 * Created by xujun on 1/9/2018$ 18:25$.
 */
public class TextItemViewDelegate implements ItemViewDelegate<MultiTypeBean> {

    @Override
    public int getItemViewLayoutId() {
        return R.layout.item_simple_text;
    }

    @Override
    public boolean isForViewType(MultiTypeBean item, int position) {
        returnitem.mItemViewType == MultiTypeBean.ItemViewType.text; } @Override public void convert(ViewHolder holder, MultiTypeBean multiTypeBean, int position) { TextView tv = holder.getView(R.id.tv); tv.setText(multiTypeBean.title); }}Copy the code
public class ImageTextItemViewDelegate implements ItemViewDelegate<MultiTypeBean> {

    @Override
    public int getItemViewLayoutId() {
        return R.layout.item_image_text;
    }

    @Override
    public boolean isForViewType(MultiTypeBean item, int position) {
        returnitem.mItemViewType == MultiTypeBean.ItemViewType.imageText; } @Override public void convert(ViewHolder holder, MultiTypeBean multiTypeBean, int position) { TextView tv = holder.getView(R.id.tv); tv.setText(multiTypeBean.title); ImageView iv = holder.getView(R.id.iv); iv.setImageResource(multiTypeBean.resImageId); }}Copy the code
public class MultiTextItemViewDelegate implements ItemViewDelegate<MultiTypeBean> {

    @Override
    public int getItemViewLayoutId() {
        return R.layout.item_multi_text;
    }

    @Override
    public boolean isForViewType(MultiTypeBean item, int position) {
        returnitem.mItemViewType == MultiTypeBean.ItemViewType.multiTextAndImage; } @Override public void convert(ViewHolder holder, MultiTypeBean multiTypeBean, int position) { TextView tv = holder.getView(R.id.tv); tv.setText(multiTypeBean.title); TextView tvContent = holder.getView(R.id.tv_content); tvContent.setText(multiTypeBean.content); ImageView iv = holder.getView(R.id.iv); iv.setImageResource(multiTypeBean.resImageId); }}Copy the code

Step 2: Add an ItemViewDelegate to the MultiItemTypeAdapter and set the Adapter for the marqueeView.

MultiItemTypeAdapter<MultiTypeBean> multiItemTypeAdapter = new MultiItemTypeAdapter<MultiTypeBean>(mContext, datas);
multiItemTypeAdapter.addItemViewDelegate(new TextItemViewDelegate());
multiItemTypeAdapter.addItemViewDelegate(new ImageTextItemViewDelegate());
multiItemTypeAdapter.addItemViewDelegate(new MultiTextItemViewDelegate());
multiItemTypeAdapter.setOnItemClickListener(new MultiItemTypeAdapter.OnItemClickListener() {
    @Override
    public void onItemClick(int position, View view) {
        Log.i(TAG, "onItemClick: position = " + position);
        if (marqueeView.isStart()) {
            marqueeView.stopFilp();
        } else{ marqueeView.startFlip(); }}}); marqueeView.setAdapter(multiItemTypeAdapter);Copy the code

Other USES

  • Set the alignment of the layout:

void setGravity(int gravity)

  • Set the direction of the animation:

void setDirection(int direction)

  • Set the execution time of animation :(built-in animation support, custom animation is not supported)

void setAnimDuration(int animDuration)

  • Set the rotation interval between two Views

void setInterval(int interval)

  • Set the in/out animation (i.e. custom animation)

setInAndOutAnimation(Animation inAnimation, Animation outAnimation)

  • Setting Flip Listening

void setIFlipListener(IFlipListener IFlipListener)

mMvMultiText5.setIFlipListener(new MarqueeView.IFlipListener() {
    @Override
    public void onFilpStart(int position, View view) {
        Log.i(TAG, "onFilpStart: position = " + position);
    }

    @Override
    public void onFilpSelect(int position, View view) {
        Log.i(TAG, "onFilpSelect: position = "+ position); }});Copy the code
  • Set up click event listening
simpleTextAdapter.setOnItemClickListener(new MultiItemTypeAdapter.OnItemClickListener() {
    @Override
    public void onItemClick(int position, View view) {
        Log.i(TAG, "onItemClick: position = " + position);
        if (marqueeView.isStart()) {
            marqueeView.stopFilp();
        } else{ marqueeView.startFlip(); }}});Copy the code

Of course, the above functionality also supports custom attributes:

Custom attribute description

attribute instructions
mvAnimDuration Animation execution time
mvInterval View Page-turning interval
mvGravity View position left, center, right
mvDirection Animation scrolling directions :bottom_to_top, top_to_bottom, right_to_left, left_to_right

Thank you

Github.com/hongyangAnd…

It refers to most of the usage of baseAdapter in Hongyang

Github.com/sunfusheng/…

View reuse also gave me the corresponding idea. However, ViewFliper could not reuse multiple viewtypes, so it finally abandoned this solution and adopted a custom FrameLayout method.

About me

GitHub: gdutxiaoxu

Personal email: [email protected]

CSDN blog: https://blog.csdn.net/gdutxiaoxu

Jane books home page: https://www.jianshu.com/u/ca9b3e19f454

Personal wechat official Account:

If you think the effect is good, please star, thank you.

MarqueeView：https://github.com/gdutxiaoxu/MarqueeView