TabLayout，添加到标签

时间：2018-01-22 06:28:25

标签： android android-tablayout

我正在制作一个包含tablayout的屏幕。我正在尝试在标签中添加图片和文字。我成功添加到图像，但我找不到我的文字。 我想先添加图像，然后在图像下方添加文字。 当我首先添加文本时，我可以看到它们。但首先添加文字，我找不到文字。 我认为图像维度是个问题。这是我的代码。

这是MainActivity.java 

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager viewPager;

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


        LayoutInflater lay1 = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        LayoutInflater lay2 = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        LayoutInflater lay3 = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        LayoutInflater lay4 = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        View vtab1 = (View) lay1.inflate(R.layout.tab_list_item, null);
        View vtab2 = (View) lay2.inflate(R.layout.tab_list_item, null);
        View vtab3 = (View) lay3.inflate(R.layout.tab_list_item, null);
        View vtab4 = (View) lay4.inflate(R.layout.tab_list_item, null);

        ImageView tab_icon1 = (ImageView) vtab1.findViewById(R.id.menu_icon);
        tab_icon1.setImageResource(R.drawable.e11);
        TextView tab_text1 = (TextView) vtab1.findViewById(R.id.menu_text);
        tab_text1.setText("부스터");

        ImageView tab_icon2 = (ImageView) vtab2.findViewById(R.id.menu_icon);
        tab_icon2.setImageResource(R.drawable.e22);
        TextView tab_text2 = (TextView) vtab2.findViewById(R.id.menu_text);
        tab_text2.setText("이브이");

        ImageView tab_icon3 = (ImageView) vtab3.findViewById(R.id.menu_icon);
        tab_icon3.setImageResource(R.drawable.e33);
        TextView tab_text3 = (TextView) vtab3.findViewById(R.id.menu_text);
        tab_text3.setText("마릴");

        ImageView tab_icon4 = (ImageView) vtab4.findViewById(R.id.menu_icon);
        tab_icon4.setImageResource(R.drawable.e44);
        TextView tab_text4 = (TextView) vtab4.findViewById(R.id.menu_text);
        tab_text4.setText("마나피");


        tabLayout = (TabLayout) findViewById(R.id.tabLayout);


        tabLayout.addTab(tabLayout.newTab().setCustomView(vtab1));
        tabLayout.addTab(tabLayout.newTab().setCustomView(vtab2));
        tabLayout.addTab(tabLayout.newTab().setCustomView(vtab3));
        tabLayout.addTab(tabLayout.newTab().setCustomView(vtab4));


        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

        viewPager = (ViewPager) findViewById(R.id.pager);

        TabPagerAdapter pagerAdapter = new TabPagerAdapter(getSupportFragmentManager(), tabLayout.getTabCount());
        viewPager.setAdapter(pagerAdapter);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager.setCurrentItem(tab.getPosition());
            }

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

            }

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

            }
        });


    }

}

这是activity_main.xml 

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

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#ffffffcc"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

这是tab_list_item.xml 

<?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:orientation="vertical"
    android:id="@+id/menu_layout">

    <ImageView
        android:id="@+id/menu_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@+id/menu_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:gravity="center"
        android:textSize="14dp"/>

</LinearLayout>

4 个答案:

答案 0 :(得分：0)

请尝试这个

<?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:orientation="vertical"
android:id="@+id/menu_layout">

<ImageView
    android:id="@+id/menu_icon"
    android:layout_width="24dp"
    android:layout_height="24dp"/>

<TextView
    android:id="@+id/menu_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:gravity="center"
    android:textSize="14dp"/>

答案 1 :(得分：0)

在此下方更改您的 ab_list_item.xml 

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="@dimen/nav_icon"  //(or)24dp hard code like this
        android:scaleType="centerInside"
        android:id="@+id/nav_icon"
        android:layout_marginBottom="@dimen/tiny_padding"/>

    <TextView
        android:id="@+id/nav_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@string/font_fontFamily_medium"
        android:shadowColor="@android:color/black"
        android:textColor="@color/dark_grey"
        android:textSize="@dimen/nav_tab_label_font_size"
        tools:text="@string/nav_home" />

</LinearLayout>

答案 2 :(得分：0)

另一种方法是使用SpannableString将图标和文本添加到TabLayout：

public class ViewPagerAdapter extends FragmentStatePagerAdapter {

private String tabs[] = {"one","two","three","four"};


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

@Override
public Fragment getItem(int position) {

   return ParentCategoryFragment.newInstance();

}

@Override
public int getCount() {
    return tabs.length;
}

@Override
public CharSequence getPageTitle(int position) {
    Drawable image =   context.getResources().getDrawable(imageResId[position]);
    image.setBounds(0, 0, image.getIntrinsicWidth(),  image.getIntrinsicHeight());
    // Replace blank spaces with image icon
    SpannableString sb = new SpannableString("   " + tabTitles[position]);
    ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
    sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    return sb;
}

}

默认情况下，TabLayout创建的选项卡将textAllCaps属性设置为true，这会阻止ImageSpans呈现。您可以通过更改tabTextAppearance属性来覆盖此行为。

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
  <item name="tabTextAppearance">@style/MyCustomTextAppearance</item>
</style>

<style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab">
  <item name="textAllCaps">false</item>
</style>

答案 3 :(得分：0)

使用此

String[] tabsTitles = {
  getString(R.string.tab_title_1),
  getString(R.string.tab_title_2),
  getString(R.string.tab_title_3),
  getString(R.string.tab_title_4)};

 int[] tabsIcons = {
  R.drawable.tab_icon_1,
  R.drawable.tab_icon_2,
  R.drawable.tab_icon_3};
  R.drawable.tab_icon_4};

  for (int i = 0; i < tabLayout.getTabCount(); i++) {
      LinearLayout customTab = (LinearLayout) LayoutInflater.from(this)
          .inflate(R.layout.custom_tab, null);
      TextView tab_text = customTab.findViewById(R.id.tabContent);
      tab_text.setText("  " + tabsTitles[i]);
      tab_text.setCompoundDrawablesWithIntrinsicBounds(tabsIcons[i], 0, 0, 0);
      tabLayout.getTabAt(i).setCustomView(tab_text);
  }
相关问题
最新问题