将图标添加到Android中的TabLayout中的选项卡中

Question

我想将图标添加到Android中的TabLayout中的我的选项卡中。 我试过图标数组和getTitle方法。我没有得到任何图标。 选项卡仅保留标题文本，标题文本数组中的文本完全不用。 这里是我的代码：

import statements... 

public class scatter extends FragmentActivity { 
    some variable declarations... 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_scatter); 
     sensorUID = getIntent().getStringExtra("sUID"); 
     tankname = getIntent().getStringExtra("tNAME"); 
     SCALE_C = (getIntent().getStringExtra("tSCALEC")); 
     SCALE_M = (getIntent().getStringExtra("tSCALEM")); 
     DPs = (getIntent().getStringExtra("tDP")); 
     UNITs = (getIntent().getStringExtra("tUNIT")); 
     numVar = Integer.parseInt(DPs); 

     final ViewPager pager = (ViewPager) findViewById(R.id.viewPager); 
     pager.setAdapter(new MyPagerAdapter(getSupportFragmentManager())); 

     TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout); 
     tabLayout.addTab(tabLayout.newTab().setText("Graph")); 
     tabLayout.addTab(tabLayout.newTab().setText("Values")); 

     tabLayout.setTabGravity(TabLayout.GRAVITY_FILL); 
     pager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout)); 
     tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 

      @Override 
      public void onTabSelected(TabLayout.Tab tab) { 
       pager.setCurrentItem(tab.getPosition()); 
      } 

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

      } 

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

      } 
     }); 

    } 



    private class MyPagerAdapter extends FragmentPagerAdapter { 


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

     @Override 
     public Fragment getItem(int pos) { 
      Fragment fragment; 
      Bundle args = new Bundle(); 
      args.putString("senID", sensorUID); 
      args.putInt("numVar", numVar); 

      switch (pos) { 
       case 0: 
        fragment = FirstFragment.newInstance("FirstFragment, Instance 1"); 
        break; 
       case 1: 
        fragment = SecondFragment.newInstance("SecondFragment, Instance 1"); 
        break; 
       default: 
        fragment = FirstFragment.newInstance("FirstFragment, Instance 1"); 
        break; 
      } 
      fragment.setArguments(args); 
      return fragment; 
     } 


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

Answer 1

TabLayout.Tab有setIcon()方法。

TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout); 
    tabLayout.addTab(tabLayout.newTab().setText("Graph").setIcon(R.drawable.ic_graph)); 
    tabLayout.addTab(tabLayout.newTab().setText("Values").setIcon(R.drawable.ic_values)); 

Answer 2

由activesince您可以使用公司招聘

自定义选项卡布局定义在styles.xml自定义样式，然后应用样式到您的TabLayout说：

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout"> 
<item name="tabIndicatorColor">#0000FF</item> 
</style> 

然后，您可以替代TabLayout覆盖此样式：

<android.support.design.widget.TabLayout 
    android:id="@+id/tabs" 
    style="@style/MyCustomTabLayout" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> 
</android.support.design.widget.TabLayout> 

有可配置的TabLayout其他几个样式：

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout"> 
<item name="tabMaxWidth">@dimen/tab_max_width</item> 
<item name="tabIndicatorColor">?attr/colorAccent</item> 
<item name="tabIndicatorHeight">2dp</item> 
<item name="tabPaddingStart">12dp</item> 
<item name="tabPaddingEnd">12dp</item> 
<item name="tabBackground">?attr/selectableItemBackground</item> 
<item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item> 
<item name="tabSelectedTextColor">?android:textColorPrimary</item> 
</style> 

<style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab"> 
<item name="android:textSize">14sp</item> 
<item name="android:textColor">?android:textColorSecondary</item> 
<item name="textAllCaps">true</item> 
</style> 

目前，TabLayout类不提供一个干净的抽象模型，允许在标签的图标。有许多贴变通方法，其中之一是返回一个SpannableString，含有在ImageSpan您的图标，从

如在下面的代码段中所示PagerAdapter的getPageTitle（位置）方法：

private int[] imageResId = { 
    R.drawable.ic_one, 
    R.drawable.ic_two, 
    R.drawable.ic_three}; 
public CharSequence getPageTitle(int position) {  
Drawable image = ContextCompat.getDrawable(context, imageResId[position]); 
image.setBounds(0, 0, image.getIntrinsicWidth(),   

image.getIntrinsicHeight()); 
SpannableString sb = new SpannableString(" "); 
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> 

你可以用这个作为后续 @Override 公共CharSequence的getPageTitle（INT位置）添加图标加文字{// 根据项目位置 绘制的图像= context.getResources（）生成标题。getDrawable （imageResId [位置]）; 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; 
}