就像把圖標和文字放在標籤（滑動標籤）android？

Question

我需要讓我的應用程序使用此外觀（圖標和文本）：https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsbHJuWi04N0ZIc0E/components_tabs_usage_mobile7.png

但到目前爲止，我只能離開它是這樣的：http://i.imgur.com/npz0eRJ.png

我該如何解決這個問題？

按照我的XML標籤：在片段（標籤）

<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" 
    android: layout_width = "match_parent" 
    android: layout_height = "match_parent" 
    android: gravity = "center"> 

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

        <TextView 
            android: TEXTSIZE = "14sp" 
            android: textColor = "@ android: color/white" 
            android: id = "@ + id/tv_tab" 
            android: layout_width = "wrap_content" 
            android: layout_height = "wrap_content" /> 


</ LinearLayout> 

方法：

public CharSequence getPageTitle (int position) { 

    Drawable tab = mContext.getResources() getDrawable (icons [position]).; 
            tab.setBounds (0, 0, heightIcon, heightIcon); 



            ImageSpan ImageSpan is = new (tab); 
            SpannableString sp = new SpannableString (titles [position]); 
            sp.setSpan (s, sp.length() - 1, sp.length(), 0); 

            return sp; 

我試圖按照Need to center-align a single portion of text in a TextView，但它並沒有爲我工作:(

燦任何人都可以幫我嗎？

Answer 1

看到我的回答Here並關注它正確。

一點點改變這裏將這樣的伎倆：

Drawable image = getActivity().getResources().getDrawable(R.drawable.ic_launcher); 
image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight()); 
SpannableString sb = new SpannableString(" \n"+"hello"); 
ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM); 
sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); 
return sb; 

到位「你好」用你的稱號。

希望它會有所幫助。

Answer 2

你可以很容易地完成你的任務。 首先在佈局文件夾下創建新的XML。給它命名[custom_tab_view]然後粘貼下面的代碼。

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:ripple="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    android:background="@drawable/custom_bg" 
    android:padding="8dp"> 

    <!--<com.andexert.library.RippleView 
     android:id="@+id/more" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     ripple:rv_centered="true">--> 

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

     <TextView 
      android:id="@+id/tabText" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:gravity="bottom|center" /> 


</LinearLayout> 

現在去你ViewPageAdapter和下面的代碼替換您的函數[的CharSequence。

// This method return the titles for the Tabs in the Tab Strip 
    @Override 
    public CharSequence getPageTitle(int position) { 
     //return Titles[position]; 
     Drawable image = mContext.getResources().getDrawable(imageResId[position]); 
     image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight()); 
     //image.setBounds(0, 0, 64, 64); 
     ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM); 
     SpannableString sb = new SpannableString(" "); 
     sb.setSpan(imageSpan, 0, sb.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); 


     return sb; 
    } 

，並在MainActivity下的OnCreate把這一行，如果它已不存在。

SlidingTabLayout tabs; 
tabs.setCustomTabView(R.layout.custom_tab_view, R.id.tabText); 


               Hope it answer the Question. 

Answer 3

使用在Android Studio中的默認選項卡式活動，只需添加以下內容：

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs); 
tabLayout.setupWithViewPager(mViewPager); 

tabLayout.getTabAt(0).setIcon(R.drawable.image_1); 
tabLayout.getTabAt(1).setIcon(R.drawable.image_2); 
tabLayout.getTabAt(2).setIcon(R.drawable.image_3);