带指示点显示三个子界面的viewpager轮播效果

效果图：

这种效果的viewpager在项目中用的还是比较多的，话不多说，直接上代码。

xml布局文件：

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.sinosoft.mysupperapp.activity.BannerActivity">

    <FrameLayout
        android:id="@+id/fl_pager"
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:clipChildren="false"
        android:background="#aadc71ff"
        >
        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_marginLeft="60dp"
            android:layout_marginRight="60dp"
            android:clipChildren="false"
            android:layout_height="120dp"
            android:layout_gravity="center"
            >
        </android.support.v4.view.ViewPager>
    </FrameLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/fl_pager"
        android:background="#44000000"
        android:padding="5dp"
        android:orientation="vertical">
        <TextView
            android:id="@+id/tv_title"
            android:padding="3dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="精武门"
            android:textColor="#fff"
            android:gravity="center"/>
        <LinearLayout
            android:id="@+id/ll_point"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_gravity="center_horizontal">
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

MainAtivity：
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.sinosoft.mysupperapp.R;

import butterknife.Bind;
import butterknife.ButterKnife;

public class BannerActivity extends Activity {

private int[] images = {R.mipmap.title_01,R.mipmap.title_02,R.mipmap.title_03,R.mipmap.title_04};
private String[] title = {"精武门","黄飞鸿","霍元甲","陈真"};
private int pre_position = 0;
@Bind(R.id.viewpager)
ViewPager viewPager;
@Bind(R.id.tv_title)
TextView tv_title;
@Bind(R.id.ll_point)
LinearLayout ll_point;
Handler handler;
boolean isrunning = true;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_banner);
ButterKnife.bind(this);
for(int i=0;i<images.length;i++){
ImageView point = new ImageView(this);
point.setBackgroundResource(R.drawable.point_selector);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(20,20);
if(i==0){
point.setEnabled(true);
}else{
point.setEnabled(false);
params.leftMargin = 8;
}
point.setLayoutParams(params);
ll_point.addView(point);
}
//设置Page间间距
viewPager.setPageMargin(20);
//设置缓存的页面数量
viewPager.setOffscreenPageLimit(3);
viewPager.setAdapter(new MyViewPager(images));
tv_title.setText(title[0]);

handler = new Handler(){
@Override
public void handleMessage(Message msg) {
if(msg.what==0){
//让ViewPager滑到下一页
viewPager.setCurrentItem(viewPager.getCurrentItem()+1);
//延时，循环调用handler
if(isrunning){
handler.sendEmptyMessageDelayed(0, 3000);
}
};
}
};

new Thread(){
public void run() {
Message message = Message.obtain();
message.what=0;
handler.sendMessage(message);
};
}.start();

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override
public void onPageSelected(int position) {
tv_title.setText(title[position%images.length]);
//把上一个点设置为灰色
ll_point.getChildAt(pre_position).setEnabled(false);
//把当前点设置为红色
ll_point.getChildAt(position%images.length).setEnabled(true);
pre_position = position%images.length;
}

@Override
public void onPageScrollStateChanged(int state) {

}
});

}

class MyViewPager extends PagerAdapter{

int[] data;
public MyViewPager(int[] data){
this.data = data;
}
@Override
public int getCount() {
return Integer.MAX_VALUE;
}

@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}

@Override
public Object instantiateItem(ViewGroup container, int position) {

ImageView imageView = new ImageView(BannerActivity.this);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);//ͼƬ-ʬ
int img = data[position % data.length];
imageView.setImageResource(img);
container.addView(imageView,0);
return imageView;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View)object);
}
}

@Override
protected void onDestroy() {
super.onDestroy();
isrunning = false;
}
}

drawable文件：

 

point_selector:

 

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

</selector>

 

point_normal:

 

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

 

point_press:

 

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

</shape>

 

好了，大功告成。最后部分代码来自洪洋大神的微博：https://blog.youkuaiyun.com/lmj623565791/article/details/51339751

希望能帮助到大家。