Android ViewPager 초보 자 내 비게 이 션 페이지 만 들 기(동적 불 러 오기)

우 리 는 흔히 말 하 는 화 제 를 이야기 합 니 다.모두 가 사 용 했 을 것 입 니 다.>ViewPager 는 이 를 통 해 초보 네 비게 이 션 페이지 를 만 들 었 습 니 다.이번에 도 이 야 기 를 했 지만 예전 의 용법 과 다 를 수 있 습 니 다.모두 가 제목 을 보고 들 어 왔 습 니 다.알 아야 할 것 은 동적 로드 인디케이터 입 니 다.
동적 로 딩 이 라 니 요?크게 느껴 지지 않 나 요?사실은 레이아웃 파일 에 죽은 것 이 아니 라 동적 으로 로 딩 표시 기의 수량 입 니 다.이 글 을 보고 여러분 들 이 ViewPager 에 대해 새로운 인식 을 가지 기 를 바 랍 니 다.

이 효 과 를 보면 다 들 무시 하 겠 지.오늘 은 새로운 인식 을 갖 게 하기 위해 서 야.자,잘 들 어,시 작 했 어.
이 동적 로 딩 은 아래 의 회색 원점 표시 기와 빨간색 원점 표시 기 를 동적 으로 불 러 오기 위 한 것 입 니 다.제 가 미 끄 러 질 때(즉 페이지 를 전환 할 때)빨간색 원점 이 따라 이동 하 는 것 을 알 고 있 습 니까?그래.
첫 번 째 단계:
레이아웃 파일 에 ViewPager 를 추가 하고 회색 원점 과 빨간색 원점 의 레이아웃 을 추가 합 니 다.먼저 어떤 레이아웃 을 사용 하 는 지 생각해 보 세 요.먼저 세 개의 회색 원점 은 선형 레이아웃 을 사용 할 수 있 고 빨간색 원점 은 상대 적 인 레이아웃 을 사용 할 수 있 습 니 다.(원인:빨간색 원점 은 회색 원점 에 덮 여 있 기 때 문 입 니 다)

 <RelativeLayout
    android:id="@+id/rl"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="30dp" >
    <!--       -->
    <LinearLayout
      android:id="@+id/ll"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="horizontal" >
    </LinearLayout>    
  </RelativeLayout>

두 번 째 단계:
onCreate 방법 에서 ViewPager 와 회색 원점 과 빨간색 원점 레이아웃 의 예 시 를 설명 합 니 다.(이 유 는 동적 으로 원점 을 불 러 와 야 하기 때 문 입 니 다.)그리고 ViewPager 에 어댑터 와 모니터 를 추가 합 니 다.

  //ViwePager
  private ViewPager viewPager;
  //             
  private LinearLayout ll;
  //                  
  private RelativeLayout rl;
  //     
  private void initView() {
    viewPager = (ViewPager)   findViewById(R.id.viewPager);
    imageViews = new ArrayList<ImageView>();
    ll = (LinearLayout) findViewById(R.id.ll);
    rl = (RelativeLayout) findViewById(R.id.rl);
    btn = (Button) findViewById(R.id.btn);
  // ViewPager     
  viewPager.setAdapter(new MyAdapter());
  viewPager.setOnPageChangeListener();

세 번 째 단계:
ViewPager 어댑터 에 세 개의 그림 을 추가 합 니 다.
주:미 끄 러 질 때 그림 인 스 턴 스 를 반복 하지 않 기 위해 서 는 먼저 불 러 올 자원 을 집합 에 두 고 미 끄 러 질 때마다 불 러 올 때 집합 에서 꺼 내 면 시스템 자원 을 절약 할 수 있 습 니 다.

//     
  private int[] images = new int[]{
    R.drawable.guide_1,
    R.drawable.guide_2,
    R.drawable.guide_3,
  };
  //          （     ，          ）
  private List<ImageView> imageViews;
    //       
    for (int i = 0; i < images.length; i++) {
      ImageView iv = new ImageView(MainActivity.this);
      iv.setImageResource(images[i]);
      imageViews.add(iv);
    }
    //PagerAdapter     
  class MyAdapter extends PagerAdapter {
    //        
    @Override
    public int getCount() {
      return images.length;
    }
    //         
    @Override
    public boolean isViewFromObject(View view,Object object) {
      return view == object;
    }
    //    
    //ViewGroup:    ViewPager
    //position:             
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
      ImageView iv = imageViews.get(position);
      container.addView(iv);
      return iv;
    }
    //    
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
      container.removeView((View) object);
    }
  }

네 번 째 단계:
중요 한 부분 이 왔 습 니 다.이 단 계 는 회색 땡땡이 와 빨간색 땡땡이 를 동태 적 으로 추가 하고 빨간색 땡땡이 가 미 끄 러 지면 서 함께 미 끄 러 지 는 것 입 니 다.
먼저 회색 원점 과 빨간색 원점 을 동적 으로 추가 합 니 다.

for (int i = 0; i < images.length; i++) {
      ImageView iv = new ImageView(MainActivity.this);
      iv.setImageResource(images[i]);
      imageViews.add(iv);
      //        
      ImageView gray_Iv = new ImageView(this);
      gray_Iv.setImageResource(R.drawable.grar_circle);
      LinearLayout.LayoutParams layoutParams = 
          new LayoutParams(LayoutParams.WRAP_CONTENT,
              LayoutParams.WRAP_CONTENT);
      //         
      if (i > 0) {
        layoutParams.leftMargin = 20;  //     px
      }
      gray_Iv.setLayoutParams(layoutParams);
      ll.addView(gray_Iv);
    }
    //      
    red_Iv = new ImageView(this);
    red_Iv.setImageResource(R.drawable.red_circle);
    rl.addView(red_Iv);

주:회색 원점 은 두 번 째 부터 왼쪽 거리 가 있 습 니 다.구성 요소 의 동적 거 리 를 설정 하려 면 레이아웃 의 LayoutParams(옷)를 사용 합 니 다.세 개의 회색 원점 이 사용 하 는 레이아웃 을 기억 하 십시오.그런 레이아웃 의 LayoutParams 를 사용 하여 설정 합 니 다.
아래 는 빨간색 도 트 를 ViewPager 에 따라 미 끄 러 지게 하 는 것 입 니 다.

//              
    red_Iv.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
      //           
      @Override
      public void onGlobalLayout() {
        left = ll.getChildAt(1).getLeft() - ll.getChildAt(0).getLeft();
        System.out.println(left);
        //        
        red_Iv.getViewTreeObserver().removeGlobalOnLayoutListener(this);
      }
    });
    //          
      //positionOffset:      （[0,1}）
      @Override
      public void onPageScrolled(int position, float positionOffset, int arg2) {
        RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) red_Iv.getLayoutParams();
        layoutParams.leftMargin = (int) (left * positionOffset + position * left);
        red_Iv.setLayoutParams(layoutParams);
      }

주:여기 서 개념 C>보기 트 리 를 알 아야 합 니 다.왜 이것 을 알 아야 합 니까?우 리 는 동적 으로 회색 원점 을 추가 하기 때문에 이 보기 가 무엇 을 잘 그 릴 수 있 는 지 모 르 기 때문에 전체 보기 의 그리 기 상 태 를 감청 해 야 합 니 다.모든 구성 요 소 는 보기 트 리 를 가 져 와 보기 트 리 의 그리 기 를 감청 할 수 있 습 니 다.이렇게 하면 회색 땡땡이 사이 의 거 리 를 얻 을 수 있 습 니 다.처음에 회색 땡땡이 를 추가 할 때 왼쪽 거 리 를 설정 하지 않 았 느 냐 고 물 어 봅 니 다.네,그런데 이 단 위 는 px 입 니 다.지금 은 dp 로 직접 설정 할 수 없습니다.
회색 원점 사이 의 거리:

left = ll.getChildAt(1).getLeft() - ll.getChildAt(0).getLeft();
public void onPageScrolled(int position,float position Offset,int arg 2)에서 매개 변수 position Offset 은 미 끄 러 지 는 백분율(범위[0-1)을 가리킨다.
이제 빨간색 도 트 가 얼마나 미 끄 러 져 야 하 는 지 알 수 있다.

      //          
      //positionOffset:      ([0,1))
      @Override
      public void onPageScrolled(int position, float positionOffset, int arg2) {
        RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) red_Iv.getLayoutParams();
        layoutParams.leftMargin = (int) (left * positionOffset + position * left);
        red_Iv.setLayoutParams(layoutParams);
      }

다섯 번 째 단계:
초보 네 비게 이 션 페이지 는 보통 마지막 페이지 로 이동 할 때 메 인 화면 으로 넘 어 가 는 버튼 이 있다.이 건 내 비게 이 션 페이지 가 선택 되 었 을 때 만 설정 하면 됩 니 다.

//           
      @Override
      public void onPageSelected(int position) {
        //       ，    
        if (position == images.length - 1) {
          btn.setVisibility(View.VISIBLE);
        //      ，     
        }else {
          btn.setVisibility(View.GONE);
        }
      }

핵심 코드:
레이아웃 파일:

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

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

  <RelativeLayout
    android:id="@+id/rl"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="30dp" >
    <!--       -->
    <LinearLayout
      android:id="@+id/ll"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="horizontal" >
    </LinearLayout>

  </RelativeLayout>
  <Button 
    android:layout_width="wrap_content"
    android:id="@+id/btn"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="50dp" 
    android:layout_height="wrap_content"
    android:text="  "
    android:visibility="gone"
    />
</RelativeLayout>

MainActivity.java

public class MainActivity extends Activity {
  //ViwePager
  private ViewPager viewPager;
  private Button btn;
  //     
  private int[] images = new int[]{
    R.drawable.guide_1,
    R.drawable.guide_2,
    R.drawable.guide_3,
  };
  //          
  private int left;
  //          （     ，          ）
  private List<ImageView> imageViews;
  //             
  private LinearLayout ll;
  //                  
  private RelativeLayout rl;
  //    ImageView
  private ImageView red_Iv;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initView();
    //            
    for (int i = 0; i < images.length; i++) {
      ImageView iv = new ImageView(MainActivity.this);
      iv.setImageResource(images[i]);
      imageViews.add(iv);
      //        
      ImageView gray_Iv = new ImageView(this);
      gray_Iv.setImageResource(R.drawable.grar_circle);
      LinearLayout.LayoutParams layoutParams = 
          new LayoutParams(LayoutParams.WRAP_CONTENT,
              LayoutParams.WRAP_CONTENT);
      //         
      if (i > 0) {
        layoutParams.leftMargin = 20;  //     px
      }
      gray_Iv.setLayoutParams(layoutParams);
      ll.addView(gray_Iv);
    }
    red_Iv = new ImageView(this);
    red_Iv.setImageResource(R.drawable.red_circle);
    rl.addView(red_Iv);
    //              
    red_Iv.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
      //           
      @Override
      public void onGlobalLayout() {
        left = ll.getChildAt(1).getLeft() - ll.getChildAt(0).getLeft();
        System.out.println(left);
        //        
        red_Iv.getViewTreeObserver().removeGlobalOnLayoutListener(this);
      }
    });
    // ViewPager     
    viewPager.setAdapter(new MyAdapter());
    viewPager.setOnPageChangeListener(new OnPageChangeListener() {
      //           
      @Override
      public void onPageSelected(int position) {
        if (position == images.length - 1) {
          btn.setVisibility(View.VISIBLE);
        }else {
          btn.setVisibility(View.GONE);
        }
      }
      //          
      //positionOffset:      （[0,1}）
      @Override
      public void onPageScrolled(int position, float positionOffset, int arg2) {
        RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) red_Iv.getLayoutParams();
        layoutParams.leftMargin = (int) (left * positionOffset + position * left);
        red_Iv.setLayoutParams(layoutParams);
      }
      //               
      @Override
      public void onPageScrollStateChanged(int arg0) {

      }
    });
  }
  //     
  private void initView() {
    viewPager = (ViewPager) findViewById(R.id.viewPager);
    imageViews = new ArrayList<ImageView>();
    ll = (LinearLayout) findViewById(R.id.ll);
    rl = (RelativeLayout) findViewById(R.id.rl);
    btn = (Button) findViewById(R.id.btn);
  }
  //PagerAdapter     
  class MyAdapter extends PagerAdapter {
    //        
    @Override
    public int getCount() {
      return images.length;
    }
    //         
    @Override
    public boolean isViewFromObject(View view,Object object) {
      return view == object;
    }
    //    
    //ViewGroup:    ViewPager
    //position:             
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
      ImageView iv = imageViews.get(position);
      container.addView(iv);
      return iv;
    }
    //    
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
      container.removeView((View) object);
    }
  }
}

다 들 빨리 해 보 세 요.다른 인식 이 있 을 겁 니 다.
이상 은 본 고의 모든 내용 입 니 다.여러분 이 안 드 로 이 드 소프트웨어 프로 그래 밍 을 배 우 는 데 도움 이 되 기 를 바 랍 니 다.