[JAVA] [Android] Afficher les images et les caractères dans l'onglet ViewPager

[Android] Rendez ViewPager riche

Les onglets peuvent être facilement implémentés à l'aide de ViewPager, et les transitions entre les onglets peuvent être effectuées en faisant glisser ou en appuyant sur les onglets.

Si vous voulez lui donner un aspect un peu cool, la difficulté augmentera. Même si je l'ai recherché sur Google, c'était bien parce que c'était bon.

Peut-être que l'objectif peut être atteint en copiant et en collant.

** ★ Objectif: afficher les images et le texte dans l'onglet ViewPager **

1. Préparation de la mise en page ViewPager

layout_main_tab.xml


<?xml version="1.0" encoding="utf-8"?>
<!--Base de fragment-->
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!--Partie onglet-->
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </android.support.v4.view.ViewPager>

</RelativeLayout>

2. Préparez la mise en page des onglets

layout_custom_tab.xml


<?xml version="1.0" encoding="utf-8"?>
<!--Onglet personnalisé-->
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/customTab"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <!--Icône de l'onglet-->
    <ImageView
        android:id="@+id/tabIcon"
        android:layout_marginTop="8dp"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_centerHorizontal="true" />
    
    <!--Texte de l'onglet-->
    <TextView
        android:id="@+id/tabText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="12sp"
        android:paddingBottom="6dp"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"/>

</RelativeLayout>

3. Préparez le contenu à afficher en sélectionnant chaque onglet

3.1. Contenu de l'onglet Navigateur

fragment_web_browser.xml


<?xml version="1.0" encoding="utf-8"?>
<!--Fragment de navigateur Web-->
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/fragmentWebBrowser"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragment.WebBrowserFragment">

    <!--Navigateur Web-->
    <WebView
        android:id="@+id/webBrowser"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</FrameLayout>

3.2. Contenu de l'onglet Liste de téléchargement (Tekito)

fragment_download_list.xml


<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">

</android.support.constraint.ConstraintLayout>

4. Implémentez chaque onglet dans MainActivity.java

MainActiity.java



import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.support.v4.content.res.ResourcesCompat;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.support.design.widget.TabLayout;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import jp.jackall.androiddownloader.R;
import jp.jackall.androiddownloader.adapter.LayoutMainTabPagerAdapter;
import jp.jackall.androiddownloader.util.Constants;

public class MainActivity extends AppCompatActivity {

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

        initView();
    }

    /**
     *Paramètres de l'écran principal
     */
    private void initView() {
        //Paramètres ViewPager
        LayoutMainTabPagerAdapter pagerAdapter = new LayoutMainTabPagerAdapter(getSupportFragmentManager());
        ViewPager viewPager = (ViewPager)findViewById(R.id.pager);
        viewPager.setAdapter(pagerAdapter);
        viewPager.setCurrentItem(Constants.TAB_POSITION.WEB.ordinal());

        //Paramètres de l'onglet
        tabSetup(viewPager);
    }

    /**
     *Paramètres pour chaque onglet
     * @param viewPager
     */
    private void tabSetup(ViewPager viewPager) {
        //Obtenir LayoutInflater Pour obtenir le fichier de mise en page sous forme de vue
        LayoutInflater inflater = LayoutInflater.from(this);
        //Obtenez la base de l'onglet
        TabLayout tabLayout = (TabLayout)findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);

        //Paramètres pour chaque onglet
        //Onglet du navigateur
        View tabWeb = inflater.inflate(R.layout.layout_custom_tab, null);
        ((ImageView)tabWeb.findViewById(R.id.tabIcon)).setImageDrawable(getDrawableFromResource(R.drawable.browser_tab_icon));
        ((TextView)tabWeb.findViewById(R.id.tabText)).setText(MainActivity.getStringFromResource(R.string.tab_web));
        tabLayout.getTabAt(Constants.TAB_POSITION.WEB.ordinal()).setCustomView(tabWeb);

        //Télécharger l'onglet de la liste
        View tabDownloadList = inflater.inflate(R.layout.layout_custom_tab, null);
        ((ImageView)tabDownloadList.findViewById(R.id.tabIcon)).setImageDrawable(getDrawableFromResource(R.drawable.download_list_tab_icon));
        ((TextView)tabDownloadList.findViewById(R.id.tabText)).setText(MainActivity.getStringFromResource(R.string.tab_download));
        tabLayout.getTabAt(Constants.TAB_POSITION.DOWNLOAD_LIST.ordinal()).setCustomView(tabDownloadList);
    }


    /**
     * String.Obtenir la chaîne de xml
     * @return
     */
    private String getStringFromResource(int id) {
        return context.getResources().getString(id);
    }

    /**
     *Soyez dessinable
     * @param id
     * @return
     */
    private Drawable getDrawableFromResource(int id) {
        return ResourcesCompat.getDrawable(context.getResources(), id, null);
    }
}

5. Implémentation de l'ensemble d'adaptateurs dans ViewPager

LayoutMainTabPagerAdapter.java


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

import jp.jackall.androiddownloader.fragment.DownloadListFragment;
import jp.jackall.androiddownloader.fragment.WebBrowserFragment;
import jp.jackall.androiddownloader.util.Constants;

public class LayoutMainTabPagerAdapter extends FragmentPagerAdapter {

    //Nombre total d'onglets
    private static final int TAB_NUM = 2;

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

    @Override
    public Fragment getItem(int position) {
        switch(Constants.TAB_POSITION.values()[position]) {
            case WEB:
                return WebBrowserFragment.newInstance();
            case DOWNLOAD_LIST:
                return DownloadListFragment.newInstance();
            default:
                return null;
        }
    }

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

6. Implémentation des fragments renvoyés par l'adaptateur ViewPager

6.1. Fragment du contenu de l'onglet Navigateur

WebBrowserFragment.java


import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import jp.jackall.androiddownloader.R;
import jp.jackall.androiddownloader.util.Constants;

/**
 *Fragment d'onglet du navigateur
 */
public class WebBrowserFragment extends Fragment {

    private Context context = null;
    private View rootView = null;

    /**
     *Génération d'instance
     * @return
     */
    public static WebBrowserFragment newInstance() {
        WebBrowserFragment fragment = new WebBrowserFragment();
        return fragment;
    }

    /**
     *Initialisation du fragment
     * @param savedInstanceState
     */
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    /**
     *Initialisation du fragment
     * @param inflater
     * @param container
     * @param savedInstanceState
     * @return
     */
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        rootView = inflater.inflate(R.layout.fragment_web_browser, container, false);
        WebView webView = (WebView)rootView.findViewById(R.id.webBrowser);
        webView.setWebViewClient(new WebViewClient() {
                //Effectuer une transition dans la page sur WebView
                @Override
                public boolean shouldOverrideUrlLoading(WebView view, String url) {
                    //Chargez le lien dans la même WebView
                    return false;
                }
        });

        //Charger la page par défaut
        webView.loadUrl(Constants.DEFAULT_WEB_URL);

        //Paramètres de lecture de Twitter et de vidéos sur WebView
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setDomStorageEnabled(true);

        return  rootView;
    }

    /**
     *Appelé lors de l'enregistrement d'un fragment
     * @param context
     */
    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        this.context = context;
    }

    /**
     *Appelé lorsque le fragment quitte l'activité
     */
    @Override
    public void onDetach() {
        super.onDetach();
    }
}

6.2 Fragment de l'onglet Liste de téléchargement

DownloadListFragment.java


import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import jp.jackall.androiddownloader.R;

public class DownloadListFragment extends Fragment {

    private Context context = null;
    private View rootView = null;

    /**
     *Génération d'instance
     * @return
     */
    public static DownloadListFragment newInstance() {
        DownloadListFragment fragment = new DownloadListFragment();
        return fragment;
    }

    /**
     *Initialisation du fragment
     * @param savedInstanceState
     */
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    /**
     *Initialisation du fragment
     * @param inflater
     * @param container
     * @param savedInstanceState
     * @return
     */
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        rootView = inflater.inflate(R.layout.fragment_download_list, container, false);
        return rootView;
    }

    /**
     *Appelé lors de l'enregistrement d'un fragment
     * @param context
     */
    public void onAttach(Context context) {
        super.onAttach(context);
        this.context = context;
    }

    /**
     *Appelé en quittant l'activité Fragment
     */
    public void onDetach() {
        super.onDetach();
    }
}

7. Bonus Constants.java

Constants.java


public class Constants {

    private Constants() {}

    /**
     *Position de l'onglet
     */
    public enum TAB_POSITION {
        WEB, //Onglet Web
        DOWNLOAD_LIST //Télécharger l'onglet de la liste
    }

    public static final String DEFAULT_WEB_URL = "https://www.google.co.jp/";
}

Vous pouvez facilement afficher des badges sur les onglets en jouant avec layout_custom_tab.xml.

Recommended Posts

[Android] Afficher les images et les caractères dans l'onglet ViewPager
Application Android qui sélectionne et affiche des images de la galerie
[Introduction] Affichez Android Studio Hello World sur l'émulateur
Enregistrer et afficher plusieurs images
[Android] Obtenez la date du lundi
Afficher les caractères définis par l'utilisateur sur l'écran LCD I2C 1602 avec Raspberry Pi 3 et Java
Obtenez l'accélération et l'orientation du système de coordonnées mondial sur Android
Implémenter la représentation ondulatoire dans les images sur Android
Comment affiner le format d'image de la galerie sur Android, puis sélectionner et importer plusieurs images
[Android] Comment activer / désactiver le panneau de notification à l'aide de StatusBarManager
Exemple DOM → Générer dynamiquement des balises HTML et afficher des données sur la base de données
Comparaison de l'implémentation de la production qui fait briller les images sur iOS et Android
Afficher le texte en haut de l'image
Essayez d'utiliser le service sur Android Oreo
Exemple d'affichage des notifications (tête haute) sur Android
Pré-traitement à afficher sur le navigateur (compilateur)
[Android] Obtenez la position tapée (coordonnées) sur l'écran
Afficher l'applet Moniteur système dans la barre des tâches Ubuntu 20.04
[Android] Liste tous les éléments de réglage sur l'écran de réglage
Compilez et exécutez Java sur la ligne de commande