一般应用场景:
(1)广告轮播图。
(2)通知列表循环滚动。(循环滚动方向:横向,竖向。)
实现方式:
(1)使用ViewFlipper实现。
(2)使用AdapterViewFlipper实现。(只能实现垂直方向的循环滚动效果,如果宽度固定(数值),那么也可以实现水平方向的循环滚动效果)
备注:以上两种的区别主要是,ViewFlipper通过AddView()方法添加子View,而AdapterViewFlipper则是通过Adapter适配器来添加子View,样式上更加的灵活。
效果图如下:
第一种实现方式:(ViewFlipper)
1、layout布局代码如下:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorLightGray"> <!--轮播图--> <ViewFlipper android:id="@+id/ViewFlipperBase_vFlipperScrollH" android:layout_width="match_parent" android:layout_height="200dp" android:background="@color/colorWhite"></ViewFlipper> <!--通知循环滚动(垂直方向)--> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_marginTop="50dp" android:background="@color/colorWhite" android:gravity="center_vertical" android:paddingLeft="@dimen/dk_font_size_10" android:paddingRight="@dimen/dk_font_size_10"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="重要通知:" android:textColor="@color/colorBlack" android:textStyle="bold" /> <ViewFlipper android:id="@+id/ViewFlipperBase_vFlipperScrollV" android:layout_width="match_parent" android:layout_height="40dp"></ViewFlipper> </LinearLayout> <!--通知循环滚动(水平方向)--> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_marginTop="50dp" android:background="@color/colorWhite" android:gravity="center_vertical" android:paddingLeft="@dimen/dk_font_size_10" android:paddingRight="@dimen/dk_font_size_10"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="重要通知:" android:textColor="@color/colorBlack" android:textStyle="bold"/> <ViewFlipper android:id="@+id/ViewFlipperBase_vFlipperScrollVT" android:layout_width="match_parent" android:layout_height="40dp"></ViewFlipper> </LinearLayout> </LinearLayout>
2、Activity中逻辑代码如下:
public class ViewFlipperBaseActivity extends BaseActivity { private Context mContext; private ViewFlipper vFlipperScrollH, vFlipperScrollV, vFlipperScrollVT; //基本变量 //图片数组 private int[] arrayPic = new int[] {R.mipmap.fengjing01, R.mipmap.fengjing02, R.mipmap.fengjing03}; //通知数组 private String[] arrayNotice = new String[] {"东北大鹌鹑有点嘟嘟嘟。", "芜湖大司马有点捞。", "余小C着实有点强啊。"}; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_viewflipper_base); baseDataInit(); bindViews(); viewsAddListener(); viewsDataInit(); } @Override public void baseDataInit() { mContext = this; } @Override public void bindViews() { vFlipperScrollH = findViewById(R.id.ViewFlipperBase_vFlipperScrollH); vFlipperScrollV = findViewById(R.id.ViewFlipperBase_vFlipperScrollV); vFlipperScrollVT = findViewById(R.id.ViewFlipperBase_vFlipperScrollVT); } @Override public void viewsAddListener() { } @Override public void viewsDataInit() { //轮播图(广告) vFlipperScrollH.setFlipInterval(5000); vFlipperScrollH.setInAnimation(mContext, R.anim.anim_come_in_h); vFlipperScrollH.setOutAnimation(mContext, R.anim.anim_get_out_h); for (int i = 0; i < arrayPic.length; i ++) { vFlipperScrollH.addView(getImageView(arrayPic[i])); } vFlipperScrollH.startFlipping(); //垂直循环滚动(通知之类的) vFlipperScrollV.setFlipInterval(5000); vFlipperScrollV.setInAnimation(mContext, R.anim.anim_come_in_v); vFlipperScrollV.setOutAnimation(mContext, R.anim.anim_get_out_v); for (int i = 0; i < arrayNotice.length; i ++) { View view = LayoutInflater.from(mContext).inflate(R.layout.layout_item_custom, null,false); TextView tvContent = view.findViewById(R.id.Layout_Item_tvContent); tvContent.setText(arrayNotice[i]); vFlipperScrollV.addView(view); } vFlipperScrollV.startFlipping(); //水平循环滚动(通知之类的) vFlipperScrollVT.setFlipInterval(5000); vFlipperScrollVT.setInAnimation(mContext, R.anim.anim_come_in_h); vFlipperScrollVT.setOutAnimation(mContext, R.anim.anim_get_out_h); for (int i = 0; i < arrayNotice.length; i ++) { View view = LayoutInflater.from(mContext).inflate(R.layout.layout_item_custom, null,false); TextView tvContent = view.findViewById(R.id.Layout_Item_tvContent); tvContent.setText(arrayNotice[i]); vFlipperScrollVT.addView(view); } vFlipperScrollVT.startFlipping(); } private ImageView getImageView(int resId){ ImageView img = new ImageView(mContext); img.setBackgroundResource(resId); return img; } }
3、其中用到的anim动画效果文件如下:(因为是补间动画,所以在res->anim下创建动画文件。)
(1)anim_come_in_h.xml(进入效果--水平方向)代码如下:
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="100%p" android:toXDelta="0" android:duration="2000"/> </set>
(2)anim_get_out_h.xml(离开效果--水平方向)代码如下:
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="0" android:toXDelta="-100%p" android:duration="2000"/> </set>
(3)anim_come_in_v.xml(进入效果--垂直方向)代码如下:
<?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="2000"/> </set>
(4)anim_get_out_v.xml(离开效果--垂直方向)代码如下:
<?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="1000"/> </set>
ViewFlipper常用方法如下:
isFlipping: 判断View切换是否正在进行
setFilpInterval:设置View之间切换的时间间隔
startFlipping: 开始View的切换,而且会循环进行
stopFlipping: 停止View的切换
setOutAnimation:设置切换View的退出动画
setInAnimation: 设置切换View的进入动画
showNext: 显示ViewFlipper里的下一个View
showPrevious: 显示ViewFlipper里的上一个View
第二种实现方式:(AdapterViewFlipper)
特别说明:由于AdapterViewFlipper设置进入或退出动画,必须为属性动画,没有办法像补间动画一样,设置为100%p之类的,考虑到手机设备宽度的不一致,所以只能用于【垂直方向】的循环滚动效果(因为一般通知类型的高度是固定的)。
1、layout布局代码如下:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorLightGray"> <!--通知循环滚动(垂直方向)--> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_marginTop="50dp" android:background="@color/colorWhite" android:gravity="center_vertical" android:paddingLeft="@dimen/dk_font_size_10" android:paddingRight="@dimen/dk_font_size_10"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="重要通知:" android:textColor="@color/colorBlack" android:textStyle="bold" /> <AdapterViewFlipper android:id="@+id/ViewFlipperBase_vFlipperScrollV" android:layout_width="match_parent" android:layout_height="40dp"></AdapterViewFlipper> </LinearLayout> </LinearLayout>
2、activity逻辑功能代码如下:
public class AdapterViewFlipperBaseActivity extends BaseActivity { private Context mContext; private AdapterViewFlipper vFlipperScrollV; //数据适配器 private NoticeDisplayListAdapter noticeDisplayListAdapterV;//通知列表(垂直方向) //基本变量 //通知数组 private String[] arrayNotice = new String[] {"东北大鹌鹑有点嘟嘟嘟。", "芜湖大司马有点捞。", "余小C着实有点强啊。"}; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_adapterviewflipper_base); baseDataInit(); bindViews(); viewsAddListener(); viewsDataInit(); } @Override public void baseDataInit() { mContext = this; } @Override public void bindViews() { vFlipperScrollV = findViewById(R.id.ViewFlipperBase_vFlipperScrollV); } @Override public void viewsAddListener() { } @Override public void viewsDataInit() { //垂直循环滚动(通知之类的)--自定义动画效果 vFlipperScrollV.setFlipInterval(5000); vFlipperScrollV.setInAnimation(mContext, R.animator.animator_come_in_v); vFlipperScrollV.setOutAnimation(mContext, R.animator.animator_get_out_v); noticeDisplayListAdapterV = new NoticeDisplayListAdapter(mContext, arrayNotice); vFlipperScrollV.setAdapter(noticeDisplayListAdapterV); vFlipperScrollV.startFlipping(); } }
3、其中用到的动画效果文件如下:(因为是属性动画,所以在res->animator下创建动画文件。)
(1)animator_come_in_v.xml动画文件代码如下:
<?xml version="1.0" encoding="utf-8"?> <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="2000" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:propertyName="y" android:valueFrom="50dp" android:valueTo="0dp" android:valueType="floatType"/>
(2)animator_get_out_v.xml动画文件代码如下:
<?xml version="1.0" encoding="utf-8"?> <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="2000" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:propertyName="y" android:valueFrom="0dp" android:valueTo="-50dp" android:valueType="floatType"/>