Monday, December 14, 2015

Image Slideshow pada Android

Artikel ini akan membahas bagaimana membuat Image Sliding  di android dengan menggunakan "ViewPager"

Let's get started

Pertama kita buat Layout , contoh : image_layout.xml. Layout ini berisi ImageView
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/IVPhoto"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/place_holder_landscape_white"/>
</LinearLayout>

Layout ini akan digunakan di sebuah class dimana class tersebut merupakan "extend" dari "PageAdapter"
contoh : kita beri nama class tersebut SwipeImageAdapter

SwipeImageAdapter.java


public class SwipeImageAdapter extends PagerAdapter {

    private Context ctx;
    private LayoutInflater layoutInflater;

    //berisi list dari URL gambar
    private List<String> imageURL;


    public CustomSwipeAdapter(Context ctx, List<String> imageURL) {
        this.ctx = ctx;
        this.imageURL = imageURL;
    }

    @Override
    public int getCount() {
       return imageURL.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
       return (view == (LinearLayout) object);
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        layoutInflater = (LayoutInflater) ctx.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View itemView = layoutInflater.inflate(R.layout.image_layout, container, false);
        imageLoader = ImageLoader.getInstance();
        imageLoader.init(ImageLoaderConfiguration.createDefault(ctx));

        ImageView imageView = (ImageView) itemView.findViewById(R.id.imageView);
        imageLoader.getInstance().displayImage(imageURL.get(position), imageView);
        container.addView(itemView);

        return itemView;
        
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((LinearLayout) object);
    }
}

*untuk menggunakan ImageLoader, jangan lupa untuk menambahkan dependency dari 'com.nostra13.universalimageloader:universal-image-loader:1.9.3'

Selanjutnya kita akan membuat activity yang berisi "ViewPager" misalnya MainActivity.java dengan layout activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:id="@+id/relativeLayout"> 
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>
 
</RelativeLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
        List imageUrl = new ArrayList<>();
        //silahkan isi imageUrl dengan url gambar yang di inginkan 
        SwipeImageAdapter swipeImageAdapter = new SwipeImageAdapter(getBaseContext(),imageUrl);
        viewPager.setAdapter(swipeImageAdapter);

    }

Silahkan jalankan applikasi nya,

Demikiat tutorial kali ini , semoga bermanfaat . Terima kasih!

Sumber: http://codetheory.in/android-image-slideshow-using-viewpager-pageradapter/

No comments:

Post a Comment