introduction

Lorsque j'ai voulu afficher le tutoriel au démarrage initial de l'application, j'ai recherché quelque chose qui pouvait être utilisé et compris de manière intuitive, et je suis tombé sur quelque chose appelé ** "View Pager" **.

Il semble que vous puissiez facilement créer quelque chose comme ça en insérant la bibliothèque, mais cela peut être gênant si vous la personnalisez, alors j'ai essayé de la construire moi-même même si j'étais un amateur.

Préparation

** "View Pager" ** sera utilisé à partir de ** API 22 **, donc faites CompileSdkVersion ** 22 ** ou supérieur. Nous voulons également afficher ** Indicateur ** cette fois, nous allons donc introduire la bibliothèque de support de conception.

`app.build`


apply plugin: 'com.android.application'

android {
  compileSdkVersion 26
  buildToolsVersion "26.0.1"
  defaultConfig {
    ...
  }
  buildTypes {
    release {
      ...
    }
    debug {
      ...
    }
  }
}

dependencies {
  compile fileTree(include: ['*.jar'], dir: 'libs')
  compile 'com.android.support:appcompat-v7:26.0.0-alpha1'
  compile 'com.android.support:support-v4:26.0.0-alpha1'
  compile 'com.android.support:design:26.0.0-alpha1'
}

Faire une fondation

** "View Pager" ** a plusieurs * Fragments * sur la base, et il se déplace pour les afficher séquentiellement par opération utilisateur.

Donc, cette fois, si vous placez ** ViewPager ** et ** Indicator ** sur une seule base * Activity * et mord * Adapter * qui change le * Fragment * à afficher en fonction de la * position * actuelle. Je pense que c'est bien.

Maintenant, créons réellement la base * Activity *.

`MainActivity.java`


public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener, View.OnClickListener {
  private final static int PAGE_NUM = 3;
  private ViewPager viewPager;
  private TextView textLeft;
  private TextView textRight;

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    viewPager = (ViewPager) findViewById(R.id.pager);
    PagerAdapter adapter = new PagerAdapter(getSupportFragmentManager());  //Adaptateur personnalisé
    viewPager.setAdapter(adapter);
    viewPager.addOnPageChangeListener(this);  //Ajout d'un écouteur par transition de page

    TabLayout tabLayout = (TabLayout) findViewById(R.id.indicator);
    tabLayout.setupWithViewPager(viewPager, true);

    textLeft = (TextView) findViewById(R.id.text_left);
    textLeft.setOnClickListener(this);  //Texte de pied de page(la gauche)Ajouter un écouteur de clics
    textRight = (TextView) findViewById(R.id.text_right);
    textRight.setOnClickListener(this);  //Texte de pied de page(droite)Ajouter un écouteur de clics
  }

  @Override
  public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  }

  @Override
  public void onPageSelected(int position) {  //Changer le texte du pied de page
    if (position == 0) {
      textLeft.setText("Skip");
    } else {
      textLeft.setText("Back");
    }

    if (position == (PAGE_NUM - 1)) {
      textRight.setText("Go!");
    } else {
      textRight.setText("Next");
    }
  }

  @Override
  public void onPageScrollStateChanged(int state) {
  }

  @Override
  public void onClick(View view) {  //Comportement lorsque vous cliquez sur le texte du pied de page
    switch (view.getId()) {
      case R.id.text_left:
        if (viewPager.getCurrentItem() != 0) {  //Si ce n'est pas la première page, revenez en arrière
          viewPager.setCurrentItem(viewPager.getCurrentItem() - 1, true);
        }
        break;
      case R.id.text_right:
        if (viewPager.getCurrentItem() != PAGE_NUM) {  //Si ce n'est pas la dernière page, continuez une feuille
          viewPager.setCurrentItem(viewPager.getCurrentItem() + 1, true);
        }
        break;
    }
  }

  private class PagerAdapter extends FragmentPagerAdapter {  //Adaptateur personnalisé
    PagerAdapter(FragmentManager manager) {
      super(manager);
    }

    @Override
    public Fragment getItem(int position) {
      switch (position) {  //Changer le fragment affiché en fonction de la position actuelle
        case 0:
          return new FirstFragment();
        case 1:
          return new SecondFragment();
        case 2:
          return new ThirdFragment();
      }
      return null;
    }

    @Override
    public int getCount() {
      return PAGE_NUM;
    }
  }
}

Ensuite, créez une vue.

`activity_main.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.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/footer"/>

  <RelativeLayout
    android:id="@+id/footer"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_alignParentBottom="true"
    android:background="#3F51B5">

    <TextView
      android:id="@+id/text_left"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentStart="true"
      android:layout_centerVertical="true"
      android:layout_marginStart="30dp"
      android:padding="15dp"
      android:text="Skip"
      android:textColor="#FFFFFF"
      android:textSize="18sp"/>

    <android.support.design.widget.TabLayout
      android:id="@+id/indicator"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerHorizontal="true"
      android:layout_centerVertical="true"
      app:tabBackground="@drawable/indicator_selector"
      app:tabGravity="center"
      app:tabIndicatorHeight="0dp"/>

    <TextView
      android:id="@+id/text_right"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentEnd="true"
      android:layout_centerVertical="true"
      android:layout_marginEnd="30dp"
      android:padding="15dp"
      android:text="Next"
      android:textColor="#FFFFFF"
      android:textSize="18sp"/>

  </RelativeLayout>

</RelativeLayout>

Cette fois, ** TabLayout ** de design support library est utilisé pour afficher ** Indicator **. De plus, ** Indicator ** est implémenté en spécifiant ʻapp: tabBackground = "@ drawable / Indicator_selector" `. Ci-dessous se trouve le * sélecteur *.

`indicator_selector.xml`


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_selected="true">
    <shape
      android:innerRadius="0dp"
      android:shape="ring"
      android:thickness="4dp"
      android:useLevel="false">
      <solid android:color="#DEDCDB"/>
    </shape>
  </item>
  <item>
    <shape
      android:innerRadius="0dp"
      android:shape="ring"
      android:thickness="2dp"
      android:useLevel="false">
      <solid android:color="#A59E99"/>
    </shape>
  </item>
</selector>

Créer une page à afficher

Tout ce que vous avez à faire est de créer votre page préférée, ** Fragment **! Je vais donc l'omettre ici ...

À la fin

Cette fois, je l'ai fait moi-même sans introduire de bibliothèque supplémentaire, mais le monde est pratique, et si vous le cherchez, il y a beaucoup de choses comme ça (rires) Si vous ne trouvez toujours pas celle que vous aimez, veuillez vous y référer J'apprécierais si vous le pouviez.

La prochaine fois que je veux le terminer avec un sentiment plus riche ⊂ ((・ ⊥ ・)) ⊃ ・ Effet de disparité ·animation · Entrée sortie Où vous voulez défier ce domaine!

[JAVA] [Android] Je souhaite créer un ViewPager pouvant être utilisé pour les didacticiels

introduction

Préparation

app.build