ViewPager 를 이용한 ImageView 구현

ViewPager를 이용하여 스와이프로 여러개의 이미지를 출력하는 위젯 구현

 

---

1. Activity에 ViewPager 위젯 추가

<androidx.appcompat.widget.LinearLayoutCompat 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    tools:context=".Main.MainActivity">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/pager_images"
        android:layout_width="match_parent"
        android:layout_height="300dp"/>

    <me.relex.circleindicator.CircleIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="35dp"
        app:ci_drawable="@drawable/shape_black_oval"
        app:ci_height="7dp"
        app:ci_margin="4dp"
        app:ci_width="7dp"/>
    
</androidx.appcompat.widget.LinearLayoutCompat>

---

2. ViewPager안에 출력할 pager 레이아웃 파일 추가

- pager_shop_news_image.xml

<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/img_shop_news"
       android:src="@drawable/fruit"
       android:layout_width="match_parent"
       android:layout_height="match_parent"/>

</LinearLayout>

---

3. PagerAdapter class 생성

public class ShopImagePagerAdapter extends PagerAdapter {

    private static final String TAG = "ShopNewsPagerAdapter";
    private int[] images = {R.drawable.car, R.drawable.ballon , R.drawable.fruit , R.drawable.house};
    private Context context;

    public ShopImagePagerAdapter(Context context) {
        this.context = context;
    }

    @Override
    public int getCount() {
        return images.length;
    }

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

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

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = inflater.inflate(R.layout.pager_shop_news_image, container , false);

        ImageView imageView = view.findViewById(R.id.img_shop_news);
        imageView.setImageResource(images[position]);

        container.addView(view);

        return view;
    }
}

 

---

4. Activity Class에서 Pager 및 Adapter 연결

public class ShopNewsActivity extends AppCompatActivity {

    private static final String TAG = "ShopNewsActivity";
    private ViewPager pager;
    private ShopImagePagerAdapter pagerAdapter;
    private CircleIndicator indicator;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_shop_news);

        pager = findViewById(R.id.pager_images);
        pagerAdapter = new ShopImagePagerAdapter(this);
        pager.setAdapter(pagerAdapter);

        indicator = findViewById(R.id.indicator);
        indicator.setViewPager(pager);
    }
}

 

참조 : lktprogrammer.tistory.com/178

 

[Android] 안드로이드 - 뷰페이저(ViewPager) 구현