使用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);}

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