Android自定义控件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);
}

至此，如上的竖直跑马灯就完成了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。