[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.

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