binbinyang--介绍一个GITHUB上的轮播图-Android Image Slider（com.daimajia.slider.library.SliderLayout）

最新推荐文章于 2021-06-02 22:55:22 发布

原创最新推荐文章于 2021-06-02 22:55:22 发布 · 4.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Andriod #github #Android Image Slider

android第三方框架专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个在GitHub上发现的Android轮播图控件的使用方法，包括配置依赖、添加权限、设置布局参数等步骤，并通过示例代码展示了如何实现带有自定义指示器的轮播图。

最近在GITHUB------- https://github.com/daimajia/AndroidImageSlider

上看到了这个轮播图控件

com.daimajia.slider.library.SliderLayout

效果图如下

幻灯片切换动画效果，可直接从网络或本地文件中获取图片。点击图片开始/暂停,滑动等待几秒后重新开始轮播。

首先来到GITHUB 看到下图

Step 1--在Gradle中加入包

dependencies {
        compile "com.android.support:support-v4:+"
        compile 'com.squareup.picasso:picasso:2.3.2'
        compile 'com.nineoldandroids:library:2.4.0'
        compile 'com.daimajia.slider:library:1.1.5@aar'
}

Step2--加入权限

<!-- if you want to load images from the internet -->
<uses-permission android:name="android.permission.INTERNET" /> 

<!-- if you want to load images from a file OR from the internet -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

Step3--在布局中加入

<com.daimajia.slider.library.SliderLayout
        android:id="@+id/slider"
        android:layout_width="match_parent"
        android:layout_height="200dp"
/>

关键参数

关键参数设置： 
custom:pager_animation=”Accordion” 切换动画效果 
custom:auto_cycle=”true” 自动播放 
custom:indicator_visibility=”visible” 显示指示器

下面这个图是我自己写的DEMO的轮播图。。由于录制GIF软件问题动画效果，录制出来的图片，动画效果感觉没出来不过不碍事

直接上代码

由于我这个地方用到了这个轮播图带的自定义指示器所以这里也要介绍一下

custom:shape=”oval” 或 rect 圆形，矩形

 <com.daimajia.slider.library.Indicators.PagerIndicator
        android:id="@+id/custom_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        custom:selected_color="#FF5500"
        custom:unselected_color="#55333333"
        custom:shape="rect"
        custom:selected_padding_left="2dp"
        custom:selected_padding_right="2dp"
        custom:unselected_padding_left="2dp"
        custom:unselected_padding_right="2dp"
        custom:selected_width="16dp"
        custom:selected_height="3dp"
        custom:unselected_width="16dp"
        custom:unselected_height="3dp"
        android:layout_gravity="center"
        />

以及可用 style设置基本参数
默认提供三种
AndroidImageSlider_Corner_Oval_Orange，AndroidImageSlider_Attractive_Rect_Blue，AndroidImageSlider_Magnifier_Oval_Black

<style name="AndroidImageSlider_Corner_Oval_Orange">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:gravity">center</item>
        <item name="android:background">@drawable/indicator_corner_bg</item>
        <item name="android:paddingLeft">2dp</item>
        <item name="android:paddingRight">2dp</item>
        <item name="shape">oval</item>
        <item name="padding_left">3dp</item>
        <item name="padding_right">3dp</item>
        <item name="padding_top">4dp</item>
        <item name="padding_bottom">4dp</item>

        <item name="selected_color">#f60</item>
        <item name="unselected_color">#ffffff</item>
        <item name="selected_width">6dp</item>
        <item name="selected_height">6dp</item>
        <item name="unselected_width">6dp</item>
        <item name="unselected_height">6dp</item>
    </style>

我的布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:background="#fff"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <com.daimajia.slider.library.SliderLayout
        android:id="@+id/slider"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        />
    <com.daimajia.slider.library.Indicators.PagerIndicator
        android:id="@+id/custom_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        custom:selected_color="#FF5500"
        custom:unselected_color="#55333333"
        custom:shape="rect"
        custom:selected_padding_left="2dp"
        custom:selected_padding_right="2dp"
        custom:unselected_padding_left="2dp"
        custom:unselected_padding_right="2dp"
        custom:selected_width="16dp"
        custom:selected_height="3dp"
        custom:unselected_width="16dp"
        custom:unselected_height="3dp"
        android:layout_gravity="center"
        />
</LinearLayout>

我的代码

/**
 * 首页
 */
public class HomeFragment extends Fragment {
    SliderLayout sliderShow;
    View view;
    PagerIndicator indicator;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.fragment_home, container, false);
        sliderShow = (SliderLayout) view.findViewById(R.id.slider);
        indicator= (PagerIndicator)  view.findViewById(R.id.custom_indicator);
        initSlider();
        return view;
    }


    private void initSlider() {
        TextSliderView textSliderView1 = new TextSliderView(this.getActivity());
        textSliderView1
                .description("IT生活")
                .image("http://7mno4h.com2.z0.glb.qiniucdn.com/5608cae6Nbb1a39f9.jpg");


        textSliderView1.setOnSliderClickListener(new BaseSliderView.OnSliderClickListener() {
            @Override
            public void onSliderClick(BaseSliderView slider) {
                Toast.makeText(getActivity(),"轮播图的第一个图的点击效果",1).show();
            }
        });




        TextSliderView textSliderView2 = new TextSliderView(this.getActivity());
        textSliderView2
                .description("金秋风暴")
                .image("http://7mno4h.com2.z0.glb.qiniucdn.com/5608b7cdN218fb48f.jpg");



        TextSliderView textSliderView3 = new TextSliderView(this.getActivity());
        textSliderView3
                .description("手机会场")
                .image("http://7mno4h.com2.z0.glb.qiniucdn.com/5608eb8cN9b9a0a39.jpg");




        TextSliderView textSliderView4 = new TextSliderView(this.getActivity());
        textSliderView4
                .description("音像会场")
                .image("http://7mno4h.com2.z0.glb.qiniucdn.com/5608f3b5Nc8d90151.jpg");



        sliderShow.addSlider(textSliderView1);
        sliderShow.addSlider(textSliderView2);
        sliderShow.addSlider(textSliderView3);
        sliderShow.addSlider(textSliderView4);


//        sliderShow.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);/ 设置默认指示器位置(默认指示器白色)
        sliderShow.setCustomIndicator(indicator); // 设置自定义指示器(位置自定义)
        sliderShow.setCustomAnimation(new DescriptionAnimation());   // 设置TextView自定义动画
        sliderShow.setPresetTransformer(SliderLayout.Transformer.RotateDown);//设置默认过渡效果(可在xml中设置)的动画
        sliderShow.setDuration(3000);//设置时间 这个时间 就是延迟时间 第一个图跟第2个图3秒间隔



    }

其实他的指示器效果挺多的。。都在GITHUB上面有。。有兴趣的话可以自己去试试