Android 广告轮播效果实现

效果实现"/>

Android 广告轮播效果实现

使用ViewPager实现Android的广告轮播效果，广告轮播是很多电商网站的必备，比如淘宝、京东的顶部广告轮播条，今天我们就是一步步利用ViewPager来实现广告轮播效果！

• 界面布局
• 资源文件编写
• 实现轮播

一、界面的布局

先来个效果图：

顶部就是我们的广告轮播效果，首先可以看到有图片，描述性文字，还有最后的小点，来指示当前的界面！因此布局上就需要包含上面的几个控件，其中图片的位置可以利用ViewPager来放，废话不多说直接上代码：fragment_shouye.xml：

<RelativeLayout xmlns:android=""xmlns:tools=""android:layout_width="match_parent"android:layout_height="match_parent"><android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"android:layout_width="wrap_content"android:layout_height="150dp"></android.support.v4.view.ViewPager><LinearLayout
        android:id="@+id/id_dots_content"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignBottom="@+id/id_viewpager"android:background="#33000000"android:orientation="vertical"android:padding="4dp"><TextView
            android:id="@+id/id_image_desc"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:text="这个是描述"android:textColor="#ffffff" /><LinearLayout
            android:id="@+id/id_dots"android:layout_width="wrap_content"android:layout_height="wrap_content"android:paddingTop="4dp"android:paddingBottom="4dp"android:background="@drawable/dotsgroupbg"android:layout_gravity="center_horizontal"android:orientation="horizontal"></LinearLayout></LinearLayout>
</RelativeLayout>

二、资源文件的编写

上面的代码中我们为下面的点的父View设置了对应的资源背景：dotsgroupbg.xml
实现的效果是一个白色半透明周边有弧度的矩形背景，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="" android:shape="rectangle">
<corners android:radius="8dp"/><solid android:color="#66ffffff" />
</shape>

除了要实现上述的点的父View的背景，接下来我们用到的指示的小圆点由于比较简单，因此也直接使用资源文件来实现两个点：
首先是未被选择时的点point_normal.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android=""android:shape="oval"><size
        android:width="5dp"android:height="5dp" /><stroke android:color="#FFFFFF" android:width="1dp"/>
</shape>

然后是选择中时的点point_focused.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android=""android:shape="oval"><size
        android:width="5dp"android:height="5dp" /><solid android:color="#D075EA" /><stroke android:color="#FFFFFF" android:width="0.1dp"/>
</shape>

然后为这两个状态做一个选择器，从而可以为状态变化时做不同的背景point_bg.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android=""><item android:drawable="@drawable/point_normal" android:state_enabled="false" /><item android:drawable="@drawable/point_focused" android:state_enabled="true" />
</selector>

上面我们就把所需要的资源文件编写好了，接下来就是对界面控制代码的书写。

三、控制代码书写

首先我们需要明白ViewPager的原理，ViewPager的使用与ListView的使用差不多，都需要Adapter适配器来提供视图，与ListView不同的是ViewPager不是会复用视图资源，为了保证不会出现内存的溢出，ViewPager的机制上会自动只创建相邻的三个界面，多余的界面就会销毁掉，因此在使用Adapter时候需要实现销毁与创建的方法。
第一步定义好图片资源与描述资源：

    //控件的声明private ViewPager viewPager;private TextView imageDesc;private LinearLayout dotsGroup;//数据声明//图片资源的IDfinal int[] imageIds = {R.mipmap.a, R.mipmap.b,R.mipmap.c, R.mipmap.d, R.mipmap.e};//用来保存上个视图的位置private int lastPoint;//为了不让Fragment每次在调用oncreteView都创建视图，造成视图的重复，定义一个布尔类型来确定是不是第一次调用private boolean isFirstCreateView = true;//图片标题集合private final String[] imageDescriptions = {"巩俐不低俗，我就不能低俗","扑树又回来啦！再唱经典老歌引万人大合唱","揭秘北京电影如何升级","乐视网TV版大派送","热血屌丝的反杀"}; //保存List<ImageView> imageList = new ArrayList<ImageView>();List<String> descList = new ArrayList<String>();

第二步继承PageAdapter实现自己的PageAdapter:

private class MyPagerAdapter extends PagerAdapter {@Override/*** 获得页面的总数*/public int getCount() {return imageList.size();}@Override/*** 获得相应位置上的view* container  view的容器，其实就是viewpager自身* position     相应的位置*/public Object instantiateItem(ViewGroup container, int position) {container.addView(imageList.get(position % imageList.size()));return imageList.get(position % imageList.size());}@Override/*** 判断 view和object的对应关系*/public boolean isViewFromObject(View view, Object object) {if (view == object) {return true;} else {return false;}}@Override/*** 销毁对应位置上的object*/public void destroyItem(ViewGroup container, int position, Object object) {container.removeView((View) object);object = null;}}

第三步，为ViewPager设置Adapter：

viewPager.setAdapter(new MyPagerAdapter());

为实现无限循环，只需要在getCount()方法中返回的数值是无限大即可，但是你知道不可能有无限大的数，因此我们可以取整形的最大值，因此需要将返回值改为：return Integer.MAX_VALUE;即可
同时为了需要实现可以左右滑动的话，我们只需要在进来的时候气势位置设置到无限大值得中间就可以：

 viewPager.setCurrentItem(Integer.MAX_VALUE / 2 - (Integer.MAX_VALUE / 2 % imageList.size()));//减去后面的数是为了保证一开始的界面是我们的第一张图片

接下来就是添加图片与点：

private void initData() {if (isFirstCreateView) {for (int i = 0; i < imageIds.length; i++) {//初始化图片资源ImageView imageView = new ImageView(getActivity());imageView.setBackgroundResource(imageIds[i]);imageList.add(imageView);//初始化点ImageView point = new ImageView(getActivity());LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);if (i == 0) {isFirstCreateView = false;point.setEnabled(true);layoutParams.rightMargin = 30;layoutParams.leftMargin = 30;point.setLayoutParams(layoutParams);} else {layoutParams.rightMargin = 30;point.setLayoutParams(layoutParams);point.setEnabled(false);}point.setBackgroundResource(R.drawable.point_bg);dotsGroup.addView(point);}}}

然后为ViewPager设置监听器，就可以动态修改对应的文字描述与点的状态了：

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {@Override/*** 页面正在滑动的时候，回调*/public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Override/*** 页面切换后调用* position  新的页面位置*/public void onPageSelected(int position) {position = position % imageList.size();imageDesc.setText(imageDescriptions[position]);dotsGroup.getChildAt(lastPoint).setEnabled(false);dotsGroup.getChildAt(position).setEnabled(true);lastPoint = position;}@Override/*** 当页面状态发生变化的时候，回调*/public void onPageScrollStateChanged(int state) {}});

好了按照上面的实现方式，我们可以实现广告了滑动切换了，为了增加自动轮播效果我们可以采用Handler发送延时消息来实现自动的轮播：

 /*** 判断是否自动滚动*/private boolean isRunning = false;private Handler handler = new Handler() {public void handleMessage(android.os.Message msg) {//让viewPager 滑动到下一页viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);if (isRunning) {handler.sendEmptyMessageDelayed(0, 2000);}}};

下面是控制代码的总代码：

package com.garvey.modules;import android.os.Bundle;
import android.os.Handler;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TextView;import com.garvey.babyshop.R;import java.util.ArrayList;
import java.util.List;/*** 作者： Garvey on 2016/6/13.* 邮箱： lianjiawei18@163*/
public class ShouYeFragment extends Fragment {// 缓存Fragment viewprivate View rootView;private static ShouYeFragment shouYeFragment;//控件的声明private ViewPager viewPager;private TextView imageDesc;private LinearLayout dotsGroup;//数据声明final int[] imageIds = {R.mipmap.a, R.mipmap.b,R.mipmap.c, R.mipmap.d, R.mipmap.e};private int lastPoint;private boolean isFirstCreateView = true;//图片标题集合private final String[] imageDescriptions = {"巩俐不低俗，我就不能低俗","扑树又回来啦！再唱经典老歌引万人大合唱","揭秘北京电影如何升级","乐视网TV版大派送","热血屌丝的反杀"};List<ImageView> imageList = new ArrayList<ImageView>();List<String> descList = new ArrayList<String>();public ShouYeFragment() {}public static ShouYeFragment getNewInstance() {if (shouYeFragment == null) {shouYeFragment = new ShouYeFragment();}return shouYeFragment;}@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {if (rootView == null) {rootView = inflater.inflate(R.layout.fragment_shouye, container, false);}// 缓存的rootView需要判断是否已经被加过parent，// 如果有parent需要从parent删除，要不然会发生这个rootview已经有parent的错误。ViewGroup parent = (ViewGroup) rootView.getParent();if (parent != null) {parent.removeView(rootView);}initView();initData();initEvent();return rootView;}private void initView() {viewPager = (ViewPager) rootView.findViewById(R.id.id_viewpager);imageDesc = (TextView) rootView.findViewById(R.id.id_image_desc);dotsGroup = (LinearLayout) rootView.findViewById(R.id.id_dots);imageDesc.setText(imageDescriptions[0]);}private void initData() {if (isFirstCreateView) {for (int i = 0; i < imageIds.length; i++) {//初始化图片资源ImageView imageView = new ImageView(getActivity());imageView.setBackgroundResource(imageIds[i]);imageList.add(imageView);//初始化点ImageView point = new ImageView(getActivity());LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);if (i == 0) {isFirstCreateView = false;point.setEnabled(true);layoutParams.rightMargin = 30;layoutParams.leftMargin = 30;point.setLayoutParams(layoutParams);} else {layoutParams.rightMargin = 30;point.setLayoutParams(layoutParams);point.setEnabled(false);}point.setBackgroundResource(R.drawable.point_bg);dotsGroup.addView(point);}}}private void initEvent() {viewPager.setAdapter(new MyPagerAdapter());viewPager.setCurrentItem(Integer.MAX_VALUE / 2 - (Integer.MAX_VALUE / 2 % imageList.size()));viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {@Override/*** 页面正在滑动的时候，回调*/public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Override/*** 页面切换后调用* position  新的页面位置*/public void onPageSelected(int position) {position = position % imageList.size();imageDesc.setText(imageDescriptions[position]);dotsGroup.getChildAt(lastPoint).setEnabled(false);dotsGroup.getChildAt(position).setEnabled(true);lastPoint = position;}@Override/*** 当页面状态发生变化的时候，回调*/public void onPageScrollStateChanged(int state) {}});isRunning = true;handler.sendEmptyMessageDelayed(0, 2000);}/*** 判断是否自动滚动*/private boolean isRunning = false;private Handler handler = new Handler() {public void handleMessage(android.os.Message msg) {//让viewPager 滑动到下一页viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);if (isRunning) {handler.sendEmptyMessageDelayed(0, 2000);}}};public void onDestroy() {isRunning = false;super.onDestroy();};@Overridepublic void onResume() {super.onResume();}private class MyPagerAdapter extends PagerAdapter {@Override/*** 获得页面的总数*/public int getCount() {return Integer.MAX_VALUE;}@Override/*** 获得相应位置上的view* container  view的容器，其实就是viewpager自身* position     相应的位置*/public Object instantiateItem(ViewGroup container, int position) {container.addView(imageList.get(position % imageList.size()));return imageList.get(position % imageList.size());}@Override/*** 判断 view和object的对应关系*/public boolean isViewFromObject(View view, Object object) {if (view == object) {return true;} else {return false;}}@Override/*** 销毁对应位置上的object*/public void destroyItem(ViewGroup container, int position, Object object) {container.removeView((View) object);object = null;}}
}

按照上述方式我们就实现了广告的轮播效果
资源下载链接：