Android设计支持库TabLayout使用自定义选项卡布局,但布局包装选项卡

Question

在选项卡自定义布局中,我将其父元素match_parent设置为并设置其背景颜色.当我运行它时,标签显示自定义布局包装元素imageview和textview.我希望这个自定义布局将填充选项卡,选项卡之间没有任何空格.检查输出:

private void setupTabLayout(ViewPager viewPager, ViewPagerAdapter viewPagerAdapter) {
    TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
    tabLayout.setupWithViewPager(viewPager);

    int length = tabLayout.getTabCount();
    for (int i = 0; i < length; i++) {
        tabLayout.getTabAt(i).setCustomView(viewPagerAdapter.getTabView(i));
    }
}

tab_layout.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/layout"
    android:background="@color/grey_accent">

    <ImageView
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/icon"
        android:src="@drawable/ic_action_home"
        android:layout_marginBottom="19dp"
        android:layout_above="@+id/title"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_gravity="center"
        android:textColor="@color/white"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Home"
        android:id="@+id/title"
        android:layout_marginBottom="259dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

ViewPagerAdapter:

public View getTabView(int position) {
    View view = LayoutInflater.from(this.context).inflate(R.layout.tab_layout, null);
    TextView title = (TextView) view.findViewById(R.id.title);
    ImageView icon = (ImageView) view.findViewById(R.id.icon);
    ViewGroup layout = (ViewGroup) view.findViewById(R.id.layout);

    layout.setBackgroundResource(this.mColorList.get(position));
    icon.setImageResource(this.mIconList.get(position));
    title.setText(this.getPageTitle(position));

    return view;
}

Answer 1

试试这个

<android.support.design.widget.TabLayout
    app:tabPaddingStart="-1dp"
    app:tabPaddingEnd="-1dp"/>

我在这里找到了

Answer 2

您可以使用材料设计 tablayout，然后为所有选项卡提供自定义视图。如需完整参考，请访问：自定义表格布局示例

所有选项卡的自定义视图可以是这样的：

<?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:gravity="center"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:id="@+id/ll"
        android:orientation="horizontal"
        android:layout_weight="1"
        android:gravity="center">

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/ic_launcher"/>
        <TextView
            android:id="@+id/tvtab1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ONE"
            android:textColor="@color/colorAccent"
            android:textSize="14sp"
            android:textStyle="bold" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/ll2"
        android:orientation="vertical"
        android:gravity="center">
        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/ic_launcher"/>

        <TextView
            android:id="@+id/tvtab2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TWO"
            android:textColor="#26e9dc"
            android:textSize="14sp"
            android:textStyle="bold" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/ll3"
        android:orientation="vertical"
        android:gravity="center">

        <TextView
            android:id="@+id/tvtab3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="THREE"
            android:textColor="#d8ea2b"
            android:textSize="14sp"
            android:textStyle="bold" />
        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/ic_launcher"/>
    </LinearLayout>
</LinearLayout>

活动 xml 文件的代码 (activity_main.xml)

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabTextColor="#fff"
            app:tabSelectedTextColor="#000"
            app:tabGravity="fill"
            app:tabMode="fixed" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

MainActivity.java 的最终代码

import android.content.Context;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    public ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);

        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);

        View headerView = ((LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE))
                .inflate(R.layout.custom_tab, null, false);

        LinearLayout linearLayoutOne = (LinearLayout) headerView.findViewById(R.id.ll);
        LinearLayout linearLayout2 = (LinearLayout) headerView.findViewById(R.id.ll2);
        LinearLayout linearLayout3 = (LinearLayout) headerView.findViewById(R.id.ll3);

        tabLayout.getTabAt(0).setCustomView(linearLayoutOne);
        tabLayout.getTabAt(1).setCustomView(linearLayout2);
        tabLayout.getTabAt(2).setCustomView(linearLayout3);

    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new OneFragment(), "ONE");
        adapter.addFragment(new TwoFragment(), "TWO");
        adapter.addFragment(new ThreeFragment(), "THREE");
        viewPager.setAdapter(adapter);
    }

    class ViewPagerAdapter extends FragmentPagerAdapter {
        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();
        }

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

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

Answer 3

当您使用 时，您是在说根本inflate(R.layout.tab_layout, null)没有父级。根据此专业提示View，这会导致所有layout_属性被丢弃。

相反，您应该传入TabLayoutand false（即，不要自动附加View）：这可确保属性不会被忽略。

public View getTabView(TabLayout tabLayout, int position) {
    View view = LayoutInflater.from(this.context)
        .inflate(R.layout.tab_layout, tabLayout, false);
    TextView title = (TextView) view.findViewById(R.id.title);
    ImageView icon = (ImageView) view.findViewById(R.id.icon);
    ViewGroup layout = (ViewGroup) view.findViewById(R.id.layout);

    layout.setBackgroundResource(this.mColorList.get(position));
    icon.setImageResource(this.mIconList.get(position));
    title.setText(this.getPageTitle(position));

    return view;
}