[Android] ViewPager fühlt sich reich an

Registerkarten können mit ViewPager einfach implementiert werden, und Übergänge zwischen Registerkarten können durch Wischen oder Tippen auf Registerkarten erfolgen.

Wenn Sie es etwas cool aussehen lassen möchten, erhöht sich der Schwierigkeitsgrad. Selbst wenn ich es gegoogelt habe, war es gut, weil es gut war.

Vielleicht kann das Ziel durch Kopieren und Einfügen erreicht werden.

** ★ Ziel: Bilder und Text auf der Registerkarte ViewPager anzeigen **

1. Vorbereitung des ViewPager-Layouts

`layout_main_tab.xml`


<?xml version="1.0" encoding="utf-8"?>
<!--Fragmentbasis-->
<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">

        <!--Tab-Teil-->
        <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. Bereiten Sie das Registerkartenlayout vor

`layout_custom_tab.xml`


<?xml version="1.0" encoding="utf-8"?>
<!--Benutzerdefinierte Registerkarte-->
<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" >

    <!--Tab-Symbol-->
    <ImageView
        android:id="@+id/tabIcon"
        android:layout_marginTop="8dp"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_centerHorizontal="true" />
    
    <!--Tabulatortext-->
    <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. Bereiten Sie den anzuzeigenden Inhalt vor, während Sie die einzelnen Registerkarten auswählen

3.1. Inhalt der Registerkarte Browser

`fragment_web_browser.xml`


<?xml version="1.0" encoding="utf-8"?>
<!--Webbrowser-Fragment-->
<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">

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

</FrameLayout>

3.2 Inhalt der Registerkarte Download-Liste (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. Implementieren Sie jede Registerkarte in 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();
    }

    /**
     *Einstellungen des Hauptbildschirms
     */
    private void initView() {
        //ViewPager-Einstellungen
        LayoutMainTabPagerAdapter pagerAdapter = new LayoutMainTabPagerAdapter(getSupportFragmentManager());
        ViewPager viewPager = (ViewPager)findViewById(R.id.pager);
        viewPager.setAdapter(pagerAdapter);
        viewPager.setCurrentItem(Constants.TAB_POSITION.WEB.ordinal());

        //Registerkarteneinstellungen
        tabSetup(viewPager);
    }

    /**
     *Einstellungen für jede Registerkarte
     * @param viewPager
     */
    private void tabSetup(ViewPager viewPager) {
        //LayoutInflater abrufen Zum Abrufen der Layoutdatei als Ansicht
        LayoutInflater inflater = LayoutInflater.from(this);
        //Holen Sie sich die Basis der Registerkarte
        TabLayout tabLayout = (TabLayout)findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);

        //Einstellungen für jede Registerkarte
        //Registerkarte Browser
        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);

        //Registerkarte "Liste herunterladen"
        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.Zeichenfolge aus XML abrufen
     * @return
     */
    private String getStringFromResource(int id) {
        return context.getResources().getString(id);
    }

    /**
     *Zeichnungsfähig werden
     * @param id
     * @return
     */
    private Drawable getDrawableFromResource(int id) {
        return ResourcesCompat.getDrawable(context.getResources(), id, null);
    }
}

5. Implementierung des in ViewPager festgelegten Adapters

`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 {

    //Gesamtzahl der Registerkarten
    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. Implementierung der vom ViewPager-Adapter zurückgegebenen Fragmente

6.1. Inhaltsfragment der Registerkarte Browser

`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;

/**
 *Browser-Registerkartenfragment
 */
public class WebBrowserFragment extends Fragment {

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

    /**
     *Instanzgenerierung
     * @return
     */
    public static WebBrowserFragment newInstance() {
        WebBrowserFragment fragment = new WebBrowserFragment();
        return fragment;
    }

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

    /**
     *Fragmentinitialisierung
     * @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() {
                //Führen Sie einen In-Page-Übergang in WebView durch
                @Override
                public boolean shouldOverrideUrlLoading(WebView view, String url) {
                    //Laden Sie den Link in dieselbe WebView
                    return false;
                }
        });

        //Standardseite laden
        webView.loadUrl(Constants.DEFAULT_WEB_URL);

        //Einstellungen für die Wiedergabe von Twitter und Videos in WebView
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setDomStorageEnabled(true);

        return  rootView;
    }

    /**
     *Wird beim Registrieren eines Fragments aufgerufen
     * @param context
     */
    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        this.context = context;
    }

    /**
     *Wird aufgerufen, wenn das Fragment die Aktivität verlässt
     */
    @Override
    public void onDetach() {
        super.onDetach();
    }
}

6.2.Listenfragment der Download-Liste

`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;

    /**
     *Instanzgenerierung
     * @return
     */
    public static DownloadListFragment newInstance() {
        DownloadListFragment fragment = new DownloadListFragment();
        return fragment;
    }

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

    /**
     *Fragmentinitialisierung
     * @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;
    }

    /**
     *Wird beim Registrieren eines Fragments aufgerufen
     * @param context
     */
    public void onAttach(Context context) {
        super.onAttach(context);
        this.context = context;
    }

    /**
     *Wird beim Verlassen der Fragmentaktivität aufgerufen
     */
    public void onDetach() {
        super.onDetach();
    }
}

7. Bonus Constants.java

`Constants.java`


public class Constants {

    private Constants() {}

    /**
     *Tabulatorposition
     */
    public enum TAB_POSITION {
        WEB, //Registerkarte "Web"
        DOWNLOAD_LIST //Registerkarte "Liste herunterladen"
    }

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

Sie können Abzeichen einfach auf Registerkarten anzeigen, indem Sie mit layout_custom_tab.xml spielen.

[JAVA] [Android] Zeigen Sie Bilder und Zeichen auf der Registerkarte ViewPager an