Android ile Dinamik Fotograf Galerisi Oluşturmak – AndroidImageSlider Kütüphanesi

Bu makalede, AndroidImageSlider kütüphanesini kullanarak bir Android uygulamada birden çok görüntünün nasıl animasyonlu slayt geçişi halinde gösterileceğini açıklayacağım..

Bildiğiniz üzere bir image slider, bir dizi görüntüyü tek tek modül içerisinde göstermek için kullanılır. Resimlerle kaydırma, düzenli aralıklarla otomatik olarak yapılabilir veya sonraki veya önceki slaytları görüntülemek için hızlıca kaydır şeklinde kullanıcı etkileşimine yanıt verebilir. Bu makalede, Android uygulamada AndroidImageSlider kütüphanesini kullanarak animasyonlu slider nasıl oluşturulacağını anlatacağım.

AndroidImageSlider kütüphanesini projeye ekleme

AndroidImageSlider kütüphanesini derlemek için, kütüphanesinin uygulamaya eklenmesi gerekiyor. Uygulamanın build.gradle dosyasını açın. Kütüphaneyi ekleyin. Çalışma zamanında kütüphaneyi otomatik olarak derleyecektir.

dependencies {
    compile project(':library')
}

Slider Oluşturma

<com.uygulamauniqueadresiniz.slider.library.SliderLayout
        android:id="@+id/slider"
        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="200dp" />

Image slider’ı görüntülemek için BaseSliderView.OnSliderClickListener ve ViewPagerEx.OnPageChangeListener‘ı Activity Class‘da uygulamamız gerekir. Bu class’ın çağıracağız ve kullanacağımız metodları aşağıda açıklıyorum.

• onSliderClick() Bileşenlerimizin slider üzerine tıklayarak tepki vermesini istediğimizde kullanacağız.
• onPageScrolled() Otomatik veya kullanıcı tarafından başlatılan dokunmatik kaydırmayı işlemek için kullanılır
• onPageSelected() Bir görsel seçildiğinde çalışacak metoddur:
• onPageScrollStateChanged() Kaydırma durumunun değiştiği senaryoyu işlemektedir.

public class MainActivity extends AppCompatActivity 
      implements BaseSliderView.OnSliderClickListener, 
                       ViewPagerEx.OnPageChangeListener{
 
    private SliderLayout imageSlider;
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageSlider = (SliderLayout)findViewById(R.id.slider);
    }
    @Override
    protected void onStop() {
        // make sure to call stopAutoCycle() on the slider before activity 
       or fragment is destroyed
        imageSlider.stopAutoCycle();
        super.onStop();
    }
 
    @Override
    public void onSliderClick(BaseSliderView slider) {
        Toast.makeText(this,slider.getBundle().get("extra") + "",
          Toast.LENGTH_SHORT).show();
    }
 
    @Override
    public void onPageScrolled(int position, float positionOffset, 
         int positionOffsetPixels) {}
 
    @Override
    public void onPageSelected(int position) {
        Log.e("Slider Demo", "Page Changed: " + position);
    }
 
    @Override
    public void onPageScrollStateChanged(int state) {}
 
}

HashMap ve TextSliderView’ı SliderLayout’a ekleme

Resim listesini saklamak için HashMap kullanmamız gerekiyor. Eğer sunucu tarafında görüntü yüklemek istiyorsak, o zaman HashMap <String, String> ‘i kullanmak zorundayız. Biz bir test uygulaması yazdığımızdan dolayı şimdilik mevcut dizinden resim yüklemek istiyoruz, o zaman ise HashMap <String, Integer> kullanmak zorundayız. Ayrıca addSlider() metodu aracılığıyla TextSliderView öğesini SliderLayout öğesine ekleyin. TextSliderView, açıklama, görüntü URL’si, ölçek veya başka birtakım diğer bilgiler gibi görüntü hakkında bilgileri depolar.

public class MainActivity extends AppCompatActivity 
          implements BaseSliderView.OnSliderClickListener, 
                              ViewPagerEx.OnPageChangeListener{
 
    private SliderLayout imageSlider;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageSlider = (SliderLayout)findViewById(R.id.slider);
 
        HashMap<String,String> url_maps = new HashMap<String, String>();
        url_maps.put("Hannibal", "<a class="vglnk" href="https://www.studytutorial.in/wp-content/uploads/" rel="nofollow"><span>https</span><span>://</span><span>www</span><span>.</span><span>studytutorial</span><span>.</span><span>in</span><span>/</span><span>wp</span><span>-</span><span>content</span><span>/</span><span>uploads</span><span>/</span></a>
                                                2017/06/facebook_login_with_php-min.jpg");
        url_maps.put("Big Bang Theory", "<a class="vglnk" href="https://www.studytutorial.in/" rel="nofollow"><span>https</span><span>://</span><span>www</span><span>.</span><span>studytutorial</span><span>.</span><span>in</span><span>/</span></a>
                                      wp-content/uploads/2016/02/maxresdefault-2.jpg");
        url_maps.put("House of Cards", "<a class="vglnk" href="https://www.studytutorial.in" rel="nofollow"><span>https</span><span>://</span><span>www</span><span>.</span><span>studytutorial</span><span>.</span><span>in</span></a>
                                  /wp-content/uploads/2016/10/multiseries_bar_chart.jpg");
        url_maps.put("Game of Thrones", "<a class="vglnk" href="https://www.studytutorial.in/" rel="nofollow"><span>https</span><span>://</span><span>www</span><span>.</span><span>studytutorial</span><span>.</span><span>in</span><span>/</span></a>
                                wp-content/uploads/2017/04/studytutorial-logo.png");
 
        HashMap<String,Integer> file_maps = new HashMap<String, Integer>();
//        file_maps.put("Hannibal",R.drawable.hannibal);
//        file_maps.put("Big Bang Theory",R.drawable.bigbang);
//        file_maps.put("House of Cards",R.drawable.house);
//        file_maps.put("Game of Thrones", R.drawable.game_of_thrones);
 
        for(String name : url_maps.keySet()){
            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);
 
            imageSlider.addSlider(textSliderView);
        }
    }
}

Bir sonraki makalemizde tekrar görüşmek dileklerimle, huzurlu ve sağlıklı günler dilerim.