带有标签和 Viewpager 的 Android 片段答案

【问题标题】：Android Fragments with Tabs and Viewpager带有标签和 Viewpager 的 Android 片段
【发布时间】：2012-11-17 11:35:53
【问题描述】：

我们正在构建一个包含片段嵌套的应用程序，如上所示。

选项卡特色 - 详细信息选项卡和地图选项卡
详细信息选项卡将有一个幻灯片 - 就像查看页面滑块和可滚动的信息下方的信息。
地图选项卡将显示地图。

如上所示，我已经实现了选项卡和地图以及滑块。现在我很困惑如何在滑块下方添加内容，这将使详细信息选项卡可滚动。

我尝试了什么？

点击详细信息选项卡时，Fragment 将尝试在其中膨胀两个 Fragment 布局。

AndroidTabLayoutActivity.java

package com.mink7.abs;

import com.viewpagerindicator.CirclePageIndicator;

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
import java.util.Random;
import android.support.v4.app.FragmentTabHost;
import com.viewpagerindicator.PageIndicator;

import android.support.v4.app.FragmentActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

public class AndroidTabLayoutActivity extends TabActivity {
        /** Called when the activity is first created. */
        @Override
        public void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);

                // FragmentTabHost tabHost;

                setContentView(R.layout.main);
                // tabHost = (FragmentTabHost) findViewById(R.id.tabMode);

                TabHost tabHost = getTabHost();

                /*
                 * mAdapter = new TestFragmentAdapter(getSupportFragmentManager());
                 *
                 * mPager = (ViewPager) findViewById(R.id.pager);
                 * mPager.setAdapter(mAdapter);
                 *
                 * mIndicator = (CirclePageIndicator) findViewById(R.id.indicator);
                 * mIndicator.setViewPager(mPager);
                 */

                // Tab for Photos
                TabSpec photospec = tabHost.newTabSpec("Details");
                photospec.setIndicator("Details",
                                getResources().getDrawable(R.drawable.icon_photos_tab));
                Intent photosIntent = new Intent(this, DetailsActivity.class);
                photospec.setContent(photosIntent);

                // Tab for Songs
                TabSpec songspec = tabHost.newTabSpec("Maps");
                // setting Title and Icon for the Tab
                songspec.setIndicator("Maps",
                                getResources().getDrawable(R.drawable.icon_songs_tab));
                Intent songsIntent = new Intent(this, MapsActivity.class);
                songspec.setContent(songsIntent);

                // Tab for Videos
                /*
                 * TabSpec videospec = tabHost.newTabSpec("Videos");
                 * videospec.setIndicator("Videos",
                 * getResources().getDrawable(R.drawable.icon_videos_tab)); Intent
                 * videosIntent = new Intent(this, VideosActivity.class);
                 * videospec.setContent(videosIntent);
                 */

                // Adding all TabSpec to TabHost
                tabHost.addTab(photospec); // Adding photos tab
                tabHost.addTab(songspec); // Adding songs tab
                // tabHost.addTab(videospec); // Adding videos tab
        }

}

DetailsActivity.java

package com.mink7.abs;

import android.os.Bundle;
import android.support.v4.view.ViewPager;
import com.viewpagerindicator.CirclePageIndicator;

public class DetailsActivity extends BaseSampleActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.place_details_layout);

        mAdapter = new TestFragmentAdapter(getSupportFragmentManager());

        mPager = (ViewPager)findViewById(R.id.pager);
        mPager.setAdapter(mAdapter);

        mIndicator = (CirclePageIndicator)findViewById(R.id.indicator);
        mIndicator.setViewPager(mPager);


    }
}

BaseSampleActivity.java

package com.mink7.abs;

import java.util.Random;

import com.viewpagerindicator.PageIndicator;

import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

public abstract class BaseSampleActivity extends FragmentActivity {
    private static final Random RANDOM = new Random();

    TestFragmentAdapter mAdapter;
    ViewPager mPager;
    PageIndicator mIndicator;
    //FragmentTabHost mTabHost;


    @Override
    public boolean onCreateOptionsMenu(Menu menu)
    {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.random:
                final int page = RANDOM.nextInt(mAdapter.getCount());
                Toast.makeText(this, "Changing to page " + page, Toast.LENGTH_SHORT);
                mPager.setCurrentItem(page);
                return true;

            case R.id.add_page:
                if (mAdapter.getCount() < 10) {
                    mAdapter.setCount(mAdapter.getCount() + 1);
                    mIndicator.notifyDataSetChanged();
                }
                return true;

            case R.id.remove_page:
                if (mAdapter.getCount() > 1) {
                    mAdapter.setCount(mAdapter.getCount() - 1);
                    mIndicator.notifyDataSetChanged();
                }
                return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

【问题讨论】：

嘿@HarshaMV！我正在寻找同样的解决方案，你能分享你教人们学习“如何得到这个”的博客链接吗？并请与我分享您的教程源链接..所以我会尝试在我的使用中制作那个 - 我必须创建相同类型的程序 - 其中一个标签中有两个标签我必须使用使用图像的查看页面滑块和下面我必须放置文本内容。
@Sun 我还没有为此写任何博客。但它非常前卫。我正在使用 Sherlock 操作栏。但是Android有原生的Action bar。所以它必须更容易让它工作
你能和我分享同样的示例代码吗？我的电子邮件 ID 是：kimdsouza139@yahoo.com

标签： android android-fragments android-viewpager android-tabs

【解决方案1】：

请注意，从 Android 4.2 或最新的兼容性库开始支持 Fragments 嵌套。以前它根本不受支持。至于下面的内容 - 只需将它们全部放在一个容器中

【讨论】：

哦，好吧。非常感谢。你的意思是说将视图寻呼机分配给一个容器，在它下面我可以添加常规布局并添加内容

【解决方案2】：

*我已经使用嵌套 Fragments(4.2) 成功实现了一个类似的项目。

对于嵌套片段，不要使用 getSupportFragmentManager()，而是使用 getChildFragmentManager()。

例如在 tabFragment 中使用 viewpagerFragment，示例代码是：

public class TabFragment extends Fragment 
{
public View onCreateView(LayoutInflater inflater, ViewGroup container, 
                                      Bundle savedInstanceState)
{
  ..
  ..
  ..
  mTabHost.setup(this.getActivity().getApplicationContext(),          
                                     getSupportFragmentManager(),R.layout.*);
  mTabHost.setOnTabChangedListener(tabChangeListener);
  mTabHost.addTab(mTabHost.newTabSpec("label").setIndicator("tag"),
                    ViewPagerFragment.class, arg);
}

public class ViewPagerFragment extends Fragment
{

@Override
public void onCreate(Bundle savedInstanceState) 
{
    super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle         
                         savedInstanceState) 
{
    return inflater.inflate(.......);
}
@Override
public void onViewCreated(View view, Bundle savedInstanceState)
{

    mViewPager = (ViewPager) view.findViewById(R.id.viewPager);
    mViewPager.setAdapter(new MyAdapter(getChildFragmentManager()));


}
public class MyAdapter extends FragmentPagerAdapter
{
    public MyAdapter(FragmentManager fm)
    {
        super(fm);
    }
    @Override
    public int getCount() 
    {
        return size;

    }

    @Override
    public Fragment getItem(int position) 
    {

    }

    @Override
    public CharSequence getPageTitle(int position) 
    {

    }

}*

【讨论】：

【解决方案3】：

我使用 holoeverwhere 来完成此操作，但是应该与 ABS 或“本机”类似地工作

public class FragmentTestTabs extends Fragment implements  ActionBar.TabListener, OnPageChangeListener {
    private ViewPager mViewPager;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
         getSupportActivity().getSupportActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); 
         getSupportActivity().getSupportActionBar().addTab( getSupportActivity().getSupportActionBar().newTab().setText(getString(R.string.firtsRow))
                        .setTabListener(this));
         getSupportActivity().getSupportActionBar().addTab( getSupportActivity().getSupportActionBar().newTab().setText(getString(R.string.secondRow))
         .setTabListener(this));
    }
    @Override
    public void onDestroyView() {
        super.onDestroyView();
        getSupportActivity().getSupportActionBar().removeAllTabs();
        getSupportActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
    }
    @Override
    public void onPause() {
        super.onPause();
    }
    @Override
    public void onResume() {
        super.onResume();
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_view_pager);
    }

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        mViewPager = (ViewPager) view.findViewById(R.id.pager);
        MyAdapter adapter = new MyAdapter(getChildFragmentManager());
        adapter.addFragment(new FragmentDiets());
        adapter.addFragment(new FragmentCurrentDiet());
        mViewPager.setOnPageChangeListener(this);
        mViewPager.setAdapter(adapter);
        mViewPager.setCurrentItem(0);
    }

    public class MyAdapter extends FragmentPagerAdapter {
        private final ArrayList<Fragment> mFragments = new ArrayList<Fragment>();

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

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

        }

        public void addFragment(Fragment fragment) {
            mFragments.add(fragment);
            notifyDataSetChanged();
        }

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

    }

    @Override
    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        if(mViewPager!=null)
        mViewPager.setCurrentItem(tab.getPosition());

    }

    @Override
    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
        // TODO Auto-generated method stub

    }

    @Override
    public void onTabReselected(Tab tab, FragmentTransaction ft) {
        // TODO Auto-generated method stub

    }
    @Override
    public void onPageScrollStateChanged(int arg0) {
        // TODO Auto-generated method stub

    }
    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
        // TODO Auto-generated method stub

    }
    @Override
    public void onPageSelected(int position) {
         getSupportActivity().getSupportActionBar().setSelectedNavigationItem(position);

    }

fragment_view_pager 只是一个 viewpager 视图：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
        android:id="@+id/pager" xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
     >
</android.support.v4.view.ViewPager>

【讨论】：