android view flipper,安卓控件——ViewFlipper
今天在逛博客的時候又學習到一個新控件，就是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使用起來要簡單很多，但有些時候想要實現某些功能可能效果不是很理想，所以當作一個知識儲備，如何取舍視具體情況而定。
總結
以上是生活随笔為你收集整理的android view flipper,安卓控件——ViewFlipper的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android自动创建桌面,Androi
- 下一篇： android lint 空指针,Har