Android 轮播图从 0 到 1

简介: 轮播图是 Android 常用功能之一,效果大概是这样的:之前我封装写了一个,基本达到了要求,是继承了 Fragment(当时脑袋肯定锈掉了),里面 Viewpager add Fragment,这次项目多处有轮播...

轮播图是 Android 常用功能之一,效果大概是这样的:

之前我封装写了一个,基本达到了要求,是继承了 Fragment(当时脑袋肯定锈掉了),里面 Viewpager add Fragment,这次项目多处有轮播图,发现之前封装的不够用,简直漏洞百出:1、比如底部 point 的位置,之前固定在中间,现在可能要放在右下角,point 最好也能动态改图片;2、现在项目跟微信一样,底部 tab 切换,中间是 Fragment 替换,发现轮播图有问题,Fragment A 循环的 point 的 positoin 居然影响到了 Fragment B,照理,这是两个 BannerFragment,不会影响的啊,报以下错误:

java.lang.IllegalStateException: The application's PagerAdapter changed the adapter's 
contents without calling PagerAdapter#notifyDataSetChanged!


经过排查,找到了原因,因为 Viewpager add Fragment 我全部放在一个类,因此:

public static List<Object> bannerList = new ArrayList<>();

这里 static 坏事了,之前一个 banner 没有暴露出来。3、继承了 Fragment,引用比较麻烦,Fragment 有两者引用方法,xml 和代码,两者方式 addData 却报错;4、banner 没有写点击回调。

再次封装

综合以上问题,我进行了优化,继承 LinearLayout,当一个控件来引用,省去不必要的麻烦,底部 point 的位置可以设置:

pointLayout.setGravity(bannerPointGravity);

另外自定义了属性,动态设置 point 大小和图片,轮播图循环时间,也能代码设置,完整代码示例:

 * Created by WuXiaolong on 2017/8/24.
 * 个人博客:http://wuxiaolong.me
 */

public class BannerLayout extends LinearLayout {

    private ViewPager viewPager;
    private LinearLayout pointLayout;
    private ScheduledExecutorService scheduler;
    private int mPosition = 0;
    private int mBannerCount = 1;
    private Context context;
    private Activity activity;
    private int bannerPointSize;
    private int bannerPointGravity;
    private int bannerPointDrawableSelected, bannerPointDrawableUnselected;
    private int bannerDelaySecond;

    public BannerLayout(Context context) {
        this(context, null);

    }

    public BannerLayout(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public BannerLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context, attrs);
    }

    private void initView(Context context, AttributeSet attrs) {
        this.context = context;
        activity = (Activity) context;
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.BannerLayout);
        bannerPointSize = typedArray.getDimensionPixelSize(R.styleable.BannerLayout_bannerPointSize, 10);
        bannerPointGravity = typedArray.getInt(R.styleable.BannerLayout_bannerPointGravity, Gravity.CENTER);
        bannerDelaySecond = typedArray.getInt(R.styleable.BannerLayout_bannerDelaySecond, 5);
        bannerPointDrawableSelected = typedArray.getResourceId(R.styleable.BannerLayout_bannerPointDrawableSelected, R.mipmap.point01);
        bannerPointDrawableUnselected = typedArray.getResourceId(R.styleable.BannerLayout_bannerPointDrawableUnselected, R.mipmap.point02);
        typedArray.recycle();
        View view = View.inflate(context, R.layout.banner_view_pager, null);
        addView(view);
        viewPager = (ViewPager) view.findViewById(R.id.viewPager);
        pointLayout = (LinearLayout) view.findViewById(R.id.pointLayout);
        pointLayout.setGravity(bannerPointGravity);
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

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

            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });
    }

    public void start(List<Object> bannerList) {
        bannerShutdown();
        mBannerCount = bannerList.size();
        BannerPagerAdapter bannerPagerAdapter = new BannerPagerAdapter(context, bannerList);
        viewPager.setAdapter(bannerPagerAdapter);

        addPointLayout(0);
        startScheduler();
    }

    private void addPointLayout(int position) {

        pointLayout.removeAllViews();
        for (int i = 0; i < mBannerCount; i++) {
            ImageView imageView = new ImageView(context);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(bannerPointSize, bannerPointSize);
            layoutParams.setMargins(10, 0, 0, 0);
            imageView.setLayoutParams(layoutParams);

            if (position == i) {
                imageView.setImageResource(bannerPointDrawableSelected);
            } else {
                imageView.setImageResource(bannerPointDrawableUnselected);
            }
            pointLayout.addView(imageView);
        }

    }

    private void startScheduler() {
        scheduler = Executors.newSingleThreadScheduledExecutor();
        scheduler.scheduleAtFixedRate(new Runnable() {

            @Override
            public void run() {
                mPosition = viewPager.getCurrentItem();
                if (mPosition < mBannerCount - 1) {
                    mPosition++;
                } else {
                    mPosition = 0;
                }

                activity.runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        viewPager.setCurrentItem(mPosition);
                    }
                });
            }
        }, 1, bannerDelaySecond, TimeUnit.SECONDS);
    }

    public void bannerShutdown() {
        if (scheduler != null)
            scheduler.shutdown();
    }

    private class BannerPagerAdapter extends PagerAdapter {
        private List<Object> bannerList = new ArrayList<>();
        private Context context;

        BannerPagerAdapter(Context context, List<Object> bannerList) {
            this.context = context;
            this.bannerList.clear();
            this.bannerList.addAll(bannerList);
        }

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

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

        @Override
        public Object instantiateItem(ViewGroup container, final int position) {
            ImageView imageView = new ImageView(context);
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            Object object = bannerList.get(position);
            //这里我封装了 Glide 4.0 的工具类,用于显示图片
            ImageLoaderUtil.load(context, object, imageView);
            container.addView(imageView);

            return imageView;
        }

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

    public int dp2px(float var0) {
        float var1 = context.getResources().getDisplayMetrics().density;
        return (int) (var0 * var1 + 0.5F);
    }

    public void setBannerPointSize(int bannerPointSize) {
        this.bannerPointSize = dp2px(bannerPointSize);
    }

    public void setBannerPointGravity(int bannerPointGravity) {
        this.bannerPointGravity = bannerPointGravity;
        pointLayout.setGravity(bannerPointGravity);
    }

    public void setBannerPointDrawableSelected(int bannerPointDrawableSelected) {
        this.bannerPointDrawableSelected = bannerPointDrawableSelected;
    }

    public void setBannerPointDrawableUnselected(int bannerPointDrawableUnselected) {
        this.bannerPointDrawableUnselected = bannerPointDrawableUnselected;
    }

    public void setBannerDelaySecond(int bannerDelaySecond) {
        this.bannerDelaySecond = bannerDelaySecond;
    }

}

其中自定义属性的attrs.xml:

<resources>

    <declare-styleable name="BannerLayout">
        <!--轮播图点的大小-->
        <attr name="bannerPointSize" format="dimension" />
        <!--轮播图点的位置,分别有左中右-->
        <attr name="bannerPointGravity" format="enum">
            <enum name="left" value="3" />
            <enum name="center" value="17" />
            <enum name="right" value="5" />
        </attr>
        <!--轮播图点选中的图片-->
        <attr name="bannerPointDrawableSelected" format="reference" />
        <!--轮播图点未选中的图片-->
        <attr name="bannerPointDrawableUnselected" format="reference" />
        <!--轮播图循环时间,单位秒-->
        <attr name="bannerDelaySecond" format="integer" />
    </declare-styleable>
</resources>

使用说明

xml

<com.wuxiaolong.bannersample.BannerLayout
    android:id="@+id/bannerView"
    android:layout_width="match_parent"
    android:layout_height="198dp"
    app:bannerDelaySecond="3"
    app:bannerPointDrawableSelected="@drawable/gray_radius"
    app:bannerPointDrawableUnselected="@drawable/white_radius"
    app:bannerPointGravity="right"
    app:bannerPointSize="10dp" />

调用:

public class MainActivity extends AppCompatActivity {
    private BannerLayout bannerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bannerView = (BannerLayout) findViewById(R.id.bannerView);
        List<Object> bannerList = new ArrayList<>();
        bannerList.add(R.mipmap.horizontal_default);
        bannerList.add("http://pic1.win4000.com/wallpaper/5/598161750eddb.jpg");
        bannerList.add("http://pic1.win4000.com/wallpaper/4/597efb5b6aae8.jpg");
        bannerView.setBannerPointSize(10);
        bannerView.setBannerPointGravity(Gravity.CENTER);
        bannerView.setBannerPointDrawableSelected(R.drawable.gray_radius);
        bannerView.setBannerPointDrawableUnselected(R.mipmap.point01);
        bannerView.setBannerDelaySecond(5);
        //banner 设置方法完毕时最后调用 start 方法
        bannerView.start(bannerList);
    }

    @Override
    protected void onStop() {
        super.onStop();
        bannerView.bannerShutdown();
    }
}

最后

欢迎加入Android进阶交流群;701740775。进群可免费领取一份最新技术大纲和Android进阶资料。请备注csdn

相关文章
|
9月前
|
Android开发
Android 使用ViewPager和自定义PagerAdapter实现轮播图效果
Android 使用ViewPager和自定义PagerAdapter实现轮播图效果
79 0
|
Android开发 容器
|
Android开发
Android零基础入门第56节:翻转视图ViewFlipper打造引导页和轮播图
原文:Android零基础入门第56节:翻转视图ViewFlipper打造引导页和轮播图    前面两期学习了 ViewAnimator及其子类ViewSwitcher的使用,以及ViewSwitcher的子类ImageSwitcher和TextSwitcher的使用,你都掌握了吗?本期我们一起来学习ViewAnimator另一个子类 ViewFlipper组件的使用。
1673 0
|
10天前
|
设计模式 算法 前端开发
Android面经分享,失业两个月,五一节前拿到Offer,设计思想与代码质量优化+程序性能优化+开发效率优化
Android面经分享,失业两个月,五一节前拿到Offer,设计思想与代码质量优化+程序性能优化+开发效率优化
|
8天前
|
编解码 数据库 Android开发
安卓应用开发:打造高效用户界面的五大技巧
【5月更文挑战第18天】在竞争激烈的应用市场中,一个流畅且直观的用户界面(UI)对于安卓应用的成功至关重要。本文将探讨五种提升安卓应用用户界面性能的技巧,包括合理布局设计、优化资源使用、利用硬件加速、内存管理以及响应式编程。通过这些方法,开发者可以创建出既美观又高效的应用体验,从而吸引和保留用户。
|
10天前
|
XML Android开发 数据格式
ConstraintLayout 2,Android高级开发面试
ConstraintLayout 2,Android高级开发面试
|
1天前
|
数据处理 API Android开发
安卓应用开发:构建一个高效的通知管理系统
【5月更文挑战第25天】在移动操作系统中,通知管理是用户体验的核心组成部分。特别是对于安卓设备,由于其开放性和多样性,有效的通知管理系统显得尤为重要。本文将详细介绍如何在安卓平台上构建一个高效、用户友好的通知管理系统。我们将从通知渠道的管理、用户自定义设置以及后台数据处理等方面展开讨论,并提供实用的代码示例和最佳实践建议。
|
2天前
|
缓存 监控 Java
安卓应用开发中的内存优化策略
【5月更文挑战第24天】 在移动设备上,资源的有限性要求开发者对应用程序进行细致入微的性能优化。特别是对于安卓平台,由于设备的多样性和碎片化问题,内存管理成为提升应用性能、用户体验和电池寿命的关键因素。本文将探讨针对安卓开发的内存优化技巧,从避免内存溢出、减少内存占用到提高内存回收效率等方面展开讨论,旨在为开发者提供实用的内存优化策略,以改善应用的运行效率和稳定性。
|
6天前
|
搜索推荐 API Android开发
安卓应用开发:打造高效通知管理系统
【5月更文挑战第20天】在移动设备中,通知管理是用户体验的关键部分。一个高效的通知系统不仅能够及时传达重要信息,还能避免用户感到不必要的干扰。本文将深入探讨如何在安卓平台上开发一个高效的通知管理系统,包括通知的设计、发送策略以及用户的个性化设置。通过分析安卓系统的通知机制和最新的API特性,我们将提供一个实用的开发指南,帮助开发者创建更加智能和用户友好的通知体验。
|
9天前
|
JSON Android开发 数据格式
Android框架-Google官方Gson解析,android开发实验报告总结
Android框架-Google官方Gson解析,android开发实验报告总结