登录 立即注册
安币:

Android自定义banner实现

[复制链接]
来自: MrlLee 分类: Android精品源码 上传时间: 2016-9-6 10:33:00
Tag:Android banner
立即下载
收藏

项目介绍:

可以看到这是一个轮播图,只不过我们以前在用的时候一般都是用ViewPager,用正常的ViewPager有几点坏处:
  • 不能无限循环
  • 不能控制自动播放
所以这就需要自己封装一个了,其实还是用的ViewPager,只不过更改了他的触摸事件并且设置了自动轮播的时间,然后自己写了一个PagerAdapter来实现无限轮播,最后下面的指示器和ViewPager、PagerAdapter封装到了一起,所以使用的时候很简单。只需要继承自BannerPagerAdapter,重写构造和setView()方法。然后在使用的时候调用方法即可,基本代码如下:
[Java] 查看源文件 复制代码
List data = new ArrayList<>();
data.add(R.mipmap.a1);
data.add(R.mipmap.a2);
data.add(R.mipmap.a3);
data.add(R.mipmap.a4);


AdapterDemo ad = new AdapterDemo(this, data);

Banner banner = (Banner) findViewById(R.id.banner);

/**
 * 关于这里的设置参数问题,是需要这样使用的
 * 在设置了小圆点之后才能设置适配器
 * 因为只有在适配器里才会根据一共多少条数据来适配
 * 最后需要调用开始轮播
 * 个人建议在onPause()/onDestroy()方法中来停止 -- stopAutoPlay()
 */
banner.setDot(R.drawable.no_selected_dot, R.drawable.selected_dot).
    setDotGravity(Banner.CENTER).
    setAdapter(ad).
    setOnItemClickListener(new BannerPagerAdapter.onItemClickListener() {
        @Override
        public void onClick(int position) {
            Toast.makeText(MainActivity.this, "" + position, Toast.LENGTH_SHORT).show();
        }
    }).
    startAutoPlay();
下面是AdapterDemo的代码:
[Java] 查看源文件 复制代码
public class AdapterDemo extends BannerPagerAdapter {

    private Context mContext;
    private List data;

    public AdapterDemo(Context context, List data) {
        super(context, data);
        mContext = context;
        this.data = data;
    }

    /**
     * 只需要重写构造和这个方法即可
     * 在这里可以设置自己的View,使用自己的图片加载库
     */
    @Override
    public View setView(int position) {
        View v = LayoutInflater.from(mContext).inflate(R.layout.test, null);
        ImageView iv = (ImageView) v.findViewById(R.id.iv);
        iv.setImageResource(data.get(position));
        return v;
    }
}
可以看的出来这里给调用者很大的空间来进行自己的操作,在setView中直接可以根据position来设置自己的View和数据,并且使用自己的图片加载库。


下面开始说如何写
首先我们要确定一下这个banner有几个需要注意的点:
  • 无限轮播
  • 点击事件
  • 指示器
  • 指示器的滑动效果
无限轮播、点击事件关于无限轮播,我参照的是任玉刚大神的博客,所以我也希望各位去看这个博客,也算是涨点人气,我这里就不写到底如何实现的了,各位可以查看我的代码
指示器、滑动效果
其实我写的时候有好多坑,但是写这篇文章的时候感觉都不是特别难的点(技术太菜
关于指示器,其实现在大部分都是小圆点,这里我实现的思路是创建一个FrameLayout来添加ViewPager和指示器
但是可以看到,这里的指示器会有一个随着页面滑动而滑动的效果,这里就需要两层了,一个是包含未选中的,一个是包含了选中和未选中的(Group)
代码如下:
[Java] 查看源文件 复制代码
private void init() {
    mPager = new BannerViewPager(mContext);
    addView(mPager);
    /**
     * 实例化两个Group
     */
    mFrameLayout = new FrameLayout(mContext);
    mDotGroup = new LinearLayout(mContext);
    /**
     * 设置小圆点Group的方向为水平
     */
    mDotGroup.setOrientation(LinearLayout.HORIZONTAL);
    /**
     * 如果不设置则小圆点在中间
     */
    mDotGroup.setGravity(CENTER | Gravity.BOTTOM);
    /**
     * 两个Group的大小都为match_parent
     */
    LinearLayout.LayoutParams params =
            new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.MATCH_PARENT);
    /**
     * 首先添加小圆点的Group
     */
    mFrameLayout.addView(mDotGroup, params);
    /**
     * 然后添加包含的Group(f**k,表达能力有限)
     */
    addView(mFrameLayout, params);

    /**
     * 添加到任务栈,当前所有任务完事之后添加已经选中的那个小圆点
     */
    post(new Runnable() {
        @Override
        public void run() {
            ImageView iv = new ImageView(mContext);
            iv.setImageDrawable(mContext.getResources().getDrawable(mDot[1]));
            FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            /**
             * 设置选中小圆点的左边距
             */
            params.leftMargin = (int) mDotGroup.getChildAt(0).getX();
            params.gravity = Gravity.BOTTOM;
            mFrameLayout.addView(iv, params);
            mSelectedDot = mFrameLayout.getChildAt(1);
        }
    });
    mPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            /**
             * 获取到当前position
             */
            position %= mAdapter.size;
            /**
             * 判断如果当前的position不是最后一个,那么就设置偏移量来实现被选中小圆点的滑动效果
             */
            if (mSelectedDot != null && position != mAdapter.size -1) {
                float dx = mDotGroup.getChildAt(1).getX() - mDotGroup.getChildAt(0).getX();
                mSelectedDot.setTranslationX((position * dx) + positionOffset * dx);
            }
        }

        @Override
        public void onPageSelected(int position) {
            position %= mAdapter.size;
            /**
             * 如果已经是最后一个,那么则直接把小圆点定位到那,不然滑动效果会出错
             */
            if (mSelectedDot != null && position == mAdapter.size - 1) {
                float dx = mDotGroup.getChildAt(1).getX() - mDotGroup.getChildAt(0).getX();
                mSelectedDot.setTranslationX(position * dx);
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

}
可以看到我们首先添加了ViewPager,然后我们添加了未选中指示器的Group,之后我们才添加的选中的指示器。在添加选中指示器的时候用了一个post,这个方法是把runnable里的代码添加到任务栈,前面的任务结束了这个任务才会执行,所以我们可以获取到第一个未选中小圆点的坐标,然后把选中指示器覆盖上去,后来我们移动的时候就直接移动选中的指示器就好了。
关于滑动指示器,其实就是用了一个setTranslationX()方法,这个方法可以虽然移动View的位置,但是没有真正的移动该View,所以我们在移动的时候根据position来计算,但是当移动到最后一个的时候就不应该用这个方法了,如果还用的话就会造成一种『出界』了的感觉,所以这里在最后一个的时候不进入方法。
有人应该会想到『在第一页的时候』,这里我们大家可以自己测试一下,当手指向右滑的时候,就已经是size-1页了,所以我们直接就用一个判断就够了



相关源码推荐:

我来说两句
所有评论(81)
仲夏炎凉。 2016-9-6 10:41:34
感谢分享,安卓巴士有你更精彩:lol
回复
ricktians 2016-9-6 10:42:15
写的真的很不错
回复
fancy 2016-9-6 10:44:55
感谢分享,安卓巴士有你更精彩:lol
回复
ffg12 2016-9-6 10:55:15
相当不错,感谢无私分享精神!
回复
遗失的流年 2016-9-6 11:01:05
不错不错,楼主辛苦了。。。
回复
孙林 2016-9-6 11:07:00
我只是路过打酱油的。
回复
yanghaiju2012 2016-9-6 11:07:58
好好 学习了 确实不错
回复
上传代码
查看数:5163 收藏数:11 下载数:68 点赞数:0
状态:已购或VIP 售价:10(原价:10)金钱 下载权限:初级码农 
代码贡献英雄榜
用户名 下载数
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,769657487

如何获得代码达人称号

如何成为签约作者

联系我们
关闭
合作电话:
15618560077
Email:
805941275@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| 下载客户端|申请友链|手机版|站点统计|安卓巴士 ( 粤ICP备15117877号 )

快速回复 返回顶部 返回列表