Android——TabページジェスチャースライドのViewPager

5442 ワード

前の文章はページの抽象を実現することを言って、背景も説明して、1つの左右のスライドスクリーンの機能をするので、この文章の小編はtabページの左右のスライドスクリーンを実現する方法について話します.ページにはメインインタフェースが含まれており、中間の共通部分の抽象は後述されず、スライドスクリーンの4つのサブページも含まれており、異なる機能に対応しています.
メインインタフェースに4つのページが盛られている場所--ViewPager:
<android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
</android.support.v4.view.ViewPager>

Activityの制御:
1、まずページコントロールを定義する:tab、button、ViewPager、PagerAdapter
ViewPager:現在のViewを左右に切り替える
PagerAdapter:ページを埋めるアダプタを提供
private RequestQueue mQueue;
private ViewPager mViewPager;
private PagerAdapter mAdapter;
private List<View> mViews = new ArrayList<View>();

//    LinearLayout
private LinearLayout mTabPersonInfo;
private LinearLayout mTabCourse;
private LinearLayout mTabExperience;
private LinearLayout mTabEvaluate;

//    ImageButton
private ImageButton mPersonInfoImg;
private ImageButton mCourseImg;
private ImageButton mExperienceImg;
private ImageButton mEvaluateImg;

2、初期化ページ
LayoutInflater:res/layout/のxmlレイアウトファイルを探してインスタンス化します.作用はfindViewById()に似ています.xmlレイアウトファイルの下にある具体的なwidgetコントロール(Button、TextViewなど)を探しています.
inflate関数:指定したXMLリソースファイルから新しいビュー階層を入力します.
役割:指定したXMLリソースファイルから新しいビュー階層を入力します.
reSource:ViewのlayoutのID
root:生成された階層のルートビュー
returnで埋め込まれた階層のルートビュー.パラメータrootが提供されている場合、rootはルートビューです.そうでなければ、埋め込まれたXMLファイルのルートはルートビューです.
 
//     
private void initView(){
	
	txtAge=(TextView)findViewById(R.id.txtAge);
	
	mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
	// tabs
	mTabPersonInfo = (LinearLayout) findViewById(R.id.id_tab_personinfo);
	mTabCourse = (LinearLayout) findViewById(R.id.id_tab_course);
	mTabExperience = (LinearLayout) findViewById(R.id.id_tab_workexperience);
	mTabEvaluate = (LinearLayout) findViewById(R.id.id_tab_evaluate);
	// ImageButton
	mPersonInfoImg = (ImageButton) findViewById(R.id.id_tab_personinfo_img);
	mCourseImg = (ImageButton) findViewById(R.id.id_tab_course_img);
	mExperienceImg = (ImageButton) findViewById(R.id.id_tab_workexperience_img);
	mEvaluateImg = (ImageButton) findViewById(R.id.id_tab_evaluate_img);

	//           
	LayoutInflater mInflater = LayoutInflater.from(this);
	//             xml   ,          
	View tabpersoninfo = mInflater.inflate(R.layout.activity_teacher_personinfo, null);
	View tabcourse = mInflater.inflate(R.layout.activity_teacher_course, null);
	View tabexperience = mInflater.inflate(R.layout.activity_teacher_experience, null);
	View tabevaluate = mInflater.inflate(R.layout.activity_teacher_evaluate, null);
	mViews.add(tabpersoninfo);
	mViews.add(tabcourse);
	mViews.add(tabexperience);
	mViews.add(tabevaluate);

	mAdapter = new PagerAdapter()
	{
		@Override
		public void destroyItem(ViewGroup container, int position,
				Object object)
		{
			container.removeView(mViews.get(position));
		}

		@Override
		public Object instantiateItem(ViewGroup container, int position)
		{
			View view = mViews.get(position);
			container.addView(view);
			return view;
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1)
		{
			return arg0 == arg1;
		}

		@Override
		public int getCount()
		{
			return mViews.size();
		}
	};
	mViewPager.setAdapter(mAdapter);
}

2、リスナーの設定:onclickイベントのバインド
private void initEvents(){
	//         
	mPersonInfoImg.setOnClickListener(this);
	mCourseImg.setOnClickListener(this);
	mExperienceImg.setOnClickListener(this);
	mEvaluateImg.setOnClickListener(this);

	mViewPager.setOnPageChangeListener(new OnPageChangeListener()
	{

		@Override
		public void onPageSelected(int arg0)
		{
			int currentItem = mViewPager.getCurrentItem();
			resetImg();
			switch (currentItem)
			{
			case 0:
				mPersonInfoImg.setImageResource(R.drawable.back);
				break;
			case 1:
				mCourseImg.setImageResource(R.drawable.back);
				break;
			case 2:
				mExperienceImg.setImageResource(R.drawable.back);
				break;
			case 3:
				mEvaluateImg.setImageResource(R.drawable.back);
				break;
			}
		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2)
		{

		}
		@Override
		public void onPageScrollStateChanged(int arg0)
		{

		}
	});
}

3、onclickイベント:現在表示されているページを設定する
@Override
public void onClick(View v) {
	resetImg();
	switch (v.getId())
	{
		case R.id.id_tab_personinfo:
			mViewPager.setCurrentItem(0);
			mPersonInfoImg.setImageResource(R.drawable.back);
			break;
		case R.id.id_tab_course:
			mViewPager.setCurrentItem(1);
			mCourseImg.setImageResource(R.drawable.back);
			break;
		case R.id.id_tab_workexperience:
			mViewPager.setCurrentItem(2);
			mExperienceImg.setImageResource(R.drawable.back);
			break;
		case R.id.id_tab_evaluate:
			mViewPager.setCurrentItem(3);
			mEvaluateImg.setImageResource(R.drawable.back);
			break;
		default:
			break;
	}
}

4、onCreateイベントでスレッドを起動する
@Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	requestWindowFeature(Window.FEATURE_NO_TITLE);
	setContentView(R.layout.teacher_main);		
	initView();
	initEvents();
}

携帯電話のスライドスクリーンは実は簡単で、アダプタを利用して私たちのサブページを盛って、それから事件を傍受して現在のページを表示します.