今天在逛博客的时候又学习到一个新控件，就是ViewFlipper，老规矩，还是通过一个demo来学习，下面先附上效果图：

ViewFlipper效果图

根据效果图，说下利用该控件实现的几个简单功能点：

功能一：实现一个左右切换或者上下切换的效果；

功能二：顶部布局实现了一个指示器与子View切换的联动；

功能三：顶部布局有一个子view的点击事件；

下面先贴上布局代码：

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity"

>

android:layout_width="match_parent"

android:layout_height="180dp">

android:layout_width="match_parent"

android:layout_height="180dp"

android:id="@+id/view_flipper_top"/>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/circle_indicator_container"

android:orientation="horizontal"

android:layout_centerHorizontal="true"

android:layout_alignParentBottom="true"

android:layout_marginBottom="10dp" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:id="@+id/view_flipper_bottom" />

布局上就是一个相对布局嵌套一个相对布局，子相对布局中包含一个ViewFlipper和一个指示器容器，两个ViewFlipper的属性都是在代码中去动态设置的。

下面先贴上整个activity代码，然后拆分各个功能进行说明：

public class MainActivity extends AppCompatActivity {

private ViewFlipper mViewFlipperTop;

private ViewFlipper mViewFlipperBot;

private LinearLayout mIndicatorContainer;

private Handler mHandler = new Handler();

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

initView();

initTopViewData();

setTopViewConfig();

initBotViewData();

setBotViewConfig();

}

/**

* 设置左右切换ViewFlipper控件配置

*/

private void setTopViewConfig() {

mViewFlipperTop.setInAnimation(this,R.anim.anim_right_in);//进场动画

mViewFlipperTop.setOutAnimation(this,R.anim.anim_left_out);//出场动画

mViewFlipperTop.setFlipInterval(2000);//设置切换之间间隔2s

mViewFlipperTop.startFlipping();//开始

/*

ViewFlipper控件没有子view切换监听

所以在这对动画进行监听 实现和指示器的联动

*/

mViewFlipperTop.getInAnimation().setAnimationListener(new Animation.AnimationListener() {

@Override

public void onAnimationStart(Animation animation) {//在动画开始监听中执行相关的逻辑

for (int i = 0; i < mIndicatorContainer.getChildCount(); i++) {

if (i == mViewFlipperTop.getDisplayedChild()) {//获取当前展示的子View

int finalI = i;

//开启一个子线程 发送一个延迟事件 设置指示器被选中的效果

new Thread(() -> {

mHandler.postDelayed(()-> mIndicatorContainer.getChildAt(finalI).setSelected(true),500);

}).start();

} else {//其余的指示器设置为未选中效果

int finalI1 = i;

new Thread(() -> {

mHandler.postDelayed(()-> mIndicatorContainer.getChildAt(finalI1).setSelected(false),500);

}).start();

}

}

}

@Override

public void onAnimationEnd(Animation animation) {

}

@Override

public void onAnimationRepeat(Animation animation) {

}

});

}

/**

* 设置上下切换控件配置

*/

private void setBotViewConfig() {

mViewFlipperBot.setInAnimation(this,R.anim.anim_in);

mViewFlipperBot.setOutAnimation(this,R.anim.anim_out);

mViewFlipperBot.setFlipInterval(2000);

mViewFlipperBot.startFlipping();

}

/**

* 加载下面控件的数据

*/

private void initBotViewData() {

List datas = new ArrayList<>();

datas.add("语文");

datas.add("数学");

datas.add("外语");

datas.add("物理");

datas.add("化学");

datas.add("生物");

for (String data:datas) {

View view = getLayoutInflater().inflate(R.layout.item_bot_view_flipper,null);

TextView textView = view.findViewById(R.id.item_text);

textView.setText(data);

mViewFlipperBot.addView(view);

}

}

/**

* 加载上面控件的数据

*/

private void initTopViewData(){

List datas = new ArrayList<>();

datas.add(R.drawable.image1);

datas.add(R.drawable.image2);

datas.add(R.drawable.image3);

datas.add(R.drawable.image4);

datas.add(R.drawable.image5);

for (int i = 0;i

int data = datas.get(i);

View view = getLayoutInflater().inflate(R.layout.item_top_view_flipper,null);

int finalI = i;

//设置子View的点击事件

view.setOnClickListener(v -> {

Toast.makeText(this, "position:"+ finalI, Toast.LENGTH_SHORT).show();

});

ImageView imageView = view.findViewById(R.id.item_top_image);

//采用第三方库Glide加载图片

Glide.with(this)

.load(data)

.into(imageView);

mViewFlipperTop.addView(view);

//根据数据size装填指示器

initIndicator();

}

mIndicatorContainer.getChildAt(0).setSelected(true);

}

/**

* 初始化指示器

*/

private void initIndicator() {

ImageView indicator = new ImageView(this);//创建ImageView对象

indicator.setImageDrawable(getDrawable(R.drawable.circle_indicator_selector));

//动态设置控件布局

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,

LinearLayout.LayoutParams.WRAP_CONTENT);

params.setMargins(5,0,0,0);

indicator.setLayoutParams(params);

mIndicatorContainer.addView(indicator);

}

/**

* 初始化布局

*/

private void initView() {

mViewFlipperTop = findViewById(R.id.view_flipper_top);

mViewFlipperBot = findViewById(R.id.view_flipper_bottom);

mIndicatorContainer = findViewById(R.id.circle_indicator_container);

}

}

拆解功能一：首先需要装填数据：

/**

* 加载下面控件的数据

*/

private void initBotViewData() {

List datas = new ArrayList<>();

datas.add("语文");

datas.add("数学");

datas.add("外语");

datas.add("物理");

datas.add("化学");

datas.add("生物");

for (String data:datas) {

View view = getLayoutInflater().inflate(R.layout.item_bot_view_flipper,null);

TextView textView = view.findViewById(R.id.item_text);

textView.setText(data);

mViewFlipperBot.addView(view);

}

}

1、根据布局文件加载一个布局对象；

2、根据id找到控件；

3、将需要展示的数据设置到控件中去；

4、将布局对象添加到ViewFlipper中；

5、根据数据size重复上述步骤，添加子View。

通过上面的代码，数据有了，子View有了，接下来就是配置ViewFlipper，让它动起来：

/**

* 设置上下切换控件配置

*/

private void setBotViewConfig() {

mViewFlipperBot.setInAnimation(this,R.anim.anim_in);

mViewFlipperBot.setOutAnimation(this,R.anim.anim_out);

mViewFlipperBot.setFlipInterval(2000);

mViewFlipperBot.startFlipping();

}

1、设置进场动画；

2、设置出场动画；

3、设置切换间隔时间；

4、开始切换。

通过上面拆分出来的代码就能实现子View的切换了，这里需要说明的是：切换方向是左右切换还是上下切换由你设置的动画决定。

下面贴上左右切换的动画代码：

android:toXDelta="0"

android:duration="1000"/>

android:toXDelta="-100%p"

android:duration="1000"/>

拆解功能二：实现指示器和子View切换的联动，在ViewFlipper控件中并没有想ViewPager那样对Pager改变的监听，所以在这里是通过监听动画来实现的：

mViewFlipperTop.getInAnimation().setAnimationListener(new Animation.AnimationListener() {

@Override

public void onAnimationStart(Animation animation) {//在动画开始监听中执行相关的逻辑

for (int i = 0; i < mIndicatorContainer.getChildCount(); i++) {

if (i == mViewFlipperTop.getDisplayedChild()) {//获取当前展示的子View

int finalI = i;

//开启一个子线程 发送一个延迟事件 设置指示器被选中的效果

new Thread(() -> {

mHandler.postDelayed(()-> mIndicatorContainer.getChildAt(finalI).setSelected(true),500);

}).start();

} else {//其余的指示器设置为未选中效果

int finalI1 = i;

new Thread(() -> {

mHandler.postDelayed(()-> mIndicatorContainer.getChildAt(finalI1).setSelected(false),500);

}).start();

}

}

}

@Override

public void onAnimationEnd(Animation animation) {

}

@Override

public void onAnimationRepeat(Animation animation) {

}

});

最开始的时候是在动画开始的回调中直接进行指示器的切换，因为子View切换有一个2s的动画过程，而指示器是在动画刚开始就一下子跳转了，看起来有点不协调，所以我在回调中开启了一个子线程，然后发送一个延时任务，这样使得子View的切换和指示器的切换看起协调一些。

这里需要说明的一点是：

通过方法getDisplayedChild()可以拿到当前展示的子View，它返回的是一个int值，所以可以根据它和指示器容器中的子View关联起来。

拆解功能三：子View的点击事件，这个功能给我的第一想法就是通过ViewFlipper控件去获取，但找了一圈发现并没有提供相关的接口，所以最后是在创建子View的时候实现的：

int data = datas.get(i);

View view = getLayoutInflater().inflate(R.layout.item_top_view_flipper,null);

int finalI = i;

//设置子View的点击事件

view.setOnClickListener(v -> {

Toast.makeText(this, "position:"+ finalI, Toast.LENGTH_SHORT).show();

});

在遍历中创建子View的时候就直接设置好点击监听，以此获取到子View对应的position，拿到了子View的position就能执行很多其他的业务逻辑了。

以上就是对三个功能的拆解说明。

最后，还有一个功能，用这个控件貌似效果不佳。功能就是ViewFlipper实现滑动切换，这个功能还是比较常见，但在ViewFlipper中也没有提供相关的接口，只有自己通过对滑动事件进行拦截，然后自定义，但实现的效果不佳，因此考虑用其他方法来实现，比如viewpager。

总结：ViewFlipper相比ViewPager使用起来要简单很多，但有些时候想要实现某些功能可能效果不是很理想，所以当作一个知识储备，如何取舍视具体情况而定。