ViewFlipper的学习，实现公告轮播条，界面切换动画的效果
2017-02-28 本文已影响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）
- #####来看看我们的布局
<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，自己修改了一下。有什么不足的地方希望指正，大家一起讨论学习。
