效果如下圖:
之前一看到滾動展示第一反應就是想到RecyclerView動態滾動,但是發現不常用的 ViewFlipper 解鎖了新姿勢,因爲它也可以實現,而且更方便、更快捷,代碼簡單
廢話不多說,直接上代碼
步驟:
1、在xml 中添加 ViewFlipper 控件,設置好其屬性,其重要屬性如下:
android:autoStart: 設置自動加載下一個View
android:flipInterval:設置View之間切換的時間間隔
android:inAnimation: 設置切換View的進入動畫
android:outAnimation:設置切換View的退出動畫
在java中也可實現
isFlipping: 判斷View切換是否正在進行
setFilpInterval:設置View之間切換的時間間隔
startFlipping: 開始View的切換,而且會循環進行
stopFlipping: 停止View的切換
setOutAnimation:設置切換View的退出動畫
setInAnimation: 設置切換View的進入動畫
showNext: 顯示ViewFlipper裏的下一個View
showPrevious: 顯示ViewFlipper裏的上一個View
2、res中新建anim文件夾,在其下創建進入和離開時的動畫,將其設置進 ViewFlipper
3、沒有了,,,就這麼簡單
## 在此用了兩種方法爲ViewFlipper添加子控件,第一種是靜態:直接在佈局中添加,第二種:在代碼中addView。肯定是第二種更實用撒
代碼如下:
1、在xml 中添加 ViewFlipper 控件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<ViewFlipper
android:id="@+id/flipper_multi"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:autoStart="true"
android:flipInterval="3000"
android:outAnimation="@anim/top_out"
android:inAnimation="@anim/bottom_in"/>
<ViewFlipper
android:id="@+id/flipper_single"
android:layout_marginTop="100dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:flipInterval="2000"
android:autoStart="true"
android:inAnimation="@anim/right_in"
android:outAnimation="@anim/left_out">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal">
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#000" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="我是第一個滾動條"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal">
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#960909" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="我是第二個滾動條"
android:textSize="20sp" />
</LinearLayout>
</ViewFlipper>
</LinearLayout>
2、res中新建anim文件夾,在其下創建進入和離開時的動畫
top_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="1000"
android:fromYDelta="0%p"
android:toYDelta="-100%p" />
</set>
bottom_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="1000"
android:fromYDelta="100%p"
android:toYDelta="0%p" />
</set>
left_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="1000"
android:fromXDelta="0%p"
android:toXDelta="-100%p" />
</set>
right_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="100%p"
android:toXDelta="0%p"
android:duration="1000" />
</set>
main
package com.leixiansheng.viewflipper;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.ViewFlipper;
public class MainActivity extends AppCompatActivity {
private ViewFlipper mFlipper;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
mFlipper = findViewById(R.id.flipper_multi);
for (int i = 0; i < 5; i++) {
//動態添加viewFlipper 元素
View view = LayoutInflater.from(this).inflate(R.layout.item_flipper, null);
TextView tvTop = view.findViewById(R.id.tv_content_top);
TextView tvBottom = view.findViewById(R.id.tv_content_bottom);
tvTop.setText("我是第" + (1 + i * 2) + "個滾動條");
tvBottom.setText("我是第" + (2 + i * 2) + "個滾動條");
tvTop.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
TextView tv = (TextView) view;
toast(tv.getText().toString());
}
});
tvBottom.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
TextView tv = (TextView) view;
toast(tv.getText().toString());
}
});
mFlipper.addView(view);
}
}
private void toast(String str){
Toast.makeText(this,str,Toast.LENGTH_SHORT).show();
}
}