Android：改变tabhost tabbar的样式，就像actionbar tabbar一样

Question

我想改变 tabhost tabbar 的样式，和 actionbar tababar 一样，我尝试在图中显示。我该怎么做？请帮助我提前谢谢。

我想将样式从 (1) 更改为 (2)。

我的代码如下。

类

package com.android.timeline;

     @SuppressLint({ "SimpleDateFormat", "NewApi" })
 public class MainActivity extends FragmentActivity implements ActionBar.TabListener
{
    public int width;
    private ActionBar actionBar;
    private TextView actionBarTitle;
    private TabPagerAdapter TabAdapter;
            ArrayList<Fragment> fragmentlist = new ArrayList<Fragment>();
    private ViewPager Tab;
    private String[] tabs = { "About", "Watch Next", "Related" };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        fragmentlist.add(new AboutDetail());
        fragmentlist.add(new WatchNextDetail());
        fragmentlist.add(new RelatedDetail());
        currentAboutDetail = fragmentlist.get(0);
        TabAdapter = new TabPagerAdapter(getSupportFragmentManager());
        Tab = (ViewPager) findViewById(R.id.pager);
        Tab.setOffscreenPageLimit(2);
        pagerchangeListener();

    }
    private void pagerchangeListener() {

        Tab.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                 actionBar.setSelectedNavigationItem(position);
            }
        });
        Tab.setAdapter(TabAdapter);
    }

    @Override
    public void onSaveInstanceState(Bundle savedInstanceState) {
        super.onSaveInstanceState(savedInstanceState);
        savedInstanceState.putInt("mMyCurrentPosition", Tab.getCurrentItem());
    }

    @Override
    public void onRestoreInstanceState(Bundle savedInstanceState) {
        super.onRestoreInstanceState(savedInstanceState);
        mMyCurrentPosition = savedInstanceState.getInt("mMyCurrentPosition");
        // where mMyCurrentPosition should be a public value in your activity.
    }



    @Override
    public void onCreateContextMenu(ContextMenu menu, View v,
            ContextMenuInfo menuInfo) {
        super.onCreateContextMenu(menu, v, menuInfo);
    }



    public class TabPagerAdapter extends FragmentStatePagerAdapter {
        public TabPagerAdapter(FragmentManager fm) {
            super(fm);
            // TODO Auto-generated constructor stub
        }

        @Override
        public Fragment getItem(int i) {
            Log.e("LOG", "Position || " + i);
            return fragmentlist.get(i);
        }

        @Override
        public int getCount() {
            return fragmentlist.size(); // No of Tabs
        }

        @Override
        public void destroyItem(View container, int position, Object object) {

        }
    }

    @Override
    public void onTabSelected(android.app.ActionBar.Tab tab,
            FragmentTransaction ft) {
        // TODO Auto-generated method stub
          Tab.setCurrentItem(tab.getPosition());
    }

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

    }

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

    }
}

xml

<RelativeLayout
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=".MainActivity" >


<TabHost
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:orientation="horizontal" />

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

        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
    </LinearLayout>
</TabHost>

</RelativeLayout>

Answer 1

尝试如下。请通过FragmentTabHost 和ViewPager with FragmentPagerAdapter

ma​​in.xml

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

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

        <TabWidget
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:orientation="horizontal" />

        <FrameLayout
            android:id="@+id/tabFrameLayout"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
    </LinearLayout>

</android.support.v4.app.FragmentTabHost>

MainActivity.java

public class MainActivity extends FragmentActivity {
    private FragmentTabHost mTabHost;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);
        mTabHost = (FragmentTabHost) findViewById(R.id.tabhost);
        mTabHost.setup(this, getSupportFragmentManager(), R.id.tabFrameLayout);

        mTabHost.addTab(
                mTabHost.newTabSpec("tab1").setIndicator("Tab 1",
                        getResources().getDrawable(android.R.drawable.star_on)),
                FragmentTab1.class, null);
        mTabHost.addTab(
                mTabHost.newTabSpec("tab2").setIndicator("Tab 2",
                        getResources().getDrawable(android.R.drawable.star_on)),
                FragmentTab2.class, null);

    }
}

Answer 2

此任务请参考此链接http://wptrafficanalyzer.in/blog/implement-swiping-between-tabs-with-viewpager-in-action-bar-using-sherlock-library/