Android 개발 에 실 현 된 ViewPager 안내 페이지 기능(동적 로드 표시 기)상세 설명

11431 단어 AndroidViewPager안내 페이지
이 사례 는 안 드 로 이 드 개발 이 실 현 된 ViewPager 안내 페이지 기능(동적 로드 인디케이터)을 다 루 고 있다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
효과 도 를 먼저 보 겠 습 니 다.

지금 은 거의 모든 앱 에 안내 페이지 가 있 습 니 다.너무 멋 있 는 것 같 지 않 아 요?그래서 하 나 를 만들어 서 배 워 보고 싶 어 요~자신의 앱 을 더욱 아름 답 게 만 들 고 싶 어 요~
이제 분석 해 보 겠 습 니 다.
이 안내 페이지 는 두 부분 으로 나 눌 수 있 습 니 다.
1.빨 간 점--몇 페이지 인지 알려 주세요~
2.'체험 시작'이 버튼-메 인 화면 에 들 어 갈 수 있 지만 이 버튼 을 제어 하려 면 마지막 페이지 에 만 나타 날 수 있 습 니 다.
포석 은 상대 포석 으로~
그럼 이제 포석 을 살 펴 보 겠 습 니 다.
activity_main:

<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"
 >
  <android.support.v4.view.ViewPager
  android:id="@+id/viewPager"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  />
  <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="20dp">
  <LinearLayout
   android:id="@+id/linear"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:orientation="horizontal">
  </LinearLayout>
 </RelativeLayout>
  <Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:id="@+id/btn"
   android:layout_alignParentBottom="true"
   android:layout_centerHorizontal="true"
   android:layout_marginBottom="50dp"
   android:visibility="invisible"
   android:text="    "/>
</RelativeLayout>
이 버튼 을 체험 해 보 겠 습 니 다.보이 지 않 게 설정 되 어 있어 서 마지막 페이지 에 나타 나 는 것 을 제어 할 수 있 습 니 다.
작은 도 트 는 아직 쓰기 시작 하지 않 았 는데,단지 RelativeLayout 에 LinearLayout 를 끼 워 넣 었 을 뿐이다.
그리고 이 페이지 의 미끄럼 을 분석 하고 있 습 니 다.
먼저 미 끄 러 질 그림 을 넣 으 세 요.

private ViewPager viewPager;
private int[]images={R.drawable.guide_1,R.drawable.guide_2,R.drawable.guide_3};
private List<ImageView>imageViews;//      imageview
어댑터 를 예화 하고 불 러 옵 니 다:

viewPager.setAdapter(new MyAdapter());
imageViews=new ArrayList<ImageView>();
for(int i=0;i<images.length;i++){
 ImageView imageView=new ImageView(this);
 imageView.setImageResource(images[i]);
 imageViews.add(imageView);



class MyAdapter extends PagerAdapter{
 @Override
 public int getCount() {
  // TODO Auto-generated method stub
  return images.length;
 }
 @Override
 public boolean isViewFromObject(View arg0, Object arg1) {
  // TODO Auto-generated method stub
  return arg0==arg1;
 }
 @Override
 public Object instantiateItem(ViewGroup container, int position) {
  // TODO Auto-generated method stub
  container.addView(imageViews.get(position));
  return imageViews.get(position);
 }
 @Override
 public void destroyItem(ViewGroup container, int position, Object object) {
  // TODO Auto-generated method stub
  container.removeView((View)object);
 }
}
사실 여기까지 쓰 면 그림 의 미끄럼 이 완 료 됩 니 다.하지만 아직 빨 간 점 이 나타 나 지 않 았 습 니 다~이 럴 때 빨 간 점 을 써 야 합 니 다~빨 간 점 은 기본적으로 첫 페이지 에 나 옵 니 다~
drawable 파일 에 xml 파일 두 개 를 썼 습 니 다.redcircle--대표 붉 은 점,graycircle-대표 회색 점~
red_circle:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval">
 <size
  android:width="10dp"
  android:height="10dp"/>
 <!--      -->
 <solid
  android:color="#ff0000"/>
</shape>
gray_circle:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval">
 <size
  android:width="10dp"
  android:height="10dp"/>
 <!--      -->
 <solid
  android:color="#ECECEC"/>
</shape>
이제 색깔 을 대표 하 는 파일 을 다 썼 는데 어떻게 넣 어 요~~
기본 값 은 회색 점 이 고 빨간색 점 을 덮어 코드 를 어떻게 쓰 는 지 보 세 요.

ImageView gray_Iv=new ImageView(this);
gray_Iv.setImageResource(R.drawable.gray_circle);
//  LayoutParams       
LinearLayout.LayoutParams layoutParams=
new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT,
    LayoutParams.WRAP_CONTENT);
if(i>0){
 layoutParams.leftMargin=20;
}
gray_Iv.setLayoutParams(layoutParams);
li.addView(gray_Iv);
재 점 을 리 니 어 레이 아웃 에 다 넣 어 주세요.
붉 은 점:

red_Iv=new ImageView(this);
red_Iv.setImageResource(R.drawable.red_circle);
rl.addView(red_Iv);
빨 간 점 을 Relative Layout 에 넣 으 세 요.
지도 트 리 도 써 야 돼 요~붉 은 점 이 미 끄 러 지도 록:

//   
red_Iv.getViewTreeObserver().
addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
 //                  
 @Override
 public void onGlobalLayout() {
  // TODO Auto-generated method stub
  //   
  left=li.getChildAt(1).getLeft()-li.getChildAt(0).getLeft();
  System.out.println("left "+left);
  red_Iv.getViewTreeObserver().removeOnGlobalLayoutListener(this);
 }
});
viewPager                  ，            （                    ）



//     
@Override
public void onPageScrolled(int position, float posionOffset, int arg2) {
 // TODO Auto-generated method stub
 System.out.println(posionOffset);//      
 RelativeLayout.LayoutParams layoutParams=
   (RelativeLayout.LayoutParams)red_Iv.getLayoutParams();
 layoutParams.leftMargin=(int)(left*posionOffset+position*left);
 red_Iv.setLayoutParams(layoutParams);
}
그리고'체험 시작'이라는 버튼 을 마지막 페이지 에 나타 나 게 하면 view Pager 의 미끄럼 감청 방법 에 보 이 는 것 과 보이 지 않 는 것 만 쓸 수 있 습 니 다.

@Override
public void onPageSelected(int position) {
 // TODO Auto-generated method stub
 if(position==images.length-1){
  btn.setVisibility(View.VISIBLE);
 }else{
  btn.setVisibility(View.GONE);
 }
}
전체 MainActivity 코드:

public class MainActivity extends Activity {
 private ViewPager viewPager;
 private int[]images={R.drawable.guide_1,R.drawable.guide_2,R.drawable.guide_3};
 private List<ImageView>imageViews;//      imageview   
 private LinearLayout li;
 private RelativeLayout rl;
 private ImageView red_Iv;
 private int left;
 private Button btn;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  requestWindowFeature(Window.FEATURE_NO_TITLE);
  setContentView(R.layout.activity_main);
  viewPager=(ViewPager) findViewById(R.id.viewPager);
  li=(LinearLayout) findViewById(R.id.linear);
  rl=(RelativeLayout) findViewById(R.id.rl);
  btn=(Button) findViewById(R.id.btn);
  viewPager.setAdapter(new MyAdapter());
  imageViews=new ArrayList<ImageView>();
  for(int i=0;i<images.length;i++){
   ImageView imageView=new ImageView(this);
   imageView.setImageResource(images[i]);
   imageViews.add(imageView);
   ImageView gray_Iv=new ImageView(this);
   gray_Iv.setImageResource(R.drawable.gray_circle);
   //  LayoutParams       
   LinearLayout.LayoutParams layoutParams=
     new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT,
       LayoutParams.WRAP_CONTENT);
   if(i>0){
    layoutParams.leftMargin=20;
   }
   gray_Iv.setLayoutParams(layoutParams);
   li.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() {
    // TODO Auto-generated method stub
    //   
    left=li.getChildAt(1).getLeft()-li.getChildAt(0).getLeft();
    System.out.println("left "+left);
    red_Iv.getViewTreeObserver().removeOnGlobalLayoutListener(this);
   }
  });
  viewPager.setOnPageChangeListener(new OnPageChangeListener() {
   @Override
   public void onPageSelected(int position) {
    // TODO Auto-generated method stub
    if(position==images.length-1){
     btn.setVisibility(View.VISIBLE);
    }else{
     btn.setVisibility(View.GONE);
    }
   }
   //     
   @Override
   public void onPageScrolled(int position, float posionOffset, int arg2) {
    // TODO Auto-generated method stub
    System.out.println(posionOffset);//      
    RelativeLayout.LayoutParams layoutParams=
      (RelativeLayout.LayoutParams)red_Iv.getLayoutParams();
    layoutParams.leftMargin=(int)(left*posionOffset+position*left);
    red_Iv.setLayoutParams(layoutParams);
   }
   @Override
   public void onPageScrollStateChanged(int arg0) {
    // TODO Auto-generated method stub
   }
  });
 }
 class MyAdapter extends PagerAdapter{
  @Override
  public int getCount() {
   // TODO Auto-generated method stub
   return images.length;
  }
  @Override
  public boolean isViewFromObject(View arg0, Object arg1) {
   // TODO Auto-generated method stub
   return arg0==arg1;
  }
  @Override
  public Object instantiateItem(ViewGroup container, int position) {
   // TODO Auto-generated method stub
   container.addView(imageViews.get(position));
   return imageViews.get(position);
  }
  @Override
  public void destroyItem(ViewGroup container, int position, Object object) {
   // TODO Auto-generated method stub
   container.removeView((View)object);
  }
 }
}
 PS:android-support-v4.jar 파일 을 사 용 했 습 니 다.프로젝트 에서 jar 패 키 지 를 가 져 와 야 합 니 다.본 사이트 의 관련 튜 토리 얼 을 참고 하 십시오https://www.jb51.net/softjc/552873.html
첨부:전체 인 스 턴 스 코드 는 여 기 를 클릭 하 십시오본 사이트 다운로드
더 많은 안 드 로 이 드 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.,,,,,,,
본 고 에서 말 한 것 이 여러분 의 안 드 로 이 드 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
안 드 로 이 드 사용 Handler 메모리 유출 분석 및 해결 방법
Android 가로 슬라이딩 카드 효과 구현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage