Android之——史上最简单图片轮播广告效果实现
来源:互联网 发布:极端勤奋知乎 编辑:程序博客网 时间:2024/05/22 11:08
转载请注明出处:http://blog.csdn.net/l1028386804/article/details/48049913
如今的Android开发需求越来越来多,实现效果越来越酷炫,很多Android APP都要实现PC网站上那样的图片轮播效果,那么,这些图片的轮播效果是如何实现的呢?下面,我就跟大家一起来实现这些酷炫的功能。
一、原理
首先,将这些要轮播的图片和一些文本分别放置在不同的数据集合中,程序启动的时候默认显示一组图片和文本数据,然后启动一个定时器,每隔一段时间便替换掉显示的图片和文本数据,同时加入一些动画效果,已达到轮播的特效。同时,我们也要实现手指滑动图片达到轮播的效果。
二、实现
1、程序启动界面MainActivity
我将所有的实现都放在了MainActivity中,下面我们就来分解来看这个类。
1)成员变量
这些成员变量包括界面上显示的控件,存放图片的id数组,存放图片的标题数组,自定义的ViewPagerAdapter适配器,线程池ScheduledExecutorService
具体代码如下:
private ViewPager mViewPaper;private List<ImageView> images;private List<View> dots;private int currentItem;//记录上一次点的位置private int oldPosition = 0;//存放图片的idprivate 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设置页面变化监听事件。
具体实现代码如下:
@Overrideprotected 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() {@Overridepublic 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;}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageScrollStateChanged(int arg0) {}});}
3)自定义Adapter类ViewPagerAdapter
这个自定义的Adapter类不同于以往的自定义Adapter类,它继承自PagerAdapter,PagerAdapter中实现了图片切换的动画效果
将具体实现代码如下:
/** * 自定义Adapter * @author liuyazhuang * */private class ViewPagerAdapter extends PagerAdapter{@Overridepublic int getCount() {return images.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic 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));}@Overridepublic Object instantiateItem(ViewGroup view, int position) {// TODO Auto-generated method stubview.addView(images.get(position));return images.get(position);}}
4)onStart()方法
这个方法是界面创建完成,启动时的回调方法,我在这个方法中完成的操作是,创建线程池启动定时调度任务,调用自定义的线程任务,实现定时实现图片轮播效果。
具体实现代码如下:
/** * 利用线程池定时执行动画轮播 */@Overrideprotected void onStart() {// TODO Auto-generated method stubsuper.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{@Overridepublic 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
我在这个方法中主要实现的操作就是停止线程池的执行,释放线程池资源。
具体代码如下:
@Overrideprotected void onStop() {// TODO Auto-generated method stubsuper.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;//存放图片的idprivate 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;@Overrideprotected 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() {@Overridepublic 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;}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageScrollStateChanged(int arg0) {}});}/** * 自定义Adapter * @author liuyazhuang * */private class ViewPagerAdapter extends PagerAdapter{@Overridepublic int getCount() {return images.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic 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));}@Overridepublic Object instantiateItem(ViewGroup view, int position) {// TODO Auto-generated method stubview.addView(images.get(position));return images.get(position);}}@Overridepublic 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;}/** * 利用线程池定时执行动画轮播 */@Overrideprotected void onStart() {// TODO Auto-generated method stubsuper.onStart();scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();scheduledExecutorService.scheduleWithFixedDelay(new ViewPageTask(), 2, 2, TimeUnit.SECONDS);}/** * 图片轮播任务 * @author liuyazhuang * */private class ViewPageTask implements Runnable{@Overridepublic 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);};};@Overrideprotected void onStop() {// TODO Auto-generated method stubsuper.onStop();if(scheduledExecutorService != null){scheduledExecutorService.shutdown();scheduledExecutorService = null;}}}
2、布局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>
3、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>
三、运行效果
四、温馨提示
大家可以到链接http://download.csdn.net/detail/l1028386804/9057555下载Android图片轮播效果实现完整源代码
本实例中,为了方面,我把一些文字直接写在了布局文件中和相关的类中,大家在真实的项目中要把这些文字写在string.xml文件中,在外部引用这些资源,切记,这是作为一个Android程序员最基本的开发常识和规范,我在这里只是为了方便直接写在了类和布局文件中。
- Android之——史上最简单图片轮播广告效果实现
- Android之——史上最简单图片轮播广告效果实现
- Android之——史上最简单图片轮播广告效果实现
- Android之——史上最简单图片轮播广告效果实现
- Android 最简单实现广告轮播效果ConvenientBanner
- 实现简单广告轮播的效果
- Android ViewPager之实现轮播广告效果
- Android 广告轮播效果实现
- RollViewPager简单实现android图片轮播效果
- 轮播广告效果实现
- Android之本地图片轮播(广告轮播)
- Android fragment中广告图片轮播效果的实现(附图 )
- Android之利用Viewpager实现图片的轮播效果
- ANDROID轮播广告图片
- RollViewPager实现android图片轮播效果
- Android开发之ViewPager实现轮播图(轮播广告)效果的自定义View
- Android之ViewPager实现轮播广告效果的自定义View
- Android开发之ViewPager实现轮播图(轮播广告)效果的自定义View
- 监督自己
- Web系统大规模并发——电商秒杀与抢购
- bat 批处理 注册表查找,删除
- IT行业发展前景分析
- The application's PagerAdapter changed the adapter's contents without calling PagerAdapter#notifyDat
- Android之——史上最简单图片轮播广告效果实现
- 有点感伤
- 浅谈sql中的in与not in,exists与not exists的区别
- Spark修炼之道(基础篇)——Linux大数据开发基础:第七节:进程管理
- Partition MapReduce
- FLEX BOX (弹性魔盒) 完全指南
- hdu 3549 Flow Problem EK算法 网络流
- BP神经网络-详解
- 《ArcGIS Runtime SDK for Android开发笔记》——(1)、Android Studio下载与安装