Android scroll view(ViewPager)

That is same as Blogger blog of mine. 日本語

ViewPager is left-right scroll page view. In iOS, that kind of view can be created by ScrollView and UIView.

Android supports it. To use ViewPager, you need to use android-support-v4.jar 

This is extra pack. If you want to use , you need to install ExtraPack in SDK Manager.

The method of using this view is similar with ListView.

This is example

We can swipe these pages.

1. Create top layout(xml)
2. Create each page layout(xml)
3. Main Activity(java)
4. Data Adapter(java)

1. Create top layout(xml)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1" />

</LinearLayout>

2. Create each page layout(xml)

This is page layout(card.xml). Insert image and text

<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"
android:contentDescription="@string/cardimg"
android:layout_width="fill_parent"
android:layout_marginTop="100dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
></ImageView>

<TextView android:id="@+id/word"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:textSize="30sp"
android:textAlignment="center"
android:gravity="center"
/>
</LinearLayout>

3. Main Activity(java)

This is main Activity code
Get ViewPager from xml view, Set Adapter and PageChangeListener

This is first step of ViewPager, Next we need to change UI and Data in Adapter

public class ViewPagerActivity extends Activity 
{
 private ViewPager viewPager;
   
 List<Persondata> list;
   
 @Override
 protected void onCreate(Bundle savedInstanceState) 
 {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.viewport);
    
  this.list = PersonDataGenerator.createPersonData();
    
  viewPager = (ViewPager) findViewById(R.id.viewpager);
  PagerAdapter pagerAdapter = new CardPagerAdapter(this, list);
  viewPager.setOnPageChangeListener(new PageChangeListener());
  viewPager.setAdapter(pagerAdapter);
 }
   
 class PageChangeListener extends SimpleOnPageChangeListener
 {
  @Override
  public void onPageSelected(int position) 
  {
   // Page change Operation!
  }
 }
}

4. Data Adapter(java)

Adapter is to set data and manage resources of page.
This is almost same as ListView’s Adapter

Adapter should be extended PagerAdapter

@Override methods are required. destroyItem is not required in Eclipse QuickFix but,
to mange page correctly, is required( when swiping page, program goes down without this method)

public class CardPagerAdapter extends PagerAdapter 
{
 LayoutInflater _inflater = null;
   
 List<Persondata> list;
   
 private TextView nameView;
   
 private ImageView charView;
   
   
 public CardPagerAdapter( Context context, List<Persondata> list )
 {
  super();
  _inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  this.list = list;
 }
   
 @Override
 public Object instantiateItem(ViewGroup container, int position) 
 {
  LinearLayout layout = (LinearLayout)_inflater.inflate(R.layout.card, null);
    
  nameView = (TextView)layout.findViewById(R.id.word);
  nameView.setText(list.get(position).getName());
    
  charView = (ImageView)layout.findViewById(R.id.img);
  charView.setImageResource(list.get(position).getRes());
    
  container.addView(layout);
  return layout;
 }
   
 @Override
 public void destroyItem(ViewGroup container, int position, Object object) 
 {
  ((ViewPager) container).removeView((View) object);
 }
   
  
 @Override
 public int getCount() 
 {
  return list.size();
 }
  
 @Override
 public boolean isViewFromObject(View view, Object obj) 
 {
  return view.equals(obj);
 }
}

Data structure to manage page data

public class PersonData 
{
 private String name;
   
 private int res;
   
 public PersonData( String name, int res )
 {
  this.name = name;
  this.res = res;
 }
  
 public String getName() 
 {
  return name;
 }
  
 public void setName(String name) 
 {
  this.name = name;
 }
  
 public int getRes() 
 {
  return res;
 }
  
 public void setRes(int res) 
 {
  this.res = res;
 }
}

Data generator

public class PersonDataGenerator 
{
 public static List<Persondata> createPersonData()
 {
  List<Persondata> res = new ArrayList<Persondata>();
    
  res.add(new PersonData("Sara Rukawa", R.drawable.tw_sar_eco));
  res.add(new PersonData("Aoi Hinomoto", R.drawable.tw_aoi_eco));
  res.add(new PersonData("Himeno Katsuragi", R.drawable.tw_him_eco));
  res.add(new PersonData("Sharuru Yoshino", R.drawable.tw_shr_eco));
  res.add(new PersonData("Rikka Morizono", R.drawable.tw_rik_eco));
    
  return res;
 }
}