荐 第一节 自定义轮播图的制作
程序员文章站
2022-08-06 20:51:54
引言在安卓开发中,我们经常要在首页用到轮播图...
引言
在安卓开发中,我们经常要在首页用到轮播图来展示商品或者传达app所要传达的理念。当然网上也有很多开源的第三方库来调用实现轮播图,不过要想自己制作一个与众不同的轮播图,就要理解轮播图的实现原理,从而自定义轮播图。下面我将带领大家学习一种轮播图的制作方法,有问题大家可以留言并讨论。
效果图
Java代码
public class MainActivity extends AppCompatActivity {
private ViewPager mViewPaper;
private List<ImageView> images;
//下方指示点
private List<View> dots;
private int currentItem;
//记录上一次点的位置
private int oldPosition = 0;
//存放图片的id
private int[] imageIds = new int[]{R.drawable.pic1, R.drawable.pic2, R.drawable.pic3};
//存放图片的标题,可以设为空
private String[] titles = new String[]{"title1", "title2", "title3"};
private TextView title;
private ViewPagerAdapter adapter;
//定时调度机制
private ScheduledExecutorService scheduledExecutorService;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setView();
}
//UI界面的更新
private void setView(){
mViewPaper = findViewById(R.id.viewpager);
//显示的图片
images = new ArrayList<ImageView>();
for(int i = 0; i < imageIds.length; i++){
ImageView imageView = new ImageView(this);
imageView.setBackgroundResource(imageIds[i]);
images.add(imageView);
}
//显示的小点
dots = new ArrayList<View>();
dots.add(findViewById(R.id.dot_0));
dots.add(findViewById(R.id.dot_1));
dots.add(findViewById(R.id.dot_2));
title = findViewById(R.id.title);
title.setText(titles[0]);
adapter = new ViewPagerAdapter();
mViewPaper.setAdapter(adapter);
mViewPaper.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
title.setText(titles[position]);
dots.get(position).setBackgroundResource(R.drawable.dot_yes);
dots.get(oldPosition).setBackgroundResource(R.drawable.dot_no);
oldPosition = position;
currentItem = position;
}
@Override
public void onPageScrollStateChanged(int state) {
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
});
}
/*定义的适配器*/
public class ViewPagerAdapter extends PagerAdapter {
//返回当前有效视图的个数。
@Override
public int getCount() {
return images.size();
}
//判断instantiateItem函数所返回来的Key与一个页面视图是否是代表的同一个视图
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public void destroyItem(ViewGroup view, int position, Object object) {
view.removeView(images.get(position));
}
//创建指定位置的页面视图,也就是将一张图片放到容器中的指定位置
@Override
public Object instantiateItem(ViewGroup view, int position) {
view.addView(images.get(position));
return images.get(position);
}
}
/**
* 利用线程池定时执行动画轮播
*/
@Override
public void onStart() {
super.onStart();
scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
//每隔2s时间,固定执行轮播任务。
scheduledExecutorService.scheduleWithFixedDelay(new ViewPageTask(), 2, 2, TimeUnit.SECONDS);
}
/**
* 图片轮播任务,发送轮播消息
*/
private class ViewPageTask implements Runnable{
@Override
public void run() {
currentItem = (currentItem + 1) % imageIds.length;
mHandler.sendEmptyMessage(0); //发送轮播消息
}
}
/**
* 接收子线程传递过来的数据
*/
private Handler mHandler = new Handler(){
public void handleMessage(android.os.Message msg) {
//这里不是具体的数据,而是一个轮播信号,目的是切换下一张图片
mViewPaper.setCurrentItem(currentItem);
}
};
//当切换到其他界面时,关闭后台轮播
@Override
public void onStop() {
super.onStop();
if(scheduledExecutorService != null){
scheduledExecutorService.shutdown();
scheduledExecutorService = null;
}
}
}
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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="250dp" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="230dip">
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="35dip"
android:layout_gravity="bottom"
android:background="#33000000"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="@android:color/white" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="3dip"
android:orientation="horizontal">
<View
android:id="@+id/dot_0"
android:layout_width="5dip"
android:layout_height="5dip"
android:layout_marginLeft="2dip"
android:layout_marginRight="2dip"
android:background="@drawable/dot_yes" />
<View
android:id="@+id/dot_1"
android:layout_width="5dip"
android:layout_height="5dip"
android:layout_marginLeft="2dip"
android:layout_marginRight="2dip"
android:background="@drawable/dot_no" />
<View
android:id="@+id/dot_2"
android:layout_width="5dip"
android:layout_height="5dip"
android:layout_marginLeft="2dip"
android:layout_marginRight="2dip"
android:background="@drawable/dot_no" />
</LinearLayout>
</LinearLayout>
</FrameLayout>
</RelativeLayout>
</LinearLayout>
图片资源(3张轮播图和2张底部圆点)
注:你可以把圆点换成你想要的任何图片。
Fragment中代码修改
以上代码是在Activity中使用的,如果要在Fragment中使用需要进行一下修改。即在onCreateView中对xml视图进行绑定。
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
myView = inflater.inflate(R.layout.activity_main, container, false);
mViewPaper = myView.findViewById(R.id.viewpager);
//显示的小点
dots = new ArrayList<View>();
dots.add(myView.findViewById(R.id.dot_0));
dots.add(myView.findViewById(R.id.dot_1));
dots.add(myView.findViewById(R.id.dot_2));
dots.add(myView.findViewById(R.id.dot_3));
dots.add(myView.findViewById(R.id.dot_4));
title = myView.findViewById(R.id.title);
return myView;
}
本文地址:https://blog.csdn.net/weixin_44139445/article/details/107576533