Android自己定义控件之轮播图控件

背景

近期要做一个轮播图的效果。网上看了几篇文章。基本上都能找到实现，效果还挺不错，可是在写的时候感觉每次都要单独去又一次在Activity里写一堆代码。于是自己封装了一下。这里仅仅是做了下封装成一个控件，不必每次反复写代码了。

效果图

实现分析

轮播图的功能就是实现左右滑动的广告、图片信息展示，那我们就用ViewPager来实现，由于考虑到用户体验，我们还须要在以下加一个指示器来标示滑动到了第几张轮播图。指示器我们能够用一个线性布局来依据要展示的轮播图设置显示的View,我们要做这种一个控件没有什么特殊的效果，事实上就是两个控件的组合，仅仅是我们要在内部处理好它们之间的交互关系（事实上就是ViewPager滚动的时候，以下指示器的展示），所以我们就用自己定义控件其中的组合方式来实现。

以下開始

1、定义一个控件继承FrameLayout,写一个xml文件

public class CarouselView extends FrameLayout implements ViewPager.OnPageChangeListener {

    private Context context;

    private int totalCount =100;//总数。这是为实现无限滑动设置的

    private int showCount;//要显示的轮播图数量

    private int currentPosition =0;//当前ViewPager的位置

    private ViewPager viewPager;

    private LinearLayout carouselLayout;//展示指示器的布局

    private Adapter adapter;
    private int pageItemWidth;//每一个指示器的宽度
    private boolean isUserTouched = false;

    public CarouselView(Context context) {
        super(context);
        this.context = context;
    }

    public CarouselView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
    }

    public CarouselView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
    }
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v4.view.ViewPager
        android:id="@+id/gallery"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:unselectedAlpha="1">
    </android.support.v4.view.ViewPager>
    <LinearLayout android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:orientation="horizontal"
        android:gravity="center"
        android:layout_gravity="center|bottom"
        android:id="@+id/CarouselLayoutPage"
        android:padding="10dip">
    </LinearLayout>
</FrameLayout>

上面的代码把两个要用到的控件ViewPager和carouselLayout都包括在定义的CarouselView里面了。以下就是要获取

2、onFinishInflate()中获取我们须要的控件

@Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        View view = LayoutInflater.from(context).inflate(R.layout.carousel_layout,null);
        this.viewPager = (ViewPager) view.findViewById(R.id.gallery);
        this.carouselLayout = (LinearLayout)view.findViewById(R.id.CarouselLayoutPage);
        pageItemWidth = ConvertUtils.dip2px(context,5);
        this.viewPager.addOnPageChangeListener(this);
        addView(view);
    }

onFinishInflate()方法是自己定义控件中经常使用的一个方法，它表示从XML载入组件完毕了。在该方法中我们通过LayoutInflater.from(context).inflate 获取到个ViewPager对象和carouselLayout对象，并对pageItemWidth进行了赋值。

同一时候为viewPager设置addOnPageChangeListener。这里别忘记调用addView();否则控件就展示不了啦！

3、通过设置set方法来获取数据。同一时候初始化界面效果

到这一步我们已经获取到了展示轮播图的ViewPager对象。那接下来要让它展示你肯定想到了写个类继承PagerAdapter。然后重写getCount，isViewFromObject，isViewFromObject，destroyItem等方法来让ViewPager展示轮播图。可是我们又不能写得太固定。由于可能每一个人想要展示的数据不一样，所以我们定义一个接口来给外部使用的人写自己的逻辑。上代码：

//定义一个接口让外部设置展示的View
public interface Adapter{
        boolean isEmpty();
        View getView(int position);
        int getCount();
    }
//ViewPager的适配器
class ViewPagerAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return totalCount;
        }

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

        @Override
        public Object isViewFromObject(ViewGroup container, int position) {
            position %= showCount;
            //调用接口的getView()获取使用者要展示的View;
            View view = adapter.getView(position);
            container.addView(view);
            return view;
        }

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

        @Override
        public int getItemPosition(Object object) {
            return super.getItemPosition(object);
        }

        @Override
        public void finishUpdate(ViewGroup container) {
            super.finishUpdate(container);

            int position = viewPager.getCurrentItem();
            //实现Viewpager到第一页的实现能向左滑动
            if (position==0){
                position=showCount;
                viewPager.setCurrentItem(position,false);

            }else if (position==totalCount-1){//ViewPager到最后一页的实现向又滑动
                position = showCount - 1;
                viewPager.setCurrentItem(position,false);
            }
        }
    }
//为外部提供设置数据源的方法,同一时候为ViewPager做展示
public void setAdapter(Adapter adapter){
        this.adapter = adapter;
        if (adapter!=null){
            init();
        }
    }

上面的代码就是定义了一个接口让外部来设置数据，提供setAdapter来为adapter赋值，同一时候初始化界面效果，init()方法中就是数据的初始化，代码例如以下：

private void init() {
        viewPager.setAdapter(null);
        carouselLayout.removeAllViews();//清空之前的数据
        if (adapter.isEmpty()){
            return;
        }
        int count = adapter.getCount();
        showCount = adapter.getCount();
        for (int i=0;i<count;i++){
            View view = new View(context);
            //用来做指示器的View,通过state来做展示效果
            if (currentPosition==i){
                view.setPressed(true);
                LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(pageItemWidth + ConvertUtils.dip2px(context,3),pageItemWidth + ConvertUtils.dip2px(context,3));
                params.setMargins(pageItemWidth, 0, 0, 0);
                view.setLayoutParams(params);
            }else {
                LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(pageItemWidth,pageItemWidth);
                params.setMargins(pageItemWidth,0,0,0);
                view.setLayoutParams(params);
            }
            view.setBackgroundResource(R.drawable.carousel_layout_page);
            carouselLayout.addView(view);
        }
        viewPager.setAdapter(new ViewPagerAdapter());
        viewPager.setCurrentItem(0);

        //让手指触碰到的时候自己主动轮播不起效
        this.viewPager.setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()){
                    case MotionEvent.ACTION_DOWN:
                    case MotionEvent.ACTION_MOVE:
                        isUserTouched = true;
                        break;
                    case MotionEvent.ACTION_UP:
                        isUserTouched = false;
                        break;
                }
                return false;
            }
        });
        mTimer.schedule(mTimerTask, 3000, 3000);
    }

基本的逻辑代码就是这样啦。一个轮播图的控件就做好了。

以下来看一下使用：

4、使用

xml中写我们的轮播图控件:

 <com.yangqiangyu.test.carouselview.CarouselView
        android:layout_width="match_parent"
        android:layout_height="220dp">

 </com.yangqiangyu.test.carouselview.CarouselView>

java代码中获取控件。同一时候设置接口

 CarouselView carouselView = (CarouselView) findViewById(R.id.CarouselView);
        carouselView.setAdapter(new CarouselView.Adapter() {
            @Override
            public boolean isEmpty() {
                return false;
            }

            @Override
            public View getView(int position) {
                View view = mInflater.inflate(R.layout.item,null);
                ImageView imageView = (ImageView) view.findViewById(R.id.image);
                imageView.setImageResource(mImagesSrc[position]);
                return view;
            }

            @Override
            public int getCount() {
                return mImagesSrc.length;
            }
        });

返回是否为空。在getView(int position)中return我们想返回的View，就是这么简单了啦。

对你有帮助的话。记得给赞给评论哟！

源代码下载请戳－－》图片轮播

时间： 2024-10-07 19:31:12

Android自己定义控件之轮播图控件的相关文章

Android自定义控件之轮播图控件

背景 最近要做一个轮播图的效果,网上看了几篇文章,基本上都能找到实现,效果还挺不错,但是在写的时候感觉每次都要单独去重新在Activity里写一堆代码.于是自己封装了一下.本篇轮播图实现原理原文出处:循环广告位组件的实现,这里只是做了下封装成一个控件,不必每次重复写代码了. 效果图 实现分析 轮播图的功能就是实现左右滑动的广告.图片信息展示,那我们就用ViewPager来实现,由于考虑到用户体验,我们还需要在下面加一个指示器来标示滑动到了第几张轮播图.指示器我们可以用一个线性布局来根据要展示的轮

Objective-C UI之自定义轮播图控件

下面我们自定义一个轮播图类ImageLoop继承于UIView,类ImageLoop中包含一个UIScrollView和UIPageControl,其中定义三个属性: pageControll,position,currentPage可以自定义pageControl样式,也可以使用position控制播放方向,或者设置从下标为currentPage的图片开始播放 下面是ImageLoop的接口文件: #import <UIKit/UIKit.h> typedef enum{Left,Right

【前端】javascript实现带有子菜单和控件的轮播图slider

实现效果: 实现原理: // 步骤 // 1. 获取事件源以及相关元素 // 2. 复制第一张图片所在的li,添加到ul的最后面 // 3. 给ol添加li,ul中的个数-1个,并点亮第一个按钮 // 4. 鼠标放到ol的li上切换图片 // 5. 添加定时器 // 6. 左右切换图片(鼠标放上去隐藏,移开显示) 实现代码: <!DOCTYPE html> <html> <head> <title>轮播图</title> <meta cha

BSYBannerScrollview，最简单的Banner轮播图控件

实现这个功能,只需要在工程中拖入BSYScrollView.h 文件和BSYScrollView.m文件,在需要的文件中实现一下代码即可: 源码下载地址:demo

Android侧滑菜单和轮播图之滑动冲突

接手一个项目,有一个问题需要修改:轮播图不能手动滑动,手动滑动轮播图只会触发侧滑菜单. 猜测:viewpager控件(轮播图)的触摸事件被SlidingMenu控件(侧滑菜单,非第三方项目,乃是上个开发人员自定义的)拦截了. 基于这个猜测,我自定义一个ViewPager,重写dispatchTouchEvent.onInterceptTouchEvent和onTouchEvent,分别在这三个方法中打印log: 重写SlidingMenu的dispatchTouchEvent.onInterce

Android轮播图的实现

Android轮播图的实现 这几天看了<Android开发艺术探索>这本书真的是挺不错的,学了自定义View之后打算动手实践一个轮播图控件,网上有很多实现的方法,我最后实现起来跟他们也基本上都是大同小异,主要我也是为了练练动手能力.先来个效果图,图片是在百度搜的正经图片 分析 实现轮播图的方式大体上我看到了三种,一是使用安卓的Gallery控件来实现,二是使用HorizontalScrollView,三是使用ViewPager来实现,Gallery控件现在已经不推荐使用了,在源码中我们也看到了

Android轮播图封装，下拉刷新相结合

自定义轮播图CarouselView 自定义下拉刷新PullRefreshListView 马上就要正式做毕业设计了,一些零碎时间写其中的一个模块,现记录下来,以备以后忘记时使用.欢迎大神不吝纠正. 效果图: layout_carousel.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com

React Native布局实践：开发京东客户端首页（三）——轮播图的实现

上篇文章中,我们一起构建了京东客户端的TabBar,在本文中,将继续向大家介绍京东客户端首页轮播图及其下发功能按钮的开发方法,现在就让我们开始吧! 1.相关控件调研 目前在Github开源的轮播图控件,个人认为做得比较好的,一个是react-native-swiper(https://github.com/leecade/react-native-swiper),一个是react-native-viewpager(https://github.com/race604/react-native-v

Android自定义控件之应用程序首页轮播图

现在基本上大多数的Android应用程序的首页都有轮播图,就是像下图这样的(此图为转载的一篇博文中的图,拿来直接用了): 像这样的组件我相信大多数的应用程序都会使用到,本文就是自定义一个这样的组件,可以动态设置图片的张数.下面就开始本次的自定义之旅吧,首先看一下自定义控件的的布局文件: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://