android輪播圖AndroidImageSlider的簡單使用

網上關於輪播圖的博客魚龍混雜,我用的較多的是AndroidImageSlider這個開源庫,該項目是國外非常出名的開源項目,官方github地址 https://github.com/daimajia/AndroidImageSlider
AndroidImageSlider的架構,最核心的類是SliderLayout,,繼承RelativeLayout。
包含了可以左右滑動切換的SliderView,以及頁面指示器PagerIndicator,也就是上圖中的4個小圓點。這兩個都可以自定義,常規的用法是:使用TextSliderView+自定義PagerIndicator
一、使用
參考GithHub中AndroidImageSlider主頁的介紹,首先將需要的三個依賴項目引入進來,他們分別是:(版本是楠妹妹寫這個筆記的時候的最新版)
1、添加依賴

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'
}

2、引入佈局

<com.daimajia.slider.library.SliderLayout
    android:id="@+id/slider1"
    android:layout_width="match_parent"
    custom:pager_animation="Accordion" 
    custom:auto_cycle="true"
    custom:indicator_visibility="visible"
    custom:pager_animation_span="1100"
    android:layout_height="180dp"/>

//custom:pager_animation=”Accordion” 切換動畫效果
//custom:auto_cycle=”true” 自動播放
//custom:indicator_visibility=”visible” 顯示指示器

新建指示器佈局 layout_Indicator.xml

<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: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="#0095BF"
        custom:unselected_color="#55333333"
        custom:selected_drawable="@drawable/bird"
        custom:shape="oval"
        custom:selected_padding_left="5dp"
        custom:selected_padding_right="5dp"
        custom:unselected_padding_left="5dp"
        custom:unselected_padding_right="5dp"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        custom:selected_width="6dp"
        custom:selected_height="6dp"
        custom:unselected_width="6dp"
        custom:unselected_height="6dp"
        android:layout_marginBottom="40dp"
        />
        <!-- style 在lib裏面 -->
    <com.daimajia.slider.library.Indicators.PagerIndicator
        android:id="@+id/custom_indicator2"
        style="@style/AndroidImageSlider_Corner_Oval_Orange"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp"
        />

style的三種默認參數AndroidImageSlider_Corner_Oval_Orange,AndroidImageSlider_Attractive_Rect_Blue,AndroidImageSlider_M

3、最後在代碼中操作:

private SliderLayout mDemoSlider1;

mDemoSlider1 = (SliderLayout)findViewById(R.id.slider1);

HashMap<String,String> url_maps = new HashMap<String, String>();
        url_maps.put("Hannibal", "http://static2.hypable.com/wp-content/uploads/2013/12/hannibal-season-2-release-date.jpg");
        url_maps.put("Big Bang Theory", "http://tvfiles.alphacoders.com/100/hdclearart-10.png");
        url_maps.put("House of Cards", "http://cdn3.nflximg.net/images/3093/2043093.jpg");
        url_maps.put("Game of Thrones", "http://images.boomsbeat.com/data/images/full/19640/game-of-thrones-season-4-jpg.jpg");
//        HashMap<String,Integer> file_maps = new HashMap<String, Integer>();
//        file_maps.put("Hannibal",R.drawable.nemo);
//        file_maps.put("Big Bang Theory",R.drawable.up);
//        file_maps.put("House of Cards",R.drawable.wall);
//        file_maps.put("Game of Thrones", R.drawable.toystory);
        for(String name : url_maps.keySet()){
            // DefaultSliderView sliderView = new DefaultSliderView(this);
            TextSliderView textSliderView = new TextSliderView(this);
            // initialize a SliderLayout
            textSliderView
                    .description(name)
                    .image(url_maps.get(name))
                    .setScaleType(BaseSliderView.ScaleType.Fit)
                    .setOnSliderClickListener(this);

            //add your extra information 點擊圖片時可用到
            textSliderView.bundle(new Bundle());
            textSliderView.getBundle()
                    .putString("extra",name);

            mDemoSlider1.addSlider(textSliderView);
        }
       // 設置默認過渡效果(可在xml中設置)
           //mDemoSlider.setPresetTransformer(SliderLayout.Transformer.Default);
      mDemoSlider1.setPresetTransformer(SliderLayout.Transformer.Accordion);
        // 設置默認指示器位置(默認指示器白色,位置在sliderlayout底部)
        mDemoSlider1.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);
        // 設置自定義指示器(位置自定義)
        mDemoSlider1.setCustomIndicator((PagerIndicator) findViewById(R.id.custom_indicator));
        // 設置TextView自定義動畫
        mDemoSlider1.setCustomAnimation(new DescriptionAnimation());
        //mDemoSlider2.setCustomAnimation(new ChildAnimationExample()); // 多種效果,進入該類修改,參考效果github/daimajia/AndroidViewAnimations
        // 設置持續時間
        mDemoSlider1.setDuration(2000);
        mDemoSlider1.addOnPageChangeListener(this);

本文借鑑了“沒有失敗,沒有放棄”的對該項目的理解的一些想法,如有不妥,可告知,將妥善處理。
引用博客地址http://www.cnblogs.com/java-g/p/5690703.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章