Android Simple Implementation Boot Page

This article example for everyone to share Android simple implementation of the specific code of the boot page, for your reference, the specific content is as follows

1. Thoughts

We choose ViewPager + View + ImageView to achieve the boot page effect, ViewPager to achieve sliding, View to display the image of each page, and ImageView to achieve the following little red dot.

2. XML code

<?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>

Write as many ImageView pages as there are, and the main reason for using relative layout here is to make the little red dot at the bottom of the parent layout.

3. Implementation code

1. Customize 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; //  Judge whether the current object corresponds to the corresponding view   And returns 1 Boolean values 
  }

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

  @Override
  public void destroyItem(ViewGroup container, int position, Object object) {
   container.removeView((View)object); //  Destruction 1 A View  Because it is Object Type so you need to transform to View
  }
 }

2. Customize setImageView to realize the red dot display below

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);
  }
 }

It is easy to understand here that several pages pass in several parameters, and the parameter types are Boolean. When the first page is, the first parameter should be true, followed by false, and then the display of ImageView, which can be set directly with two pictures, but I use the color directly without pictures.

3. Set up ViewPager listening

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) {
    }
   });

I wrote an switch in onPageSelected to get the current corresponding page and let the little red dot below follow the change.

4. Complete code

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);
  }
 }
}

4. Summary

We use ViewPager + View + ImageView simple implementation of the boot page effect, of course, we can also use ViewPager + Fragment + ImageView can also, this look at personal habits, the implementation of the boot page is not difficult, as long as we can master the use of ViewPager.