web-dev-qa-db-ja.com

FragmentsおよびFragmentActivityを持つTabHost

私はAndroidアプリで作業しています。各タブのフラグメントを使用してナビゲーションに3つのタブを使用したいのですが、それを行うための構造を作成する方法がわかりません。

各フラグメントが異なるため、各フラグメントを個別に追加したいのですが、FragmentActivityのどこに追加するのかわかりません。

これらのファイルがあります。

tabs_layout.xml

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:orientation="vertical"
    Android:layout_height="match_parent"
    Android:layout_width="match_parent">

    <TabHost Android:id="@Android:id/tabhost"
         Android:layout_width="match_parent"
         Android:layout_height="match_parent">

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

             <TabWidget
                Android:id="@Android:id/tabs" 
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
             />

             <FrameLayout
                 Android:id="@Android:id/tabcontent" 
                 Android:layout_width="match_parent"
                 Android:layout_height="match_parent"

             >

                 <FrameLayout
                     Android:id="@+id/tabRateAPet" 
                     Android:layout_width="match_parent"
                     Android:layout_height="match_parent"

                 />

                 <FrameLayout
                     Android:id="@+id/tabViewMyRates" 
                     Android:layout_width="match_parent"
                     Android:layout_height="match_parent"

                 />

                 <FrameLayout
                     Android:id="@+id/tabViewGlobalRates" 
                     Android:layout_width="match_parent"
                     Android:layout_height="match_parent"

                 />


             </FrameLayout>
        </LinearLayout>
    </TabHost>
</LinearLayout>

TabsMain.Java

import Android.os.Bundle;
import Android.support.v4.app.Fragment;
import Android.support.v4.app.FragmentActivity;

public class MainTabsActivity extends FragmentActivity {
public static final String RATE_A_PET = "Rate a Pet";
public static final String MY_RATES = "My Rates";
public static final String GLOBAL_RATES = "Global Rates";

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tabs_layout);
 }
}

Tabs.Java

import Android.app.Activity;
import Android.os.Bundle;
import Android.support.v4.app.Fragment;
import Android.support.v4.app.FragmentManager;
import Android.util.Log;
import Android.view.LayoutInflater;
import Android.view.View;
import Android.view.ViewGroup;
import Android.widget.TabHost;
import Android.widget.TabHost.OnTabChangeListener;
import Android.widget.TabHost.TabSpec;
import Android.widget.TextView;

public class Tabs extends Fragment implements OnTabChangeListener {
    private static final String TAG = "FragmentTabs";
    public static final String RATE_A_PET = "Rate a Pet";
    public static final String MY_RATES = "My Rates";
    public static final String GLOBAL_RATES = "Global Rates";

    private View mRoot;
    private TabHost mTabHost;
    private int mCurrentTab;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
//      super.onCreateView(inflater, container, savedInstanceState);
        mRoot = inflater.inflate(R.layout.tabs_layout, null);
        mTabHost = (TabHost) mRoot.findViewById(Android.R.id.tabhost);
        setupTabs();
        return mRoot;
    }

    private void setupTabs() {
        mTabHost.setup(); // important!
        mTabHost.addTab(newTab(RATE_A_PET, R.string.tabRateAPet, R.id.tabRateAPet));
        mTabHost.addTab(newTab(MY_RATES, R.string.tabViewMyRates, R.id.tabViewMyRates));
    }

    private TabSpec newTab(String tag, int labelId, int tabContentId) {
        Log.d(TAG, "buildTab(): tag=" + tag);

        View indicator = LayoutInflater.from(getActivity()).inflate(
                R.layout.tab,
                (ViewGroup) mRoot.findViewById(Android.R.id.tabs), false);
        ((TextView) indicator.findViewById(R.id.text)).setText(labelId);

        TabSpec tabSpec = mTabHost.newTabSpec(tag);
        tabSpec.setIndicator(indicator);
        tabSpec.setContent(tabContentId);
        return tabSpec;
    }


    @Override
    public void onTabChanged(String tabId) {
        Log.d(TAG, "onTabChanged(): tabId=" + tabId);
        if (RATE_A_PET.equals(tabId)) {
            updateTab(tabId, R.id.tabRateAPet);
            mCurrentTab = 0;
            return;
        }
        if (MY_RATES.equals(tabId)) {
            updateTab(tabId, R.id.tabViewMyRates);
            mCurrentTab = 1;
            return;
        }
        if (GLOBAL_RATES.equals(tabId)) {
            updateTab(tabId, R.id.tabViewGlobalRates);
            mCurrentTab = 2;
            return;
        }
    }   
    private void updateTab(String tabId, int placeholder) {
        FragmentManager fm = getFragmentManager();
        if (fm.findFragmentByTag(tabId) == null) {
            fm.beginTransaction()
                    .replace(placeholder, new RateMyPetActivity(), tabId)
                    .commit();
        }
    }

}
androidandroid-fragmentsandroid-tabhostandroid-fragmentactivity
30
imarban

タブごとに個別のフラグメントファイルを作成することをお勧めします。私も最近これをやったので、コードの概要を以下に示しました。

レイアウトファイル

activity_main.xml

<Android.support.v4.app.FragmentTabHost
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@Android:id/tabhost"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

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

    <TabWidget
        Android:id="@Android:id/tabs"

        Android:orientation="horizontal"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_weight="0"/>

    <FrameLayout
        Android:id="@Android:id/tabcontent"
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        Android:layout_weight="0"/>

    <FrameLayout
        Android:id="@+id/realtabcontent"
        Android:layout_width="match_parent"
        Android:layout_height="0dp"
        Android:layout_weight="1"/>

</LinearLayout>
</Android.support.v4.app.FragmentTabHost>

tab1_view.xml //この形式を使用して、それぞれのタブレイアウトを追加します（文字列変数を必ず変更してください）

<?xml version="1.0" encoding="utf-8"?>
<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"
        tools:context=".DeviceFragment" >

    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="@string/tab1_fragment_string" />

</LinearLayout>

SRCファイル

MainActivity.Java // .addTabプロセスではテキストのみを使用したことに注意してください。 hdpiフォルダーに追加する必要があるドロアブルを使用してアイコンを追加することもできます。また、この例では3つのタブのみを作成しました。

package com.example.applicationname;

import Android.os.Bundle;
import Android.support.v4.app.FragmentActivity;
import Android.support.v4.app.FragmentTabHost;

public class MainActivity extends FragmentActivity {
    // Fragment TabHost as mTabHost
    private FragmentTabHost mTabHost;

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mTabHost = (FragmentTabHost)findViewById(Android.R.id.tabhost);
        mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);

        mTabHost.addTab(mTabHost.newTabSpec("tab1").setIndicator("Tab1"),
            Tab1Fragment.class, null);
        mTabHost.addTab(mTabHost.newTabSpec("tab2").setIndicator("Tab2"),
            Tab2Fragment.class, null);
        mTabHost.addTab(mTabHost.newTabSpec("tab3").setIndicator("Tab3"),
            Tab3Fragment.class, null);
    }
}

Tab1Fragment.Java //必要な数のタブでもう一度複製

package com.example.applicationname;

import Android.os.Bundle;
import Android.support.v4.app.Fragment;
import Android.view.LayoutInflater;
import Android.view.View;
import Android.view.ViewGroup;

public class Tab1Fragment extends Fragment  {

 @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View V = inflater.inflate(R.layout.tab1_view, container, false);

        return V;
    }
}

R.Javaおよびstrings.xmlファイルが適切に設定されていることを確認し、タブを起動して実行する必要があります。

78
Kylie Moden

TabHostは保持しませんフラグメントの状態 。 では、なぜTabHostを使用するのですか？

そのため、代わりに ViewPager と TabLayout を使用してください。

Tabhost上のViewpagerの特徴：

  • ViewPagerはフラグメントの状態を保持します。切り替えても平均フラグメントは再作成されません。
  • ユーザーにスムーズなエクスペリエンスを提供する組み込みのスワイプ機能。
  • Tabhostが切り替えられるとTabhostが何度もFragment/Activityを再作成するため、CPU消費が少なくなります。

違いを見る：

Tablayout + ViewPagerの使用（スワイプをサポートし、フラグメントの状態を保持します

Tablayout + ViewPager

TabHostの使用（スワイプをサポートせず、状態を保持しません）

TabHost

Tablayout + ViewPagerのスモールコード

// find views by id
ViewPager viewPager = findViewById(R.id.viewpager);
TabLayout tabLayout = findViewById(R.id.tablayout);

// attach tablayout with viewpager
tabLayout.setupWithViewPager(viewPager);

ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());

// add your fragments
adapter.addFrag(new SampleFragment(), "Tab1");
adapter.addFrag(new SampleFragment(), "Tab2");
adapter.addFrag(new SampleFragment(), "Tab3");

// set adapter on viewpager
viewPager.setAdapter(adapter);

XMLレイアウト

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical">

    <com.google.Android.material.tabs.TabLayout
        Android:id="@+id/tablayout"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content" />

    <androidx.viewpager.widget.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="0dp"
        Android:layout_weight="1" />

</LinearLayout>

注AndroidX をまだ使用していない場合は、レイアウトを次のように変更する必要があります。

  • 変化する com.google.Android.material.tabs.TabLayoutからAndroid.support.design.widget.TabLayout
  • シャンパンandroidx.viewpager.widget.ViewPagerからAndroid.support.v4.view.ViewPager

しかし、AndroidXに移行することを強くお勧めします。理由を理解するには @ this answer を参照してください。

そして、これはcommonViewPagerAdapterfor allViewpagerアプリ内。

public class ViewPagerAdapter extends FragmentStatePagerAdapter {
    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();

    public ViewPagerAdapter(FragmentManager manager) {
        super(manager);
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitleList.get(position);
    }

    public void addFrag(Fragment fragment) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add("");
    }

    public void addFrag(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }
}

重要な関連リンク

1
Khemraj