Android ViewSwitcher 的使用

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)系圖如下圖所示:

image.png

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)畫:

  1. android:inAnimation指定進(jìn)入時(shí)動(dòng)畫
  2. 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)切換登陸方式界面案例

手機(jī)快捷登錄
賬號(hào)密碼登錄

登陸界面布局:

<?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)畫功能耕捞。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末衔掸,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子俺抽,更是在濱河造成了極大的恐慌敞映,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,378評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件磷斧,死亡現(xiàn)場離奇詭異振愿,居然都是意外死亡捷犹,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2 382
  • 文/潘曉璐 我一進(jìn)店門冕末,熙熙樓的掌柜王于貴愁眉苦臉地迎上來萍歉,“玉大人,你說我怎么就攤上這事档桃∏购ⅲ” “怎么了?”我有些...
    開封第一講書人閱讀 152,702評論 0 342
  • 文/不壞的土叔 我叫張陵藻肄,是天一觀的道長蔑舞。 經(jīng)常有香客問我,道長嘹屯,這世上最難降的妖魔是什么攻询? 我笑而不...
    開封第一講書人閱讀 55,259評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮州弟,結(jié)果婚禮上钧栖,老公的妹妹穿的比我還像新娘。我一直安慰自己婆翔,他們只是感情好拯杠,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,263評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著浙滤,像睡著了一般阴挣。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上纺腊,一...
    開封第一講書人閱讀 49,036評論 1 285
  • 那天,我揣著相機(jī)與錄音茎芭,去河邊找鬼揖膜。 笑死,一個(gè)胖子當(dāng)著我的面吹牛梅桩,可吹牛的內(nèi)容都是我干的壹粟。 我是一名探鬼主播,決...
    沈念sama閱讀 38,349評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼宿百,長吁一口氣:“原來是場噩夢啊……” “哼趁仙!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起垦页,我...
    開封第一講書人閱讀 36,979評論 0 259
  • 序言:老撾萬榮一對情侶失蹤雀费,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后痊焊,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體盏袄,經(jīng)...
    沈念sama閱讀 43,469評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡忿峻,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,938評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了辕羽。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片逛尚。...
    茶點(diǎn)故事閱讀 38,059評論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖刁愿,靈堂內(nèi)的尸體忽然破棺而出绰寞,到底是詐尸還是另有隱情,我是刑警寧澤铣口,帶...
    沈念sama閱讀 33,703評論 4 323
  • 正文 年R本政府宣布克握,位于F島的核電站,受9級特大地震影響枷踏,放射性物質(zhì)發(fā)生泄漏菩暗。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,257評論 3 307
  • 文/蒙蒙 一旭蠕、第九天 我趴在偏房一處隱蔽的房頂上張望停团。 院中可真熱鬧,春花似錦掏熬、人聲如沸佑稠。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽舌胶。三九已至,卻和暖如春疮丛,著一層夾襖步出監(jiān)牢的瞬間幔嫂,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工誊薄, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留履恩,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,501評論 2 354
  • 正文 我出身青樓呢蔫,卻偏偏與公主長得像切心,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子片吊,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,792評論 2 345

推薦閱讀更多精彩內(nèi)容