2016-11-30 70 views
8

android中的TabLayout類爲您提供了一個TabItem,它可以讓您指定文本和圖標。 是否可以使用自定義視圖作爲TabItem?可以將自定義視圖用作TabItem嗎?

我的標籤應該是這樣的

enter image description here

,你可以除了圖標和文本標籤看,我也有一個通知符號(數字的黃色圓圈內)。我怎樣才能製作這樣的標籤?

回答

17

在某些情況下,我們可能希望爲每個選項卡應用自定義XML佈局,而不是默認選項卡視圖。爲了實現這一目標,遍歷所有的TabLayout.Tabs滑動標籤附加到尋呼機後:

public class MainActivity extends AppCompatActivity { 

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

     // Get the ViewPager and set it's PagerAdapter so that it can display items 
     ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager); 
     SampleFragmentPagerAdapter pagerAdapter = 
      new SampleFragmentPagerAdapter(getSupportFragmentManager(), MainActivity.this); 
     viewPager.setAdapter(pagerAdapter); 

     // Give the TabLayout the ViewPager 
     TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs); 
     tabLayout.setupWithViewPager(viewPager); 

     // Iterate over all tabs and set the custom view 
     for (int i = 0; i < tabLayout.getTabCount(); i++) { 
      TabLayout.Tab tab = tabLayout.getTabAt(i); 
      tab.setCustomView(pagerAdapter.getTabView(i)); 
     } 
    } 

    //... 
} 

接下來,我們將getTabView(位置)方法添加到SampleFragmentPagerAdapter類:

public class SampleFragmentPagerAdapter extends FragmentPagerAdapter { 
    private String tabTitles[] = new String[] { "Tab1", "Tab2" }; 
    private int[] imageResId = { R.drawable.ic_one, R.drawable.ic_two }; 

    public View getTabView(int position) { 
     // Given you have a custom layout in `res/layout/custom_tab.xml` with a TextView and ImageView 
     View v = LayoutInflater.from(context).inflate(R.layout.custom_tab, null); 
     TextView tv = (TextView) v.findViewById(R.id.textView); 
     tv.setText(tabTitles[position]); 
     ImageView img = (ImageView) v.findViewById(R.id.imgView); 
     img.setImageResource(imageResId[position]); 
     return v; 
    } 

} 

隨着這可以爲適配器中的每個頁面設置任何自定義選項卡內容。

SOURCE

+0

當然!不能相信我沒有看到Tablayout.Tab類中的setCustomView。 謝謝 –

+0

但它不能在onTabChange監聽器上工作,以高亮顯示的顏色顯示選定的Tab –

相關問題