Android 위 챗 아래쪽 탭 탭 전환 효과 구현

인터넷 에서 Tab 에 관 한 강 좌 를 많이 보 았 는데 모두 난잡 하 다 는 것 을 발견 했다.비교적 많은 용법 은 TitlePagerTabStrip 과 View Paper 를 사용한다.그러나 TitlePagerTabStrip 은 매우 큰 결함 이 있 습 니 다.Tab 안의 내용 은 방금 들 어 갔 을 때 없 었 습 니 다.한 번 미끄러져 야 불 러 올 수 있 습 니 다.그리고 미 끄 러 질 때 Tab 안의 내용 위치 가 고정 되 어 있 지 않 고 미 끄 러 지면 마지막 에 공백 이 생 겨 매우 아름 답지 않다.다른 보완 방법 이 있 지만 매우 번 거 로 워 서 저 는 제 방법 에 따라 하 나 를 실 현 했 습 니 다.기능 이 좋 고 아주 간단 합 니 다.
 직접 클릭 하거나 슬라이딩 인터페이스 를 누 르 면 해당 페이지 로 이동 할 수 있 습 니 다.
효과 그림:

 세 개의 버튼 과 뷰 페 이 퍼 를 사용 해 TitlePagerTabStrip 을 버 렸 다 는 원리 다.
 뷰 페 이 퍼 는 일반적으로 페이지 를 담 는 용기 라 고 한다.위의 그림 과 같이 나 는 세 개의 다른 인터페이스 가 있 는데,왜냐하면 내 가 세 개의 view 를 넣 었 기 때문이다.그리고 이 viewper 를 메 인 인터페이스의 레이아웃 에 추가 합 니 다.
이렇게 하면 메 인 화면 에 세 개의 버튼 이 있 습 니 다.버튼 아래 는 view Paper 입 니 다.이 view Paper 안에 세 개의 view 가 있 습 니 다.저 는 미 끄 러 지 거나 버튼 을 누 를 때마다 해당 하 는 view 로 뛰 어 갑 니 다.
즉,우리 가 본 것 은 모두 메 인 인터페이스 이 고 버튼 은 항상 거기에 있다 는 것 이다.우 리 는 뷰 페 이 퍼 라 는 용기 안의 보 기 를 끊임없이 바 꿀 뿐이다.
주 인터페이스의 레이아웃 코드:

<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=".MainActivity" >

 <android.support.v4.view.ViewPager
  android:id="@+id/viewpager"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" >
 
</RelativeLayout>

어떻게 실현 합 니까?해당 버튼 을 누 르 면 viewper 에 해당 하 는 보기 로 이동 합 니까?간단 합 니 다.단 추 를 위해 감청 을 설정 하고 viewper 의 setCurrent Item()함 수 를 호출 하면 됩 니 다.
해당 페이지 에 대해 우리 의 버튼 도 해당 하 는 변화 가 있어 야 한다.예 를 들 어 위의 그림 에서 우리 의 버튼 중의 영 어 는√가 되 었 다.이것 은 viewper 모니터 에 onPageSelected()함수 만 다시 불 러 오 면 됩 니 다.
각 페이지 가 선택 되면 이 함 수 를 호출 합 니 다.이 함수 에서 현재 페이지 가 어느 것 인지 판단 한 다음 단 추 를 바 꾸 면 됩 니 다.
onCreate 코드

 //  viewPaper
 ViewPager pager = null;
 ArrayList<View> viewContainter = new ArrayList<View>();

 

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

  //   ViewPaper
  pager = (ViewPager) this.findViewById(R.id.viewpager3);



  //          viewPaper  
  
    1.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {

    //       
    pager.setCurrentItem(0);

   }
  });

    2.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {

    //     
    pager.setCurrentItem(1);

   }
  });
  
    3.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {

    //     
    pager.setCurrentItem(2);

   }
  });
  
  // viewPaper    
  //view     viewPaper     ，        ，    
  View view1 = LayoutInflater.from(this).inflate(R.layout.       1, null);
  View view2 = LayoutInflater.from(this).inflate(R.layout.       2, null);
  View view3 = LayoutInflater.from(this).inflate(R.layout.       3, null);

  //   ArrayList,    3 view
  viewContainter.add(view1);
  viewContainter.add(view2);
  viewContainter.add(view3);
  

  //               
  pager.setAdapter(new PagerAdapter() {


   //viewpager      
   @Override
   public int getCount() {
    return viewContainter.size();
   }

   //              

   @Override
   public void destroyItem(ViewGroup container, int position,
         Object object) {
    ((ViewPager) container).removeView(viewContainter.get(position));
   }

   //            
   @Override
   public Object instantiateItem(ViewGroup container, int position) {
    ((ViewPager) container).addView(viewContainter.get(position));
    return viewContainter.get(position);
   }

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

   @Override
   public int getItemPosition(Object object) {
    return super.getItemPosition(object);
   }


  });

  //             
  pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
   @Override
   public void onPageScrolled(int i, float v, int i1) {

   }

   @Override
   public void onPageSelected(int i) {

    switch (i) {

     //        
     case 0:
        1.setText("√");
        2.setText("TAB2");
        3.setText("TAB3");

      break;

     //        
     case 1:
        1.setText("TAB1");
        2.setText("√");
        3.setText("TAB3");
      break;
      
     //        
     case 1:
        1.setText("TAB1");
        2.setText("TAB2");
        3.setText("√");
      break;



    }

   }

   @Override
   public void onPageScrollStateChanged(int i) {

   }
  });

 }

모든 view 에 있 는 컨트롤 을 사용 하려 면 메 인 화면 에서 이 컨트롤 을 찾 을 수 없습니다.모두 비어 있 습 니 다.인 스 턴 트 아 이 템 이라는 함수 에 지정 해 야 합 니 다.

@Override
   public Object instantiateItem(ViewGroup container, int position) {
    ((ViewPager) container).addView(viewContainter.get(position));

    switch (position){

     case 0: {

      //       

      }
     }
}

이상 은 본문의 전체 내용 이 므 로 여러분 의 학습 에 도움 이 되 기 를 바 랍 니 다.