如何在 android 中显示这种类型的 TabLayout 选项卡？

Question

在标签布局中显示这种类型的标签

我试过但没有得到正确的输出

我的代码在这里

private int[] imageList= {R.drawable.icon_category,R.drawable.icon_newest};

 tabLayout=(TabLayout)findViewById(R.id.tabs);
    tabLayout.addTab(tabLayout.newTab().setText(""));
    tabLayout.addTab(tabLayout.newTab().setText(""));


    for (int i = 0; i < imageList.length; i++) {
        tabLayout.getTabAt(i).setIcon(imageList[i]);
    }

Answer 1

使用自定义选项卡尝试以下操作

主布局xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="45dp"
    android:background="?attr/colorPrimary"
    app:tabIndicatorHeight="0dp"

    />

<android.support.v4.view.ViewPager

    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_marginTop="?android:actionBarSize"
    android:layout_weight="1" />
</LinearLayout>

主要活动类

public class MainActivity extends AppCompatActivity {

private TabLayout mTabLayout;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
    mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
    final MyPagerAdapter pagerAdapter = new MyPagerAdapter(getSupportFragmentManager());
    if (viewPager != null)
        viewPager.setAdapter(pagerAdapter);
    viewPager.setOffscreenPageLimit(2);
    mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
    if (mTabLayout != null) {
        mTabLayout.setupWithViewPager(viewPager);

        for (int i = 0; i < mTabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = mTabLayout.getTabAt(i);
            if (tab != null)
                tab.setCustomView(pagerAdapter.getTabView(i));
        }

        mTabLayout.getTabAt(0).getCustomView().setSelected(true);
    }
    pagerAdapter.SetOnSelectView(mTabLayout, 0);

    mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            int c = tab.getPosition();
            pagerAdapter.SetOnSelectView(mTabLayout, c);
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            int c = tab.getPosition();
            pagerAdapter.SetUnSelectView(mTabLayout, c);
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });
}

private class MyPagerAdapter extends FragmentPagerAdapter {

    public final int PAGE_COUNT = 3;
    TextView title;
    private final String[] mTabsTitle = {"Events", "News", "Contacts"};

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

    public View getTabView(int position) {
        // Given you have a custom layout in `res/layout/custom_tab.xml` with a TextView and ImageView
        View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.custom_tab, null);
        title = (TextView) view.findViewById(R.id.title);
        title.setText(mTabsTitle[position]);
        return view;
    }

    public void SetOnSelectView(TabLayout tabLayout, int position) {
        TabLayout.Tab tab = tabLayout.getTabAt(position);
        View selected = tab.getCustomView();
        TextView iv_text = (TextView) selected.findViewById(R.id.title);
        iv_text.setTextColor(getApplicationContext().getResources().getColor(R.color.colorwhite));
    }

    public void SetUnSelectView(TabLayout tabLayout, int position) {
        TabLayout.Tab tab = tabLayout.getTabAt(position);
        View selected = tab.getCustomView();
        TextView iv_text = (TextView) selected.findViewById(R.id.title);
        iv_text.setTextColor(getApplicationContext().getResources().getColor(R.color.colorblack));
    }

    @Override
    public Fragment getItem(int pos) {

        switch (pos) {

            case 0:
                return TestFragemt.newInstance("", "");


            case 1:
                return NewTestFragment.newInstance("", "");

            case 2:
                return TestFragemt.newInstance("", "");
        }

        return null;
    }

    @Override
    public int getCount() {
        return PAGE_COUNT;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mTabsTitle[position];
    }
}
}

自定义选项卡布局 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="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/tab_color_selector"
android:gravity="center"
android:orientation="vertical"

>
<TextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ellipsize="end"
    android:maxLines="1"
    android:padding="7dp"
    android:textStyle="bold"
    android:textAllCaps="false"
    android:textColor="#000000"
    android:textSize="12sp"
    tools:text="Recents" />

  </LinearLayout>

drawable 中的tab_color_selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/bagselected" 
 android:state_selected="true"/>
<item android:drawable="@drawable/bag" android:state_pressed="true"/>
<item android:drawable="@drawable/bag"/>
</selector>

TestFrgment 类

public class TestFragemt extends Fragment  {
// TODO: Rename parameter arguments, choose names that match
// the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
private static final String ARG_PARAM1 = "param1";
private static final String ARG_PARAM2 = "param2";


public TestFragemt() {
    // Required empty public constructor
}

/**
 * Use this factory method to create a new instance of
 * this fragment using the provided parameters.
 *
 * @param param1 Parameter 1.
 * @param param2 Parameter 2.
 * @return A new instance of fragment TestFragemt.
 */
// TODO: Rename and change types and number of parameters
public static TestFragemt newInstance(String param1, String param2) {
    TestFragemt fragment = new TestFragemt();
    Bundle args = new Bundle();
    args.putString(ARG_PARAM1, param1);
    args.putString(ARG_PARAM2, param2);
    fragment.setArguments(args);
    return fragment;
}

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

}


@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment

    View rootview = inflater.inflate(R.layout.testfragment, container, 
false);

    return rootview;

}



}

测试片段布局 xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Fragment 1"/>
</LinearLayout>

NewTestFragment 类

public class NewTestFragment extends Fragment {
// TODO: Rename parameter arguments, choose names that match
// the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
private static final String ARG_PARAM1 = "param1";
private static final String ARG_PARAM2 = "param2";

public NewTestFragment() {
    // Required empty public constructor
}

/**
 * Use this factory method to create a new instance of
 * this fragment using the provided parameters.
 *
 * @param param1 Parameter 1.
 * @param param2 Parameter 2.
 * @return A new instance of fragment TestFragemt.
 */
// TODO: Rename and change types and number of parameters
public static NewTestFragment newInstance(String param1, String param2) {
    NewTestFragment fragment = new NewTestFragment();
    Bundle args = new Bundle();
    args.putString(ARG_PARAM1, param1);
    args.putString(ARG_PARAM2, param2);
    fragment.setArguments(args);
    return fragment;
}

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

}


@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment

    View rootview = inflater.inflate(R.layout.new_fragment, container, 
 false);

    return rootview;

}



}

newtestfragment xml 布局

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Fragment 2"/>
</LinearLayout>

drawable 中的bagselected xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#000000"/>
<stroke android:width="1dip" android:color="#000000" />
<corners android:radius="15dip"/>
<padding android:left="0dip" android:top="0dip" android:right="0dip" 
 android:bottom="0dip" />
 </shape>

drawable 中的bag xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffff"/>
<stroke android:width="1dip" android:color="#ffffff" />
<corners android:radius="15dip"/>
<padding android:left="0dip" android:top="0dip" android:right="0dip" 
android:bottom="0dip" />
</shape>

输出：

要减少标签之间的空间，请使用 tabPaddingStart 和 tabPaddingEnd

  <android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    app:tabMode="scrollable"
    app:tabIndicatorHeight="0dp"
    app:tabPaddingStart="2dp"
    app:tabPaddingEnd="2dp"

    />