//效果图：
//第一步 布局：
<?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);
}
}
//-------------------------------------------------------------------------完---------------------------------------------------------------------------------- | 
转播
