ViewPager Change UI

View pager is page view for Android.

Android scroll view(ViewPager) is basic use of ViewPager I introduced.

Next, I want to change UI. We have 2 situation to change UI

1. Change UI or Change Data
2. Add data or delete data

First one isn’t change data number. Second one includes number change. That’s difference.

Let’s explain 1st one.

When tapping image, change name from “Sara Rukawa” to “Favorites!”. That means adding event.

Steps

1. Define final if you want to use variables in Event method
2. Add listener method in Event method
3. Implement listener
4. Get UI using Tag and change UI from Activity

Let’s see the code

Adapter

public class CardPagerAdapter extends PagerAdapter 
{
    LayoutInflater _inflater = null;
     
    List<PersonData> list;
     
    private TextView nameView;
     
    private ImageView charView;
     
    // listener
    private ClickPagerImgListerner listener;
     
    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);
         
        String name = list.get(position).getName();
         
        nameView.setText(list.get(position).getName());
        nameView.setTag(name);          // Add tag
         
        charView = (ImageView)layout.findViewById(R.id.img);
        charView.setImageResource(list.get(position).getRes());
         
        charView.setClickable(true);
         
        final int index = position;
        charView.setOnClickListener(new OnClickListener() 
        {
            @Override
            public void onClick(View v) 
            {
                //Log.d("", index);
                if ( listener != null )
                {
                    listener.change(index);
                }
            }
        });
         
         
        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);
    }
     
    public void setListener( ClickPagerImgListerner listener )
    {
        this.listener = listener;
    }
}

The difference between ViewPager basic is to add Click event and invoke listener method.
Listener should be implemented by Activity(UI part) you want to use.

Listener

public interface ClickPagerImgListerner 
{
    public void change( int position );
}

This is simple interface.
Activity implements this interface, and communicate with Adapter.

Activity

public class ViewPagerActivity extends Activity implements ClickPagerImgListerner
{
    private ViewPager viewPager;
     
    List<PersonData> list;
     
    int currentIndex;
     
    CardPagerAdapter pagerAdapter;
     
    @Override
    protected void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.viewport);
         
        this.list = PersonDataGenerator.createPersonData();
         
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        pagerAdapter = new CardPagerAdapter(this, list);
        pagerAdapter.setListener(this);
        viewPager.setOnPageChangeListener(new PageChangeListener());
        viewPager.setAdapter(pagerAdapter);
         
        currentIndex = 0;
    }
     
    class PageChangeListener extends SimpleOnPageChangeListener
    {
        @Override
        public void onPageSelected(int position) 
        {
            // Page change Operation!
            super.onPageSelected(position);
            currentIndex = position;
        }
    }
 
    @Override
    public void change(int position) 
    {
        TextView nameView = (TextView)viewPager.findViewWithTag(list.get(position).getName());
        nameView.setText("Favorites!");
        list.get(position).setName("Favorites");
    }
 
}

This is main part of this topic. This receives from Adapter’s event.(Listener)
Find target UI using adapter and UI tag you want.

You don’t need to call notifyDataSetChanged, because there aren’t change of number of data at all.
But, you need to change actual data( etc name in this case), because if calling destroy, UI redraws).

This feature look like AWT and Swing of Java.