Android---------使用ViewPager无线轮播获得接口的图片(小圆点无线轮播图片)

时间:2021-03-19 20:44:21

1.页面布局(先是定义一个viewpager,下面定义五个imageview小圆点)

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.viewpagerdemo.MainActivity">

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"
android:gravity="center"
>
<ImageView
android:id="@+id/point1"
android:tag="0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"

/>
<ImageView
android:id="@+id/point2"
android:tag="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"

/>
<ImageView
android:id="@+id/point3"
android:tag="2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"

/>
<ImageView
android:id="@+id/point4"
android:tag="3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"

/>
<ImageView
android:id="@+id/point5"
android:tag="4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"

/>
</LinearLayout>
</RelativeLayout>

 注意:把选中状态的小圆点和未选中状态的小圆点复制到工程中

2.主界面
//无线轮播加载网络图片
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
// private int [] imageId ={R.drawable.a1,R.drawable.a2,R.drawable.a3,
// R.drawable.a4,R.drawable.a5};
//定义一个有图片接口的数组
private String [] images={"http://l2.51fanli.net//tuan//images//1//5806eac956808.jpg",
"http://l2.51fanli.net//tuan//images//b//580991bb30560.jpg",
"http://l0.51fanli.net//tuan//images//b//58115f2593dc3.jpg",
"http://l2.51fanli.net//tuan//images//0//57923840b054d.jpg",
"http://l2.51fanli.net//tuan//images//e//58101e11ab164.jpg"};
private ImageView [] points;
private ViewPager mViewPager;
private ImagesAdapter mAdapter;
//定义点的位置坐标
private int indexPoint = 0;
private Handler mHandler=new Handler(){
@Override
public void handleMessage(Message msg) {
//点所在的位置为当前展示的页面
mViewPager.setCurrentItem(indexPoint);
indexPoint++;
//对点的坐标取模,不会超过4(0-4)
indexPoint=indexPoint%images.length;
 send();
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

initView();
//定义一个存放五个点的数组,并找到他们的ID
points=new ImageView[5];
points[0]=(ImageView)findViewById(R.id.point1);
points[1]=(ImageView)findViewById(R.id.point2);
points[2]=(ImageView)findViewById(R.id.point3);
points[3]=(ImageView)findViewById(R.id.point4);
points[4]=(ImageView)findViewById(R.id.point5);
//遍历五个点然后给每个点设置点击事件
for(ImageView image:points){
image.setOnClickListener(this);
}
//调用更新点的方法
updatePoint(indexPoint);
send();
}
//更新点的方法
private void updatePoint(int position) {
//先把所有点初始化原来的样式
for(ImageView image:points){
image.setImageResource(R.drawable.nor);
}
//点所在的位置设置为选中的样式
points[position].setImageResource(R.drawable.sel);
}

//圆点的点击事件(点击某个点会跳转到对应的页面)
@Override
public void onClick(View v) {
mHandler.removeCallbacksAndMessages(null);
int index =Integer.valueOf( v.getTag().toString());
mViewPager.setCurrentItem(index,false);
indexPoint=index+1;
send();
}

public void send(){
new Thread(){
@Override
public void run() {
//无线轮播点与点间隔时间为2秒,发送到主线程
mHandler.sendEmptyMessageDelayed(indexPoint,2000);
}
}.start();
}


private void initView() {
mViewPager=(ViewPager)findViewById(R.id.viewpager);
//给viewpager设置适配器
mAdapter=new ImagesAdapter();
mViewPager.setAdapter(mAdapter);
//viewpager的页面监听
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override
public void onPageSelected(int position) {
updatePoint(position);
}

@Override
public void onPageScrollStateChanged(int state) {

}
});
}

//内部类 ImagesAdapter(适配器)
class ImagesAdapter extends PagerAdapter{

@Override
public int getCount() {

return images.length;
}

@Override
public boolean isViewFromObject(View view, Object object) {

return view==object;
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView imageView=new ImageView(MainActivity.this);
// imageView.setImageResource(imageIds[position]);

//加载图片
Glide.with(MainActivity.this)
.load(images[position])
.placeholder(R.drawable.nor)
.into(imageView);
container.addView(imageView);
return imageView;
}

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

@Override
protected void onDestroy() {
super.onDestroy();
mHandler.removeCallbacksAndMessages(null);
}


}
Android---------使用ViewPager无线轮播获得接口的图片(小圆点无线轮播图片)