ViewFlipper实现垂直轮播广告效果

前言：在我还在zz做炒股软件的时候，有个需求是垂直滚动显示3指数，当时我使用了ListView的自动滚动来实现，现在一想当时做的可真费劲，又是屏蔽手势传递又是处理自动滚动，其实这种效果用ViewFlipper实现真是太简单不过了,ViewFlipper的继承关系

效果图

实现代码

java代码

public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);ViewFlipper mViewFlipper = (ViewFlipper) findViewById(R.id.marquee_viewFlipper);LinearLayout shenzhenIndexLayout = (LinearLayout) View.inflate(this, R.layout.marquee_item_layout1, null);LinearLayout shangzhenIndexLayout = (LinearLayout) View.inflate(this, R.layout.marquee_item_layout2, null);LinearLayout cyIndexLayout = (LinearLayout) View.inflate(this, R.layout.marquee_item_layout3, null);mViewFlipper.addView(shenzhenIndexLayout);mViewFlipper.addView(shangzhenIndexLayout);mViewFlipper.addView(cyIndexLayout);}}

XML布局代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:gravity="center"android:background="@android:color/white"tools:context="com.qfxl.android.marqueeView.MainActivity"><ViewFlipperandroid:id="@+id/marquee_viewFlipper"android:layout_width="match_parent"android:layout_height="30dp"android:autoStart="true"android:background="#e8e8e8"android:flipInterval="2000"android:inAnimation="@anim/anim_in"android:outAnimation="@anim/anim_out"/>
</LinearLayout>

anim代码

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"><translateandroid:duration="1000"android:fromYDelta="100%p"android:toYDelta="0" />
</set>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"><translateandroid:duration="1000"android:fromYDelta="0"android:toYDelta="-100%p" />
</set>

简单分析

   <ViewFlipperandroid:id="@+id/marquee_viewFlipper"android:layout_width="match_parent"android:layout_height="30dp"android:autoStart="true"android:background="#e8e8e8"android:flipInterval="2000"android:inAnimation="@anim/anim_in"android:outAnimation="@anim/anim_out"/>

autoStart 是否自动开启轮播，这个方法设置为true的时候在源码中,也可以调用java代码setAutoStart(boolean autoStart)
flipInterval 轮播时间
inAnimation ViewFlipper中子View进入时的动画
outAnimation ViewFlipper中子View离开时的动画

ViewFlipper设置autoStart之后源码分析

首先设置了autoStart之后,在ViewFlipper中的onAttachedToWindow的源码中

  @Overrideprotected void onAttachedToWindow() {super.onAttachedToWindow();// Listen for broadcasts related to user-presencefinal IntentFilter filter = new IntentFilter();filter.addAction(Intent.ACTION_SCREEN_OFF);filter.addAction(Intent.ACTION_USER_PRESENT);// OK, this is gross but needed. This class is supported by the// remote views machanism and as a part of that the remote views// can be inflated by a context for another user without the app// having interact users permission - just for loading resources.// For exmaple, when adding widgets from a user profile to the// home screen. Therefore, we register the receiver as the current// user not the one the context is for.getContext().registerReceiverAsUser(mReceiver, android.os.Process.myUserHandle(),filter, null, getHandler());if (mAutoStart) {//设置autoStart为true// Automatically start when requestedstartFlipping();}}

接下来进入startFlipping,将mStarted状态位变为true

 /*** Start a timer to cycle through child views*/public void startFlipping() {mStarted = true;updateRunning();}

updateRunning中调用了updateRuning(true)方法

 /*** Internal method to start or stop dispatching flip {@link Message} based* on {@link #mRunning} and {@link #mVisible} state.*/private void updateRunning() {updateRunning(true);}

updateRunning(true)方法比较重要了

/*** Internal method to start or stop dispatching flip {@link Message} based* on {@link #mRunning} and {@link #mVisible} state.** @param flipNow Determines whether or not to execute the animation now, in*            addition to queuing future flips. If omitted, defaults to*            true.*/private void updateRunning(boolean flipNow) {/**mVisible在onWindowVisibilityChanged中赋值可见度一致*mStarted在设置autoStart之后变更*mUserPresent是监听了系统的广播Intent.ACTION_SCREEN_OFF跟Intent.ACTION_USER_PRESENT*/boolean running = mVisible && mStarted && mUserPresent;if (running != mRunning) {//mRunning默认为false，改变的地方只有下面if (running) {showOnly(mWhichChild, flipNow);//这个是在父类中实现的postDelayed(mFlipRunnable, mFlipInterval);//runnable} else {removeCallbacks(mFlipRunnable);}mRunning = running；//唯一改变mRunning标志的地方}if (LOGD) {Log.d(TAG, "updateRunning() mVisible=" + mVisible + ", mStarted=" + mStarted+ ", mUserPresent=" + mUserPresent + ", mRunning=" + mRunning);}}

showOnly方法做了什么，点进去看看,源码解释为只显示指定的View其余的View在屏幕上不可见，你可以设置View进入退出的动画

/*** Shows only the specified child. The other displays Views exit the screen,* optionally with the with the {@link #getOutAnimation() out animation} and* the specified child enters the screen, optionally with the* {@link #getInAnimation() in animation}.** @param childIndex The index of the child to be shown.* @param animate Whether or not to use the in and out animations, defaults*            to true.*/void showOnly(int childIndex, boolean animate) {final int count = getChildCount();for (int i = 0; i < count; i++) {final View child = getChildAt(i);if (i == childIndex) {if (animate && mInAnimation != null) {child.startAnimation(mInAnimation);//View进入ViewFlipper中的动画}child.setVisibility(View.VISIBLE);//当前View可见mFirstTime = false;} else {if (animate && mOutAnimation != null && child.getVisibility() == View.VISIBLE) {child.startAnimation(mOutAnimation);//View退出ViewFlipper中的动画} else if (child.getAnimation() == mInAnimation)child.clearAnimation();child.setVisibility(View.GONE);//当前View不可见}}}

showOnly看完看看这个runnable做了什么,直接跳到showNext中去

 private final Runnable mFlipRunnable = new Runnable() {@Overridepublic void run() {if (mRunning) {showNext();postDelayed(mFlipRunnable, mFlipInterval);}}};

showNext其实就是显示下一个子View了

public void showNext() {setDisplayedChild(mWhichChild + 1);}

点开setDisplayedChild

public void setDisplayedChild(int whichChild) {mWhichChild = whichChild;//这两个判断实现了ViewFlipper的循环if (whichChild >= getChildCount()) {mWhichChild = 0;} else if (whichChild < 0) {mWhichChild = getChildCount() - 1;}boolean hasFocus = getFocusedChild() != null;// This will clear old focus if we had itshowOnly(mWhichChild);//继续调用showOnlyif (hasFocus) {// Try to retake focus if we had itrequestFocus(FOCUS_FORWARD);}}

总结

ViewFlipper的源码其实不难,这里只是用来实现垂直的翻滚，也可以左右翻滚等，只要动画功底好，很多酷炫的效果可以做出来，写这篇博客的目的是为了提供垂直广告实现的又一种方案。
针对此效果，做了一个封装：MarqueeView