將圖標添加到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; 
}