Android UI实现广告Banner轮播效果

本篇博客要分享的一个效果是实现广告Banner轮播效果,这个效果也比较常见,一些视频类应用就经常有,就拿360影视大全来举例吧:

用红框框住的那个效果就是小巫今天要分享的,先来思考一下会用到什么控件?有什么用户体验?

控件我们可能一下子就可以想到的自然是ViewPager,没错!用到的就是ViewPager,那么它会有什么用户体验呢,它可能有以下几个体验:

1. 间隔不停的切换图片,指示器也跟着变

2. 点击图片可以跳转到指定的页面

如何实现?

布局开始着手
/BannerAutoScrollDemo/res/layout/banner.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical" >

 <FrameLayout
  android:layout_width="match_parent"
  android:layout_height="210dp" >

  <android.support.v4.view.ViewPager
   android:id="@+id/vp"
   android:layout_width="match_parent"
   android:layout_height="210dp" />

  <RelativeLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_gravity="bottom"
   android:background="@drawable/shadow_article" >

   <TextView
    android:id="@+id/tv_date"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/author_layout"
    android:layout_marginBottom="10dp"
    android:layout_marginLeft="10dp"
    android:maxLines="2"
    android:text="3月4日"
    android:textColor="@color/white"
    android:textSize="18sp" />

   <TextView
    android:id="@+id/tv_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/author_layout"
    android:layout_marginBottom="10dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_toRightOf="@+id/tv_date"
    android:maxLines="2"
    android:text="我和令计划只是同姓"
    android:textColor="@color/white"
    android:textSize="18sp" />

   <RelativeLayout
    android:id="@+id/author_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginLeft="10dp"
    android:gravity="center_vertical"
    android:paddingBottom="20dp" >

    <TextView
     android:id="@+id/tv_pre"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="文章选题来自"
     android:textColor="@color/white"
     android:textSize="12sp" />

    <TextView
     android:id="@+id/tv_topic_from"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_toRightOf="@+id/tv_pre"
     android:text="阿宅的"
     android:textColor="@color/white"
     android:textSize="12sp" />

    <TextView
     android:id="@+id/tv_topic"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_marginLeft="10dp"
     android:layout_toRightOf="@+id/tv_topic_from"
     android:text="“我想知道令狐安和令计划有什么关系?”"
     android:textColor="@color/white"
     android:textSize="12sp" />
   </RelativeLayout>
  </RelativeLayout>

  <LinearLayout
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_marginTop="10dip"
   android:layout_gravity="bottom|center_horizontal"
   android:layout_marginBottom="10dp"
   android:gravity="center" >

   <View
    android:id="@+id/v_dot0"
    style="@style/dot_style"
    android:background="@drawable/dot_focused"
    android:visibility="invisible" />

   <View
    android:id="@+id/v_dot1"
    style="@style/dot_style"
    android:visibility="invisible"/>

   <View
    android:id="@+id/v_dot2"
    style="@style/dot_style"
    android:visibility="invisible"/>

   <View
    android:id="@+id/v_dot3"
    style="@style/dot_style"
    android:visibility="invisible"/>

   <View
    android:id="@+id/v_dot4"
    style="@style/dot_style"
    android:visibility="invisible" />
  </LinearLayout>
 </FrameLayout>

</LinearLayout>

一个ViewPager,下面五个指示点,注意每个点都有同样的样式,我们在style.xml中定义样式:
/BannerAutoScrollDemo/res/values/styles.xml

<style name="dot_style">
  <item name="android:layout_width">5dip</item>
  <item name="android:layout_height">5dip</item>
  <item name="android:background">@drawable/dot_normal</item>
  <item name="android:layout_marginLeft">1.5dip</item>
  <item name="android:layout_marginRight">1.5dip</item>
 </style>

定义圆点图形资源
/BannerAutoScrollDemo/res/drawable/dot_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval" >

 <solid android:color="#33000000" />

 <corners android:radius="5dip" />

</shape>

/BannerAutoScrollDemo/res/drawable/dot_focused.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval" >

 <solid android:color="#aaFFFFFF" />

 <corners android:radius="5dip" />

</shape>

定义广告实体
/BannerAutoScrollDemo/src/com/xiaowu/banner/demo/AdDomain.java

package com.xiaowu.banner.demo;

/**
 * 广告实体
 *
 * @author wwj_748
 *
 */
public class AdDomain {
 private String id; // 广告id
 private String date; // 日期
 private String title; // 标题
 private String topicFrom; //选题来自
 private String topic; // 选题
 private String imgUrl; // 图片url
 private boolean isAd; // 是否为广告
 private String startTime; // 广告开始时间
 private String endTime; // 广告结束时间
 private String targetUrl; // 目标url
 private int width; // 宽
 private int height; // 高
 private boolean available; // 是否可用

 public String getId() {
 return id;
 }

 public void setId(String id) {
 this.id = id;
 }

 public String getTitle() {
 return title;
 }

 public void setTitle(String title) {
 this.title = title;
 }

 public String getImgUrl() {
 return imgUrl;
 }

 public void setImgUrl(String imgUrl) {
 this.imgUrl = imgUrl;
 }

 public boolean isAd() {
 return isAd;
 }

 public void setAd(boolean isAd) {
 this.isAd = isAd;
 }

 public String getDate() {
 return date;
 }

 public void setDate(String date) {
 this.date = date;
 }

 public String getTopic() {
 return topic;
 }

 public void setTopic(String topic) {
 this.topic = topic;
 }

 public String getTopicFrom() {
 return topicFrom;
 }

 public void setTopicFrom(String topicFrom) {
 this.topicFrom = topicFrom;
 }

 public String getStartTime() {
 return startTime;
 }

 public void setStartTime(String startTime) {
 this.startTime = startTime;
 }

 public String getEndTime() {
 return endTime;
 }

 public void setEndTime(String endTime) {
 this.endTime = endTime;
 }

 public String getTargetUrl() {
 return targetUrl;
 }

 public void setTargetUrl(String targetUrl) {
 this.targetUrl = targetUrl;
 }

 public int getWidth() {
 return width;
 }

 public void setWidth(int width) {
 this.width = width;
 }

 public int getHeight() {
 return height;
 }

 public void setHeight(int height) {
 this.height = height;
 }

 public boolean isAvailable() {
 return available;
 }

 public void setAvailable(boolean available) {
 this.available = available;
 }

}

实现切换逻辑

1. 定时切换

2. 切换图片

3. 切换标题

4. 切换指示器

定时切换用到一个类:ScheduledExecutorService

作用是定时执行任务,我们这里要做的定时任务是,2秒执行一次图片切换

private void startAd() {
 scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
 // 当Activity显示出来后,每两秒切换一次图片显示
 scheduledExecutorService.scheduleAtFixedRate(new ScrollTask(), 1, 2,
 TimeUnit.SECONDS);
 }

定义子线程

private class ScrollTask implements Runnable {

 @Override
 public void run() {
 synchronized (adViewPager) {
 currentItem = (currentItem + 1) % imageViews.size();
 handler.obtainMessage().sendToTarget();
 }
 }
 }

通过handle来通知ViewPager进行视图切换

private Handler handler = new Handler() {
 public void handleMessage(android.os.Message msg) {
 adViewPager.setCurrentItem(currentItem);
 };
 };

我们提供模拟数据来进行测试

/**
 * 轮播广播模拟数据
 *
 * @return
 */
 public static List<AdDomain> getBannerAd() {
 List<AdDomain> adList = new ArrayList<AdDomain>();

 AdDomain adDomain = new AdDomain();
 adDomain.setId("108078");
 adDomain.setDate("3月4日");
 adDomain.setTitle("我和令计划只是同姓");
 adDomain.setTopicFrom("阿宅");
 adDomain.setTopic("我想知道令狐安和令计划有什么关系?");
 adDomain.setImgUrl("/d50735fae6cd7b8900d74cd40c2442a7d9330e29.jpg");
 adDomain.setAd(false);
 adList.add(adDomain);

 AdDomain adDomain2 = new AdDomain();
 adDomain2.setId("108078");
 adDomain2.setDate("3月5日");
 adDomain2.setTitle("我和令计划只是同姓");
 adDomain2.setTopicFrom("小巫");
 adDomain2.setTopic("“我想知道令狐安和令计划有什么关系?”");
 adDomain2
 .setImgUrl("/eaf81a4c510fd9f9a1edb58b262dd42a2934a45e.jpg");
 adDomain2.setAd(false);
 adList.add(adDomain2);

 AdDomain adDomain3 = new AdDomain();
 adDomain3.setId("108078");
 adDomain3.setDate("3月6日");
 adDomain3.setTitle("我和令计划只是同姓");
 adDomain3.setTopicFrom("旭东");
 adDomain3.setTopic("“我想知道令狐安和令计划有什么关系?”");
 adDomain3
 .setImgUrl("/8718367adab44aed22a58aeeb11c8701a08bfbd4.jpg");
 adDomain3.setAd(false);
 adList.add(adDomain3);

 AdDomain adDomain4 = new AdDomain();
 adDomain4.setId("108078");
 adDomain4.setDate("3月7日");
 adDomain4.setTitle("我和令计划只是同姓");
 adDomain4.setTopicFrom("小软");
 adDomain4.setTopic("“我想知道令狐安和令计划有什么关系?”");
 adDomain4
 .setImgUrl("/a686c9177f3e670932e4cf9338c79f3df9dc55f2.jpg");
 adDomain4.setAd(false);
 adList.add(adDomain4);

 AdDomain adDomain5 = new AdDomain();
 adDomain5.setId("108078");
 adDomain5.setDate("3月8日");
 adDomain5.setTitle("我和令计划只是同姓");
 adDomain5.setTopicFrom("大熊");
 adDomain5.setTopic("“我想知道令狐安和令计划有什么关系?”");
 adDomain5
 .setImgUrl("/0bd162d9f2d3572c7dad11ba8913632762d0c30d.jpg");
 adDomain5.setAd(true); // 代表是广告
 adList.add(adDomain5);

 return adList;
 }

ViewPager逻辑处理

1. 填充数据(自定义Adapter)

2. 设置页面切换监听事件

3. 在自定义adapter中的instantiateItem方法设置ViewPager点击事件

这里我们的图片是从网上下载的,用到了universal-image-loader-1.8.6-with-sources.jar这个类库,可以实现异步加载图片,具体使用查看代码。

最后给出完整代码:

/BannerAutoScrollDemo/src/com/xiaowu/banner/demo/MainActivity.java

package com.xiaowu.banner.demo;

import java.io.File;
import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

import android.app.Activity;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.os.Handler;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.TextView;

import com.nostra13.universalimageloader.cache.disc.impl.UnlimitedDiscCache;
import com.nostra13.universalimageloader.cache.memory.impl.LruMemoryCache;
import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;
import com.nostra13.universalimageloader.core.assist.ImageScaleType;
import com.nostra13.universalimageloader.core.assist.QueueProcessingType;

public class MainActivity extends Activity {

 public static String IMAGE_CACHE_PATH = "imageloader/Cache"; // 图片缓存路径

 private ViewPager adViewPager;
 private List<ImageView> imageViews;// 滑动的图片集合

 private List<View> dots; // 图片标题正文的那些点
 private List<View> dotList;

 private TextView tv_date;
 private TextView tv_title;
 private TextView tv_topic_from;
 private TextView tv_topic;
 private int currentItem = 0; // 当前图片的索引号
 // 定义的五个指示点
 private View dot0;
 private View dot1;
 private View dot2;
 private View dot3;
 private View dot4;

 // 定时任务
 private ScheduledExecutorService scheduledExecutorService;

 // 异步加载图片
 private ImageLoader mImageLoader;
 private DisplayImageOptions options;

 // 轮播banner的数据
 private List<AdDomain> adList;

 private Handler handler = new Handler() {
 public void handleMessage(android.os.Message msg) {
 adViewPager.setCurrentItem(currentItem);
 };
 };

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 // 使用ImageLoader之前初始化
 initImageLoader();

 // 获取图片加载实例
 mImageLoader = ImageLoader.getInstance();
 options = new DisplayImageOptions.Builder()
 .showStubImage(R.drawable.top_banner_android)
 .showImageForEmptyUri(R.drawable.top_banner_android)
 .showImageOnFail(R.drawable.top_banner_android)
 .cacheInMemory(true).cacheOnDisc(true)
 .bitmapConfig(Bitmap.Config.RGB_565)
 .imageScaleType(ImageScaleType.EXACTLY).build();

 initAdData();

 startAd();
 }

 /**
 * 初始化ImageLoader
 */
 private void initImageLoader() {
 File cacheDir = com.nostra13.universalimageloader.utils.StorageUtils
 .getOwnCacheDirectory(getApplicationContext(),
  IMAGE_CACHE_PATH);

 DisplayImageOptions defaultOptions = new DisplayImageOptions.Builder()
 .cacheInMemory(true).cacheOnDisc(true).build();

 ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(
 this).defaultDisplayImageOptions(defaultOptions)
 .memoryCache(new LruMemoryCache(12 * 1024 * 1024))
 .memoryCacheSize(12 * 1024 * 1024)
 .discCacheSize(32 * 1024 * 1024).discCacheFileCount(100)
 .discCache(new UnlimitedDiscCache(cacheDir))
 .threadPriority(Thread.NORM_PRIORITY - 2)
 .tasksProcessingOrder(QueueProcessingType.LIFO).build();

 ImageLoader.getInstance().init(config);
 }

 /**
 * 初始化广告数据
 */
 private void initAdData() {
 // 广告数据
 adList = getBannerAd();

 imageViews = new ArrayList<ImageView>();

 // 点
 dots = new ArrayList<View>();
 dotList = new ArrayList<View>();
 dot0 = findViewById(R.id.v_dot0);
 dot1 = findViewById(R.id.v_dot1);
 dot2 = findViewById(R.id.v_dot2);
 dot3 = findViewById(R.id.v_dot3);
 dot4 = findViewById(R.id.v_dot4);
 dots.add(dot0);
 dots.add(dot1);
 dots.add(dot2);
 dots.add(dot3);
 dots.add(dot4);

 tv_date = (TextView) findViewById(R.id.tv_date);
 tv_title = (TextView) findViewById(R.id.tv_title);
 tv_topic_from = (TextView) findViewById(R.id.tv_topic_from);
 tv_topic = (TextView) findViewById(R.id.tv_topic);

 adViewPager = (ViewPager) findViewById(R.id.vp);
 adViewPager.setAdapter(new MyAdapter());// 设置填充ViewPager页面的适配器
 // 设置一个监听器,当ViewPager中的页面改变时调用
 adViewPager.setOnPageChangeListener(new MyPageChangeListener());
 addDynamicView();
 }

 private void addDynamicView() {
 // 动态添加图片和下面指示的圆点
 // 初始化图片资源
 for (int i = 0; i < adList.size(); i++) {
 ImageView imageView = new ImageView(this);
 // 异步加载图片
 mImageLoader.displayImage(adList.get(i).getImgUrl(), imageView,
  options);
 imageView.setScaleType(ScaleType.CENTER_CROP);
 imageViews.add(imageView);
 dots.get(i).setVisibility(View.VISIBLE);
 dotList.add(dots.get(i));
 }
 }

 @Override
 protected void onResume() {
 super.onResume();
 }

 private void startAd() {
 scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
 // 当Activity显示出来后,每两秒切换一次图片显示
 scheduledExecutorService.scheduleAtFixedRate(new ScrollTask(), 1, 2,
 TimeUnit.SECONDS);
 }

 private class ScrollTask implements Runnable {

 @Override
 public void run() {
 synchronized (adViewPager) {
 currentItem = (currentItem + 1) % imageViews.size();
 handler.obtainMessage().sendToTarget();
 }
 }
 }

 @Override
 protected void onStop() {
 super.onStop();
 // 当Activity不可见的时候停止切换
 scheduledExecutorService.shutdown();
 }

 private class MyPageChangeListener implements OnPageChangeListener {

 private int oldPosition = 0;

 @Override
 public void onPageScrollStateChanged(int arg0) {

 }

 @Override
 public void onPageScrolled(int arg0, float arg1, int arg2) {

 }

 @Override
 public void onPageSelected(int position) {
 currentItem = position;
 AdDomain adDomain = adList.get(position);
 tv_title.setText(adDomain.getTitle()); // 设置标题
 tv_date.setText(adDomain.getDate());
 tv_topic_from.setText(adDomain.getTopicFrom());
 tv_topic.setText(adDomain.getTopic());
 dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);
 dots.get(position).setBackgroundResource(R.drawable.dot_focused);
 oldPosition = position;
 }
 }

 private class MyAdapter extends PagerAdapter {

 @Override
 public int getCount() {
 return adList.size();
 }

 @Override
 public Object instantiateItem(ViewGroup container, int position) {
 ImageView iv = imageViews.get(position);
 ((ViewPager) container).addView(iv);
 final AdDomain adDomain = adList.get(position);
 // 在这个方法里面设置图片的点击事件
 iv.setOnClickListener(new OnClickListener() {

 @Override
 public void onClick(View v) {
  // 处理跳转逻辑
 }
 });
 return iv;
 }

 @Override
 public void destroyItem(View arg0, int arg1, Object arg2) {
 ((ViewPager) arg0).removeView((View) arg2);
 }

 @Override
 public boolean isViewFromObject(View arg0, Object arg1) {
 return arg0 == arg1;
 }

 @Override
 public void restoreState(Parcelable arg0, ClassLoader arg1) {

 }

 @Override
 public Parcelable saveState() {
 return null;
 }

 @Override
 public void startUpdate(View arg0) {

 }

 @Override
 public void finishUpdate(View arg0) {

 }

 }

 /**
 * 轮播广播模拟数据
 *
 * @return
 */
 public static List<AdDomain> getBannerAd() {
 List<AdDomain> adList = new ArrayList<AdDomain>();

 AdDomain adDomain = new AdDomain();
 adDomain.setId("108078");
 adDomain.setDate("3月4日");
 adDomain.setTitle("我和令计划只是同姓");
 adDomain.setTopicFrom("阿宅");
 adDomain.setTopic("我想知道令狐安和令计划有什么关系?");
 adDomain.setImgUrl("/d50735fae6cd7b8900d74cd40c2442a7d9330e29.jpg");
 adDomain.setAd(false);
 adList.add(adDomain);

 AdDomain adDomain2 = new AdDomain();
 adDomain2.setId("108078");
 adDomain2.setDate("3月5日");
 adDomain2.setTitle("我和令计划只是同姓");
 adDomain2.setTopicFrom("小巫");
 adDomain2.setTopic("“我想知道令狐安和令计划有什么关系?”");
 adDomain2
 .setImgUrl("/eaf81a4c510fd9f9a1edb58b262dd42a2934a45e.jpg");
 adDomain2.setAd(false);
 adList.add(adDomain2);

 AdDomain adDomain3 = new AdDomain();
 adDomain3.setId("108078");
 adDomain3.setDate("3月6日");
 adDomain3.setTitle("我和令计划只是同姓");
 adDomain3.setTopicFrom("旭东");
 adDomain3.setTopic("“我想知道令狐安和令计划有什么关系?”");
 adDomain3
 .setImgUrl("/8718367adab44aed22a58aeeb11c8701a08bfbd4.jpg");
 adDomain3.setAd(false);
 adList.add(adDomain3);

 AdDomain adDomain4 = new AdDomain();
 adDomain4.setId("108078");
 adDomain4.setDate("3月7日");
 adDomain4.setTitle("我和令计划只是同姓");
 adDomain4.setTopicFrom("小软");
 adDomain4.setTopic("“我想知道令狐安和令计划有什么关系?”");
 adDomain4
 .setImgUrl("/a686c9177f3e670932e4cf9338c79f3df9dc55f2.jpg");
 adDomain4.setAd(false);
 adList.add(adDomain4);

 AdDomain adDomain5 = new AdDomain();
 adDomain5.setId("108078");
 adDomain5.setDate("3月8日");
 adDomain5.setTitle("我和令计划只是同姓");
 adDomain5.setTopicFrom("大熊");
 adDomain5.setTopic("“我想知道令狐安和令计划有什么关系?”");
 adDomain5
 .setImgUrl("/0bd162d9f2d3572c7dad11ba8913632762d0c30d.jpg");
 adDomain5.setAd(true); // 代表是广告
 adList.add(adDomain5);

 return adList;
 }

}

源码下载:http://xiazai.jb51.net/201612/yuanma/AndroidBannerAutoScroll(jb51.net).rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2016-12-10

Android ViewPager实现无限循环轮播广告位Banner效果

现在一些app通常会在头部放一个广告位,底部放置一行小圆圈指示器,指示广告位当前的页码,轮播展示一些图片,这些图片来自于网络.这个广告位banner是典型的android ViewPager实现,但是如果自己实现这样的ViewPager,要解决一系列琐碎的问题,比如: (1)这个广告位ViewPager要支持无限循环轮播,例如,有3张图片,A,B,C,当用户滑到最后C时候再滑就要滑到A,反之亦然. (2)ViewPager要实现自动播放,比如每个若干秒如2秒,自动切换播放到下一张图片. (3)通

android实现banner轮播图无限轮播效果

本文实例为大家分享了banner轮播图无限轮播效果的具体代码,供大家参考,具体内容如下 效果展示 第一步(权限配置) <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission andr

Android组件banner实现左右滑屏效果

什么是banner组件?在许多Android应用上,比如爱奇艺客户端.百度美拍.应用宝等上面,都有一个可以手动滑动的小广告条,这就是banner,实际应用中的banner,其信息(图片和点击行为)是后台可配置的,是需要通过网络从后台拉取的.网上有许多手动滑屏的例子,但是一般只是个demo,无法在实际中使用,因为其一般没有考虑如下几类问题:图片缓存.OOM问题.是否可灵活配置.是否预留外部接口以及是否封装良好.没有良好的封装,手动滑屏加在代码中,会使得代码变得很烂很脆弱. 1.原理 参见下图.整个

Android自定义封装banner组件

自定义封装 banner 组件,供大家参考,具体内容如下 1. 效果图预览  2.基本功能 一个简单方便的轮播图组件,基于viewpager 基础上进行的封装. 可设置 项目中图片,网络图片, View: 支持循环自动播放,手势滑动切换,item点击事件,可设置 点点的样式宽高.颜色.大小.位置 : 可设置蒙层:可设置 是否允许滑动:可设置 是否允许循环. 3.基本实现 1). 自定义属性 <declare-styleable name="BannerLayoutStyle"&g

Android自动播放Banner图片轮播效果

先看一下效果图 支持本地图片以及网络图片or本地网络混合. 使用方式: <com.jalen.autobanner.BannerView android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="230dip"> </com.jalen.autobanner.BannerView> 核心代码: int length

Android convinientbanner顶部广告轮播控件使用详解

本文实例为大家分享了convinientbanner顶部广告轮播控件的具体代码,供大家参考,具体内容如下 gradle中添加 compile 'com.bigkoo:convenientbanner:2.0.5' 布局 <com.bigkoo.convenientbanner.ConvenientBanner xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/convenientBa

Android实现Banner界面广告图片循环轮播(包括实现手动滑动循环)

前言:经常会看到有一些app的banner界面可以实现循环播放多个广告图片和手动滑动循环.本以为单纯的ViewPager就可以实现这些功能.但是蛋疼的事情来了,ViewPager并不支持循环翻页.所以要实现循环还得需要自己去动手.自己在网上也找了些例子,本博文的Demo是结合自己找到的一些相关例子的基础上去改造,也希望对读者有用. Demo实现的效果图如下: Demo代码: 工程目录如下图: 废话不多说,上代码. 1.主Activity代码如下: package com.stevenhu.and

Android中banner的使用步骤

Step 1.依赖banner Gradle dependencies{ compile 'com.youth.banner:banner:1.4.9' //最新版本 } 或者引用本地lib compile project(':banner') Step 2.添加权限到你的 AndroidManifest.xml <!-- if you want to load images from the internet --> <uses-permission android:name=&quo

Android 中Banner的使用详解

首先倒入一个依赖: compile 'com.youth.banner:banner:1.4.9' 添加的权限: <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 布局文件: <com.youth.banner.B

Android ViewPager实现Banner循环播放

问题的起源 在项目里,有时候需要实现一个图片轮播的效果,用来展示Banner.同时,图片能循环播放,下面还有一排小圆点来指示当前轮播到哪一页了. 如下图: 分析 · 图片的个数是会变化的,同时小圆点的个数也会跟着图片个数变化 · 每一个page的布局是一样的.变化的就是小圆点的个数,所以需要用代码来动态生成小圆点 编码 布局 首先完成 MainActivity 的布局 activity_main.xml <RelativeLayout xmlns:android="http://schem

Android ViewPager实现无限循环的实例

Android ViewPager实现无限循环的实例 ViewPager自身并不支持左右无限循环的功能,这里就提供一种方案让Android ViewPager实现左右无限循环的功能,这里记录下: 用于显示的mViews,比数据源mList,多了两个节点元素(头节点0:b和尾节点5:e用于跳转) 下图的不带箭头的红线,是mViews根据mList初始化的情况:带箭头的红线是跳转的情况. 首先还是布局文件: <RelativeLayout xmlns:android="http://schem

Android Viewpager实现无限循环轮播图

在网上找了很多viewpager实现图片轮播的,但是大多数通过以下方式在PagerAdapter的getCount()返回一个无限大的数,来实现 伪无限 @Override public int getCount() { return Integer.MAX_VALUE;//返回一个无限大的值,可以 无限循环 } 虽然通过这种方式是能达到效果,但是从严格意义上来说并不是真正的无限. 假如有五张轮播图 item的编号为(0,1,2,3,4) 要想实现 无限循环  我们在这五张的头部和尾部各加一张即

Android ViewPager实现无限循环效果

最近项目里有用到ViewPager来做广告运营位展示,看到现在很多APP的广告运营位都是无限循环的,所以就研究了一下这个功能的实现. 先看看效果 从一个方向上一直滑动,么有滑到尽头的感觉,具体是怎么实现的呢?看下面的思路. 实现思路 此处画了一幅图来表达实现无限循环的思路,即在数据起始位置前插入最后一项数据,在最后一项数据后插入第一项数据,当滑动到此处时,更新页面的索引位置就ok了 . 代码实现 这个方法用于数据处理,其中mediaList是原始数据,newMediaList是处理完的数据,mM

Android ViewPager循环播放广告实例详解

Android  实现ViewPager循环播放广告条实例详解 我们经常会看到有一些app的banner界面可以实现循环播放多个广告图片和手动滑动循环的效果.看到那样的效果,相信大家都会想到ViewPager,但是ViewPager并不支持循环翻页,所以要实现循环还得需要自己去动手.最后还有一个问题就是翻页到最后一页如何平滑过渡到首页的问题.这些都源于有人私信问我ViewPager广告条如何平滑过渡的问题,出于这个问题,我想着亲自实现并分享下吧,本篇就是为了解决这些问题而写的. 1.初始化布局

Android实现基于ViewPager的无限循环自动播放带指示器的轮播图CarouselFigureView控件

最近用到需要无限轮播自动播放的轮播轮播图,网上感觉都有这样那样的问题,于是自己写了一个通用的控件CarouselFigureView. 特点: 1.可以轮播view可以自己定义,不一定是要是ImageView2.指示器默认显示,但是可以隐藏3.可以设置指示器的颜色.间距.大小 4.有基础的可以自己修改代码改变指示器位置,这个应该不难5.可以自己开启和关闭自动轮播,开启轮播的时候可以设置轮播时间间隔,默认3000毫秒 我们先来看看效果图: 然后来看看使用代码 xml代码 <?xml version

Android 使用ViewPager实现左右循环滑动及轮播效果

ViewPager是一个常用的Android组件,不过通常我们使用ViewPager的时候不能实现左右无限循环滑动,在滑到边界的时候会看到一个不能翻页的动画,可能影响用户体验.此外,某些区域性的ViewPager(例如展示广告或者公告之类的ViewPager),可能需要自动轮播的效果,即用户在不用滑动的情况下就能够看到其他页面的信息. 循环滑动效果的实现:PagerAdapter 我们知道ViewPager自带的滑动效果非常出色,因此我们基本不需要处理这个滑动,只处理内容的显示.而内容的显示是由

Android 使用viewpager实现无限循环(定时+手动)

循环轮播的方法有两种,一种是使用定时器另外一种是使用手指拨动,相比较而言,定时器实现循环播放比较容易,只要在定时器的消息里加上简单几段代码即可,下面分别就这两种方法给大家详解,具体详情请看下文吧. int count = adapter.getCount(); if (count > 1) { // 多于1个,才循环 int index = viewPager.getCurrentItem(); index = (index + 1) % count; viewPager.setCurrentI

Android实现图片循环播放的实例方法

很多时候,我们需要展示在客户端展示图片,而且是动态显示,即不停地自行切换图片.下面我们来看一下具体的实现方法.首先,我们需要在XML...    很多时候,我们需要展示在客户端展示图片,而且是动态显示,即不停地自行切换图片.下面我们来看一下具体的实现方法. 首先,我们需要在XML文件中配置一下将要播放图片的控件(main.xml): 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearL