在安卓中，怎么通过ViewPager来实现轮播图的效果？

轮播图的效果就如图所示，5张图片开始轮播。

一.在res文件夹下建立一个drawable文件，drawable文件下有三个文件：

1.dot_focus.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="#ffffff"/>
</shape>

2.dot_unfocus.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="#aa000000"/>
</shape>

3.selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_enabled="true" android:drawable="@drawable/dot_focus"></item>
<item android:drawable="@drawable/dot_unfocus"></item>
</selector>

二.Layout文件夹下有两个文件：

1.adapter_bd.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <ImageView 
        android:layout_width="match_parent"
        android:src="@drawable/a"
        android:id="@+id/image"
        android:scaleType="fitXY"
        android:layout_height="match_parent"/>
</LinearLayout>

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"
    tools:context=".MainActivity" >


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


    <LinearLayout
        android:layout_alignBottom="@id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#77000000"
        android:padding="8dp"
        android:orientation="vertical" >


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:textColor="#ffffff"
            android:textSize="16sp"
            android:singleLine="true"
            android:ellipsize="end"
            android:id="@+id/tv_intro"
            android:text="我是文本" />


        <LinearLayout
            android:layout_marginTop="3dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/dot_layout"
            android:layout_gravity="center_horizontal"
            android:orientation="horizontal" >
            
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

二.src文件夹下，com.qunar.viewPager包下有两个java文件：

1.Ad.java

package com.qunar.viewpager;
//这个类是一个泛型，目的就是把图片和描述信息（尹恩惠a...）放在一起


public class Ad {
private int iconResId;
private String intro;


public Ad(int iconResId, String intro) {
super();
this.iconResId = iconResId;
this.intro = intro;
}
public int getIconResId() {
return iconResId;
}
public void setIconResId(int iconResId) {
this.iconResId = iconResId;
}
public String getIntro() {
return intro;
}
public void setIntro(String intro) {
this.intro = intro;
}


}

2.MainActivity.java

package com.qunar.viewpager;


import java.util.ArrayList;


import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
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;


public class MainActivity extends Activity {
private ViewPager viewPager;
private TextView tv_intro;
private LinearLayout dot_layout;

private ArrayList<Ad> list = new ArrayList<Ad>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
initView();
initListener();
initData();
}




private void initView() {
setContentView(R.layout.activity_main);
//找到ViewPager这个控件
viewPager = (ViewPager) findViewById(R.id.viewPager);
//找到描述信息TextView这个控件
tv_intro = (TextView) findViewById(R.id.tv_intro);
//找到小圆点的控件
dot_layout = (LinearLayout) findViewById(R.id.dot_layout);
}

private void initListener() {
//轮播图中的几张图片，把每次图片改变的时候设置一个监听
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int position) {

                //打印这个页面，就是为了证明5张图片可以轮播几次
Log.e("Activity", "position: "+position);

              //更新消息的目的就是页面轮播的时候，描述信息，还有对应的小圆点都得更新
updateIntroAndDot();
}
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}

private void initData() {
list.add(new Ad(R.drawable.a, "尹恩惠a"));
list.add(new Ad(R.drawable.b, "尹恩惠b"));
list.add(new Ad(R.drawable.c, "尹恩惠c"));
list.add(new Ad(R.drawable.d, "尹恩惠d"));
list.add(new Ad(R.drawable.e, "尹恩惠e"));

initDots();
//把viewPager设置一个适配器,目的就是为了给viewPager里面加数据
viewPager.setAdapter(new MyPagerAdapter());

updateIntroAndDot();
}

private void initDots(){
for (int i = 0; i < list.size(); i++) {

                      //this代表的是context，是上下文的意思，建立view对象的目的就是为了把这几个小圆点给设置进来view里，达到在页面上显示的效果
View view = new View(this);
//param的意思的参数的意思，定义了一个圆点的高度和宽度都为8像素
LayoutParams params = new LayoutParams(8, 8);
    if(i!=0){

                      //i=0代表的是第一个小圆点，然而i!=0,表示的是之后的小圆点，每个小圆点距离左边的小圆点为5像素
params.leftMargin = 5;

}

                      //把这几个小圆点设置进来在view中
view.setLayoutParams(params);
    //就是把小圆点设置背景，要么选中，要么不被选中
view.setBackgroundResource(R.drawable.selector_dot);
  //view就代表小圆点，把所有的小圆点都添加到LinearLayout
dot_layout.addView(view);

}
}

        private void updateIntroAndDot(){

           //currentPage是一个角标，通过viewPager中的条目获取当前页面的角标，假如条目是6，因为%list.size，那么当前页面的角标就是0.
int currentPage = viewPager.getCurrentItem()%list.size();
  //把当前页面的描述信息给添加进来
tv_intro.setText(list.get(currentPage).getIntro());

//这句话的目的就是假如当前页面的角标和小圆点的角标相等，那么小圆点就设置为选中的状态，就会改变颜色
for (int i = 0; i < dot_layout.getChildCount(); i++) {
dot_layout.getChildAt(i).setEnabled(i==currentPage);

}
}
//把图片设置一个适配器
class MyPagerAdapter extends PagerAdapter{

   //5张图片轮播100次
@Override
public int getCount() {
return 100;
}

@Override
//预加载轮播图片的功能,这个方法是固定格式
public boolean isViewFromObject(View view, Object object) {
return view==object;
}

              @Override
//这个方法最重要的是把轮播图显示出来
public Object instantiateItem(ViewGroup container, int position) {
//把layout.adapter_ad这个布局加载到view，目的是轮播图可以在界面上显示
View view = View.inflate(MainActivity.this, R.layout.adapter_ad, null);
//找到ImageView这个控件
ImageView imageView = (ImageView) view.findViewById(R.id.image);
//ad中包含图片id和描述信息，有5张图片，可以最多轮播100次，百分号的目的就是取余，也就是说当角标为98的时候，轮播的是第三张图片
//通过list集合中的角标可以得到当前页面的图片信息，也就得到图片的id信息
Ad ad = list.get(position%list.size());
//通过图片的id把这五张图片加载到ImageView中
imageView.setImageResource(ad.getIconResId());
//一定不能少，将view加入到viewPager中
container.addView(view);
//然后返回view
return view;
}

/**
* 销毁page
* position： 当前需要消耗第几个page
* object:当前需要消耗的page
*/
//这个方法的意思是，当轮播图片的时候，从第一张图片轮播到第二张图片的时候，第一张图片要销毁，这个是固定模式
@Override
public void destroyItem(ViewGroup container, int position, Object object) {

container.removeView((View) object);
}


}


}

以上已经把轮播图的效果给做出来了，那么现在总结一下这个轮播图的逻辑思路：

1.initview()对界面的初始化，拿到界面上的控件。

a.ViewPager    b.TextView    c.LinearLayout

2.initListener()设置监听，在每个轮播的页面上设置监听PageChangeListener。里面有一个updateIntroAndDot()更新信息的方法

3.更新信息这个方法最主要实现的是什么？

a.实现了获得当前页面角标。

b.通过当前页面的角标，得到当前页面对应的描述信息，把这个描述信息添加到TextView中。

c.设置当前页面的角标和小圆点的角标一致，那么小圆点就被点击。

总的来说，这个方法就是通过轮播图片的改变，更新描述信息，和被点击的小圆点。

4.initData()加载数据，把图片和图片对应的描述信息添加到list集合中，图片和图片的描述信息有了，接着就是小圆点了。initDots()，通过View把得到的小圆点背景资源添加到dot_layout中，也就是添加到小圆点的LinearLayout布局中。

5.设置MyPagerAdapter().因为这个界面现在就一个ViewPager放图片的框架，所以就要把Image这个布局加载进来，通过图片的id把图片资源放在ImageView控件中，把View添加到container容器中，再返回view就完成了。