今天在逛博客的時(shí)候又學(xué)習(xí)到一個(gè)新控件空免，就是ViewFlipper顽染，老規(guī)矩，還是通過一個(gè)demo來學(xué)習(xí)狸臣，下面先附上效果圖：
根據(jù)效果圖莹桅，說下利用該控件實(shí)現(xiàn)的幾個(gè)簡(jiǎn)單功能點(diǎn)：
功能一：實(shí)現(xiàn)一個(gè)左右切換或者上下切換的效果；
功能二：頂部布局實(shí)現(xiàn)了一個(gè)指示器與子View切換的聯(lián)動(dòng)烛亦；
功能三：頂部布局有一個(gè)子view的點(diǎn)擊事件诈泼；
下面先貼上布局代碼：
<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>
布局上就是一個(gè)相對(duì)布局嵌套一個(gè)相對(duì)布局，子相對(duì)布局中包含一個(gè)ViewFlipper和一個(gè)指示器容器煤禽，兩個(gè)ViewFlipper的屬性都是在代碼中去動(dòng)態(tài)設(shè)置的铐达。
下面先貼上整個(gè)activity代碼，然后拆分各個(gè)功能進(jìn)行說明：
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();
}
/**
* 設(shè)置左右切換ViewFlipper控件配置
*/
private void setTopViewConfig() {
mViewFlipperTop.setInAnimation(this,R.anim.anim_right_in);//進(jìn)場(chǎng)動(dòng)畫
mViewFlipperTop.setOutAnimation(this,R.anim.anim_left_out);//出場(chǎng)動(dòng)畫
mViewFlipperTop.setFlipInterval(2000);//設(shè)置切換之間間隔2s
mViewFlipperTop.startFlipping();//開始
/*
ViewFlipper控件沒有子view切換監(jiān)聽
所以在這對(duì)動(dòng)畫進(jìn)行監(jiān)聽 實(shí)現(xiàn)和指示器的聯(lián)動(dòng)
*/
mViewFlipperTop.getInAnimation().setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {//在動(dòng)畫開始監(jiān)聽中執(zhí)行相關(guān)的邏輯
for (int i = 0; i < mIndicatorContainer.getChildCount(); i++) {
if (i == mViewFlipperTop.getDisplayedChild()) {//獲取當(dāng)前展示的子View
int finalI = i;
//開啟一個(gè)子線程 發(fā)送一個(gè)延遲事件 設(shè)置指示器被選中的效果
new Thread(() -> {
mHandler.postDelayed(()-> mIndicatorContainer.getChildAt(finalI).setSelected(true),500);
}).start();
} else {//其余的指示器設(shè)置為未選中效果
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) {
}
});
}
/**
* 設(shè)置上下切換控件配置
*/
private void setBotViewConfig() {
mViewFlipperBot.setInAnimation(this,R.anim.anim_in);
mViewFlipperBot.setOutAnimation(this,R.anim.anim_out);
mViewFlipperBot.setFlipInterval(2000);
mViewFlipperBot.startFlipping();
}
/**
* 加載下面控件的數(shù)據(jù)
*/
private void initBotViewData() {
List<String> datas = new ArrayList<>();
datas.add("語文");
datas.add("數(shù)學(xué)");
datas.add("外語");
datas.add("物理");
datas.add("化學(xué)");
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);
}
}
/**
* 加載上面控件的數(shù)據(jù)
*/
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;
//設(shè)置子View的點(diǎn)擊事件
view.setOnClickListener(v -> {
Toast.makeText(this, "position:"+ finalI, Toast.LENGTH_SHORT).show();
});
ImageView imageView = view.findViewById(R.id.item_top_image);
//采用第三方庫(kù)Glide加載圖片
Glide.with(this)
.load(data)
.into(imageView);
mViewFlipperTop.addView(view);
//根據(jù)數(shù)據(jù)size裝填指示器
initIndicator();
}
mIndicatorContainer.getChildAt(0).setSelected(true);
}
/**
* 初始化指示器
*/
private void initIndicator() {
ImageView indicator = new ImageView(this);//創(chuàng)建ImageView對(duì)象
indicator.setImageDrawable(getDrawable(R.drawable.circle_indicator_selector));
//動(dòng)態(tài)設(shè)置控件布局
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);
}
}
拆解功能一：首先需要裝填數(shù)據(jù)：
/**
* 加載下面控件的數(shù)據(jù)
*/
private void initBotViewData() {
List<String> datas = new ArrayList<>();
datas.add("語文");
datas.add("數(shù)學(xué)");
datas.add("外語");
datas.add("物理");
datas.add("化學(xué)");
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呜师、根據(jù)布局文件加載一個(gè)布局對(duì)象娶桦；
2、根據(jù)id找到控件汁汗；
3衷畦、將需要展示的數(shù)據(jù)設(shè)置到控件中去；
4知牌、將布局對(duì)象添加到ViewFlipper中祈争；
5、根據(jù)數(shù)據(jù)size重復(fù)上述步驟角寸，添加子View菩混。
通過上面的代碼，數(shù)據(jù)有了扁藕，子View有了沮峡，接下來就是配置ViewFlipper，讓它動(dòng)起來：
/**
* 設(shè)置上下切換控件配置
*/
private void setBotViewConfig() {
mViewFlipperBot.setInAnimation(this,R.anim.anim_in);
mViewFlipperBot.setOutAnimation(this,R.anim.anim_out);
mViewFlipperBot.setFlipInterval(2000);
mViewFlipperBot.startFlipping();
}
1亿柑、設(shè)置進(jìn)場(chǎng)動(dòng)畫邢疙；
2、設(shè)置出場(chǎng)動(dòng)畫；
3疟游、設(shè)置切換間隔時(shí)間呼畸；
4、開始切換颁虐。
通過上面拆分出來的代碼就能實(shí)現(xiàn)子View的切換了蛮原，這里需要說明的是：切換方向是左右切換還是上下切換由你設(shè)置的動(dòng)畫決定。
下面貼上左右切換的動(dòng)畫代碼：
<!--從右邊進(jìn)-->
<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>
拆解功能二：實(shí)現(xiàn)指示器和子View切換的聯(lián)動(dòng)另绩，在ViewFlipper控件中并沒有想ViewPager那樣對(duì)Pager改變的監(jiān)聽儒陨，所以在這里是通過監(jiān)聽動(dòng)畫來實(shí)現(xiàn)的：
mViewFlipperTop.getInAnimation().setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {//在動(dòng)畫開始監(jiān)聽中執(zhí)行相關(guān)的邏輯
for (int i = 0; i < mIndicatorContainer.getChildCount(); i++) {
if (i == mViewFlipperTop.getDisplayedChild()) {//獲取當(dāng)前展示的子View
int finalI = i;
//開啟一個(gè)子線程 發(fā)送一個(gè)延遲事件 設(shè)置指示器被選中的效果
new Thread(() -> {
mHandler.postDelayed(()-> mIndicatorContainer.getChildAt(finalI).setSelected(true),500);
}).start();
} else {//其余的指示器設(shè)置為未選中效果
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) {
}
});
最開始的時(shí)候是在動(dòng)畫開始的回調(diào)中直接進(jìn)行指示器的切換，因?yàn)樽覸iew切換有一個(gè)2s的動(dòng)畫過程板熊，而指示器是在動(dòng)畫剛開始就一下子跳轉(zhuǎn)了框全，看起來有點(diǎn)不協(xié)調(diào)，所以我在回調(diào)中開啟了一個(gè)子線程干签，然后發(fā)送一個(gè)延時(shí)任務(wù)津辩，這樣使得子View的切換和指示器的切換看起協(xié)調(diào)一些。
這里需要說明的一點(diǎn)是：
通過方法
getDisplayedChild()可以拿到當(dāng)前展示的子View容劳，它返回的是一個(gè)int值喘沿，所以可以根據(jù)它和指示器容器中的子View關(guān)聯(lián)起來。
拆解功能三：子View的點(diǎn)擊事件竭贩，這個(gè)功能給我的第一想法就是通過ViewFlipper控件去獲取蚜印，但找了一圈發(fā)現(xiàn)并沒有提供相關(guān)的接口，所以最后是在創(chuàng)建子View的時(shí)候?qū)崿F(xiàn)的：
int data = datas.get(i);
View view = getLayoutInflater().inflate(R.layout.item_top_view_flipper,null);
int finalI = i;
//設(shè)置子View的點(diǎn)擊事件
view.setOnClickListener(v -> {
Toast.makeText(this, "position:"+ finalI, Toast.LENGTH_SHORT).show();
});
在遍歷中創(chuàng)建子View的時(shí)候就直接設(shè)置好點(diǎn)擊監(jiān)聽留量，以此獲取到子View對(duì)應(yīng)的position窄赋，拿到了子View的position就能執(zhí)行很多其他的業(yè)務(wù)邏輯了。
以上就是對(duì)三個(gè)功能的拆解說明楼熄。
最后忆绰，還有一個(gè)功能，用這個(gè)控件貌似效果不佳可岂。功能就是ViewFlipper實(shí)現(xiàn)滑動(dòng)切換错敢，這個(gè)功能還是比較常見，但在ViewFlipper中也沒有提供相關(guān)的接口缕粹，只有自己通過對(duì)滑動(dòng)事件進(jìn)行攔截稚茅，然后自定義，但實(shí)現(xiàn)的效果不佳平斩，因此考慮用其他方法來實(shí)現(xiàn)亚享，比如viewpager。
總結(jié)：ViewFlipper相比ViewPager使用起來要簡(jiǎn)單很多绘面，但有些時(shí)候想要實(shí)現(xiàn)某些功能可能效果不是很理想虹蒋，所以當(dāng)作一個(gè)知識(shí)儲(chǔ)備糜芳，如何取舍視具體情況而定。
