酷炫轮播广告

news/2024/7/7 15:34:33

、广告轮播条的简介

 

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

 

 

二、AndroidImageSlider简介

 

AndroidImageSliderGitHub上的一个非常火的开源项目,由“代码家”出品,他的网址是https://github.com/daimajia/AndroidImageSlider。下面的用法介绍很多都是参考他的GitHub主页的常规用法因此建议大家学习使用开源项目的时候直接参考GitHub主页的用法介绍

下图是AndroidImageSlider的架构最核心的类是SliderLayout,他继承自相对布局包含了可以左右滑动切换的SliderView,以及页面指示器PagerIndicator,也就是上图中的4小圆点。这两个都可以自定义,常规的用法是:使用TextSliderView+自定义PagerIndicator,下面对常规用法就行介绍

 

 

三、AndroidImageSlider实现广告轮播条

 

1、参考GithHubAndroidImageSlider主页的介绍,首先将需要的三个依赖项目引入进来,他们分别是:

compile 'com.squareup.picasso:picasso:2.5.2'

compile 'com.nineoldandroids:library:2.4.0'

compile 'com.daimajia.slider:library:1.1.5@aar'

 

建议全部的依赖项目统一使用最新的版本,因为依赖的项目之间可能也会存在依赖,如果不想出现版本冲突问题,最后全部使用最新版,解决办法就是直接在Android Studio里面搜索下载,如下图所示(注意:GithHub主页上面写的不一定是最新版)。

 

 

2、在布局文件中放置SliderLayout以及PagerIndicator。注意布局中我是通过相对布局把PagerIndicator压在SliderLayout之上的。代码都可以在GitHub上找到参考。

<RelativeLayout

    android:layout_width="match_parent"

    android:layout_height="150dp">

 

    <com.daimajia.slider.library.SliderLayout

        android:id="@+id/slider"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        >

 

        <com.daimajia.slider.library.Indicators.PagerIndicator

            android:id="@+id/custom_indicator"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_alignParentBottom="true"

            android:layout_centerHorizontal="true"

            android:layout_marginBottom="10dp"

            custom:selected_color="@color/colorPrimary"

            custom:selected_height="3dp"

            custom:selected_padding_left="2dp"

            custom:selected_padding_right="2dp"

            custom:selected_width="16dp"

            custom:shape="rect"

            custom:unselected_color="#55333333"

            custom:unselected_height="3dp"

            custom:unselected_padding_left="2dp"

            custom:unselected_padding_right="2dp"

            custom:unselected_width="16dp"

            />

 

    </com.daimajia.slider.library.SliderLayout>

</RelativeLayout>

 

3、代码实现,主要步骤是

· 准备好要显示的数据,包括图片和图片描述等。

· 新建若干个TextSliderView并且设置好数据以及相应的监听最后添加到SliderLayout里面

· 对SliderLayout进行一些个性化的设置,比如动画,自定义PagerIndicator,每一个广告的延时时间等。

· 最后别忘了在布局摧毁的时候,调用sliderLayout.stopAutoCycle();方法停止广告的轮播以释放资源

 

/**

 * 初始化首页的商品广告条

 */

private void initImageSlider() {

 

    sliderLayout = (SliderLayout) v.findViewById(R.id.slider);

    indicator = (PagerIndicator) v.findViewById(R.id.custom_indicator);

 

    //准备好要显示的数据

    List<String> imageUrls = new ArrayList<>();

    final List<String> descriptions = new ArrayList<>();

    imageUrls.add("http://m.360buyimg.com/mobilecms/s300x98_jfs/t2416/102/20949846/13425/a3027ebc/55e6d1b9Ne6fd6d8f.jpg");

    imageUrls.add("http://m.360buyimg.com/mobilecms/s300x98_jfs/t1507/64/486775407/55927/d72d78cb/558d2fbaNb3c2f349.jpg");

    imageUrls.add("http://m.360buyimg.com/mobilecms/s300x98_jfs/t1363/77/1381395719/60705/ce91ad5c/55dd271aN49efd216.jpg");

    descriptions.add("新品推荐");

    descriptions.add("时尚男装");

    descriptions.add("家电秒杀");

 

    for (int i = 0; i < imageUrls.size(); i++) {

        //新建三个展示View,并且添加到SliderLayout

        TextSliderView tsv = new TextSliderView(getActivity());

        tsv.image(imageUrls.get(i)).description(descriptions.get(i));

        final int finalI = i;

        tsv.setOnSliderClickListener(new BaseSliderView.OnSliderClickListener() {

            @Override

            public void onSliderClick(BaseSliderView slider) {

                Toast.makeText(getActivity(), descriptions.get(finalI), Toast.LENGTH_SHORT).show();

            }

        });

        sliderLayout.addSlider(tsv);

    }

 

    //SliderLayout进行一些自定义的配置

    sliderLayout.setCustomAnimation(new DescriptionAnimation());

    sliderLayout.setPresetTransformer(SliderLayout.Transformer.Accordion);

    sliderLayout.setDuration(3000);

//      sliderLayout.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);

    sliderLayout.setCustomIndicator(indicator);

}

 

四、总结

 

感觉非常炫酷有木有,好了,今天的介绍到此结束,关于AndroidImageSlider更多更详细更牛逼的用法还是建议大家去他的GitHub上参考与学习,因为上面的绝大部分牛逼的代码都是外国人写的,前提是你要学好英文哦

 

 

五、题外话

 

今天遇到了一个奇葩的问题,就是自定义的PagerIndicator一直不能按照自己的意愿去修改他的属性。郁闷了一个晚上。后来发现原来是命名空间写错了,当时是Android Studio自动帮我引入的命名空间(第一个),虽然项目没有报错,运行也没有问题,就是不能实现自定义的PagerIndicator。后来改为第二个才行。原因是命名空间写错导致一些自定义属性没法正常使用,希望大家不要再犯同样的错误

 

xmlns:custom="http://schemas.android.com/tools"

 

xmlns:custom="http://schemas.android.com/apk/res-auto"

 


http://www.niftyadmin.cn/n/3649121.html

相关文章

android View 详解

一、View 的概述 android.View.View(即View)类是以矩形的方式显示在屏幕上&#xff0c;View是用户界面控件的基础。View的继承层次关系如下图&#xff1a; 可以看到所有的界面控件都是View的子类。简单证实一下&#xff0c;每当你用findViewByIds(R.id.xx)时总要将其强转&#…

“大整数阶乖”问题的递推算法

/**//* 标题&#xff1a;<<系统设计师>>应试编程实例-[递推算法程序设计]作者&#xff1a;成晓旭时间&#xff1a;2002年09月11日(11:52:00-16:26:00)实现递推算法的大整数阶乖处理函数时间&#xff1a;2002年09月16日(18:38:00-20:02:00)实现“斐波那契数列”问…

RecycleView的详细介绍

一、RecycleView的简介 RecyclerView是一种新的视图组&#xff0c;目标是为任何基于适配器的视图提供相 似的渲染方式。该控件用于在有限的窗口中展示大量数据集&#xff0c;它被作为ListView和GridView控件的继承者。 那么有了ListView、GridView为什么还需要RecyclerView这…

[人物]USTC十大IT精英

【科大精英】张亚勤 微软全球副总裁1999年加盟微软亚洲研究院(原微软中国研究院)&#xff0c;现任微软亚洲研究院院长兼首席科学家。张博士1966年出生于山西太原&#xff0c;12岁考入中国科技大学少年班&#xff0c;23岁获得美国乔治华盛顿大学电气工程博士学位(1989)&#xff…

CardView的简单使用

一、CardView的简介 CardView继承自FrameLayout类&#xff0c;可以在一个卡片布局中一致性的显示内容&#xff0c;卡片可以包含圆角和阴影&#xff0c;这是CardView的最大的卖点。CardView是一个Layout&#xff0c;可以布局其他View。 CardView常用属性&#xff1a; card_view…

JAMstack:什么,为什么以及如何

介绍 (Introduction) Web development often involves the use of different development stacks, including the LAMP stack, the MEAN stack, the MERN stack, etc. JAMstack is another stack that offers some unique benefits to developers. This article will discuss t…

joi 参数验证_使用Joi进行节点API架构验证

joi 参数验证介绍 (Introduction) Imagine you are working on an API endpoint to create a new user, and some user data such as firstname, lastname, age and birthdate will need to be included in the request. Passing Sally in as value for age, or 53 for birthda…

利用Path实现酷炫的启动界面

参考GitHub源码的位置https://github.com/geftimov/android-pathview 首先第一步写布局 <com.eftimoff.androipathview.PathViewxmlns:app"http://schemas.android.com/apk/res-auto"android:id"id/pathView"android:layout_width"150dp"and…