使用ViewFipper的自定义控件 来实现竖直跑马灯效果

一直想实现一个竖直跑马灯的效果,今天接触到了ViewFlipper这个控件, 是做安卓视图切换的,  对其用自定义控件进行包装;实现其点击回调和自定义视图等功能

不多说,直接上代码:

定义了一个自定义控件,  继承LinearLayout

package com.example.viewfipperdemo;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.ViewFlipper;

/**
 * Created by zmybi on 2017/1/19.
 */

public class MarqueeTextView extends LinearLayout {

    private Context mContext;
    private String[] strs;
    private View mView;

    private OnTextClickListener mOnTextClickListener;
    private ViewFlipper mViewFlipper;


    public MarqueeTextView(Context context) {
        this(context,null);
        this.mContext = context;
    }

    public MarqueeTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.mContext = context;

        initBasicView();
    }

    /**
     * 用于外界向里面传值,并且初始化控件中的ViewFipper
     * @param str
     * @param onTextClickListener
     */
    public void setData(String[] str,OnTextClickListener onTextClickListener) {
        this.strs = str;
        this.mOnTextClickListener = onTextClickListener;
        initViewFipper();
    }



    private void initBasicView() {
        mView = LayoutInflater.from(mContext).inflate(R.layout.layout_viewfipper,null);
        mViewFlipper = (ViewFlipper) mView.findViewById(R.id.viewflipper);

        mViewFlipper.setInAnimation(mContext,R.anim.in);  //进来的动画
        mViewFlipper.setOutAnimation(mContext,R.anim.out);  //出去的动画

        LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        addView(mView,params);

        mViewFlipper.startFlipping();
    }

    /**
     * 定义销毁的方法
     */
    public void clearViewFlipper() {
        if(mView != null) {
            if(mViewFlipper != null) {
                mViewFlipper.stopFlipping();
                mViewFlipper.removeAllViews();
                mViewFlipper =null;
            }
            mView = null;
        }
    }


    /**
     * 初始化viewFipper中的自孩子视图
     */
    private void initViewFipper() {
        if(strs.length == 0) {
            return;
        }

        int i = 0;
        mViewFlipper.removeAllViews();
        while (i < strs.length) {   //循环3次
            final TextView tv = new TextView(mContext);
            tv.setText(strs[i]);

            tv.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View view) {
                    if(mOnTextClickListener != null) {
                        mOnTextClickListener.onClick(tv);
                    }
                }
            });
            mViewFlipper.addView(tv);
            i++;
        }

    }
}

给viewFlipper设置动画的写法:

in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromYDelta="50%p"
        android:toYDelta="0" />
    <alpha
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />

</set>

out.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromYDelta="0"
        android:toYDelta="-50%p" />
    <alpha
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />

</set>

我们看一下layout_viewflipper布局的写法:

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

    <ViewFlipper
        android:padding="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/viewflipper"
        android:background="#33ff0000"
        android:flipInterval="2000"
        ></ViewFlipper>

</LinearLayout>

其中flipInterval  是决定切换的时间的

我们再来看看MainActivity中的代码:

package com.example.viewfipperdemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    /**
     * 自定义的可滚动的TextView
     */
    private MarqueeTextView mMarqueeTextView;

    private String[] str = {"我是1","我是2","我是3"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mMarqueeTextView = (MarqueeTextView) findViewById(R.id.marqueetextview);

        mMarqueeTextView.setData(str, new OnTextClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this,((TextView)view).getText(),Toast.LENGTH_LONG).show();
            }
        });
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mMarqueeTextView.clearViewFlipper();
    }
}

对了,还定义了一个接口:

package com.example.viewfipperdemo;

import android.view.View;

/**
 * Created by zmybi on 2017/1/19.
 */

public interface OnTextClickListener {

    void onClick(View view);
}

至此,如上的竖直跑马灯就完成了~