Android 단순 구현 안내 페이지

본 논문 의 사례 는 안 드 로 이 드 가 안내 페이지 를 간단하게 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 실 수 있 습 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
사고
저 희 는 ViewPager+View+ImageView 를 선택 하여 안내 페이지 효 과 를 실현 합 니 다.ViewPager 는 미끄럼 을 실현 합 니 다.View 는 각 페이지 의 이미 지 를 표시 하 는 데 사용 되 고 ImageView 는 아래 의 작은 빨 간 점 을 실현 하 는 데 사 용 됩 니 다.
2.XML 코드

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">
 
  <android.support.v4.view.ViewPager
   android:id="@+id/viewPager"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="#000000"/>
  
  <LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:gravity="center"
   android:orientation="horizontal"
   android:layout_alignParentBottom="true">
   
   <ImageView
    android:id="@+id/image1"
    android:layout_width="15dp"
    android:layout_height="15dp"
    android:layout_margin="10dp"/>
   
   <ImageView
    android:id="@+id/image2"
    android:layout_width="15dp"
    android:layout_height="15dp"
    android:layout_margin="10dp"/>
   
   <ImageView
    android:id="@+id/image3"
    android:layout_width="15dp"
    android:layout_height="15dp"
    android:layout_margin="10dp"/>
   
   <ImageView
    android:id="@+id/image4"
    android:layout_width="15dp"
    android:layout_height="15dp"
    android:layout_margin="10dp"/>
   
  </LinearLayout>

</RelativeLayout>

페이지 가 몇 개 있 으 면 ImageView 를 적 습 니 다.여기 서 상대 적 인 레이아웃 을 사용 하 는 주요 원인 은 작은 빨 간 점 이 부모 레이아웃 의 아래쪽 에 있 도록 하기 위해 서 입 니 다.
실현 코드
1.사용자 정의 ViewPagerAdapter

class ViewPagerAdapter extends PagerAdapter {

  @Override
  public int getCount() {
   return list.size(); // List<View> list = new ArrayList<>();
  }

  @Override
  public boolean isViewFromObject(View p1, Object p2) {
   return p1 == p2; //                         
  }

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

  @Override
  public void destroyItem(ViewGroup container, int position, Object object) {
   container.removeView((View)object); //     View    Object         View
  }
 }

2.setImageView 를 사용 하여 아래 의 빨 간 점 을 표시 합 니 다.

private void setImageView(boolean bool1, boolean bool2, boolean bool3, boolean bool4){
  if(bool1){
   image1.setBackgroundColor(Color.RED);
   image2.setBackgroundColor(Color.WHITE);
   image3.setBackgroundColor(Color.WHITE);
   image4.setBackgroundColor(Color.WHITE);
  }else if(bool2){
   image2.setBackgroundColor(Color.RED);
   image1.setBackgroundColor(Color.WHITE);
   image3.setBackgroundColor(Color.WHITE);
   image4.setBackgroundColor(Color.WHITE);
  }else if(bool3){
   image3.setBackgroundColor(Color.RED);
   image2.setBackgroundColor(Color.WHITE);
   image1.setBackgroundColor(Color.WHITE);
   image4.setBackgroundColor(Color.WHITE);
  }else if(bool4){
   image4.setBackgroundColor(Color.RED);
   image2.setBackgroundColor(Color.WHITE);
   image3.setBackgroundColor(Color.WHITE);
   image1.setBackgroundColor(Color.WHITE);
  }
 }

여기 서 잘 이해 할 수 있 습 니 다.몇 개의 페이지 에 몇 개의 매개 변수 가 들 어 갑 니 다.매개 변수 유형 은 모두 불 형 입 니 다.첫 번 째 페이지 에 있 을 때 첫 번 째 매개 변 수 는 true 뒤에 모두 false 이 고 뒤의 원 리 는 똑 같 습 니 다.그 다음 에 ImageView 의 디 스 플레이 는 두 장의 그림 으로 설정 할 수 있 습 니 다.저 는 그림 이 없 으 면 바로 사용 하 는 색 입 니 다.
3.ViewPager 감청 설정

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener(){

    @Override
    public void onPageScrolled(int p1, float p2, int p3) {
    }

    @Override
    public void onPageSelected(int p1) {
     switch(p1){
      case 0:
       setImageView(true,false,false,false);
       break;
      case 1:
       setImageView(false,true,false,false);
       break;
      case 2:
       setImageView(false,false,true,false);
       break;
      case 3:
       setImageView(false,false,false,true);
       break;
     }
    }

    @Override
    public void onPageScrollStateChanged(int p1) {
    }
   });

onPageSelected 에 switch 라 고 쓰 여 있 는 것 은 현재 대응 하 는 페이지 를 가 져 오고 아래 의 작은 빨 간 점 을 변화 시 키 기 위 한 것 입 니 다.
4.전체 코드

public class MainActivity extends AppCompatActivity {
 
 ViewPager viewPager;
 List<View> list = new ArrayList<>();
 View view1, view2, view3, view4;
 ImageView image1, image2, image3, image4;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  initView();
 }
 
 private void initView(){
  view1 = View.inflate(this, R.layout.view1, null);
  view2 = View.inflate(this, R.layout.view2, null);
  view3 = View.inflate(this, R.layout.view3, null);
  view4 = View.inflate(this, R.layout.view4, null);
  
  image1 = findViewById(R.id.image1);
  image2 = findViewById(R.id.image2);
  image3 = findViewById(R.id.image3);
  image4 = findViewById(R.id.image4);
  
  viewPager = findViewById(R.id.viewPager);
  
  list.add(view1);
  list.add(view2);
  list.add(view3);
  list.add(view4);
  
  viewPager.setAdapter(new ViewPagerAdapter());
  setImageView(true,false,false,false);
  viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener(){

    @Override
    public void onPageScrolled(int p1, float p2, int p3) {
    }

    @Override
    public void onPageSelected(int p1) {
     switch(p1){
      case 0:
       setImageView(true,false,false,false);
       break;
      case 1:
       setImageView(false,true,false,false);
       break;
      case 2:
       setImageView(false,false,true,false);
       break;
      case 3:
       setImageView(false,false,false,true);
       break;
     }
    }

    @Override
    public void onPageScrollStateChanged(int p1) {
    }
   });
  
 }
 
 private void setImageView(boolean bool1, boolean bool2, boolean bool3, boolean bool4){
  if(bool1){
   image1.setBackgroundColor(Color.RED);
   image2.setBackgroundColor(Color.WHITE);
   image3.setBackgroundColor(Color.WHITE);
   image4.setBackgroundColor(Color.WHITE);
  }else if(bool2){
   image2.setBackgroundColor(Color.RED);
   image1.setBackgroundColor(Color.WHITE);
   image3.setBackgroundColor(Color.WHITE);
   image4.setBackgroundColor(Color.WHITE);
  }else if(bool3){
   image3.setBackgroundColor(Color.RED);
   image2.setBackgroundColor(Color.WHITE);
   image1.setBackgroundColor(Color.WHITE);
   image4.setBackgroundColor(Color.WHITE);
  }else if(bool4){
   image4.setBackgroundColor(Color.RED);
   image2.setBackgroundColor(Color.WHITE);
   image3.setBackgroundColor(Color.WHITE);
   image1.setBackgroundColor(Color.WHITE);
  }
 }
 
 class ViewPagerAdapter extends PagerAdapter {

  @Override
  public int getCount() {
   return list.size();
  }

  @Override
  public boolean isViewFromObject(View p1, Object p2) {
   return p1 == p2;
  }

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

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

총화
우 리 는 ViewPager+View+ImageView 를 사용 하여 안내 페이지 효 과 를 간단하게 실 현 했 습 니 다.물론 우 리 는 ViewPager+Fragment+ImageView 를 사용 해도 됩 니 다.이것 은 개인 적 인 습관 을 볼 수 있 을 뿐 안내 페이지 의 실현 은 어렵 지 않 습 니 다.우 리 는 ViewPager 의 사용 방법 만 익히 면 됩 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.