Senin, 10 Maret 2014

Implement sliding page using ViewPager

android.support.v4.view.ViewPager is a layout manager that allows the user to flip left and right through pages of data.

Example:
ViewPager example
ViewPager example

/res/layout/slide_page.xml, layout of individual page.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="android-coding.blogspot.com" />

<TextView
android:id="@+id/pagenumber"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="38sp"
android:textStyle="bold" />

<EditText
android:id="@+id/edit"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

</LinearLayout>

SlidePageSupportFragment.java, Fragment share for 0~3th pages.
package com.example.android_viewpager;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;

public class SlidePageSupportFragment extends Fragment {
//Share by SlidePageSupportFragment 0~3,
//and set pageNumber by calling setPageNumber()
//...NOT always valid

int pageNumber = 0; //default

public void setPageNumber(int num){
pageNumber = num;
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {

ViewGroup rootView = (ViewGroup) inflater.inflate(
R.layout.slide_page, container, false);
TextView textPageNumber = (TextView)rootView.findViewById(R.id.pagenumber);
textPageNumber.setText("Page " + pageNumber);

Toast.makeText(getActivity(),
"onCreateView() - Page " + pageNumber,
Toast.LENGTH_SHORT).show();

return rootView;
}

@Override
public void onDestroyView() {
super.onDestroyView();

Toast.makeText(getActivity(),
"onDestroyView() - Page " + pageNumber,
Toast.LENGTH_SHORT).show();
}

}

SlidePageSupportFragment4.java, dedicate for 4th page.
package com.example.android_viewpager;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;

public class SlidePageSupportFragment4 extends Fragment {
//specified for SlidePageSupportFragment4
//with fixed pageNumber = 4

int pageNumber = 4;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {

ViewGroup rootView = (ViewGroup) inflater.inflate(
R.layout.slide_page, container, false);
TextView textPageNumber = (TextView)rootView.findViewById(R.id.pagenumber);
textPageNumber.setText("Page " + pageNumber);

Toast.makeText(getActivity(),
"onCreateView() - Page " + pageNumber,
Toast.LENGTH_SHORT).show();

return rootView;
}

@Override
public void onDestroyView() {
super.onDestroyView();

Toast.makeText(getActivity(),
"onDestroyView() - Page " + pageNumber,
Toast.LENGTH_SHORT).show();
}

}

/res/layout/activity_main.xml, layout of main activity, with <android.support.v4.view.ViewPager>.
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />

MainActivity.java
package com.example.android_viewpager;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;

public class MainActivity extends FragmentActivity {

private static final int NUM_PAGES = 5;

private ViewPager mPager;
private PagerAdapter mPagerAdapter;

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

mPager = (ViewPager) findViewById(R.id.pager);
mPagerAdapter = new MyFragmentStatePagerAdapter(getSupportFragmentManager());
mPager.setAdapter(mPagerAdapter);
}

@Override
public void onBackPressed() {
if (mPager.getCurrentItem() == 0) {
super.onBackPressed();
} else {
mPager.setCurrentItem(mPager.getCurrentItem() - 1);
}
}

private class MyFragmentStatePagerAdapter extends FragmentStatePagerAdapter {
public MyFragmentStatePagerAdapter(FragmentManager fm) {
super(fm);
}

@Override
public Fragment getItem(int position) {
Fragment tmpFragment;
if(position==4){
tmpFragment = new SlidePageSupportFragment4();
}else{
tmpFragment = new SlidePageSupportFragment();
((SlidePageSupportFragment)tmpFragment).setPageNumber(position);
}
return tmpFragment;
}

@Override
public int getCount() {
return NUM_PAGES;
}
}
}


Reference: Using ViewPager for Screen Slides


0 komentar:

Posting Komentar

Copyright © 2012 Codding News All Right Reserved