android API Demo之使用ViewFlipper制作轮播广告

最新推荐文章于 2024-09-14 15:55:09 发布
最新推荐文章于 2024-09-14 15:55:09 发布
阅读量2.2k 收藏
点赞数
分类专栏： Android API Demo 文章标签： android ViewFlipper 广告轮播
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/it_talk/article/details/41801695
版权

ViewFlipper官网的介绍：Simple ViewAnimator that will animate between two or more views that have been added to it. Only one child is shown at a time. If requested, can automatically flip between each child at a regular interval.

大概意思是：ViewFlipper是一个view容器，可以放置两个或者两个以上的view，每次只能显示一个view，但是可以在一定周期下有规律的一个一个的显示view。

       首先，ViewFlipper怎么使用呢？

布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="10dip" >

        <ViewFlipper
            android:id="@+id/flipper"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dip"
            android:flipInterval="3000" >

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="100dp"
                android:background="@drawable/adv1" />

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="100dp"
                android:background="@drawable/adv2" />

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="100dp"
                android:background="@drawable/adv3" />

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="100dp"
                android:background="@drawable/adv4" />

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="100dp"
                android:background="@drawable/adv5" />
        </ViewFlipper>
       
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dip"
        android:text="Select an animation:" />

    <Spinner
        android:id="@+id/spinner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

activity： 

public class ViewFlipperActivity extends Activity implements AdapterView.OnItemSelectedListener{
	 private String[] mStrings = {
	            "Push up", "Push left"};

	 private ViewFlipper mFlipper;
	 
	@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_viewflipper);
        
        mFlipper = ((ViewFlipper) this.findViewById(R.id.flipper));
        mFlipper.startFlipping();
        
        Spinner s = (Spinner) findViewById(R.id.spinner);
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
                android.R.layout.simple_spinner_item, mStrings);
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        s.setAdapter(adapter);
        s.setOnItemSelectedListener(this);
    }
	@Override
	public void onItemSelected(AdapterView<?> parent, View view, int position,
			long id) {
		switch (position) {
		case 0:
			mFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_up_in));
			mFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_up_out));
			break;
		case 1:
			mFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
			mFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));
			break;
		default:
			break;
		}
	}

	@Override
	public void onNothingSelected(AdapterView<?> parent) {
		// TODO Auto-generated method stub
		
	}
	
}

动画文件：

push_up_in.xml

<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_out.xml 

<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>
push_left_in.xml 

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="100%p" android:toXDelta="0" android:duration="500"/>
	<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="500"/>
</set>

push_left_out.xml 

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0" android:toXDelta="-100%p" android:duration="500"/>
	<alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="500"/>
</set>

效果图：



至此，我们是不是还缺点什么，没错，广告板右下角的小图标识。我们把界面的布局文件改一下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="10dip" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="100dp" >

        <com.example.learning.apidemo.animation.util.MyViewFlipper
            android:id="@+id/flipper"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dip"
            android:flipInterval="3000" >

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="100dp"
                android:background="@drawable/adv1" />

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="100dp"
                android:background="@drawable/adv2" />

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="100dp"
                android:background="@drawable/adv3" />

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="100dp"
                android:background="@drawable/adv4" />

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="100dp"
                android:background="@drawable/adv5" />
        </com.example.learning.apidemo.animation.util.MyViewFlipper>
        <LinearLayout 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:orientation="horizontal"
            >
        <ImageView
            android:id="@+id/img1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:drawable/presence_online"
            />
        <ImageView 
            android:id="@+id/img2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:drawable/presence_invisible"
            />
        <ImageView 
            android:id="@+id/img3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:drawable/presence_invisible"
            />
        <ImageView 
            android:id="@+id/img4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:drawable/presence_invisible"
            />
        <ImageView 
            android:id="@+id/img5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:drawable/presence_invisible"
            />
        </LinearLayout>
    </RelativeLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dip"
        android:text="Select an animation:" />

    <Spinner
        android:id="@+id/spinner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>
并且重写ViewFlipper,为什么要重写呢？因为，ViewFlipper并没有切换图片的监听接口，我们要在切换图片的时候改变ImageView的背景图片，标识当前是第几个图片

MyViewFlipper.java

public class MyViewFlipper extends ViewFlipper{
	private OnViewChange onViewChange;
	public MyViewFlipper(Context context) {
		super(context);
	}

	public MyViewFlipper(Context context, AttributeSet attrs) {
		super(context, attrs);
	}
	
	@Override
	public void showNext() {
		super.showNext();
		if(onViewChange!=null){
			onViewChange.onChange(getDisplayedChild());
		}
	}
	
	@Override
	public void showPrevious() {
		super.showPrevious();
		if(onViewChange!=null){
			onViewChange.onChange(getDisplayedChild());
		}
	}
	public interface OnViewChange{
		void onChange(int index);
	}
	public OnViewChange getOnViewChange() {
		return onViewChange;
	}

	public void setOnViewChange(OnViewChange onViewChange) {
		this.onViewChange = onViewChange;
	}
}
MyViewFlipper内部声明了一个接口OnViewChange，并重写showNext()和showPrevious()，在这两个方法内调用OnViewChange的onChange()
，传入的参数代表当前显示图片的索引。

activity：

public class ViewFlipperActivity extends Activity implements AdapterView.OnItemSelectedListener{
	 private String[] mStrings = {
	            "Push up", "Push left"};

	 private MyViewFlipper mFlipper;
	 
	 private ImageView img1,img2,img3,img4,img5;
	 
	@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_viewflipper);
        img1=(ImageView) findViewById(R.id.img1);
        img2=(ImageView) findViewById(R.id.img2);
        img3=(ImageView) findViewById(R.id.img3);
        img4=(ImageView) findViewById(R.id.img4);
        img5=(ImageView) findViewById(R.id.img5);
        mFlipper = ((MyViewFlipper) this.findViewById(R.id.flipper));
        mFlipper.startFlipping();
        mFlipper.setOnViewChange(new OnViewChange() {
			
			@Override
			public void onChange(int index) {
				setIndexView(index);
			}
		});
        Spinner s = (Spinner) findViewById(R.id.spinner);
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
                android.R.layout.simple_spinner_item, mStrings);
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        s.setAdapter(adapter);
        s.setOnItemSelectedListener(this);
    }
	@Override
	public void onItemSelected(AdapterView<?> parent, View view, int position,
			long id) {
		switch (position) {
		case 0:
			mFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_up_in));
			mFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_up_out));
			break;
		case 1:
			mFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
			mFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));
			break;
		default:
			break;
		}
	}

	@Override
	public void onNothingSelected(AdapterView<?> parent) {
		// TODO Auto-generated method stub
		
	}
	/**
	 * 
	 * 2014-12-8 下午1:58:36
	 * @param index
	 * @TODO 改变右下角图标的背景
	 */
	private void setIndexView(int index){
		img1.setBackgroundResource(android.R.drawable.presence_invisible);
		img2.setBackgroundResource(android.R.drawable.presence_invisible);
		img3.setBackgroundResource(android.R.drawable.presence_invisible);
		img4.setBackgroundResource(android.R.drawable.presence_invisible);
		img5.setBackgroundResource(android.R.drawable.presence_invisible);
		switch (index) {
		case 0:
			img1.setBackgroundResource(android.R.drawable.presence_online);
			break;
		case 1:
			img2.setBackgroundResource(android.R.drawable.presence_online);
			break;
		case 2:
			img3.setBackgroundResource(android.R.drawable.presence_online);
			break;
		case 3:
			img4.setBackgroundResource(android.R.drawable.presence_online);
			break;
		case 4:
			img5.setBackgroundResource(android.R.drawable.presence_online);
			break;
		default:
			break;
		}
	}
}

改造之后的效果图如下：


这样横竖的广告轮播功能就完成了。

画虎烂
关注
专栏目录
【Android 】零基础到飞升 | ViewFlipper(翻转视图)的基本使用
m0_58523831的博客
07-02 8万+
2.5.6 ViewFlipper(翻转视图)的基本使用 本节引言： 本节给大家带了的是ViewFlipper，它是Android自带的一个多页面管理控件，且可以自动播放！ 和ViewPager不同，ViewPager是一页页的，而ViewFlipper则是一层层的，和ViewPager一样，很多时候， 用来实现进入应用后的引导页，或者用于图片轮播，本节我们就使用ViewFlipper写一个简单的图片 轮播的例子吧~官方API：ViewFlipper 1.为ViewFlipper加入View的两种方法 1
利用RecyclerView实现无限轮播广告条
findhappy117的博客
03-11 711
代码地址如下：http://www.demodashi.com/demo/14660.html ####前言 之前有讲过TabLayout的一些知识， TabLayout实现顶部导航(一) TabLayout基本属性全解 但是对于TabLayout实现的导航栏仍是有诸多限制，例如不能任意设置text的文字大小，若导航中涉及到图片的话，图片只能简单的设计到文字上方，所以布局方面仍是很受限制，为了...
uniapp：广告API使用总结
sunluyi的博客
01-14 3157
这里只总结了前端的调用方式，以及碰到的问题如何处理。 后台相关的内容以及如何上架，申请广告平台没有参与，不多赘述。 激励视频 首先页面要有一个按钮领取任务 <button :loading="loading" @click="showFullScreenVideoAd">显示广告</button> <script> export default { data() { return { rewardedVideoAd: null,//广告API
【Android UI】ViewFlipper实现广告轮播图
Blue布洛的专栏
08-10 916
1、为ViewFlipper实现切换监听器 public class BlueViewFlipper extends ViewFlipper { private OnDisplayChangedListener mListener; public BlueViewFlipper(Context context) { super(context); }
viewFlipper的使用实现自动轮播广告图片
u013680097的博客
02-15 672
第一步：layout文件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layo
使用ViewFlipper上下轮播广告通知实现监听跳转
prince70的博客
06-13 1940
最近公司开发需要实现通知轮播并能够区分点击跳转页面的功能，看了一下以前的旧代码用的是自定义的控件，发现有一个bug，动画效果会卡顿且重复出现。于是想到了谷歌亲生的ViewFlipper 1.实现效果（动画轮播，可分别点击跳转） 上图 废话少说，直接上代码 1.marquee_in.xml (res=&gt;anim) &lt;translate ...
Android 轮播图---ViewFlipper
fengltxx的博客
12-17 805
Android 轮播图—ViewFlipper ONE Goal ,ONE Passion! 上一篇写了轮播图,使用ViewPager实现,这篇就使用ViewFlipper来实现吧.ViewPager实现轮播图: http://blog.csdn.net/fengltxx/article/details/50342605第1步: 在xml中使用特别简单没有什么需要注意的<?xml versi
Android ViewFlipperDemo
06-19
这个`Android ViewFlipperDemo`项目很可能是为了展示如何有效地利用ViewFlipper来实现动态视图切换的效果，比如轮播图或者动画效果。下面我们将深入探讨ViewFlipper的相关知识点。 1. **ViewFlipper简介** ...
ViewFlipper的使用，仿淘宝头条垂直滚动广告条
01-17
ViewFlipper是Android SDK提供的一种视图切换工具，主要用于实现动态的、可交互的视图切换效果，如轮播图、广告条等。在本示例中，我们将探讨如何使用ViewFlipper来创建一个类似淘宝头条的垂直滚动广告条。在Eclipse...
viewFlipper的三个Demo
04-06
ViewFlipper是Android SDK中的一个视图切换组件，主要用于在多个视图之间进行平滑的动画切换，常用于实现轮播图、广告栏或者卡片式界面等效果。在这个"viewFlipper的三个Demo"中，我们可以期待看到如何在Eclipse环境...
ViewPager(Banner广告栏)、ViewFlipper、ViewFlow-android，ViewPager2
ShareUs的专栏
04-19 875
Android中三种超实用的滑屏方式汇总(ViewPager ViewFlipper ViewFlow)-http://smallwoniu.blog.51cto.com/3911954/1308959> ViewFilpper ViewFilpper控件是系统自带控件之一，主要用于在同一个屏幕间的切换及设置动画效果、间隔时间，且可以自动播放。> ViewFlow ViewFlow不是...
Android ViewPager之实现轮播广告效果
znouy的博客
05-08 531
dfg
巧用ViewPager 打造不一样的广告轮播切换效果
weixin_30492601的博客
05-01 305
一、概述 如果大家关注了我的微信公众号的话，一定知道我在5月6号的时候推送了一篇文章，文章名为Android超高仿QQ附近的人搜索展示（一），通过该文可以利用ViewPager实现单页显示多个Item且能够添加一些炫酷的动画效果。我当时阅读这篇文章的时候，简单做了下记录，然后想了想，可以按照该思路做一个比较特殊轮播效果，如图： 其实看到这个大家肯定不陌生，对于ViewPager切换有个很出...
android - 滑动效果之ViewFlipper与ViewPager与Gallery
weixin_34163741的博客
08-30 192
1、ViewFlipper 1）View切换的控件—ViewFlipper介绍 ViewFilpper类继承于ViewAnimator类。而ViewAnimator类继承于FrameLayout。 查看ViewAnimator类的源码可以看出此类的作用主要是为其中的View切换提供动画效果。该类有如下几个和动画相关的方法。 setInAnimation：设置View进入屏幕时候使用的动画。...
android文字轮播——ViewAnimator实现
archer的技术故事
09-21 4761
android文字轮播——ViewAnimator实现
android 自定义ViewAnimator文字轮播广告控件——自定义控件学习（三）
archer的技术故事
09-26 1590
android 自定义ViewAnimator文字轮播广告控件——自定义控件学习（三）
Android轮播图api,Android实现轮播图片效果
weixin_39630515的博客
05-29 954
本文实例为大家分享了Android实现轮播图片效果的具体代码，供大家参考，具体内容如下一、原理首先，将这些要轮播的图片和一些文本分别放置在不同的数据集合中，程序启动的时候默认显示一组图片和文本数据，然后启动一个定时器，每隔一段时间便替换掉显示的图片和文本数据，同时加入一些动画效果，已达到轮播的特效。同时，我们也要实现手指滑动图片达到轮播的效果。二、实现1、程序启动界面MainActivitypub...
Android控件——ViewFlipper的使用，垂直滚动广告条
带你装逼带你飞的专栏
01-17 7527
1 前言之前开发过一个TextView的滚动显示，但是局限性比较大，只能显示文字，不能显示图片等其他View。对比淘宝App的淘宝头条，发现显示的内容挺丰富的。网上搜索了下资料发现android自带的有控件ViewFlipper来实现。于是记录下来。2 ViewFlipper简介ViewFlipper是android系统提供的使View滚动的控件，ViewFlipper直译就是View快速滚动。打开
【Android】【Bug】使用OSmdroid绘制轨迹断裂问题
最新发布
每天不是在写bug就是在写bug的路上
09-14 831
使用OSmdroid绘制轨迹断裂问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值