仿京东商城系列4------轮播广告条

本项目来自菜鸟窝,有兴趣者点击http://www.cniao5.com/course/

项目已经做完,
https://github.com/15829238397/CN5E-shop


仿京东商城系列0------项目简介
仿京东商城系列1------fragmentTabHost实现底部导航栏
仿京东商城系列2------自定义toolbar
仿京东商城系列3------封装Okhttp
仿京东商城系列4------轮播广告条
仿京东商城系列5------商品推荐栏
仿京东商城系列6------下拉刷新上拉加载的商品列表
仿京东商城系列7------商品分类页面
仿京东商城系列8------自定义的数量控制器
仿京东商城系列9------购物车数据存储器实现
仿京东商城系列10------添加购物车,管理购物车功能实现
仿京东商城系列11------商品排序功能以及布局切换实现(Tablayout)
仿京东商城系列12------商品详细信息展示(nativie与html交互)
仿京东商城系列13------商品分享(shareSDK)
仿京东商城系列14------用户登录以及app登录拦截
仿京东长城系列15------用户注册,SMSSDK集成
仿京东商城系列16------支付SDK集成
仿京东商城系列17------支付功能实现
仿京东商城系列18------xml文件读取(地址选择器)
仿京东商城系列19------九宫格订单展示
仿京东商城系列20------终章


前言

之前我们封装了Okhttp,今天我们就可以用它来搞点事情啦!还需要介绍的还有今天的主角。SliderLayout
老规矩,先上效果。

sliderLayout.gif

内容

轮播广告条简介

广告轮播条在HTML网页设计以及APP界面设计中非常常见,如下图所示。在Android中,实现的方式可以是自定义ViewPager来实现,但是我们程序员中流传的一句名言,“不要重复造轮子”。因此我们也可以通过网上已经有的开源项目来进行开发,拿来主义,直接拿来用就可以了,这样极大地加快了我们的开发速度。

AndroidImageSlider简介

AndroidImageSlider是GitHub上的一个非常火的开源项目,由“代码家”出品,他的网址是
https://github.com/daimajia/AndroidImageSlider
下面的用法介绍很多都是参考他的GitHub主页的常规用法,因此建议大家学习使用开源项目的时候直接参考GitHub主页的用法介绍。
下图是AndroidImageSlider的架构,最核心的类是SliderLayout,他继承自相对布局,包含了可以左右滑动切换的SliderView,以及页面指示器PagerIndicator,也就是上图中的4个小圆点。这两个都可以自定义,常规的用法是:使用TextSliderView+自定义PagerIndicator,下面对常规用法就行介绍。

仿京东商城系列4------轮播广告条_第1张图片

实现轮播广告条

  • 添加依赖
    使用slider需要添加以下三个依赖
  compile 'com.daimajia.slider:library:1.1.5@aar'
    compile 'com.squareup.picasso:picasso:2.3.2'
    //属性动画的兼容包
    compile 'com.nineoldandroids:library:2.4.0'
  • 布局实现
  
    

布局实现的代码十分简单。不多说。

  • 代码实现
  public void initSlider () {
        OkhttpHelper okhttpHelper = OkhttpHelper.getOkhttpHelper();

        Map params = new HashMap() ;
        params.put("type" , 1+"") ;

        okhttpHelper.doGet(Contents.API.QUERY_SLIDER , new loadingSpotsDialog>(mContext) {

            @Override
            public void onFailure(Request request, IOException e) {
                Log.e("发送请求数据异常" , "---------->"+e) ;
                initSlider(getWoringWebConectList());
                this.closeSpotsDialog();
            }

            @Override
            public void onErroe(Response response, int responseCode, Exception e) throws IOException {
                this.closeSpotsDialog();
                Log.e("接收数据异常" , "---------->"+e) ;
                initSlider(getWoringWebConectList());
            }

            @Override
            public void callBackSucces(Response response, List sliderIndicator) throws IOException {
                this.closeSpotsDialog();
                initSlider(sliderIndicator);
            }
        } , params);
    }

    public void initSlider(List sliderIndicators ){
        sliderLayout = (SliderLayout) mView.findViewById(R.id.slider);
        //添加图片控件
        sliderLayout.removeAllSliders();
        for(SliderIndicator sliderIndicator : sliderIndicators){
            addTextSliderView(sliderIndicator) ;
        }
        //设置指示器的位置
        sliderLayout.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);
        //设置图片的切换效果
        sliderLayout.setPresetTransformer(SliderLayout.Transformer.Accordion);
        sliderLayout.setCustomAnimation(new DescriptionAnimation());
        //添加textView动画特效
        //设置切换时长2000 ,时长越小,切换速度越快
        sliderLayout.setDuration(3000);
    }

    public void addTextSliderView (SliderIndicator sliderIndicator){
        TextSliderView textSliderView1=new TextSliderView(mView.getContext());
        textSliderView1.description(sliderIndicator.getName());//设置标题
        textSliderView1.image(sliderIndicator.getImgUrl()).error(R.drawable.web_wrong);//设置图片的网络地址
        textSliderView1.setScaleType(BaseSliderView.ScaleType.CenterCrop);//设置图片的缩放效果;
        //添加到布局中显示
        sliderLayout.addSlider(textSliderView1);
    }
  • 新建一个List sliderIndicators对象,盛放从网络端得到的轮播的数据。
  • initSlider ()方法中使用之前系列3中封装的okhttp,发送网络请求,并从网络端获得json数据解析后获得SliderIndicator对象,并存储入sliderIndicators。
  • initSlider(List sliderIndicators )方法,将存储的数据,进行遍历,调用addTextSliderView方法,实例化TextSliderView对象并将它添加进sliderLayout。
  • 遍历完毕后对sliderLayout属性进行设置,如:指示器位置,动画特效,切换速度等等。
  • 功能实现

你可能感兴趣的:(仿京东商城系列4------轮播广告条)