Android之——史上最簡單圖片輪播廣告效果實現

時間  2021-08-12
標籤 html java android 程序員 數組 app ide 佈局 動畫 網站 欄目 Android 简体版
原文   原文鏈接

轉載請註明出處:http://blog.csdn.net/l1028386804/article/details/48049913
html

現在的Android開發需求愈來愈來多，實現效果愈來愈酷炫，不少Android APP都要實現PC網站上那樣的圖片輪播效果，那麼，這些圖片的輪播效果是如何實現的呢？下面，我就跟你們一塊兒來實現這些酷炫的功能。java

1、原理

首先，將這些要輪播的圖片和一些文本分別放置在不一樣的數據集合中，程序啓動的時候默認顯示一組圖片和文本數據，而後啓動一個定時器，每隔一段時間便替換掉顯示的圖片和文本數據，同時加入一些動畫效果，已達到輪播的特效。同時，咱們也要實現手指滑動圖片達到輪播的效果。android

2、實現

一、程序啓動界面MainActivity

我將全部的實現都放在了MainActivity中，下面咱們就來分解來看這個類。程序員

1)成員變量

這些成員變量包括界面上顯示的控件，存放圖片的id數組，存放圖片的標題數組，自定義的ViewPagerAdapter適配器，線程池ScheduledExecutorService數組

具體代碼以下:app

private ViewPager mViewPaper;
private List<ImageView> images;
private List<View> dots;
private int currentItem;
//記錄上一次點的位置
private int oldPosition = 0;
//存放圖片的id
private int[] imageIds = new int[]{
		R.drawable.a,
		R.drawable.b,
		R.drawable.c,
		R.drawable.d,
		R.drawable.e
};
//存放圖片的標題
private String[]  titles = new String[]{
    	"鞏俐不低俗，我就不能低俗",	
    	"撲樹又回來啦！再唱經典老歌引萬人大合唱",	
    	"揭祕北京電影如何升級",	
    	"樂視網TV版大派送",	
    	"熱血屌絲的反殺"
    };
private TextView title;
private ViewPagerAdapter adapter;
private ScheduledExecutorService scheduledExecutorService;

2)onCreate方法

這個方法是程序啓動建立界面時的回調方法，這個方法中主要實現的功能就是初始化界面，同時爲ViewPager設置頁面變化監聽事件。ide

具體實現代碼以下:佈局

@Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	mViewPaper = (ViewPager) findViewById(R.id.vp);
	
	//顯示的圖片
	images = new ArrayList<ImageView>();
	for(int i = 0; i < imageIds.length; i++){
		ImageView imageView = new ImageView(this);
		imageView.setBackgroundResource(imageIds[i]);
		images.add(imageView);
	}
	//顯示的小點
	dots = new ArrayList<View>();
	dots.add(findViewById(R.id.dot_0));
	dots.add(findViewById(R.id.dot_1));
	dots.add(findViewById(R.id.dot_2));
	dots.add(findViewById(R.id.dot_3));
	dots.add(findViewById(R.id.dot_4));
	
	title = (TextView) findViewById(R.id.title);
	title.setText(titles[0]);
	
	adapter = new ViewPagerAdapter();
	mViewPaper.setAdapter(adapter);
	
	mViewPaper.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
		

		@Override
		public void onPageSelected(int position) {
			title.setText(titles[position]);
			dots.get(position).setBackgroundResource(R.drawable.dot_focused);
			dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);
			
			oldPosition = position;
			currentItem = position;
		}
		
		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
			
		}
		
		@Override
		public void onPageScrollStateChanged(int arg0) {
			
		}
	});
}

3)自定義Adapter類ViewPagerAdapter

這個自定義的Adapter類不一樣於以往的自定義Adapter類，它繼承自PagerAdapter，PagerAdapter中實現了圖片切換的動畫效果動畫

將具體實現代碼以下:網站

/**
 * 自定義Adapter
 * @author liuyazhuang
 *
 */
private class ViewPagerAdapter extends PagerAdapter{

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

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

	@Override
	public void destroyItem(ViewGroup view, int position, Object object) {
		// TODO Auto-generated method stub
//			super.destroyItem(container, position, object);
//			view.removeView(view.getChildAt(position));
//			view.removeViewAt(position);
		view.removeView(images.get(position));
	}

	@Override
	public Object instantiateItem(ViewGroup view, int position) {
		// TODO Auto-generated method stub
		view.addView(images.get(position));
		return images.get(position);
	}
	
}

4)onStart()方法

這個方法是界面建立完成，啓動時的回調方法，我在這個方法中完成的操做是，建立線程池啓動定時調度任務，調用自定義的線程任務，實現定時實現圖片輪播效果。

具體實現代碼以下：

/**
 * 利用線程池定時執行動畫輪播
 */
@Override
protected void onStart() {
	// TODO Auto-generated method stub
	super.onStart();
	scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
	scheduledExecutorService.scheduleWithFixedDelay(
			new ViewPageTask(), 
			2, 
			2, 
			TimeUnit.SECONDS);
}

5)圖片輪播任務ViewPageTask

這個類實現了Runnable接口，在run方法中實現了圖片輪播的顯示效果，並經過handler通知UI線程，UI線程更新界面顯示，這裏咱們不須要傳遞任何數據，因此經過handler發送空消息便可。

具體實現代碼以下:

/**
 * 圖片輪播任務
 * @author liuyazhuang
 *
 */
private class ViewPageTask implements Runnable{

	@Override
	public void run() {
		currentItem = (currentItem + 1) % imageIds.length;
		mHandler.sendEmptyMessage(0);
	}
}

6)handler

接收ViewPageTask消息完成UI更新操做

具體實現代碼以下：

/**
 * 接收子線程傳遞過來的數據
 */
private Handler mHandler = new Handler(){
	public void handleMessage(android.os.Message msg) {
		mViewPaper.setCurrentItem(currentItem);
	};
};

7)onStop

我在這個方法中主要實現的操做就是中止線程池的執行，釋放線程池資源。

具體代碼以下:

@Override
protected void onStop() {
	// TODO Auto-generated method stub
	super.onStop();
	if(scheduledExecutorService != null){
		scheduledExecutorService.shutdown();
		scheduledExecutorService = null;
	}
}

8)完整代碼以下：

package com.lyz.viewpage.activity;

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.os.Bundle;
import android.os.Handler;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

/**
 * 程序主入口
 * @author liuyazhuang
 *
 */
public class MainActivity extends Activity {

	private ViewPager mViewPaper;
	private List<ImageView> images;
	private List<View> dots;
	private int currentItem;
	//記錄上一次點的位置
	private int oldPosition = 0;
	//存放圖片的id
	private int[] imageIds = new int[]{
			R.drawable.a,
			R.drawable.b,
			R.drawable.c,
			R.drawable.d,
			R.drawable.e
	};
	//存放圖片的標題
	private String[]  titles = new String[]{
        	"鞏俐不低俗，我就不能低俗",	
        	"撲樹又回來啦！再唱經典老歌引萬人大合唱",	
        	"揭祕北京電影如何升級",	
        	"樂視網TV版大派送",	
        	"熱血屌絲的反殺"
        };
	private TextView title;
	private ViewPagerAdapter adapter;
	private ScheduledExecutorService scheduledExecutorService;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		mViewPaper = (ViewPager) findViewById(R.id.vp);
		
		//顯示的圖片
		images = new ArrayList<ImageView>();
		for(int i = 0; i < imageIds.length; i++){
			ImageView imageView = new ImageView(this);
			imageView.setBackgroundResource(imageIds[i]);
			images.add(imageView);
		}
		//顯示的小點
		dots = new ArrayList<View>();
		dots.add(findViewById(R.id.dot_0));
		dots.add(findViewById(R.id.dot_1));
		dots.add(findViewById(R.id.dot_2));
		dots.add(findViewById(R.id.dot_3));
		dots.add(findViewById(R.id.dot_4));
		
		title = (TextView) findViewById(R.id.title);
		title.setText(titles[0]);
		
		adapter = new ViewPagerAdapter();
		mViewPaper.setAdapter(adapter);
		
		mViewPaper.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
			

			@Override
			public void onPageSelected(int position) {
				title.setText(titles[position]);
				dots.get(position).setBackgroundResource(R.drawable.dot_focused);
				dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);
				
				oldPosition = position;
				currentItem = position;
			}
			
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				
			}
			
			@Override
			public void onPageScrollStateChanged(int arg0) {
				
			}
		});
	}

	/**
	 * 自定義Adapter
	 * @author liuyazhuang
	 *
	 */
	private class ViewPagerAdapter extends PagerAdapter{

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

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

		@Override
		public void destroyItem(ViewGroup view, int position, Object object) {
			// TODO Auto-generated method stub
//			super.destroyItem(container, position, object);
//			view.removeView(view.getChildAt(position));
//			view.removeViewAt(position);
			view.removeView(images.get(position));
		}

		@Override
		public Object instantiateItem(ViewGroup view, int position) {
			// TODO Auto-generated method stub
			view.addView(images.get(position));
			return images.get(position);
		}
		
	}
	
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	/**
	 * 利用線程池定時執行動畫輪播
	 */
	@Override
	protected void onStart() {
		// TODO Auto-generated method stub
		super.onStart();
		scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
		scheduledExecutorService.scheduleWithFixedDelay(
				new ViewPageTask(), 
				2, 
				2, 
				TimeUnit.SECONDS);
	}
	
	
	/**
	 * 圖片輪播任務
	 * @author liuyazhuang
	 *
	 */
	private class ViewPageTask implements Runnable{

		@Override
		public void run() {
			currentItem = (currentItem + 1) % imageIds.length;
			mHandler.sendEmptyMessage(0);
		}
	}
	
	/**
	 * 接收子線程傳遞過來的數據
	 */
	private Handler mHandler = new Handler(){
		public void handleMessage(android.os.Message msg) {
			mViewPaper.setCurrentItem(currentItem);
		};
	};
	@Override
	protected void onStop() {
		// TODO Auto-generated method stub
		super.onStop();
		if(scheduledExecutorService != null){
			scheduledExecutorService.shutdown();
			scheduledExecutorService = null;
		}
	}
	
}

二、佈局activity_main.xml

具體實現代碼以下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="200dip" >

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="35dip"
            android:layout_gravity="bottom"
            android:background="#33000000"
            android:gravity="center"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="圖片標題"
                android:textColor="@android:color/white" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="3dip"
                android:orientation="horizontal" >

                <View
                    android:id="@+id/dot_0"
                    android:layout_width="5dip"
                    android:layout_height="5dip"
                    android:layout_marginLeft="2dip"
                    android:layout_marginRight="2dip" 
                    android:background="@drawable/dot_focused"/>

                <View
                    android:id="@+id/dot_1"
                    android:layout_width="5dip"
                    android:layout_height="5dip"
                    android:layout_marginLeft="2dip"
                    android:layout_marginRight="2dip" 
                    android:background="@drawable/dot_normal"/>
                <View
                    android:id="@+id/dot_2"
                    android:layout_width="5dip"
                    android:layout_height="5dip"
                    android:layout_marginLeft="2dip"
                    android:layout_marginRight="2dip" 
                    android:background="@drawable/dot_normal"/>
                <View
                    android:id="@+id/dot_3"
                    android:layout_width="5dip"
                    android:layout_height="5dip"
                    android:layout_marginLeft="2dip"
                    android:layout_marginRight="2dip" 
                    android:background="@drawable/dot_normal"/>
                <View
                    android:id="@+id/dot_4"
                    android:layout_width="5dip"
                    android:layout_height="5dip"
                    android:layout_marginLeft="2dip"
                    android:layout_marginRight="2dip" 
                    android:background="@drawable/dot_normal"/>
                
            </LinearLayout>
        </LinearLayout>
    </FrameLayout>

</RelativeLayout>

三、AndroidManifest.xml

這個文件不須要作任何更新。

具體代碼以下：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.lyz.viewpage.activity"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="10"
        android:targetSdkVersion="18" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.lyz.viewpage.activity.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

3、運行效果

4、舒適提示

你們能夠到連接http://download.csdn.net/detail/l1028386804/9057555下載Android圖片輪播效果實現完整源代碼

本實例中，爲了方面，我把一些文字直接寫在了佈局文件中和相關的類中，你們在真實的項目中要把這些文字寫在string.xml文件中，在外部引用這些資源，切記，這是做爲一個Android程序員最基本的開發常識和規範，我在這裏只是爲了方便直接寫在了類和佈局文件中。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程