今天在逛博客的时候又学习到一个新控件，就是ViewFlipper，老规矩，还是通过一个demo来学习，下面先附上效果图：
ViewFlipper效果图
根据效果图，说下利用该控件实现的几个简单功能点：
功能一：实现一个左右切换或者上下切换的效果；
功能二：顶部布局实现了一个指示器与子View切换的联动；
功能三：顶部布局有一个子view的点击事件；
下面先贴上布局代码：
<RelativeLayout 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=".MainActivity"
>
<!--顶部左右切换的布局-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="180dp">
<!--左右切换的控件-->
<ViewFlipper
android:layout_width="match_parent"
android:layout_height="180dp"
android:id="@+id/view_flipper_top"/>
<!--指示器容器-->
<LinearLayout
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" />
</RelativeLayout>
<!--下面上下切换的控件-->
<ViewFlipper
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:id="@+id/view_flipper_bottom" />
</RelativeLayout>
布局上就是一个相对布局嵌套一个相对布局，子相对布局中包含一个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<String> 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<Integer> 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<datas.size();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<String> 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的切换了，这里需要说明的是：切换方向是左右切换还是上下切换由你设置的动画决定。
下面贴上左右切换的动画代码：
<!--从右边进-->
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="100%p"
android:toXDelta="0"
android:duration="1000"/>
</set>
<!--从左边出-->
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="0"
android:toXDelta="-100%p"
android:duration="1000"/>
</set>
拆解功能二：实现指示器和子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使用起来要简单很多，但有些时候想要实现某些功能可能效果不是很理想，所以当作一个知识储备，如何取舍视具体情况而定。
网友评论