今天在逛博客的時(shí)候又學(xué)習(xí)到一個(gè)新控件，就是ViewFlipper，老規(guī)矩，還是通過(guò)一個(gè)demo來(lái)學(xué)習(xí)，下面先附上效果圖：

ViewFlipper效果圖

根據(jù)效果圖，說(shuō)下利用該控件實(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)擊事件；

下面先貼上布局代碼：

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" />

布局上就是一個(gè)相對(duì)布局嵌套一個(gè)相對(duì)布局，子相對(duì)布局中包含一個(gè)ViewFlipper和一個(gè)指示器容器，兩個(gè)ViewFlipper的屬性都是在代碼中去動(dòng)態(tài)設(shè)置的。

下面先貼上整個(gè)activity代碼，然后拆分各個(gè)功能進(jìn)行說(shuō)明：

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)畫(huà)

mViewFlipperTop.setOutAnimation(this,R.anim.anim_left_out);//出場(chǎng)動(dòng)畫(huà)

mViewFlipperTop.setFlipInterval(2000);//設(shè)置切換之間間隔2s

mViewFlipperTop.startFlipping();//開(kāi)始

/*

ViewFlipper控件沒(méi)有子view切換監(jiān)聽(tīng)

所以在這對(duì)動(dòng)畫(huà)進(jìn)行監(jiān)聽(tīng) 實(shí)現(xiàn)和指示器的聯(lián)動(dòng)

*/

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

@Override

public void onAnimationStart(Animation animation) {//在動(dòng)畫(huà)開(kāi)始監(jiān)聽(tīng)中執(zhí)行相關(guān)的邏輯

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

if (i == mViewFlipperTop.getDisplayedChild()) {//獲取當(dāng)前展示的子View

int finalI = i;

//開(kā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 datas = new ArrayList<>();

datas.add("語(yǔ)文");

datas.add("數(shù)學(xué)");

datas.add("外語(yǔ)");

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 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;

//設(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 datas = new ArrayList<>();

datas.add("語(yǔ)文");

datas.add("數(shù)學(xué)");

datas.add("外語(yǔ)");

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。

通過(guò)上面的代碼，數(shù)據(jù)有了，子View有了，接下來(lái)就是配置ViewFlipper，讓它動(dòng)起來(lái)：

/**

* 設(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)畫(huà)；

2、設(shè)置出場(chǎng)動(dòng)畫(huà)；

3、設(shè)置切換間隔時(shí)間；

4、開(kāi)始切換。

通過(guò)上面拆分出來(lái)的代碼就能實(shí)現(xiàn)子View的切換了，這里需要說(shuō)明的是：切換方向是左右切換還是上下切換由你設(shè)置的動(dòng)畫(huà)決定。

下面貼上左右切換的動(dòng)畫(huà)代碼：

android:toXDelta="0"

android:duration="1000"/>

android:toXDelta="-100%p"

android:duration="1000"/>

拆解功能二：實(shí)現(xiàn)指示器和子View切換的聯(lián)動(dòng)，在ViewFlipper控件中并沒(méi)有想ViewPager那樣對(duì)Pager改變的監(jiān)聽(tīng)，所以在這里是通過(guò)監(jiān)聽(tīng)動(dòng)畫(huà)來(lái)實(shí)現(xiàn)的：

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

@Override

public void onAnimationStart(Animation animation) {//在動(dòng)畫(huà)開(kāi)始監(jiān)聽(tīng)中執(zhí)行相關(guān)的邏輯

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

if (i == mViewFlipperTop.getDisplayedChild()) {//獲取當(dāng)前展示的子View

int finalI = i;

//開(kā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) {

}

});

最開(kāi)始的時(shí)候是在動(dòng)畫(huà)開(kāi)始的回調(diào)中直接進(jìn)行指示器的切換，因?yàn)樽覸iew切換有一個(gè)2s的動(dòng)畫(huà)過(guò)程，而指示器是在動(dòng)畫(huà)剛開(kāi)始就一下子跳轉(zhuǎn)了，看起來(lái)有點(diǎn)不協(xié)調(diào)，所以我在回調(diào)中開(kāi)啟了一個(gè)子線程，然后發(fā)送一個(gè)延時(shí)任務(wù)，這樣使得子View的切換和指示器的切換看起協(xié)調(diào)一些。

這里需要說(shuō)明的一點(diǎn)是：

通過(guò)方法getDisplayedChild()可以拿到當(dāng)前展示的子View，它返回的是一個(gè)int值，所以可以根據(jù)它和指示器容器中的子View關(guān)聯(lián)起來(lái)。

拆解功能三：子View的點(diǎn)擊事件，這個(gè)功能給我的第一想法就是通過(guò)ViewFlipper控件去獲取，但找了一圈發(fā)現(xiàn)并沒(méi)有提供相關(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)聽(tīng)，以此獲取到子View對(duì)應(yīng)的position，拿到了子View的position就能執(zhí)行很多其他的業(yè)務(wù)邏輯了。

以上就是對(duì)三個(gè)功能的拆解說(shuō)明。

最后，還有一個(gè)功能，用這個(gè)控件貌似效果不佳。功能就是ViewFlipper實(shí)現(xiàn)滑動(dòng)切換，這個(gè)功能還是比較常見(jiàn)，但在ViewFlipper中也沒(méi)有提供相關(guān)的接口，只有自己通過(guò)對(duì)滑動(dòng)事件進(jìn)行攔截，然后自定義，但實(shí)現(xiàn)的效果不佳，因此考慮用其他方法來(lái)實(shí)現(xiàn)，比如viewpager。

總結(jié)：ViewFlipper相比ViewPager使用起來(lái)要簡(jiǎn)單很多，但有些時(shí)候想要實(shí)現(xiàn)某些功能可能效果不是很理想，所以當(dāng)作一個(gè)知識(shí)儲(chǔ)備，如何取舍視具體情況而定。

總結(jié)

以上是生活随笔為你收集整理的android view flipper,安卓控件——ViewFlipper的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。