欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

荐 第一节 自定义轮播图的制作

程序员文章站 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