最近要实现类似于淘宝样式的垂直广告滚动条，这样的效果可以用Android的原生控件ViewFlipper来简单实现
效果如下：
效果图
ViewFlipper
使用方法
先看看布局文件
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Guanggao">
<ViewFlipper
android:id="@+id/view_flipper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inAnimation="@anim/anim_in"
android:outAnimation="@anim/anim_out"
android:layout_gravity="center"/>
</FrameLayout>
就是在FrameLayout里嵌入一个ViewFlipper
这里的属性inAnimation和outAnimation是子元素的出入动画，通过设置这两个值才能展现动画效果，接下来看一下这个动画的xml代码，首先是anim_in.xml，很简单的进入动画，Y轴位置从下面100%移动到位置0，动画持续1s
anim_in
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000">
<!--打开有神奇的效果-->
<!--<translate android:fromXDelta="100%p" android:toYDelta="0" />-->
<translate android:fromYDelta="100%p" android:toYDelta="0"/>
</set>
然后是anim_out.xml，同样的，出动画。从0位置移动到-100%的位置，动画持续1s
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000">
<translate android:fromYDelta="0" android:toYDelta="-100%p" />
</set>
接下来看一下我们的ViewFlipper的子项布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="@+id/img"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@mipmap/ic_launcher"/>
<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我是广告"
android:textSize="22sp"
android:layout_marginLeft="20dp"
android:layout_gravity="center"/>
</LinearLayout>
很简单就一个图片加一个标题，下面代码开始设置
public class Guanggao extends AppCompatActivity {
private ViewFlipper view_flipper;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_guanggao);
initView();
}
private void initView() {
view_flipper = (ViewFlipper) findViewById(R.id.view_flipper);
for(int i=0;i<3;i++){
View view = getLayoutInflater().inflate(R.layout.item_flipper,null);
view_flipper.addView(view);
/*view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.d("Guanggao", "点击了" + i);
}
});*/
}
view_flipper.setFlipInterval(2000);
view_flipper.startFlipping();
/* if(view_flipper.getDisplayedChild()==0){
view_flipper.getCurrentView().setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
Log.d("Guanggao", "点击了");
}
});*/
}
}
这里获取控件ViewFlipper之后，对控件addView，然后设置每个控件滑动到下一个控件的时间，之后调用startFlipping()就可以开始滚动啦。
源码解析
ViewFlipper继承自ViewAnimator，实质上只是封装了一些ViewAnimator的方法来调用，真正执行操作的是ViewAnimator。 我们来看ViewFlipper的核心方法startFlipping()。
public void startFlipping() {
mStarted = true;
updateRunning();
}
这里调用的是updateRuning()，我们接着跳进去看看
private void updateRunning() {
updateRunning(true);
}
一个私有方法，调用了重载的updateRunning，我们继续跳进去看看。
private void updateRunning(boolean flipNow) {
boolean running = mVisible && mStarted && mUserPresent;
if (running != mRunning) {
if (running) {
showOnly(mWhichChild, flipNow);
postDelayed(mFlipRunnable, mFlipInterval);
} else {
removeCallbacks(mFlipRunnable);
}
mRunning = running;
}
if (LOGD) {
Log.d(TAG, "updateRunning() mVisible=" + mVisible + ", mStarted=" + mStarted
+ ", mUserPresent=" + mUserPresent + ", mRunning=" + mRunning);
}
}
在一系列的判断后调用基类的方法showOnly，我们跳转过去看看。
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);
}
child.setVisibility(View.VISIBLE);
mFirstTime = false;
} else {
if (animate && mOutAnimation != null && child.getVisibility() == View.VISIBLE) {
//对可见子项调用退出动画
child.startAnimation(mOutAnimation);
} else if (child.getAnimation() == mInAnimation)
//不可见子项取消动画
child.clearAnimation();
//同时设置不可见
child.setVisibility(View.GONE);
}
}
}
根据官方文档这里的childIndex是要显示的子项的位置，animate是否启用动画，默认是启用的。
这个方法就是核心方法，这里遍历每一个子项，如果找到childIndex的话则对他调用进入的动画，对可见的子项则调用退出的动画。
ViewAnimator继承自FrameLayout,它的使用方法和ViewFLipper类似。只不过无法自动滚动，而ViewFLipper使用Handler机制封装了自动滚动的功能。ViewAnimator则需要调用showNext()来显示下一个子项。自此我们的分析结束。
项目地址 https://github.com/biao941122/RedBook
