就像把图标和文字放在标签（滑动标签）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);