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

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.

page.gif

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!

Recommended Posts

[Android] Je souhaite créer un ViewPager pouvant être utilisé pour les didacticiels
J'ai posé une question qui peut être utilisée pour des entretiens techniques
Je souhaite créer une annotation générique pour un type
J'ai créé un client API THETA qui peut être utilisé pour le développement de plugins
Créer un contrôle de page qui peut être utilisé avec RecyclerView
J'ai créé une bibliothèque pour afficher des tutoriels sur Android.
J'ai utilisé Docker pour mon portfolio en tant que débutant, donc j'espère que même 1 mm sera utile à quelqu'un.
Créez un fichier jar qui peut être exécuté sur Gradle
Base de données Firebase-Realtime sur Android pouvant être utilisée avec copie
Je souhaite créer un formulaire pour sélectionner la catégorie [Rails]
Rechercher une instruction Switch qui peut être convertie en une expression Switch
Je veux créer un fichier Parquet même en Ruby
Je souhaite rechercher de manière récursive des fichiers dans un répertoire spécifique
Mécanisme de conversion vers une langue que le navigateur peut reconnaître
J'ai essayé de créer une application cartographique simple dans Android Studio
Je souhaite utiliser le balayage arrière sur un écran qui utilise XLPagerTabStrip
L'histoire de Collectors.groupingBy que je veux garder pour la postérité
Je ne peux plus me connecter à une VM avec un conteneur Docker pouvant se connecter via SSH
Je souhaite développer une application web!
Je veux écrire un joli build.gradle
Liste de réglages de Glassfish que je souhaite conserver pour le moment
Je veux écrire un test unitaire!
Résumé des bibliothèques qui semblent souvent utilisées dans le développement récent d'Android (2019/11)
Comment créer un référentiel Maven pour 2020
Je souhaite créer un SNS Web sombre avec Jakarta EE 8 avec Java 11
[Rails] "Pry-rails" qui peuvent être utilisés lors de l'enregistrement avec la méthode create
Notez que VS Code + JUnit 5 peut être utilisé sous Windows 10
Une note que j'ai renoncé à essayer de créer une annotation personnalisée pour Lombok
Extrait technologique pouvant être utilisé pour créer des sites EC dans la formation Java
Je souhaite pouvoir lire des fichiers en utilisant refile avec administrate [rails6]
[Azure] J'ai essayé de créer une application Java pour la création d'applications Web gratuites - [Débutant]
[Android] Je veux faciliter le contrôle qualité ... C'est vrai! Faisons un menu de débogage!
Comment créer une base de données H2 n'importe où
[Android] Créez une nouvelle classe en héritant d'ImageView
[Ruby] Je veux faire un saut de méthode!
Comment créer des pages pour le tableau "kaminari"
Comment créer une classe qui hérite des informations de classe
Je veux écrire une simple répétition d'une chaîne de caractères
J'ai essayé de créer une application de clonage LINE
Je souhaite concevoir une structure pour la gestion des exceptions
Organiser les méthodes qui peuvent être utilisées avec StringUtils
Je veux être finalement même à kotlin
Collection RSpec que j'ai fréquemment utilisée
[MyBatis] Je souhaite mapper une requête de requête à une table qui a une relation un-à-plusieurs avec un bean imbriqué.
J'ai essayé d'utiliser Wercker pour créer et publier une image Docker qui lance GlassFish 5
Je souhaite utiliser PowerMock dans une classe qui combine des tests paramétrés et des tests ordinaires
7 choses que je veux que tu gardes pour que ça ne devienne pas un putain de code
[Azure] J'ai essayé de créer une application Java gratuitement ~ Se connecter avec FTP ~ [Débutant]
Je veux appeler une méthode d'une autre classe
Je veux utiliser NetBeans sur Mac → Je peux l'utiliser!
Ecrire une classe qui peut être ordonnée en Java Un petit mémo standard
J'ai fait une méthode pour demander la prime vendredi
Je veux utiliser une petite icône dans Rails
[Spring Boot] Comment créer un projet (pour les débutants)
J'ai essayé de créer une compétence Clova en Java