Android UI 实现广告 Banner 轮播效果

最新推荐文章于 2021-05-25 15:22:04 发布

tian_di_yi_jian

最新推荐文章于 2021-05-25 15:22:04 发布

阅读量641

点赞数

分类专栏： Android 文章标签： Android UI Banner

Android 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

编写acitivity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
<p>    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" ></p>
    <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="wrap_content" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="210dp"
            android:background="@drawable/shadow_article"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/tv_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="26dp"
                android:text="为什么在北极出现“世纪暖冬”同时我们遭遇严寒"
                android:textColor="@color/white" />
        </RelativeLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center_horizontal"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="10dip"
            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中定义样式：

<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

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

<?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>

定义广告实体 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秒执行一次图片切换

<span style="white-space:pre">	</span>private void startAd() {
		scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
		// 当Activity显示出来后，每两秒切换一次图片显示
		scheduledExecutorService.scheduleAtFixedRate(new ScrollTask(), 1, 2,
				TimeUnit.SECONDS);
	}

定义子线程

<span style="white-space:pre">	</span>private class ScrollTask implements Runnable {

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

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

<span style="white-space:pre">	</span>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("http://img1.gtimg.com/news/pics/hv1/175/13/2009/130638715.jpg");
		adDome0.setAd(false);
		adList.add(adDome0);

		AdDome adDome1 = new AdDome();
		adDome1.setId("108078");
		adDome1.setTitle("青海门源发生6.4级地震 网友：西宁兰州震感强烈");
		adDome1.setImgUrl("http://img1.gtimg.com/news/pics/hv1/168/20/2009/130640493.png");
		adDome1.setAd(false);
		adList.add(adDome1);

		AdDome adDome2 = new AdDome();
		adDome2.setId("108078");
		adDome2.setTitle("小学生考卷上留言老师 求给80分过好年");
		adDome2.setImgUrl("http://img1.gtimg.com/news/pics/hv1/225/96/2009/130659930.jpg");
		adDome2.setAd(false);
		adList.add(adDome2);

		AdDome adDome3 = new AdDome();
		adDome3.setId("108078");
		adDome3.setTitle("雷军：不允许内部再讲第一 用户比第一重要");
		adDome3.setImgUrl("http://img1.gtimg.com/tech/pics/hv1/202/67/2009/130652512.jpg");
		adDome3.setAd(false);
		adList.add(adDome3);

		AdDome adDome4 = new AdDome();
		adDome4.setId("108078");
		adDome4.setTitle("政府免费WiFi遭吐槽 信号不稳体验差");
		adDome4.setImgUrl("http://img1.gtimg.com/tech/pics/hv1/65/52/2009/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);
		};
	};

	@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();
	}

	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));
		}
	}

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

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

	public 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 BannerAdapter 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 AdDome adDome = 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) {

		}

	}

	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("http://img1.gtimg.com/news/pics/hv1/175/13/2009/130638715.jpg");
		adDome0.setAd(false);
		adList.add(adDome0);

		AdDome adDome1 = new AdDome();
		adDome1.setId("108078");
		adDome1.setTitle("青海门源发生6.4级地震 网友：西宁兰州震感强烈");
		adDome1.setImgUrl("http://img1.gtimg.com/news/pics/hv1/168/20/2009/130640493.png");
		adDome1.setAd(false);
		adList.add(adDome1);

		AdDome adDome2 = new AdDome();
		adDome2.setId("108078");
		adDome2.setTitle("小学生考卷上留言老师 求给80分过好年");
		adDome2.setImgUrl("http://img1.gtimg.com/news/pics/hv1/225/96/2009/130659930.jpg");
		adDome2.setAd(false);
		adList.add(adDome2);

		AdDome adDome3 = new AdDome();
		adDome3.setId("108078");
		adDome3.setTitle("雷军：不允许内部再讲第一 用户比第一重要");
		adDome3.setImgUrl("http://img1.gtimg.com/tech/pics/hv1/202/67/2009/130652512.jpg");
		adDome3.setAd(false);
		adList.add(adDome3);

		AdDome adDome4 = new AdDome();
		adDome4.setId("108078");
		adDome4.setTitle("政府免费WiFi遭吐槽 信号不稳体验差");
		adDome4.setImgUrl("http://img1.gtimg.com/tech/pics/hv1/65/52/2009/130648550.jpg");
		adDome4.setAd(true);// 代表是广告
		adList.add(adDome4);

		return adList;
	}

}