返回顶部
首页 > 资讯 > 精选 >怎么用AdapterViewFlipper轻松完成图片轮播
  • 183
分享到

怎么用AdapterViewFlipper轻松完成图片轮播

2023-06-14 20:06:07 183人浏览 八月长安
摘要

这篇文章将为大家详细讲解有关怎么用AdapterViewFlipper轻松完成图片轮播,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、认识AdapterViewFilpper  &n

这篇文章将为大家详细讲解有关怎么用AdapterViewFlipper轻松完成图片轮播,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

一、认识AdapterViewFilpper

    AdapterViewFilpper 继承 了AdapterViewAnimator,它也会显示 Adapter 提供的多个 View 组件,但它每次只能显示一个View组件,程序可通过showPrevious()和showNext()方法控制该组件显示上一个、下一个组件。

    AdapterViewFilpper可以在多个View切换过程中使用渐隐渐显的动画效果。除此之外,还可以调用该组件的startFlipping()控制它“自动播放”下一个View组件。

    AdapterViewAnimator支持的XML属性如下:

  • Android:animateFirstView:设置显示组件的第一个View时是否使用动画。

  • android:inAnimation:设置组件显示时使用的动画。

  • android:loopViews:设置循环到最后一个组件时是否自动跳转到第一个组件。

  • android:outAnimation:设置组件隐藏时使用的动画。

    AdapterViewFilpper额外支持的XML属性及相关方法如下表所示。

XML属性

相关方法

说明

android:autoStart

startFlpping()

设置显示该组件是否自动播放

android:flipInterval

setFlipInterval(int)

设置自动播放的时间间隔

二、AdapterViewFilpper示例

    接下来通过一个简单的示例程序来学习AdapterViewFilpper的使用方法。

    继续使用WidgetSample工程的listviewsample模块,在app/main/res/layout/目录下创建adapterview_filpper_layout.xml文件,在其中填充如下代码片段:

<?xml version="1.0" encoding="utf-8" ?><RelativeLayout xmlns:android="Http://schemas.android.com/apk/res/android"                android:layout_width="match_parent"                android:layout_height="match_parent">    <AdapterViewFlipper        android:id="@+id/flipper"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:flipInterval="5000"        android:layout_alignParentTop="true"/>    <Button        android:id="@+id/prev_btn"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_alignParentLeft="true"        android:text="上一个"/>    <Button        android:id="@+id/next_btn"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:text="下一个"/>    <Button        android:id="@+id/auto_btn"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_alignParentRight="true"        android:text="自动播放"/></RelativeLayout>

    创建一个MyFilpperAdapter类,继承BaseAdapter类,重写其4个主要方法,具体代码如下:

package com.jinyu.cqkxzsxy.android.listviewsample.adapter;import android.content.Context;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.ImageView;public class MyFilpperAdapter extends BaseAdapter {    private Context mContext = null;    private int[] mImageIds = null;    public MyFilpperAdapter(Context context, int[] imageIds) {        this.mContext = context;        this.mImageIds = imageIds;    }    @Override    public int getCount() {        return mImageIds.length;    }    @Override    public Object getItem(int position) {        return position;    }    @Override    public long getItemId(int position) {        return position;    }    // 该方法返回的View代表了每个列表项    @Override    public View getView(int position, View convertView, ViewGroup parent) {        ImageView imageView = null;        if(null == convertView) {            // 创建一个ImageView            imageView = new ImageView(mContext);            // 设置ImageView的缩放类型            imageView.setScaleType(ImageView.ScaleType.FIT_XY);            // 为imageView设置布局参数            imageView.setLayoutParams(new ViewGroup.LayoutParams(                    ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));            convertView = imageView;        } else {            imageView = (ImageView) convertView;        }        // 给ImageView设置图片资源        imageView.setImageResource(mImageIds[position]);        return imageView;    }}

    接下来为AdapterViewFilpper提供Adapter,使用自定义的BaseAdapter。新建AdapterViewFilperActivity.java文件,加载上面新建的布局文件,具体代码如下:

package com.jinyu.cqkxzsxy.android.listviewsample;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.widget.AdapterViewFlipper;import android.widget.Button;import com.jinyu.cqkxzsxy.android.listviewsample.adapter.MyFilpperAdapter;public class AdapterViewFilperActivity extends AppCompatActivity implements View.OnClickListener {    private AdapterViewFlipper mFlipper = null;    private Button mPrevBtn = null;    private Button mNextBtn = null;    private Button mAutoBtn = null;    private int[] mImageIds = {            R.drawable.image_01,R.drawable.image_02,R.drawable.image_03,            R.drawable.image_04,R.drawable.image_05,R.drawable.image_06,            R.drawable.image_07,R.drawable.image_08,R.drawable.image_09    };    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.adapterview_filpper_layout);        // 获取界面组件        mFlipper = (AdapterViewFlipper) findViewById(R.id.flipper);        mPrevBtn = (Button) findViewById(R.id.prev_btn);        mNextBtn = (Button) findViewById(R.id.next_btn);        mAutoBtn = (Button) findViewById(R.id.auto_btn);        // 为AdapterViewFlipper设置Adapter        MyFilpperAdapter adapter = new MyFilpperAdapter(this, mImageIds);        mFlipper.setAdapter(adapter);        // 为三个按钮设置点击事件监听器        mPrevBtn.setOnClickListener(this);        mNextBtn.setOnClickListener(this);        mAutoBtn.setOnClickListener(this);    }    @Override    public void onClick(View view) {        switch (view.getId()){            case R.id.prev_btn:                // 显示上一个组件                mFlipper.showPrevious();                // 停止自动播放                mFlipper.stopFlipping();                break;            case R.id.next_btn:                // 显示下一个组件。                mFlipper.showNext();                // 停止自动播放                mFlipper.stopFlipping();                break;            case R.id.auto_btn:                // 开始自动播放                mFlipper.startFlipping();                break;            default:                break;        }    }}

    上面程序代码调用了 AdapterViewFlipper 的 showPrevious()、 showNext()方法来控制该组件显示上一个、下一个组件,并调用了 startFlipping()方法控制自动播放。

 修改程序启动的Activity,运行程序,可以看到下图所示界面效果。

怎么用AdapterViewFlipper轻松完成图片轮播

    单击上一个或下一个按钮可以切换显示的组件,单击自动播放按钮,将可以看到AdapterViewFlipper每隔5秒更换一个图片,切换图片时会使用渐隐渐显效果。

关于“怎么用AdapterViewFlipper轻松完成图片轮播”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: 怎么用AdapterViewFlipper轻松完成图片轮播

本文链接: https://lsjlt.com/news/274840.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 用AdapterViewFlipper轻松完成图片轮播
    目录一、认识AdapterViewFilpper二、AdapterViewFilpper示例一、认识AdapterViewFilpper     Ada...
    99+
    2024-04-02
  • 怎么用AdapterViewFlipper轻松完成图片轮播
    这篇文章将为大家详细讲解有关怎么用AdapterViewFlipper轻松完成图片轮播,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、认识AdapterViewFilpper  &n...
    99+
    2023-06-14
  • 怎么用React完成一个图片轮播组件
    这篇文章主要为大家展示了“怎么用React完成一个图片轮播组件”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“怎么用React完成一个图片轮播组件”这篇文章吧。 ...
    99+
    2024-04-02
  • html图片轮播图怎么做
    制作 html 图像轮播图需要以下步骤:创建 html 结构,包括一个容器和一个图像列表。添加图像到图像列表中。使用 css 样式设置轮播图的布局和样式。添加 javascript 代码...
    99+
    2024-05-16
    css overflow
  • CSS怎么实现图片轮播
    CSS怎么实现图片轮播?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。在css中,可以使用animation属性和@keyframes规则来实现图片轮播效果。只需...
    99+
    2023-06-14
  • 怎么利用纯CSS实现文字轮播与图片轮播
    本文小编为大家详细介绍“怎么利用纯CSS实现文字轮播与图片轮播”,内容详细,步骤清晰,细节处理妥当,希望这篇“怎么利用纯CSS实现文字轮播与图片轮播”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起...
    99+
    2024-04-02
  • HTML图片轮播代码怎么写?
    ...
    99+
    2024-04-02
  • 怎么使用js实现图片轮播效果
    这篇文章主要介绍怎么使用js实现图片轮播效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!只有img标签的html代码,做测试用:<body>  <img...
    99+
    2024-04-02
  • 怎么利用CSS实现图片轮播效果
    这篇文章给大家分享的是有关怎么利用CSS实现图片轮播效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。理论基础CSS3 animation 属性和 @keyframes 规则主体思想准备相同大小的多个图片将要展示...
    99+
    2023-06-14
  • 怎么使用jQuery实现图片轮播效果
    本篇内容介绍了“怎么使用jQuery实现图片轮播效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!用jQuery实现图片轮播需要有以下步骤:...
    99+
    2023-06-29
  • 怎么使用Python轻松完成垃圾分类
    本篇内容介绍了“怎么使用Python轻松完成垃圾分类”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!思路这问题的解决思路或许不止一条。这里只是...
    99+
    2023-06-02
  • jQuery图片轮播插件是怎么样的
    这篇文章给大家介绍jQuery图片轮播插件是怎么样的,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非...
    99+
    2024-04-02
  • Bootstrap中的图片轮播效果怎么实现
    本篇内容主要讲解“Bootstrap中的图片轮播效果怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Bootstrap中的图片轮播效果怎么实现”吧!1 轮...
    99+
    2024-04-02
  • 怎么使用纯CSS3实现图片轮播的效果
    这篇文章给大家分享的是有关怎么使用纯CSS3实现图片轮播的效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。   <!DOCTYPEhtml>   <htm...
    99+
    2024-04-02
  • 使用AmazeUI怎么实现一个图片轮播效果
    使用AmazeUI怎么实现一个图片轮播效果?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。<!DOCTYPE html><html&g...
    99+
    2023-06-09
  • 使用CSS3怎么实现一个切片式图片轮播效果
    使用CSS3怎么实现一个切片式图片轮播效果?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。css是什么意思css是一种用来表现HTML或XML等文件样式的计算机语...
    99+
    2023-06-08
  • Word文档怎么轻松处理图片
    这篇文章给大家分享的是有关Word文档怎么轻松处理图片的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一:图片原始尺寸还原我们在Word文档插入图片时,Word会自动将图片进行缩小,以适应Word排版。插入图片,在...
    99+
    2023-06-04
  • 微信小程序怎么使用图片轮播及滚动视图
    这篇“微信小程序怎么使用图片轮播及滚动视图”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“微信小程序怎么使用图片轮播及滚动视图”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接...
    99+
    2023-06-26
  • 怎么使用vue轮播组件vue-awesome-swiper实现轮播图
    这篇文章主要讲解了“怎么使用vue轮播组件vue-awesome-swiper实现轮播图”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么使用vue轮播组件vue-awesome-swipe...
    99+
    2023-07-04
  • 微信小程序图片轮播组件gallery slider怎么用
    这篇文章主要介绍了微信小程序图片轮播组件gallery slider怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体内容如下先上效果...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作