封裝好的圖片滑動框架(AndroidImageSlider)

前言

廣告輪播條的重要性不言而喻。在很多類型app中出場率都很高。

今天給大家介紹一個輪播圖開源項目，這個項目把輪播圖需要的ViewPager跟計時器做了封裝，使用極其方便，支持gradle在線依賴。還封裝了幾種圖片滑動動畫。

無圖無真相:

有10多種滑動動畫，跟兩種滾動狀態。能滿足大部分需求。

如何使用

首先在線依賴三個庫

compile 'com.squareup.picasso:picasso:2.3.2'
compile 'com.nineoldandroids:library:2.4.0'
compile 'com.daimajia.slider:library:1.1.5@aar'

Picasso是Square公司出品的一款非常優秀的開源圖片加載庫，是目前Android開發中超級流行的圖片加載庫之一。nineoldandroids也是github比較有名的開源動畫庫，我們這個圖片滑動動畫就是基於這個動畫庫。slider就是Banner開源庫了。基於前面的Picasso跟nineoldandroids才達到效果。

需要在AndroidManifest.xml中加入訪問網絡權限。畢竟圖片有可能給一個url在線顯示。

 <uses-permission android:name="android.permission.INTERNET" />

activity_main.xml 首頁布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="200dp">

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

        <com.daimajia.slider.library.Indicators.PagerIndicator
            android:id="@+id/custom_indicator2"
            style="@style/AndroidImageSlider_Corner_Oval_Orange"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="20dp" />
    </RelativeLayout>
</RelativeLayout>

最外層是RelativeLayout，里面嵌套一個RelativeLayout，設置高度200dp，這個也就是我們廣告Banner的高度，里面有兩個控件SliderLayout跟PagerIndicator。PagerIndicator負責Banner。PagerIndicator是指示器，表示當前選中的狀態。

MainActivity.java 首頁

首先在onCreate方法中初始化控件，把描述跟圖片URl放map里面。然后遍歷Map，在for循環中新建每一頁滑動的TextSliderView,把map的key作為圖片描述，設置圖片url，設置圖片縮放類型等。最后調用SliderLayout的addSlider添加進去。我們還可以設置SliderLayout的滑動動畫，設置指示器樣式，設置圖片描述顯示動畫，設置滾動時間，也是計時器時間，添加頁面改變監聽函數。

mDemoSlider = (SliderLayout)findViewById(R.id.slider);
HashMap<String,String> urlMaps = new HashMap<>();
urlMaps.put("Hannibal", "http://static2.hypable.com/wp-content/uploads/2013/12/hannibal-season-2-release-date.jpg");
urlMaps.put("Big Bang Theory", "http://tvfiles.alphacoders.com/100/hdclearart-10.png");
urlMaps.put("House of Cards", "http://cdn3.nflximg.net/images/3093/2043093.jpg");

for(String name : urlMaps.keySet()){
    TextSliderView textSliderView = new TextSliderView(this);
    textSliderView
            .description(name)//描述
            .image(urlMaps.get(name))//image方法可以傳入圖片url、資源id、File
            .setScaleType(BaseSliderView.ScaleType.Fit)//圖片縮放類型
            .setOnSliderClickListener(onSliderClickListener);//圖片點擊
    textSliderView.bundle(new Bundle());
    textSliderView.getBundle().putString("extra",name);//傳入參數
    mDemoSlider.addSlider(textSliderView);//添加一個滑動頁面
}

mDemoSlider.setPresetTransformer(SliderLayout.Transformer.Accordion);//滑動動畫
//        mDemoSlider.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);//默認指示器樣式
mDemoSlider.setCustomIndicator((PagerIndicator)findViewById(R.id.custom_indicator2));//自定義指示器
mDemoSlider.setCustomAnimation(new DescriptionAnimation());//設置圖片描述顯示動畫
mDemoSlider.setDuration(4000);//設置滾動時間，也是計時器時間
mDemoSlider.addOnPageChangeListener(onPageChangeListener);

Banner的Item點擊監聽，也就是ViewPager的某一頁點擊監聽。

private BaseSliderView.OnSliderClickListener onSliderClickListener=new BaseSliderView.OnSliderClickListener() {
        @Override
        public void onSliderClick(BaseSliderView slider) {
            Toast.makeText(MainActivity.this,slider.getBundle().get("extra") + "",
                    Toast.LENGTH_SHORT).show();
        }
};

頁面改變監聽,ViewPager是我們經常用到的控件。對這個回調應該很熟悉了。。不過多解釋。

//頁面改變監聽
private ViewPagerEx.OnPageChangeListener onPageChangeListener=new ViewPagerEx.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

    @Override
    public void onPageSelected(int position) {
        Log.d("ansen", "Page Changed: " + position);
    }

    @Override
    public void onPageScrollStateChanged(int state) {}
};

滑動動畫

調用SliderLayout的setPresetTransformer可以設置滑動動畫，這個方法傳入的是一個Transformer對象。這個對象是一個枚舉類型，有以下值:

• Transformer.Default 默認
• Transformer.Accordion
• Transformer.Background2Foreground
• Transformer.CubeIn
• Transformer.DepthPage
• Transformer.Fade
• Transformer.FlipHorizontal
• Transformer.FlipPage
• Transformer.Foreground2Background
• Transformer.RotateDown
• Transformer.RotateUp
• Transformer.Stack
• Transformer.Tablet
• Transformer.ZoomIn
• Transformer.ZoomOutSlide
• Transformer.ZoomOut

大家可以設置不同的值看看什么樣的效果,也可以下載作者github的demo，文章末尾我會貼出這個項目的github地址。

設置圖片描述顯示時動畫

• setCustomAnimation(new DescriptionAnimation()); 描述默認動畫
• setCustomAnimation(new ChildAnimationExample());

指示器自定義屬性

PagerIndicator(指示器)類的自定義屬性比較多,我們講幾個常用的。

custom:selected_color 選中顏色
custom:selected_drawable 選中圖片
custom:selected_height 選中高度
custom:selected_padding_left 選中指示器左內邊距
custom:selected_padding_right 選中指示器右內邊距
custom:selected_width 選中寬度
custom:shape 指示器。。的類型,有oval跟rect兩種
custom:unselected_color 未選中指示器顏色
custom:unselected_height 未選中高度
custom:unselected_padding_left 未選中指示器左內邊距
custom:unselected_padding_right 未選中指示器右內邊距
custom:unselected_width 未選中寬度

源碼下載

我寫的demo源碼下載地址:

https://github.com/ansen666/ImageSlider

開源項目github地址

https://github.com/daimajia/AndroidImageSlider

建議大家直接從開源項目作者的github下載demo，然后運行下，看看效果。我寫的demo沒有作者的全面，但是也能參考。

如果你想第一時間看我的后期文章，掃碼關注公眾號，長期推送Android開發文章、最新動態、開源項目，讓你各種漲姿勢。

      Android開發666 - 安卓開發技術分享
             掃描二維碼加關注