如何在 Android ViewPager 中实现自定义 tabview？

Question

请问我们如何在 Android 中使用 Viewpager 实现以下布局：

1) 所需视图

2)尝试的技术/方法：

有一个带有 Viewpager 的 Activity 和一个 FragmentPagerAdapter 来为每个选项卡返回适当的 Fragment。 我尝试了以下答案/库：

Custom viewpager tabs with custom view, multiple fragment and layouts

Viewpager in Android with fixed tabs at bottom with Icon and Text in each tab

http://viewpagerindicator.com/

我也尝试在app Theme中设置ActionbarStyle，但它所有的规则都适用于ActionBar，而不是view pager的标签视图。

<style name="MyTheme" parent="android:Theme.Holo.Light">
        <item name="android:actionBarStyle">@style/MyCustomActionBar</item>
        <item name="android:actionBarTabStyle">@style/ActionBarTabStyle</item>
        <item name="android:actionBarSize">100dp</item>
    </style>

    <style name="ActionBarTabStyle" parent="@android:style/Widget.Holo.ActionBar.TabView">
        <item name="android:minHeight">200dp</item>
    </style>


    <style name="MyCustomActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">@color/white</item>
        <item name="android:height">100dp</item>
    </style>

3) 当前视图：

这是viewpager当前的tabview，不好看：

4) XML 布局：

活动布局：

<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="match_parent"
   />

当前片段布局：

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/new_deliver_scroll"
    >
<LinearLayout  android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"

    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:background="@color/background_material_light"
    android:id="@+id/newDeliverMain"
    >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/new_deliver_main_linear"
    >
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:orientation="horizontal"
        android:id="@+id/relative_layout_item_info"
        >

        <TextView android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/Item_desc"
            android:id="@+id/new_deliver_item_desc_text"
            android:textColor="@color/app_blue"

            />

...........

5) 在Activity中创建自定义tabview的代码：

viewPagerAdapter = new SenderViewPagerAdapter( getSupportFragmentManager());
        viewPager = (ViewPager) findViewById(R.id.pager);

        viewPager.setAdapter( viewPagerAdapter);

        actionBar = getActionBar();
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        viewPager.setOnPageChangeListener(
                new ViewPager.SimpleOnPageChangeListener() {
                    @Override
                    public void onPageSelected(int position) {
                        actionBar.setSelectedNavigationItem(position);
                    }
                    @Override
                    public void onPageScrolled(int arg0, float arg1, int arg2) {
                    }
                    @Override
                    public void onPageScrollStateChanged(int arg0) {
                    }
                });
        for (int i = 0; i < viewPagerAdapter.getCount(); i++) {

            ActionBar.Tab newTab = actionBar.newTab();
            newTab.setCustomView(R.layout.custom_actionbar);
            newTab.setTabListener(this);

            TextView title = (TextView) newTab.getCustomView().findViewById(R.id.tab_title);
            ImageView icon = (ImageView)newTab.getCustomView().findViewById(R.id.tab_icon);
            title.setText(viewPagerAdapter.getPageTitle(i));
            icon.setImageResource(ICONS[i]);
            actionBar.addTab(newTab);
       }

经过几次尝试，我暂时卡在了这里。任何想法、建议如何实现所需的视图将不胜感激。非常感谢。

6) 更新

不适用于：
icon.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));

@参考@karaokyo 答案： 我切换到使用单选按钮而不是操作栏，它工作正常，只是更多的自定义。

检查时更改图像：

Drawable top = getResources().getDrawable(R.drawable.image);
button.setCompoundDrawablesWithIntrinsicBounds(null, top , null, null);

对于单选按钮，很难以编程方式更改顶部图像的大小，最好调整图像本身的大小 > 花了我 2 个小时弄清楚。

Answer 1

如果您需要如此多的自定义，则没有理由使用操作栏选项卡。它也已被弃用，所以就是这样。如果我这样做，我可能会为标签使用RadioGroup：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/tabs">
        <RadioButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:drawableTop="@drawable/new_delivery"
            android:button="@null"
            android:text="New Delivery"
            android:id="@+id/new_delivery"
            android:background="@drawable/checked_background_indicator"
            android:checked="true"
            style="?android:attr/borderlessButtonStyle"/>
        <RadioButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:drawableTop="@drawable/job_history"
            android:button="@null"
            android:text="Job History"
            android:id="@+id/job_history"
            android:background="@drawable/checked_background_indicator"
            style="?android:attr/borderlessButtonStyle"/>
        <RadioButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:drawableTop="@drawable/track_delivery"
            android:button="@null"
            android:text="Track Delivery"
            android:id="@+id/track_delivery"
            android:background="@drawable/checked_background_indicator"
            style="?android:attr/borderlessButtonStyle"/>
    </RadioGroup>
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/tabs"
        android:layout_alignParentBottom="true"/>
</RelativeLayout>

checked_background_indicator.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@color/accent" />
</selector>

然后将它们与侦听器挂钩：

mTabs.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        switch (checkedId) {
            case R.id.new_delivery:
                mViewPager.setCurrentItem(0);
                break;
            case R.id.job_history:
                mViewPager.setCurrentItem(1);
                break;
            case R.id.track_delivery:
                mViewPager.setCurrentItem(2);
        }
    }
});

mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        switch(position){
            case 0:
                mTabs.check(R.id.new_delivery);
                break;
            case 1:
                mTabs.check(R.id.job_history);
                break;
            case 2:
                mTabs.check(R.id.track_delivery);
                break;
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
});