ViewFlipper的學(xué)習(xí)壹士，實現(xiàn)公告輪播條，界面切換動畫的效果...

簡要概括

在我們平常開發(fā)中偿警，其實很多效果都可以用原生的控件來實現(xiàn)躏救，只是我們可能不太知道。我在開發(fā)中碰到了一個有意思的控件螟蒸，就是ViewFilpper盒使。可以用來實現(xiàn)很多效果七嫌，比如公告條少办，導(dǎo)航頁的切換，同一個布局不同的展示效果诵原，等等英妓。

效果圖（類似廣告條的效果）

ViewFlipper.gif

來看看我們的布局

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_centerVertical="true"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="15dp"
            android:src="@drawable/home_platform_notice" />
        <View
            android:layout_width="1px"
            android:layout_height="20dp"
            android:layout_marginLeft="5dp"
            android:background="#D9D9D9" />
        <ViewFlipper
            android:id="@+id/viewfli"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:background="#f6f6f6"/>
    </LinearLayout>```

- #####代碼實現(xiàn)

public class MainActivity extends AppCompatActivity {

private ViewFlipper viewFlipper;
private List<TextView> mList;
private String[]  des = new String[]{"盈盈一水間，脈脈不得語绍赛。"
,"我渴望和你打架蔓纠，也渴望抱抱你。","醒來覺得甚是愛你吗蚌。"};

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    viewFlipper = (ViewFlipper) findViewById(R.id.viewfli);
    initData();

    //給ViewFlipper設(shè)置內(nèi)容
    for(int i = 0; i<mList.size();i++){
        viewFlipper.addView(mList.get(i));
    }
    //給ViewFlipper設(shè)置in/out的動畫效果
    viewFlipper.setInAnimation(this,R.anim.push_up_in);
    viewFlipper.setOutAnimation(this,R.anim.push_up_out);

   //isFlipping： 用來判斷View切換是否正在進(jìn)行
   //setFilpInterval：設(shè)置View之間切換的時間間隔
   //startFlipping：使用上面設(shè)置的時間間隔來開始切換所有的View腿倚，切換會循環(huán)進(jìn)行
   //stopFlipping: 停止View切換
    
    viewFlipper.startFlipping();
}

/**
 * 獲取數(shù)據(jù)，在實際開發(fā)中可對服務(wù)器返回的數(shù)據(jù)進(jìn)行解析
 */
private void initData() {
    mList = new ArrayList<TextView>();
    for(int i = 0 ; i<des.length; i++){
        TextView tv = new TextView(this);
        tv.setTextSize(24);
        tv.setTextColor(getResources().getColor(R.color.colorAccent));
        tv.setText(des[i]);
        tv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //這里只是Toast了一下蚯妇，實際開發(fā)中可以跳轉(zhuǎn)到指定的頁面
                Toast.makeText(MainActivity.this,"do Something",Toast.LENGTH_SHORT).show();
            }
        });
        mList.add(tv);
    }
}

}

#####用到的動畫
- #####push_up_in

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
　　<translate android:fromYDelta="100%p" android:toYDelta="0" android:duration="500"/>
　　<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="500" />
</set>

- #####push_up_in

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
　　<translate android:fromYDelta="0" android:toYDelta="-100%p" android:duration="500"/>
　　　<alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="500" />
</set>

- ####效果圖（界面切換的效果,先在布局中寫好顯示的View）

![View2.gif](http://upload-images.jianshu.io/upload_images/4036989-8d8f052cc5911b92.gif?imageMogr2/auto-orient/strip)

- #####來看看我們的布局

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:xlh="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"

<com.ant.liao.GifView
    android:id="@+id/gif_view"
    android:layout_width="match_parent"
    android:layout_height="400dp"
    android:layout_centerInParent="true"/>

<com.example.administrator.viewflipper.view.DepositoryStepView
    android:id="@+id/depository_step_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="54dp"
    android:layout_marginRight="54dp"
    android:layout_marginTop="16dp"
    xlh:barColors="#FFDDDDDD"
    xlh:canDrag="false"
    xlh:currentStep="0"
    xlh:progressColor="#FF34C3B7"
    xlh:stepCount="3"
    xlh:stepNormalColor="#FFDDDDDD"
    xlh:stepSelectedColor="#FF34C3B7" >
</com.example.administrator.viewflipper.view.DepositoryStepView>

<ViewFlipper
    android:id="@+id/view_flipper"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:flipInterval="300"
    android:layout_marginTop="16dp"
    android:inAnimation="@anim/enter_right_in"
    android:outAnimation="@anim/exit_left_out"
    android:persistentDrawingCache="animation">

    <!--第一步-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:background="#FFFFFF"
            android:paddingLeft="15dp"
            >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:paddingTop="15dp"
                >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="姓名"
                    android:paddingRight="33dp"
                    android:textSize="16sp"/>

                <EditText
                    android:id="@+id/et_input_name"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@null"
                    android:hint="請輸入您的真實姓名"
                    android:maxLength="6"
                    android:singleLine="true"
                    android:textSize="16sp"/>

            </LinearLayout>


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:paddingBottom="11dp"
                android:paddingTop="15dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="手機號"
                    android:paddingRight="17dp"
                    android:textSize="16sp"/>

                <EditText
                    android:id="@+id/et_input_phone"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@null"
                    android:hint="請輸入手機號"
                    android:maxLength="11"
                    android:inputType="number"
                    android:singleLine="true"
                    android:textSize="16sp"/>
            </LinearLayout>
        </LinearLayout>
        <Button
            android:id="@+id/btn_first_confirm"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="確定"
            android:layout_marginRight="15dp"
            android:textSize="18sp"
            android:layout_marginLeft="15dp"
            android:paddingTop="7.5dp"
            android:paddingBottom="7.5dp"
            android:layout_marginTop="13.5dp"
            />

    </LinearLayout>
    <!--第二步-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:background="#ffffff"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="9dp"
            android:paddingLeft="15dp"
            android:text="通過手機號發(fā)送驗證碼方式注冊賬戶"
            android:textSize="12sp"
            />

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="9dp"
            android:orientation="horizontal"
            android:paddingLeft="15dp"
            android:paddingRight="15dp">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingTop="14dp"
                android:paddingBottom="14dp"
                >
                <EditText
                    android:id="@+id/et_input_sms"
                    style="@style/EditTextStyle"
                    android:hint="短信驗證碼"
                    android:inputType="number"
                    android:gravity="left"
                    android:drawableBottom="@null"
                    android:maxLength="6"
                    android:textColorHint="#FF999999"/>

                <Button
                    android:id="@+id/btn_obtain"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:background="#ffffff"
                    android:text="獲取驗證碼"
                    android:textColor="#FFF64C3E"
                    android:textSize="14sp"/>

            </RelativeLayout>
        </LinearLayout>

        <Button
            android:id="@+id/btn_second_confirm"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="確定"
            android:layout_marginRight="15dp"
            android:textSize="18sp"
            android:layout_marginLeft="15dp"
            android:paddingTop="7.5dp"
            android:paddingBottom="7.5dp"
            android:layout_marginTop="40dp"
            />

    </LinearLayout>
    <!--第三步-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingLeft="15dp"
            >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:paddingTop="15dp"
                >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="交易密碼"
                    android:paddingRight="16dp"
                    android:textSize="16sp"/>

                <EditText
                    android:id="@+id/et_input_password"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@null"
                    android:hint="請設(shè)置您的交易密碼"
                    android:maxLength="20"
                    android:singleLine="true"
                    android:textSize="16sp"/>

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:paddingBottom="11dp"
                android:paddingTop="15dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="確認(rèn)密碼"
                    android:paddingRight="16dp"
                    android:textSize="16sp"/>

                <EditText
                    android:id="@+id/et_confirm"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@null"
                    android:hint="請再次輸入您的交易密碼"
                    android:maxLength="20"
                    android:singleLine="true"
                    android:textSize="16sp"/>
            </LinearLayout>

        </LinearLayout>

        <TextView
            android:id="@+id/tv_length"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="9dp"
            android:paddingLeft="15dp"
            android:text="交易密碼長度應(yīng)在6-20個字符之間 (0/20)"
            android:textSize="12sp"
            />

        <Button
            android:id="@+id/btn_three_confirm"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="確定"
            android:layout_marginRight="15dp"
            android:textSize="18sp"
            android:layout_marginLeft="15dp"
            android:paddingTop="7.5dp"
            android:paddingBottom="7.5dp"
            android:layout_marginTop="13.5dp"
            />

    </LinearLayout>
</ViewFlipper>

</LinearLayout>```

這里注意的是ViewFlipper 每個子View外層父控件都是LinearLayout敷燎。

用到的動畫

enter_right_in

<?xml version="1.0" encoding="utf-8"?>
<set 
xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="300"
        android:fillAfter="true"
        android:fromXDelta="100.0%p"
        android:toXDelta="0.0" />
</set>

enter_right_out

<?xml version="1.0" encoding="utf-8"?>
<set 
xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="300"
        android:fromXDelta="0.0"
        android:toXDelta="-100.0%p" />
</set>

代碼實現(xiàn)

public class Main2Activity extends AppCompatActivity implements View.OnClickListener {

    private GifView gifView;
    private ViewFlipper viewFlipper;
    private Button btn1;
    private DepositoryStepView depositoryStepView;
    private Button btn2;
    private Button btn3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        initGifView();
        initView();
    }

    /**
     * 初始化控件
     */
    private void initView() {
        viewFlipper = (ViewFlipper) findViewById(R.id.view_flipper);
        depositoryStepView = (DepositoryStepView) findViewById(R.id.depository_step_view);
        btn1        = (Button) findViewById(R.id.btn_first_confirm);
        btn1.setOnClickListener(this);
        btn2 = (Button) findViewById(R.id.btn_second_confirm);
        btn2.setOnClickListener(this);
        btn3 = (Button) findViewById(R.id.btn_three_confirm);
        btn3.setOnClickListener(this);
    }

    /**
     * 播放Gif圖動畫
     */
    private void initGifView() {
        gifView = (GifView) findViewById(R.id.gif_view);
        //設(shè)置gif圖
        gifView.setGifImage(R.drawable.love);
        //設(shè)置顯示的大小暂筝，拉伸或壓縮
        gifView.setShowDimension(500,500);
        //設(shè)置顯示方式
        gifView.setGifImageType(GifView.GifImageType.COVER);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.btn_first_confirm://第一步確定按鈕
                //setDisplayedChild(index) 根據(jù)索引顯示子View
                //showPrevious(); 顯示上一個
                //showNext()； 顯示下一個
                viewFlipper.setDisplayedChild(1);
                depositoryStepView.setCurrentStep(1);
                break;

            case R.id.btn_second_confirm://第二步確定按鈕
                viewFlipper.setDisplayedChild(2);
                depositoryStepView.setCurrentStep(2);
                break;

            case R.id.btn_three_confirm://第三步確定按鈕
                viewFlipper.setDisplayedChild(0);
                depositoryStepView.setCurrentStep(0);
                break;
        }
    }
}

還可以實現(xiàn)某些效果硬贯，有時間再補充乖杠。

總結(jié)

在平常可發(fā)中有很多效果都可以用Andorid原生的控件來實現(xiàn)澄成，只是我們可能不知道胧洒，這也省去了我們很多時間，去自定義實現(xiàn)墨状，總結(jié)下來,ViewFlipper還是一個很好用的控件卫漫。
前人栽樹，后人乘涼肾砂，還是要感謝一下前輩的無私列赎，Gif圖的加載播放用的是GifView.jar,還有一個進(jìn)度條是xlhstepview，自己修改了一下镐确。有什么不足的地方希望指正包吝，大家一起討論學(xué)習(xí)。

最后編輯于：2017.12.06 01:21:22

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末源葫，一起剝皮案震驚了整個濱河市诗越，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌息堂，老刑警劉巖嚷狞，帶你破解...
沈念sama閱讀 206,482評論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異荣堰，居然都是意外死亡床未，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,377評論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門振坚，熙熙樓的掌柜王于貴愁眉苦臉地迎上來薇搁，“玉大人，你說我怎么就攤上這事渡八】醒螅” “怎么了？”我有些...
開封第一講書人閱讀 152,762評論 0贊 342
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵呀狼，是天一觀的道長裂允。經(jīng)常有香客問我，道長哥艇，這世上最難降的妖魔是什么绝编？我笑而不...
開封第一講書人閱讀 55,273評論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結(jié)果婚禮上十饥，老公的妹妹穿的比我還像新娘窟勃。我一直安慰自己，他們只是感情好逗堵，可當(dāng)我...
茶點故事閱讀 64,289評論 5贊 373
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布秉氧。她就那樣靜靜地躺著，像睡著了一般蜒秤。火紅的嫁衣襯著肌膚如雪汁咏。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,046評論 1贊 285
城市分裂傳說
那天作媚，我揣著相機與錄音攘滩，去河邊找鬼。笑死纸泡，一個胖子當(dāng)著我的面吹牛漂问，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播女揭，決...
沈念sama閱讀 38,351評論 3贊 400
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼蚤假，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了吧兔？” 一聲冷哼從身側(cè)響起磷仰，我...
開封第一講書人閱讀 36,988評論 0贊 259
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎掩驱，沒想到半個月后芒划，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 43,476評論 1贊 300
?護(hù)林員之死
正文獨居荒郊野嶺守林人離奇死亡欧穴，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 35,948評論 2贊 324
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了泵殴。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片涮帘。...
茶點故事閱讀 38,064評論 1贊 333
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖笑诅，靈堂內(nèi)的尸體忽然破棺而出调缨，到底是詐尸還是另有隱情，我是刑警寧澤吆你，帶...
沈念sama閱讀 33,712評論 4贊 323
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布弦叶，位于F島的核電站，受9級特大地震影響妇多，放射性物質(zhì)發(fā)生泄漏伤哺。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 39,261評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望立莉。院中可真熱鬧绢彤，春花似錦、人聲如沸蜓耻。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,264評論 0贊 19
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽刹淌。三九已至饶氏，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間有勾，已是汗流浹背嚷往。一陣腳步聲響...
開封第一講書人閱讀 31,486評論 1贊 262
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留柠衅，地道東北人皮仁。一個月前我還...
沈念sama閱讀 45,511評論 2贊 354
代替公主和親
正文我出身青樓，卻偏偏與公主長得像菲宴，于是被迫代替她去往敵國和親贷祈。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 42,802評論 2贊 345

ViewFlipper的學(xué)習(xí)显晶，實現(xiàn)公告輪播條贷岸，界面切換動畫的效果...

ViewFlipper的學(xué)習(xí)壹士，實現(xiàn)公告輪播條，界面切換動畫的效果...

簡要概括

效果圖（類似廣告條的效果）

來看看我們的布局

這里注意的是ViewFlipper 每個子View外層父控件都是LinearLayout敷燎。

用到的動畫

enter_right_in

enter_right_out

代碼實現(xiàn)

還可以實現(xiàn)某些效果硬贯，有時間再補充乖杠。

總結(jié)

在平常可發(fā)中有很多效果都可以用Andorid原生的控件來實現(xiàn)澄成，只是我們可能不知道胧洒，這也省去了我們很多時間，去自定義實現(xiàn)墨状，總結(jié)下來,ViewFlipper還是一個很好用的控件卫漫。

前人栽樹，后人乘涼肾砂，還是要感謝一下前輩的無私列赎，Gif圖的加載播放用的是GifView.jar,還有一個進(jìn)度條是xlhstepview，自己修改了一下镐确。有什么不足的地方希望指正包吝，大家一起討論學(xué)習(xí)。

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