300字范文 > Android UI 实现广告 Banner 轮播效果

Android UI 实现广告 Banner 轮播效果

时间：2021-02-23 14:46:22

编写acitivity_main.xml

一个ViewPager,下面五个指示点，注意每个点都有同样的样式，我们在style.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>

定义圆点图形资源dot_normal.xml,dot_focused.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="/apk/res/android" android:shape="oval" ><solid android:color="#33000000" /><corners android:radius="5dip" /></shape>

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="/apk/res/android"android:shape="oval" ><solid android:color="#aaFFFFFF" /><corners android:radius="5dip" /></shape>

定义广告实体AdDome.java

public class AdDome {private String id;private String title;private String imgUrl;private boolean isAd;private String startTime;private String endTime;private String targetUrl;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 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 {@Overridepublic 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);};};

提供模拟数据来进行测试

private List<AdDome> getBannerAd() {List<AdDome> adList = new ArrayList<AdDome>();AdDome adDome0 = new AdDome();adDome0.setId("108078");adDome0.setTitle("为什么在北极出现“世纪暖冬”同时我们遭遇严寒");adDome0.setImgUrl("/news/pics/hv1/175/13//130638715.jpg");adDome0.setAd(false);adList.add(adDome0);AdDome adDome1 = new AdDome();adDome1.setId("108078");adDome1.setTitle("青海门源发生6.4级地震网友：西宁兰州震感强烈");adDome1.setImgUrl("/news/pics/hv1/168/20//130640493.png");adDome1.setAd(false);adList.add(adDome1);AdDome adDome2 = new AdDome();adDome2.setId("108078");adDome2.setTitle("小学生考卷上留言老师求给80分过好年");adDome2.setImgUrl("/news/pics/hv1/225/96//130659930.jpg");adDome2.setAd(false);adList.add(adDome2);AdDome adDome3 = new AdDome();adDome3.setId("108078");adDome3.setTitle("雷军：不允许内部再讲第一用户比第一重要");adDome3.setImgUrl("/tech/pics/hv1/202/67//130652512.jpg");adDome3.setAd(false);adList.add(adDome3);AdDome adDome4 = new AdDome();adDome4.setId("108078");adDome4.setTitle("政府免费WiFi遭吐槽信号不稳体验差");adDome4.setImgUrl("/tech/pics/hv1/65/52//130648550.jpg");adDome4.setAd(true);// 代表是广告adList.add(adDome4);return adList;}

ViewPager逻辑处理

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

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

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

图片是从网上下载的，用到了universal-image-loader-1.8.6-with-sources.jar这个类库，可以实现异步加载图片，编写MainActivity.java。

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_title;private int currentItem = 0;// 当前图片的号// 定义5个指示点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<AdDome> adList;private Handler handler = new Handler() {public void handleMessage(android.os.Message msg) {adViewPager.setCurrentItem(currentItem);};};@Overrideprotected 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();}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_title = (TextView) findViewById(R.id.tv_title);adViewPager = (ViewPager) findViewById(R.id.vp);adViewPager.setAdapter(new BannerAdapter());// 设置填充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));}}@Overrideprotected void onResume() {super.onResume();}private void startAd() {scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();// 当Activity显示出来后，每两秒切换一次图片显示scheduledExecutorService.scheduleAtFixedRate(new ScrollTask(), 1, 2,TimeUnit.SECONDS);}public class ScrollTask implements Runnable {@Overridepublic void run() {synchronized (adViewPager) {currentItem = (currentItem + 1) % imageViews.size();handler.obtainMessage().sendToTarget();}}}@Overrideprotected void onStop() {super.onStop();// 当Activity不可见的时候停止切换scheduledExecutorService.shutdown();}// 适配器private class BannerAdapter extends PagerAdapter {@Overridepublic int getCount() {return adList.size();}@Overridepublic Object instantiateItem(ViewGroup container, int position) {ImageView iv = imageViews.get(position);((ViewPager) container).addView(iv);final AdDome adDome = adList.get(position);// 在这个方法里面设置图片的点击事件iv.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// 处理跳转逻辑}});return iv;}@Overridepublic void destroyItem(View arg0, int arg1, Object arg2) {((ViewPager) arg0).removeView((View) arg2);}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic void restoreState(Parcelable arg0, ClassLoader arg1) {}@Overridepublic Parcelable saveState() {return null;}@Overridepublic void startUpdate(View arg0) {}@Overridepublic void finishUpdate(View arg0) {}}private class MyPageChangeListener implements OnPageChangeListener {private int oldPosition = 0;public void onPageScrollStateChanged(int arg0) {}public void onPageScrolled(int arg0, float arg1, int arg2) {}public void onPageSelected(int position) {currentItem = position;AdDome adDome = adList.get(position);tv_title.setText(adDome.getTitle()); // 设置标题dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);dots.get(position).setBackgroundResource(R.drawable.dot_focused);oldPosition = position;}}// 轮播广播模拟数据private List<AdDome> getBannerAd() {List<AdDome> adList = new ArrayList<AdDome>();AdDome adDome0 = new AdDome();adDome0.setId("108078");adDome0.setTitle("为什么在北极出现“世纪暖冬”同时我们遭遇严寒");adDome0.setImgUrl("/news/pics/hv1/175/13//130638715.jpg");adDome0.setAd(false);adList.add(adDome0);AdDome adDome1 = new AdDome();adDome1.setId("108078");adDome1.setTitle("青海门源发生6.4级地震网友：西宁兰州震感强烈");adDome1.setImgUrl("/news/pics/hv1/168/20//130640493.png");adDome1.setAd(false);adList.add(adDome1);AdDome adDome2 = new AdDome();adDome2.setId("108078");adDome2.setTitle("小学生考卷上留言老师求给80分过好年");adDome2.setImgUrl("/news/pics/hv1/225/96//130659930.jpg");adDome2.setAd(false);adList.add(adDome2);AdDome adDome3 = new AdDome();adDome3.setId("108078");adDome3.setTitle("雷军：不允许内部再讲第一用户比第一重要");adDome3.setImgUrl("/tech/pics/hv1/202/67//130652512.jpg");adDome3.setAd(false);adList.add(adDome3);AdDome adDome4 = new AdDome();adDome4.setId("108078");adDome4.setTitle("政府免费WiFi遭吐槽信号不稳体验差");adDome4.setImgUrl("/tech/pics/hv1/65/52//130648550.jpg");adDome4.setAd(true);// 代表是广告adList.add(adDome4);return adList;}}

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。