Bu ders ile beraber android’deki tablar konusuna giriş yapıyoruz. Tablara geçmeden önce ilk olarak viewpagerın ne olduğundan ve nasıl kullanılacağından bahsettikten sonra, bunlarla ilgili bir uygulama yapacağız.
Bu örneği yaparken daha önce listview veya recyclerviewda uygulanan adımları uyguluyoruz. Öncelikle data kaynağımızı hazırlayacağız, daha sonra tek bir satırın görünümünü belirleyen bir layout hazırlıyoruz.
ViewPager view öğemizi activity_main.xml’in içine yerleştiriyoruz. Daha sonra bunun içinde elemanları göstermek için bir adapter’a ihtiyacımız var, onu oluşturuyoruz. Bu custom adapter sınıfını PagerAdapter sınıfından extend etmemiz gerekiyor. Daha sonra bu sınıfı bizim istediğimiz işleri yapacak şekilde ayarlıyoruz.
Bu sınıfı yaratırken default olarak gelmeyen ama mutlaka gerçekleştirmemiz gereken methodlar var. Bunlardan biri Object geri dönüşü olan instantiateItem methodu. Bu method diğer örneklerimizdeki getView methodu gibi düşünülebilir. Parametre olarak container ve position degerlerini alır.
container: viewpager’ımıza denk gelir ve viewımızı yani tek satır bilgiyi içeren layoutu buna manuel olarak eklememiz gerekir. Bu metodun return kısmına da inflate ettiğimiz tek satır xmli yazmamız gerekiyor.
Bir de destroyItem methodunu override etmemiz gerekiyor. Böylece ekranda görünmeyen elemanlar hafızadan silinir. Aksi taktirde tüm öğeler hafızada kalacaktır ve çok eleman olduğunda sorun çıkaracaktır.
Daha fazla ayrıntı için videoyu izleyebilirsiniz.
Bir sonraki derste mantığını daha detaylı anlatacağım…
Projenin bitmiş halini indirmek için lütfen burayı tıklayın…
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
public class DataModel { private int ImageID; private String baslik; public DataModel(int imageID, String baslik){ /* this.ImageID=imageID; this.baslik=baslik; */ setImageID(imageID); setBaslik(baslik); } public int getImageID() { return ImageID; } public String getBaslik() { return baslik; } public void setImageID(int imageID) { ImageID = imageID; } public void setBaslik(String baslik) { this.baslik = baslik; } public static List<DataModel> getDataList(){ List<DataModel> itemList=new ArrayList<>(); int[] imageIDs=new int[]{ R.drawable.image1, R.drawable.image2, R.drawable.image3, R.drawable.image4, R.drawable.image5, R.drawable.image6 }; String[] imageBasliklari=new String[]{ "Resim 1", "Resim 2", "Resim 3", "Resim 4", "Resim 5", "Resim 6" }; for (int i=0; i<imageIDs.length; i++){ itemList.add(new DataModel(imageIDs[i], imageBasliklari[i])); } return itemList; } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?xml version="1.0" encoding="utf-8"?> <FrameLayout 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/image_item" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/image1"/> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|center_horizontal" android:layout_marginBottom="40dp" android:text="Placeholder Title" android:textColor="@android:color/white" android:textSize="35sp"/> </FrameLayout> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?xml version="1.0" encoding="utf-8"?> <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" tools:context="com.example.emrealtunbilek.simpleviewpager.MainActivity"> <android.support.v4.view.ViewPager android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/viewPager" ></android.support.v4.view.ViewPager> </RelativeLayout> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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.viewPager); CustomPagerAdapter adapter=new CustomPagerAdapter(this, DataModel.getDataList()); viewPager.setAdapter(adapter); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
class CustomPagerAdapter extends PagerAdapter { private List<DataModel> itemList; private Context context; private LayoutInflater inflater; public CustomPagerAdapter(Context context, List<DataModel> itemList){ this.context=context; this.itemList=itemList; inflater= (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); } @Override public int getCount() { return itemList.size(); } @Override public boolean isViewFromObject(View view, Object object) { return view==object; } @Override public Object instantiateItem(ViewGroup container, int position) { Log.e("EMRE", "instantiateItem position :"+ position + " resim no:"+(position+1)); View view=inflater.inflate(R.layout.tek_satir, container, false); ImageView imgView= (ImageView) view.findViewById(R.id.image_item); TextView tv= (TextView) view.findViewById(R.id.textView); DataModel gecici=itemList.get(position); imgView.setImageResource(gecici.getImageID()); tv.setText(gecici.getBaslik()); //tek_Satir.xml'i container'a yani viewpager'a ekliyoruz. container.addView(view); return view; } @Override public void destroyItem(ViewGroup container, int position, Object object) { Log.e("EMRE", "silinen öğe position :"+ position + " resim no:"+(position+1)); //container=viewpager, object ise tek_satir xml'in root elementi olan FrameLayout container.removeView((FrameLayout) object); } } |