ViewSwitcher
ViewSwitcher 代表了視圖切換組件, 本身繼承了FrameLayout ,可以將多個(gè)View疊在一起 ,每次只顯示一個(gè)組件.當(dāng)程序控制從一個(gè)View切換到另個(gè)View時(shí),ViewSwitcher 支持指定動(dòng)畫效果珊拼。
ViewAnimator是一個(gè)基類,它繼承了 FrameLayout,因此它表現(xiàn)出FrameLayout的特征寝优,可以將多個(gè)View組件疊在一起。 ViewAnimator額外增加的功能正如它的名字所暗示的一樣袖订,ViewAnimator可以在View切換時(shí)表現(xiàn)出動(dòng)畫效果钝诚。
iewAnimator及其子類的繼承關(guān)系圖如下圖所示:
ViewAnimator
ViewAnimator及其子類也是一組非常重要的UI組件,這種組件的主要功能是增加動(dòng)畫效果歇万,從而使界面更加炫。使用ViewAnimator 時(shí)可以指定如下常見XML屬性勋陪。
- android:animateFirstView:設(shè)置ViewAnimator顯示第一個(gè)View組件時(shí)是否使用動(dòng)畫贪磺。
- android:inAnimation:設(shè)置ViewAnimator顯示組件時(shí)所使用的動(dòng)畫。
- android:outAnimation:設(shè)置ViewAnimator隱藏組件時(shí)所使用的動(dòng)畫诅愚。
ViewSwitcher繼承ViewAnimator寒锚,主要用于視圖的切換:
public class ViewSwitcher extends ViewAnimator {
}
ViewSwitcher重寫了addView(View, int, ViewGroup.LayoutParams)方法,使其子控件不超過2個(gè):
/**
* {@inheritDoc}
*
* @throws IllegalStateException if this switcher already contains two children
*/
@Override
public void addView(View child, int index, ViewGroup.LayoutParams params) {
if (getChildCount() >= 2) {
throw new IllegalStateException("Can't add more than 2 views to a ViewSwitcher");
}
super.addView(child, index, params);
}
通過配置屬性指定切換動(dòng)畫:
- android:inAnimation指定進(jìn)入時(shí)動(dòng)畫
- android:outAnimation指定退出時(shí)動(dòng)畫
調(diào)用ViewSwitcher的showNext()和showPrevious()來實(shí)現(xiàn)視圖的切換违孝。
setFactory設(shè)置視圖
ViewSwitcher中setFactory(ViewFactory)方法設(shè)置了子視圖刹前,調(diào)用obtainView()方法添加了兩個(gè)子控件。
public void setFactory(ViewFactory factory) {
mFactory = factory;
obtainView();
obtainView();
}
private View obtainView() {
View child = mFactory.makeView();
LayoutParams lp = (LayoutParams) child.getLayoutParams();
if (lp == null) {
lp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
}
addView(child, lp);
return child;
}
public interface ViewFactory {
/**
* Creates a new {@link android.view.View} to be added in a
* {@link android.widget.ViewSwitcher}.
*
* @return a {@link android.view.View}
*/
View makeView();
}
ViewSwitcher的使用
切換圖片案例:
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<data>
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.ViewSwitcherDemoActivity">
<!-- ViewSwitcher子控件不能超過2個(gè) -->
<ViewSwitcher
android:id="@+id/view_switcher"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inAnimation="@anim/anim_enter_from_bottom"
android:outAnimation="@anim/anim_exit_to_top"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="fitXY"
android:src="@drawable/pic1" />
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="fitXY"
android:src="@drawable/pic2" />
</ViewSwitcher>
<androidx.appcompat.widget.AppCompatButton
android:id="@+id/btn_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="showNext"
android:textAllCaps="false"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/view_switcher" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
public class ViewSwitcherDemoActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_switcher_demo);
ActivityViewSwitcherDemoBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_view_switcher_demo);
binding.btnNext.setOnClickListener(v -> {
binding.viewSwitcher.showNext();
});
}
}
進(jìn)入動(dòng)畫anim_enter_from_bottom.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%" />
</set>
退出動(dòng)畫anim_exit_to_top.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromYDelta="0"
android:toYDelta="-100%"
android:duration="1000" />
動(dòng)態(tài)給ViewSwitcher添加子View
//動(dòng)態(tài)給ViewSwitcher添加子View
binding.viewSwitcher.setFactory(() -> {
ImageView iv = new ImageView(ViewSwitcherDemoActivity.this);
iv.setImageResource(R.drawable.pic1);
iv.setScaleType(ImageView.ScaleType.FIT_XY);
iv.setLayoutParams(new FrameLayout.LayoutParams(-1, Utils.dip2px(200)));
return iv;
});
binding.btnNext.setOnClickListener(v -> {
if (binding.viewSwitcher.getDisplayedChild() == 0) {
ImageView iv = (ImageView) binding.viewSwitcher.getChildAt(1);
iv.setImageResource(R.drawable.pic2);
binding.viewSwitcher.showNext();
} else {
binding.viewSwitcher.showPrevious();
}
});
多個(gè)視圖切換
有多個(gè)視圖需要時(shí)雌桑,需要自定義next()和previous()方法喇喉。
為了給ViewSwitcher 添加多個(gè)組件, 一般通過ViewSwitcher 的setFactory 方法為止設(shè)置ViewFactory ,并由ViewFactory為之創(chuàng)建View 即可.
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<data>
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.ViewSwitcherDemoActivity">
<!-- ViewSwitcher子控件不能超過2個(gè) -->
<ViewSwitcher
android:id="@+id/view_switcher"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inAnimation="@anim/anim_enter_from_bottom"
android:outAnimation="@anim/anim_exit_to_top"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent">
</ViewSwitcher>
<androidx.appcompat.widget.AppCompatButton
android:id="@+id/btn_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="showNext"
android:textAllCaps="false"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/view_switcher" />
<androidx.appcompat.widget.AppCompatButton
android:id="@+id/btn_previous"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="showPrevious"
android:textAllCaps="false"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/btn_next" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
public class ViewSwitcherDemoActivity extends AppCompatActivity {
private ActivityViewSwitcherDemoBinding mBinding;
private int[] mResIdArray = {
R.drawable.pic1,
R.drawable.pic2,
R.drawable.pic3
};
private int mCount = mResIdArray.length;
private int mPosition = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_switcher_demo);
mBinding = DataBindingUtil.setContentView(this, R.layout.activity_view_switcher_demo);
mBinding.viewSwitcher.setFactory(() -> {
ImageView iv = new ImageView(ViewSwitcherDemoActivity.this);
iv.setScaleType(ImageView.ScaleType.FIT_XY);
iv.setImageResource(mResIdArray[0]);
iv.setLayoutParams(new FrameLayout.LayoutParams(-1, Utils.dip2px(200)));
return iv;
});
//下一張
mBinding.btnNext.setOnClickListener(v -> next());
//上一張
mBinding.btnPrevious.setOnClickListener(v -> previous());
}
private void next() {
++mPosition;
setSelection((ImageView) mBinding.viewSwitcher.getNextView());
mBinding.viewSwitcher.setInAnimation(this, R.anim.anim_enter_from_bottom);
mBinding.viewSwitcher.setOutAnimation(this, R.anim.anim_exit_to_top);
mBinding.viewSwitcher.showNext();
}
private void previous() {
--mPosition;
setSelection((ImageView) mBinding.viewSwitcher.getNextView());
mBinding.viewSwitcher.setInAnimation(this, R.anim.anim_enter_from_top);
mBinding.viewSwitcher.setOutAnimation(this, R.anim.anim_exit_to_bottom);
mBinding.viewSwitcher.showPrevious();
}
private void setSelection(ImageView imageView) {
if (mPosition < 0) {
mPosition = mCount - 1;
} else if (mPosition >= mCount) {
mPosition = 0;
}
imageView.setImageResource(mResIdArray[mPosition]);
}
}
進(jìn)入動(dòng)畫anim_enter_from_top.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromYDelta="-100%"
android:toYDelta="0"
android:duration="1000" />
退出動(dòng)畫anim_exit_to_bottom.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromYDelta="0"
android:duration="1000"
android:toYDelta="100%" />
ViewSwitcher實(shí)現(xiàn)切換登陸方式界面案例
登陸界面布局:
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<data>
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.ViewSwitcherActivity">
<TextView
android:id="@+id/tv_login_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:gravity="center"
android:paddingBottom="50dp"
android:text="登陸"
android:textSize="20sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ViewSwitcher
android:id="@+id/vs_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="36dp"
android:animateFirstView="true"
android:inAnimation="@anim/slide_in_from_left"
android:outAnimation="@anim/slide_out_to_left"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="@id/tv_login_title">
<!--手機(jī)快捷登錄-->
<include
android:id="@+id/in_phone_input"
layout="@layout/login_by_phone_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!--賬號(hào)密碼登陸-->
<include
android:id="@+id/in_phone_pwd_input"
layout="@layout/login_by_pwd_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</ViewSwitcher>
<androidx.appcompat.widget.AppCompatButton
android:id="@+id/btn_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="登陸"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="@id/vs_input" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/tv_switch_login_type"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="賬號(hào)密碼登陸"
android:textSize="16sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="@id/btn_login" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
ViewSwitcherActivity
public class ViewSwitcherActivity extends AppCompatActivity {
private ActivityViewSwitcherBinding mBinding;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mBinding = DataBindingUtil.setContentView(this, R.layout.activity_view_switcher);
mBinding.tvSwitchLoginType.setOnClickListener(v -> {
if (mBinding.vsInput.getDisplayedChild() == 0) {
showPwd();
mBinding.tvSwitchLoginType.setText("手機(jī)快捷登錄");
} else {
showPhone();
mBinding.tvSwitchLoginType.setText("賬號(hào)密碼登陸");
}
});
}
private void showPwd() {
mBinding.vsInput.setInAnimation(this, R.anim.slide_in_from_right);
mBinding.vsInput.setOutAnimation(this, R.anim.slide_out_to_left);
mBinding.vsInput.showNext();
}
private void showPhone() {
mBinding.vsInput.setInAnimation(this, R.anim.slide_in_from_left);
mBinding.vsInput.setOutAnimation(this, R.anim.slide_out_to_right);
mBinding.vsInput.showPrevious();
}
}
slide_in_from_right.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="250"
android:fromXDelta="100%p"
android:toYDelta="0%p" />
</set>
slide_out_to_right.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="250"
android:fromXDelta="0.0%p"
android:toXDelta="100%p" />
</set>
slide_in_from_left.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="250"
android:fromXDelta="-100%p"
android:toXDelta="0.0%p" />
</set>
slide_out_to_left.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="250"
android:fromXDelta="0.0%p"
android:toXDelta="-100%p" />
</set>
ViewFlipper類
ViewFlipper繼承ViewAnimator,用于視圖的輪播校坑。
- android:flipInterval指定輪播間隔時(shí)間
- android:autoStart是否自動(dòng)開始輪播
- android:inAnimation指定進(jìn)入時(shí)動(dòng)畫
- android:outAnimation指定退出時(shí)動(dòng)畫
<ViewFlipper
android:id="@+id/view_flipper"
android:layout_width="match_parent"
android:layout_height="200dp"
android:autoStart="true"
android:flipInterval="2000"
android:inAnimation="@anim/slide_in_from_right"
android:outAnimation="@anim/slide_out_to_left"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@drawable/pic1" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@drawable/pic2" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@drawable/pic3" />
</ViewFlipper>
主要方法:
startFlipping()用于手動(dòng)開始輪播拣技,而stopFlipping()則停止輪播。
showNext()和showPrevious()顯示視圖的切換耍目。
// 顯示上一個(gè)視圖
private void previous() {
mViewFlipper.stopFlipping();
mViewFlipper.setInAnimation(this, R.anim.anim_enter_from_top);
mViewFlipper.setOutAnimation(this, R.anim.anim_exit_to_bottom);
mViewFlipper.showPrevious();
}
// 手動(dòng)開始輪播
private void play() {
mViewFlipper.setInAnimation(this, R.anim.anim_enter_from_bottom);
mViewFlipper.setOutAnimation(this, R.anim.anim_exit_to_top);
mViewFlipper.startFlipping();
}
// 顯示下一個(gè)視圖
private void next() {
mViewFlipper.stopFlipping();
mViewFlipper.setInAnimation(this, R.anim.anim_enter_from_bottom);
mViewFlipper.setOutAnimation(this, R.anim.anim_exit_to_top);
mViewFlipper.showNext();
}
TextSwitcher和ImageSwitcher
ImageSwitcher和TextSwitcher的繼承關(guān)系是一樣的膏斤。兩個(gè)重要的父類:ViewSwitcher和ViewAnimator。
繼承于ViewSwitcher邪驮,說明具備了切換功能莫辨,
繼承于ViewAnimator,說明具備了動(dòng)畫功能耕捞。