//效果图：

//第一步 布局：

<?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.example.hasee.a513yindaoye.MainActivity">

    <Button
        android:text="0/0"
        android:id="@+id/mButtonText"
        android:background="@null"
        android:textStyle="bold"
        android:textSize="20dp"
        android:textColor="@color/colorAccent"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

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

    <RadioGroup
        android:layout_marginBottom="20dp"
        android:layout_alignParentBottom="true"
        android:id="@+id/mRadio"
        android:layout_centerHorizontal="true"
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>


    <Button
        android:visibility="gone"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:id="@+id/mButton"
        android:text="立即开始"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

//第二步 在Activity中具体代码使用：

public class MainActivity extends AppCompatActivity {

    private RadioGroup mRadio;
    private Button mButton;
    private ArrayList<Integer> mPictureList = new ArrayList<>();
    private ArrayList<View> mViewList = new ArrayList<>();
    private ViewPager mViewPager;
    private Button mButtonText;
   //不用集合用数组也可以,随便我这里用的集合,推荐数组
   //private int [] picture={R.mipmap.a,R.mipmap.b,R.mipmap.c,R.mipmap.d};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();//初始化控件
        initData();//添加图片,ViewPager适配
        initPoint();//初始化RadioButton,判断
        listener();//ViewPager监听判断与RadioGroup的监听

    }

    private void initView() {
        mRadio = (RadioGroup) findViewById(R.id.mRadio);
        mButton = (Button) findViewById(R.id.mButton);
        mViewPager = (ViewPager) findViewById(R.id.mViewPager);
        mButtonText = (Button) findViewById(R.id.mButtonText);//Button可以覆盖ViewPager布局,所以使用Button,可以把顶部(0/0)Text显示出来

    }

    private void initData() {
        //初始化数据 插入集合四张图片
        mPictureList.add(R.mipmap.a);
        mPictureList.add(R.mipmap.b);
        mPictureList.add(R.mipmap.c);
        mPictureList.add(R.mipmap.d);

        //for循环  数据集合的长度
        for (int i = 0; i < mPictureList.size(); i++) {
            //初始化一个图片对象
            ImageView imageView = new ImageView(this);
            //设置这个图片的缩放类型
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            //初始化一个加载图片的layoutParams
            ViewPager.LayoutParams params = new ViewPager.LayoutParams();
            //图片对象 来加载图片
            imageView.setLayoutParams(params);
            //设置图片
            imageView.setImageResource(mPictureList.get(i));
            //如果是网络图片的话可以用Picasso来解析设置,我这里用的是本地图,所以没有必要
            // Picasso.with(this).load(mPictureList.get(i)).into(imageView);
            //View集合添加图片对象
            mViewList.add(imageView);
        }

        //图片适配器 图片加载
        ViewPagerApader apader = new ViewPagerApader(mViewList);
        mViewPager.setAdapter(apader);
    }

    private void initPoint() {
        //for循环 数据集合
        for (int i = 0; i < mPictureList.size(); i++) {
            //初始化一个 选择按钮 得到按钮对象
            RadioButton button = new RadioButton(this);
            //给RadioButton之间设置边距,注意这里设置的是距离左边50。
            // 但是RadioButton是不规则的,里面那个圆圈不会在控件中心，它会一直在左边，很恶心。
            // 所以RadioButton设置完，也要给RadioGroup设置间距左边50，这样就会整体位于视图中心，比较顺眼。
            button.setPadding(50, 0, 0, 0);//左上右下
            //给按钮对象设置id
            button.setId(i);
            //按钮对象加载 布局
            button.setButtonDrawable(R.drawable.point);
            //如果是第一张图片的话 为true 也就是为加载的红色
            if (i == 0) {
                button.setChecked(true);
                //如果不是第一张的话其余的全都为false 也就是加载的蓝色
            } else {
                button.setChecked(false);
            }
            //加载button 选择按钮
            mRadio.addView(button);
            //给RadioGroup设置间距左边50，保持在中心点
            mRadio.setPadding(50, 0, 0, 0);
        }
    }

    private void listener() {
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                //显示顶部(0/0)Text,给text设置图片当前滑动到第几张
                mButtonText.setText(position + 1 + "/" + mPictureList.size());
            }

            @Override
            public void onPageSelected(int position) {
                //当前选择按钮与滑动下标绑定到一起
                ((RadioButton) mRadio.getChildAt(position)).setChecked(true);
                //判断如果滑到最后一张图片,那么(立即开始)按钮显示,反之不显示
                if (position == mPictureList.size() - 1) {
                    mRadio.setVisibility(View.GONE);
                    mButton.setVisibility(View.VISIBLE);
                } else {
                    mRadio.setVisibility(View.VISIBLE);
                    mButton.setVisibility(View.GONE);
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        //RadioGroup的监听，也可以点击底部小圆圈(RadioButton)来翻页换图片
        mRadio.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int i) {
                mViewPager.setCurrentItem(i);
            }
        });
    }

}

//第三步 在drawable下建立 point.xml，选择器布局,也就是选中和未选中时的布局风格颜色：

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

//选中的布局 select.xml：

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

//未选中的布局 unselect.xml：

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

 //第四步 ViewPager适配器 ViewPagerApader：

public class ViewPagerApader extends PagerAdapter{

    private ArrayList<View> mList;

    public ViewPagerApader(ArrayList<View> mList) {
        this.mList = mList;
    }

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

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

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(mList.get(position));
        return mList.get(position);
    }
}

//————————————————————————-完———————————————————————————-