Android 에서 ViewPager 의 PagerTabStrip 하위 컨트롤 의 사용법 을 자세히 설명 합 니 다.

우 리 는 먼저 작은 예 를 보 자.

이 를 통 해 알 수 있 듯 이 효과 도 매우 좋 고 이전에 사용자 정의 태그 표시 기 보다 더욱 유창 하 다.다음은 PagerTabStrip 과 그 사용 을 간단하게 소개 합 니 다.
PagerTabStrip 은 v4 지원 패키지 의 클래스 로 ViewPager 전용 클래스 로 다른 곳 에서 사용 할 수 없습니다.사용 할 때 우 리 는 ViewPager 의 레이아웃 에서 만 설명 하면 됩 니 다.
    아래 코드 와 같이

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="@android:color/white"
 android:orientation="vertical" >

 <android.support.v4.view.ViewPager
  android:id="@+id/viewPager"
  android:layout_width="match_parent"
  android:layout_height="match_parent" >

  <android.support.v4.view.PagerTabStrip
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_gravity="top"
   android:background="@android:color/holo_blue_light"
   android:textColor="@android:color/white" />
 </android.support.v4.view.ViewPager>

</LinearLayout>

우 리 는 layot 를 설정 할 수 있 습 니 다.gravity 속성,예 를 들 어 top 이나 bottom 등 이 표시 되 는 위 치 를 제어 합 니 다.이외에 다른 설정 은 필요 없습니다.
    나머지 는 우리 가 코드 안에서 실현 해 야 할 것 이다.

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

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;

public class PagerTabStripActivity extends FragmentActivity {

 private List<Fragment> fragments;
 private ViewPager viewPager;
 private List<String> titleList;

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  initView();
 }

 private void initView() {
  viewPager = (ViewPager) findViewById(R.id.viewPager);

  titleList = new ArrayList<String>();
  titleList.add("    ");
  titleList.add("    ");
  titleList.add("    ");

  fragments = new ArrayList<Fragment>();
  fragments.add(new MyFragment(android.R.color.holo_green_light));
  fragments.add(new MyFragment(android.R.color.holo_orange_light));
  fragments.add(new MyFragment(android.R.color.holo_red_light));

  FragmentPagerAdapter adapter = new FragmentPagerAdapter(
    getSupportFragmentManager()) {

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

   @Override
   public Fragment getItem(int position) {
    return fragments.get(position);
   }

   @Override
   public CharSequence getPageTitle(int position) {
    return titleList.get(position);
   }

  };

  viewPager.setAdapter(adapter);

 }
}

위의 코드 에 서 는 제목 을 어떻게 제어 하 는 지 보 여 줍 니 다.getPager Title 방법 을 다시 쓰 면 됩 니 다.
다음은 예 를 들 어 PagerTabStrip 에 대해 자세히 말씀 드 리 겠 습 니 다.
PagerTabStrip 은 ViewPager 의 현재 페이지,이전 페이지,다음 페이지 에 대한 대화 식 표시 기 입 니 다.이것 은 자주 ViewPager 컨트롤 의 키 컨트롤 로 XML 레이아웃 파일 에 추 가 됩 니 다.레이아웃 파일 에 하위 컨트롤 로 ViewPager 에 추가 합 니 다.그리고 안 드 로 이 드:layotgravity 속성 을 TOP 또는 BOTTOM 으로 설정 하여 ViewPager 의 상단 이나 아래쪽 에 표시 합 니 다.각 페이지 의 제목 은 어댑터 의 getPageTitle(int)함 수 를 통 해 ViewPager 에 제 공 됩 니 다.
사용 방법 은 PagerTitleStrip 과 완전히 같 습 니 다.즉,:
1.먼저,글 에서 언급 한 바 와 같이 레이아웃 파일 에 하위 컨트롤 로 ViewPager 에 추가 합 니 다.
2,2,제목 가 져 오기 어댑터 의 getPageTitle(int)함 수 를 다시 써 서 가 져 옵 니 다.
실례 보기:
1.XML 레이아웃

<RelativeLayout 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" 
  tools:context="com.example.testviewpage_2.MainActivity" > 
 
  <android.support.v4.view.ViewPager 
    android:id="@+id/viewpager" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center"> 
     
        <android.support.v4.view.PagerTabStrip 
      android:id="@+id/pagertab" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"  
      android:layout_gravity="top"/> 
     
  </android.support.v4.view.ViewPager> 
 
</RelativeLayout> 

마찬가지 로 PagerTabStrip 을 ViewPager 의 키 컨트롤 로 직접 삽입 하 는 것 을 볼 수 있 습 니 다.물론 android:layotgravity="의 값 은 top 또는 bottom 으로 설정 해 야 합 니 다.
2.어댑터 의 getPageTitle()함수 재 작성
모든 코드:

package com.example.testviewpage_2; 


import java.util.ArrayList; 
import java.util.List; 
 
import android.app.Activity; 
import android.os.Bundle; 
import android.support.v4.view.PagerAdapter; 
import android.support.v4.view.ViewPager; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
 
public class MainActivity extends Activity { 
 
  private View view1, view2, view3; 
  private List<View> viewList;// view   
  private ViewPager viewPager; //    viewPager 
 
  private List<String> titleList; 
 
  @Override 
  protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 
 
    viewPager = (ViewPager) findViewById(R.id.viewpager); 
    LayoutInflater inflater = getLayoutInflater(); 
    view1 = inflater.inflate(R.layout.layout1, null); 
    view2 = inflater.inflate(R.layout.layout2, null); 
    view3 = inflater.inflate(R.layout.layout3, null); 
 
    viewList = new ArrayList<View>();//        View      
    viewList.add(view1); 
    viewList.add(view2); 
    viewList.add(view3); 
 
    titleList = new ArrayList<String>();//      Title   
    titleList.add("  "); 
    titleList.add("  "); 
    titleList.add("  "); 
 
    PagerAdapter pagerAdapter = new PagerAdapter() { 
 
      @Override 
      public boolean isViewFromObject(View arg0, Object arg1) { 
        // TODO Auto-generated method stub 
        return arg0 == arg1; 
      } 
 
      @Override 
      public int getCount() { 
        // TODO Auto-generated method stub 
        return viewList.size(); 
      } 
 
      @Override 
      public void destroyItem(ViewGroup container, int position, 
          Object object) { 
        // TODO Auto-generated method stub 
        container.removeView(viewList.get(position)); 
      } 
 
      @Override 
      public Object instantiateItem(ViewGroup container, int position) { 
        // TODO Auto-generated method stub 
        container.addView(viewList.get(position)); 
 
        return viewList.get(position); 
      } 
 
      @Override 
      public CharSequence getPageTitle(int position) { 
         
        return titleList.get(position); 
      } 
    }; 
 
    viewPager.setAdapter(pagerAdapter); 
 
  } 
 
} 

이곳 의 코드 는 PagerTitleStrip 과 완전히 같 아서 더 이상 설명 하지 않 겠 습 니 다.
이렇게 해서 우 리 는 PagerTabStrip 에 관 한 간단 한 사용 방법 을 말 했다.다음은 PagerTabStrip 의 확장 에 대해 말씀 드 리 겠 습 니 다.
3,확장:PagerTabStrip 속성 변경
원본 코드 에서 TestView Page 라 는 프로젝트 를 볼 수 있 습 니 다.PagerTabStrip_extension,실행 해 보 세 요.효 과 는 다음 과 같 습 니 다.

위의 두 그림 에서 볼 수 있 듯 이 나 는 두 곳 을 바 꾸 었 다.
(1)밑줄 색 은 원래 검은색 이 고 나 는 녹색 이 되 었 다.
(2)Tab 제목 앞 에 그림 을 추가 합 니 다.
어떻게 바 뀌 었 는 지 말씀 드 리 겠 습 니 다.
1.밑줄 색상 변경:
주로 PagerTabStrip 의 setTabIndicator ColorResource 방법 에 의존 합 니 다.
코드 는 다음 과 같 습 니 다:

pagerTabStrip = (PagerTabStrip) findViewById(R.id.pagertab); 
pagerTabStrip.setTabIndicatorColorResource(R.color.green); 

2.제목 추가―어댑터 CharSequence getPageTitle(int)재 작성 방법
CharSequence getPageTitle(int position)방법 에서 값 을 되 돌려 주 는 것 은 String 대상 을 되 돌려 주지 않 고 SpanableString Builder 로 그림 을 포함 하 는 확장 String 쌍 상 을 구성 하 는 것 입 니 다.
구체 적 인 코드 는 다음 과 같 습 니 다.더 이상 자세히 말 하지 않 겠 습 니 다.SpannableString Builder 의 사용 방법 을 보시 면 이해 할 수 있 습 니 다.

@Override 
public CharSequence getPageTitle(int position) { 
 
  SpannableStringBuilder ssb = new SpannableStringBuilder(" "+titleList.get(position)); // space added before text 
                    // for 
  Drawable myDrawable = getResources().getDrawable( 
      R.drawable.ic_launcher); 
  myDrawable.setBounds(0, 0, myDrawable.getIntrinsicWidth(), 
      myDrawable.getIntrinsicHeight()); 
  ImageSpan span = new ImageSpan(myDrawable, 
      ImageSpan.ALIGN_BASELINE); 
 
  ForegroundColorSpan fcs = new ForegroundColorSpan(Color.GREEN);//           
  ssb.setSpan(span, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);//      
  ssb.setSpan(fcs, 1, ssb.length(), 
      Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);//        
  ssb.setSpan(new RelativeSizeSpan(1.2f), 1, ssb.length(), 
      Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); 
  return ssb; 
}