android ViewPager学习(二)创建自定义标题

http://blog.csdn.net/windvally/article/details/37818613

上一节创建了最简单的viewpager，但在页面滑动时标题是移动的，为了固定标题，可以把PagerTitleStrip删掉。添加textview来替代标题。

页面切换时更改textview的颜色，点击textview跳转到对应的viewpager页面，代码如下：

 

package com.example.ctroltest.viewpager;

import java.util.ArrayList;
import java.util.List;

import com.example.ctroltest.R;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.PagerTitleStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.TextView;

public class ViewPageAdapterTest extends Activity implements OnClickListener {
 private ViewPager VP01;
 private View view01,view02,view03;
 private List<View> viewList=new ArrayList<View>();   //定义用来显示页面的
    //private List<String> titleList=new ArrayList<String>();   //定义显示页面的标题
// private PagerTitleStrip pagerTitleStrip;//定义viewpager的标题
// private PagerTabStrip pagerTabStrip;//一个viewpager的指示器。
 private TextView textView01,textView02,textView03;
 

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.view_page_adapter_test);
  VP01 = (ViewPager) findViewById(R.id.ViewPager01);
  myViewPagerAdapter pagerAdapter01=new myViewPagerAdapter();
  textView01=(TextView)findViewById(R.id.titel_text01);
  textView02=(TextView)findViewById(R.id.titel_text02);
  textView03=(TextView)findViewById(R.id.titel_text03);
  
  textView01.setBackgroundColor(Color.GRAY);
  //添加textview的单击时跳转到相应的viewpager页面
  textView01.setOnClickListener(this);
  textView02.setOnClickListener(this);
  textView03.setOnClickListener(this);
  LayoutInflater lf = getLayoutInflater().from(this); 
  //加载viewpage滑动展现的页面
  view01 = lf.inflate(R.layout.view_page_adapter_test01, null); 
        view02 = lf.inflate(R.layout.view_page_adapter_test02, null); 
        view03= lf.inflate(R.layout.view_page_adapter_test03, null); 
       

  
  viewList.add(view01);
  viewList.add(view02);
  viewList.add(view03);
  //添加标题名称
//  titleList.add("标题01");
//  titleList.add("标题02");
//  titleList.add("标题03");
//  pagerTabStrip=(PagerTabStrip)findViewById(R.id.pagerTabStrip);
//  pagerTabStrip.setTabIndicatorColor(Color.RED);
//  pagerTabStrip.setDrawFullUnderline(false);
//  pagerTabStrip.setBackgroundColor(Color.GRAY);
//  pagerTabStrip.setTextSpacing(0);
//  pagerTabStrip.setNonPrimaryAlpha(20);

  
  
  
  VP01.setAdapter(pagerAdapter01);
  VP01.setOnPageChangeListener(new OnPageChangeListener() {
  //设置Viewpager的页面翻动事件，翻动页面时改变textview的背景 
   @Override
   public void onPageSelected(int arg0) {
    // TODO Auto-generated method stub
    switch (arg0) {
     case 0 :
      textView01.setBackgroundColor(Color.GRAY);
      textView02.setBackgroundColor(Color.WHITE);
      textView03.setBackgroundColor(Color.WHITE);
      break;
     case 1 :
      textView01.setBackgroundColor(Color.WHITE);
      textView02.setBackgroundColor(Color.GRAY);
      textView03.setBackgroundColor(Color.WHITE);
      break;
     case 2 :
      textView01.setBackgroundColor(Color.WHITE);
      textView02.setBackgroundColor(Color.WHITE);
      textView03.setBackgroundColor(Color.GRAY);
      break;

     default :
      break;
    }

   }
   
   @Override
   public void onPageScrolled(int arg0, float arg1, int arg2) {
    // TODO Auto-generated method stub
    
   }
   
   @Override
   public void onPageScrollStateChanged(int arg0) {
    // TODO Auto-generated method stub
    
   }
  });

 }

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  // Inflate the menu; this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.view_page_adapter_test, menu);
  return true;
 }

 /*
  * When you implement a PagerAdapter, you must override the following
  * methods at minimum:
  *
  * instantiateItem(ViewGroup, int) destroyItem(ViewGroup, int, Object)
  * getCount() isViewFromObject(View, Object)
  */
 //创建一个PagerAdapter,复写其中的方法
 public class myViewPagerAdapter extends PagerAdapter {
  @Override
  //定义适配器初始化view时对应的 view
  public Object instantiateItem(ViewGroup container, int position) {
   // TODO Auto-generated method stub
   //指定当前页面的view,返回 当前view对象
   container.addView(viewList.get(position));
   return viewList.get(position);
   //return super.instantiateItem(container, position);
  }
  
  @Override
  //定义翻页操作室要销毁的veiw的方法
  public void destroyItem(ViewGroup container, int position, Object object) {
   // TODO Auto-generated method stub
   //super.destroyItem(container, position, object);
   container.removeView(viewList.get(position));
  }
  @Override
  public int getCount() {
   // TODO Auto-generated method stub
   //返回ViewPager的页面数量
   return viewList.size();
  }

  @Override
  /*Determines whether a page View is associated with a specific key object as returned by instantiateItem(ViewGroup, int). This method is required for a PagerAdapter to function properly.
*/
  public boolean isViewFromObject(View arg0, Object arg1) {
   // TODO Auto-generated method stub
   return arg0==arg1;
  }
  
//  @Override
//  //显示标题时复写的方法
//  public CharSequence getPageTitle(int position) {
//   // TODO Auto-generated method stub
//   return titleList.get(position);
//  }
  
  

 }

 @Override
 public void onClick(View v) {
  // TODO Auto-generated method stub
  switch (v.getId()) {
   case R.id.titel_text01 :
    VP01.setCurrentItem(0);
    break;
   case R.id.titel_text02 :
    VP01.setCurrentItem(1);
    break;
   case R.id.titel_text03 :
    VP01.setCurrentItem(2);
    break;

   default :
    break;
  }

 }

}

 

对应的布局文件为：

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

   <android.support.v4.view.ViewPager
       android:id="@+id/ViewPager01"
       android:layout_width="fill_parent"
       android:layout_height="0dip"
       android:layout_weight="12"
       >
<!--        <android.support.v4.view.PagerTabStrip
           android:id="@+id/pagerTabStrip"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="bottom"
                     /> -->
      
      
   </android.support.v4.view.ViewPager>
   <LinearLayout
       android:id="@+id/title_text_linearlayout"
       android:layout_width="fill_parent"
       android:layout_height="0dip"
       android:layout_weight="1"
       android:gravity="center"
       android:orientation="horizontal"
       >
       <TextView
           android:id="@+id/titel_text01"
           android:text="页面01"
           android:textSize="24sp"
           android:layout_width="0dip"
           android:layout_height="wrap_content"
           android:gravity="center"
           android:layout_weight="1"
           />
         <TextView
           android:id="@+id/titel_text02"
           android:text="页面02"
           android:textSize="24sp"
           android:layout_width="0dip"
           android:layout_height="wrap_content"
           android:gravity="center"
           android:layout_weight="1"
           />
           <TextView
           android:id="@+id/titel_text03"
           android:text="页面03"
           android:textSize="24sp"
           android:layout_width="0dip"
           android:layout_height="wrap_content"
           android:gravity="center"
           android:layout_weight="1"
           />
      
   </LinearLayout>
  
 
</LinearLayout>

效果如下图

 

当然，利用这种处理，也可以添加对应的动画效果。可参考http://blog.csdn.net/wangjinyu501/article/details/8169924的做法。