Contoh yang diberikan di bawah ini menunjukkan cara membuat ViewPager sederhana
dengan tiga halaman di Sketchware
1. Pada area VIEW di main.xml tambahkan Linear vertical linear1 dengan width and height ke ukuran match_parent. ViewPager akan di buat secara terprogram dan tambahkan pada linear1.
2. Hidupkan AppCompat and design.
3. Rubah warna pada colorAccent menjadi putih.
4. Tambahkan 3 Halaman CustomView dengan nama page1.xml, page3.xml, and page5.xml. hal ini akan bertindak sebagai halaman ViewPager.
pada halaman page1.xml tambahkan Switch dan berikan nama switch2.
Pada page3.xml tambahkan TextView dengan nama textview1.
Pada page5.xml Tambahkan Button dengan nama button1. Lihat gambar di bawah
5. Buat Blok pada more block dan beri nama extra dan masuk ke dalamnya tambahkan blok add source directly.
}
// Create a list of pages
int[] pageId = {
R.layout.page1, R.layout.page3, R.layout.page5
};
// Define Adapter for ViewPager
private class MyPagerAdapter extends android.support.v4.view.PagerAdapter {
// Get total number of pages
public int getCount() {
return pageId.length;
}
// Get Title of pages
@Override
public CharSequence getPageTitle(int position) {
String[] pageTitle = {"Tab-1", "Tab-2", "Tab-3"};
return pageTitle[position];
}
// Get the Views to be displayed at each position
public Object instantiateItem(View collection, int position) {
// Get View from their Ids
View view = getLayoutInflater().inflate(pageId[position], null);
((android.support.v4.view.ViewPager)collection).addView(view, 0);
if (position == 0) {
// For the page at position 0 (page1.xml), define Switch and setOnCheckedChangeListener for it.
final Switch tab1switch1 = view.findViewById(R.id.switch2);
tab1switch1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton _param1, boolean _param2){
final boolean _isChecked = _param2;
if (_isChecked){
tab1switch1.setText("Switch ON");
} else {
tab1switch1.setText("Switch OFF");
}
}
});
}
else if (position == 1) {
// For the page at position 1 (page3.xml), define TextView and setOnClickListener for it.
final TextView tab2textview1 = view.findViewById(R.id.textview1);
tab2textview1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick (View v){
showMessage("TextView 1 Clicked.");
}
});
}
else if (position == 2) {
// For the page at position 2 (page5.xml), define Button and setOnClickListener for it.
final Button tab3button1 = view.findViewById(R.id.button1);
tab3button1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick (View v){
showMessage("Button 1 Clicked.");
}
});
}
// Return the View corresponding to position selected
return view;
}
@Override
public void destroyItem(View arg0, int arg1, Object arg2) { ((android.support.v4.view.ViewPager) arg0).removeView((View) arg2);
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == ((View) arg1);
}
6. pada event onCreate, tambahkan dan gunakan blok add source directly dam tambahkan kode di bawah ini.
// Create a ViewPager, set adapter for it, and set it's current item to position 0 (page1.xml).
android.support.v4.view.ViewPager viewPager1 = new android.support.v4.view.ViewPager(this);
viewPager1.setAdapter(new MyPagerAdapter());
viewPager1.setCurrentItem(0);
// Define a new TabLayout, set it up with the ViewPager, and add it to the AppBarLayout which surrounds the ToolBar. The AppBarLayout thus will contain ToolBar and TabLayout.
android.support.design.widget.TabLayout tabLayout = new android.support.design.widget.TabLayout(this);
tabLayout.setupWithViewPager(viewPager1);
((android.support.design.widget.AppBarLayout) _toolbar.getParent()).addView(tabLayout);
// Add the ViewPager to linear1 of main.xml
linear1.addView(viewPager1);
7. Simpan dan jalankan proyek. Selesai
SHARE
