Je posterai sur Qiita pour la première fois! Jusqu'à présent, j'ai vu des articles de nombreuses personnes et beaucoup étudié, mais je vais essayer d'écrire des articles qui seront utiles à de nombreuses personnes, alors merci.

En ce qui concerne le sujet principal, lors de l'utilisation de TabLayout, je voulais appeler la méthode Fragment en cliquant sur le menu de la barre d'outils de l'activité, mais je n'ai pas trouvé la page qui a été écrite de manière facile à comprendre, donc je vais la résumer. Tout d'abord, je présenterai une implémentation d'onglet simple à l'aide de TabLayout et ViewPager. Il existe de nombreux articles qui présentent la mise en œuvre des onglets, mais dans cet article, je vais considérer la conception matérielle et la créer. Dans le prochain article, je résumerai comment faire fonctionner Fragment à partir de l'activité et comment faire fonctionner l'activité à partir de Fragment.

Mise en place des onglets (jusqu'à affichage)

TabLayout ... Une barre d'onglets commandée par l'utilisateur dans le fichier Layout.xml de l'activité. TabLayout est rempli dynamiquement avec des onglets individuels.
ViewPager ... Le fragment est défini. Balayez vers la gauche ou vers la droite pour changer le jeu de fragments dans le ViewPager.
Fragment ... Une sorte de vue avec un cycle de vie qui s'exécute sur Activity. Vous pouvez l'utiliser de la même manière que Activity.
Adaptateur ... Définissez Fragment sur ViewPager. En définissant le ViewPager avec l'adaptateur défini dans TabLayout, lorsqu'un onglet est sélectionné, il basculera vers le fragment correspondant.

TabLayout Cette fois, nous allons créer quelque chose comme une barre d'outils et un onglet intégrés. En utilisant TabLayout, les onglets conformes à Material Design peuvent être définis sans définir de paramètres détaillés. Cachez l'Actionbar dans style.xml, écrivez la Toolbar dans Layout et projetez une ombre sur TabLayout. Il est nécessaire de faire correspondre la couleur d'arrière-plan de Toolbar et TabLayout.

La hauteur de l'élévation de la barre d'outils dans Material Design est de 4dp. Vous pouvez également utiliser @ dimen / abc_action_bar_elevation_material. Elevation & shadows - Material Design

`values/styles.xml`


<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

`layout/activity_main.xml`


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="...MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme"
        app:title="Tab Sample"
        app:titleTextColor="@color/white"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            style="@style/MyCustomTabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:elevation="4dp" />

        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>
</LinearLayout>

@ style / MyCustomTabLayout est un style original qui change la couleur du texte d'un onglet lorsqu'il est sélectionné et lorsqu'il n'est pas sélectionné. Dans Material Design, la couleur du texte de l'onglet sélectionné est #fff et la couleur du texte de l'onglet non sélectionné est # fff / opacity 70%. Tabs - Components - Material Design Résumé de la transparence du code couleur ARVB - Qiita

`values/styles.xml`


<resources>
    ...

    <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabTextAppearance">@style/MyCustomTabText</item>
        <item name="tabSelectedTextColor">@color/white</item>
    </style>

    <style name="MyCustomTabText" parent="TextAppearance.AppCompat.Button">
        <item name="android:textColor">@color/white_70percent</item>
    </style>
</resources>

Fragment Ensuite, créez un Fragment. Le rôle de Fragment dans l'implémentation des onglets peut être introduit dans ViewPager via Adapter pour accepter l'interaction de l'utilisateur. Et chaque fois que la sélection d'onglets change, le fragment affiché par ViewPager change, vous devez donc créer autant de fragments qu'il y a d'onglets. (Si plusieurs onglets exigent que l'utilisateur se comporte de la même manière, un fragment peut être implémenté avec moins de fragments que le nombre d'onglets en correspondant à plusieurs onglets.) Fragment est similaire à Activity. Il se compose d'un fichier class / java et d'un fichier layout / xml. Et comme Fragment a un cycle de vie, il peut être utilisé de la même manière que Activity. Cependant, sachez que le cycle de vie du fragment est différent du cycle de vie de l'activité.

`Main1Fragment.java`


package ...;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Main1Fragment extends Fragment {

    public Main1Fragment() {
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_main1, container, false);
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
    }
}

`Main2Fragment.java`


package ...;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Main2Fragment extends Fragment {

    public Main2Fragment() {
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_main2, container, false);
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
    }
}

C'est la forme de base de Fragment. La méthode OnCreatedView () renvoie une vue gonflée de la disposition du fragment. De plus, la méthode onViewCreated () peut être utilisée de la même manière que la méthode onCreate () dans Activity. Puisque l'opération d'origine Override est effectuée par super.onViewCreated (view, savedInstanceState);, le code arbitraire est décrit ci-dessous.

Ici, modifiez la disposition du fragment afin que les deux dispositions puissent être distinguées. Modifiez maintenant uniquement le texte de TextView.

`layout/fragment_main1.xml`


<LinearLayout 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:orientation="vertical"
　　　　　　　　android:padding="16dp"
    tools:context="...Main1Fragment">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="fragment1" />

</LinearLayout>

`layout/fragment_main2.xml`


<LinearLayout 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:orientation="vertical"
　　　　　　　　android:padding="16dp"
    tools:context="...Main2Fragment">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="fragment2" />

</LinearLayout>

Adapter Ensuite, créez un adaptateur. L'adaptateur est un mécanisme permettant d'introduire Fragment dans ViewPager. L'adaptateur qui peut être défini dans ViewPager est un adaptateur qui hérite de FragmentPagerAdapter.

`OriginalFragmentPagerAdapter.java`


package ...;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.ViewGroup;

public class OriginalFragmentPagerAdapter extends FragmentPagerAdapter {

    private CharSequence[] tabTitles = {"Onglet 1", "Onglet 2"};

    public OriginalFragmentPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return tabTitles[position];
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                return new Main1Fragment();
            case 1:
                return new Main2Fragment();
            default:
                return null;
        }
    }

    @Override
    public int getCount() {
        return tabTitles.length;
    }
}

Déclarez le titre de l'onglet avec un tableau de type CharSequence. Méthode getCount (): renvoie le nombre total d'onglets. Méthode getPageTitle (): les titres des onglets pour le nombre total d'onglets sont reflétés dans l'onglet. Méthode getItem (): reflète le fragment correspondant à la position. Appelé chaque fois que vous sélectionnez un onglet. À ce moment-là, il reçoit une position comme argument, il renvoie donc le fragment correspondant à cette position. Activity Enfin, c'est le cadre de l'activité.

`MainActivity.java`


package ...;

import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

        OriginalFragmentPagerAdapter adapter = new OriginalFragmentPagerAdapter(getSupportFragmentManager());
        ViewPager viewPager = findViewById(R.id.viewPager);
        viewPager.setOffscreenPageLimit(2);
        viewPager.setAdapter(adapter);

        TabLayout tabLayout = findViewById(R.id.tabLayout);
        tabLayout.setupWithViewPager(viewPager);
    }
}

Déclarez le OriginalFragmentPagerAdapter. Vous pouvez créer une instance en prenant FragmentManager comme argument et en passant getSupportFragmentManager () lors de sa déclaration. Associez ViewPager à l'ID de disposition et définissez l'adaptateur avec la méthode setAdapter (). La méthode setOffscreenPageLimit () transmet comme argument le nombre de pages avant le fragment à conserver lorsque l'utilisateur modifie la page de ViewPager. Par exemple, si vous définissez cette valeur sur 2 dans ViewPager qui a introduit 3 fragments, la 1ère page sera générée à nouveau lorsque vous passerez de la page 1 à la page 3 et reviendrez à la page 1. Par conséquent, si vous souhaitez conserver la valeur, etc. et l'empêcher d'être rechargée, vous devez définirOffscreenPageLimit (3). Ensuite, TabLayout est la méthode setupWithViewPager (), et en définissant le ViewPager avec l'ensemble d'adaptateurs, lorsque vous cliquez sur un onglet, le fragment correspondant à cet onglet sera affiché dans le ViewPager.

Opération de fragment

Avec ce qui précède, vous pouvez afficher le fragment avec une disposition statique dans laquelle le TextView est placé, et vous pouvez confirmer que le fragment du ViewPager est commuté en utilisant le ViewPager et les onglets. Ensuite, il reçoit l'opération de l'utilisateur dans Fragment. Écrivons un programme qui crée un EditText et un Button dans la disposition du fragment, reçoit une chaîne de caractères de EditText lorsque l'utilisateur clique sur le Button et l'affiche dans Toast.

Modifiez la disposition du fragment.

`layout/fragment_main1.xml`


<LinearLayout　...>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="fragment1" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="text" />

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button_Fragment1" />
</LinearLayout>

Modifiez le fichier java Fragment.

`Main1Fragment.java`


...

public class Main1Fragment extends Fragment {
    ...

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        final EditText editText = view.findViewById(R.id.editText);
        Button button = view.findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getContext(), editText.getText().toString(), Toast.LENGTH_LONG).show();
            }
        });
    }
}

Pour connecter l'ID de vue du Layout Layout of Fragment, écrivez-le sous la forme view.findViewById (R.id ...) dans la méthode onViewCreated (). La vue d'argument est la vue renvoyée par la méthode OnCreatedView () lorsque le fragment a été créé, afin que vous puissiez connecter l'ID de cette disposition. Concernant l'endroit où Toast est affiché, le premier argument Contexte de makeText est getContext (). C'est là que vous avez écrit MainActivity.this, this, getApplicationContext (), etc. dans Activity, mais vous pouvez recevoir l'activité du parent dans lequel le Fragment s'exécute en écrivant getContext () dans Fragment.

finalement

Vous pouvez maintenant implémenter les onglets de base. Dans le prochain article Opération Activity to Fragment --Qiita , je voudrais vous présenter comment appeler la méthode Fragment depuis Activity. Je vais.

[JAVA] Implémentation des onglets à l'aide de TabLayout et ViewPager

Mise en place des onglets (jusqu'à affichage)

values/styles.xml

layout/activity_main.xml

values/styles.xml

Main1Fragment.java

Main2Fragment.java

layout/fragment_main1.xml

layout/fragment_main2.xml

OriginalFragmentPagerAdapter.java

MainActivity.java

Opération de fragment

layout/fragment_main1.xml

Main1Fragment.java

finalement

`values/styles.xml`

`layout/activity_main.xml`

`values/styles.xml`

`Main1Fragment.java`

`Main2Fragment.java`

`layout/fragment_main1.xml`

`layout/fragment_main2.xml`

`OriginalFragmentPagerAdapter.java`

`MainActivity.java`

`layout/fragment_main1.xml`

`Main1Fragment.java`