喜欢把标签和文字放在标签(滑动标签)android?

时间:2015-06-22 02:22:17

标签: android android-layout android-fragments android-activity material-design

我需要使用此外观(图标和文字)创建我的应用程序: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>

片段中的方法(Tab):

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,但它对我不起作用:(

有人可以帮我吗?

3 个答案:

答案 0 :(得分:2)

请参阅我的回答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;

代替“你好”使用你的头衔。

希望它会有所帮助。

答案 1 :(得分:0)

您可以非常轻松地完成以下任务。 首先在布局文件夹下创建新的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;
    }

并在 OnCreate 下的 MainActivity 中放置此行(如果该行尚未存在)。

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


                                                 Hope it answer the Question.

答案 2 :(得分:0)

使用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);