ViewFlipper的学习，实现公告轮播条，界面切换动画的效果

作者: 再忙碌也解不了爱的渴 | 来源:发表于2017-02-28 15:41 被阅读328次

简要概括

在我们平常开发中，其实很多效果都可以用原生的控件来实现，只是我们可能不太知道。我在开发中碰到了一个有意思的控件，就是ViewFilpper。可以用来实现很多效果，比如公告条，导航页的切换，同一个布局不同的展示效果，等等。

效果图（类似广告条的效果）

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>```

- #####代码实现

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设置内容
    for(int i = 0; i<mList.size();i++){
        viewFlipper.addView(mList.get(i));
    }
    //给ViewFlipper设置in/out的动画效果
    viewFlipper.setInAnimation(this,R.anim.push_up_in);
    viewFlipper.setOutAnimation(this,R.anim.push_up_out);

   //isFlipping： 用来判断View切换是否正在进行
   //setFilpInterval：设置View之间切换的时间间隔
   //startFlipping：使用上面设置的时间间隔来开始切换所有的View，切换会循环进行
   //stopFlipping: 停止View切换
    
    viewFlipper.startFlipping();
}

/**
 * 获取数据，在实际开发中可对服务器返回的数据进行解析
 */
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了一下，实际开发中可以跳转到指定的页面
                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](https://img.haomeiwen.com/i4036989/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="通过手机号发送验证码方式注册账户"
            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="请设置您的交易密码"
                    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="确认密码"
                    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="交易密码长度应在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>

代码实现

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);
        //设置gif图
        gifView.setGifImage(R.drawable.love);
        //设置显示的大小，拉伸或压缩
        gifView.setShowDimension(500,500);
        //设置显示方式
        gifView.setGifImageType(GifView.GifImageType.COVER);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.btn_first_confirm://第一步确定按钮
                //setDisplayedChild(index) 根据索引显示子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;
        }
    }
}

还可以实现某些效果，有时间再补充。

总结

在平常可发中有很多效果都可以用Andorid原生的控件来实现，只是我们可能不知道，这也省去了我们很多时间，去自定义实现，总结下来,ViewFlipper还是一个很好用的控件。
前人栽树，后人乘凉，还是要感谢一下前辈的无私，Gif图的加载播放用的是GifView.jar,还有一个进度条是xlhstepview，自己修改了一下。有什么不足的地方希望指正，大家一起讨论学习。

ViewFlipper的学习，实现公告轮播条，界面切换动画的效果

简要概括

效果图（类似广告条的效果）

来看看我们的布局

这里注意的是ViewFlipper 每个子View外层父控件都是LinearLayout。

用到的动画

enter_right_in

enter_right_out

代码实现

还可以实现某些效果，有时间再补充。

总结

在平常可发中有很多效果都可以用Andorid原生的控件来实现，只是我们可能不知道，这也省去了我们很多时间，去自定义实现，总结下来,ViewFlipper还是一个很好用的控件。

前人栽树，后人乘凉，还是要感谢一下前辈的无私，Gif图的加载播放用的是GifView.jar,还有一个进度条是xlhstepview，自己修改了一下。有什么不足的地方希望指正，大家一起讨论学习。

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

android经验积累

android进阶之旅

常用控件