首页 > 系统 > Android > 正文

Android自定义控件ViewFipper实现竖直跑马灯效果

2019-10-22 18:20:36
字体:
来源:转载
供稿:网友

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

Android,ViewFipper,跑马灯

不多说,直接上代码:

定义了一个自定义控件,  继承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); } 

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持VEVB武林网。


注:相关教程知识阅读请移步到Android开发频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表