Android 操作栏选项卡，将图标和文本样式化在一起答案

【问题标题】：Android Action Bar Tabs, Styling the Icon and Text togetherAndroid 操作栏选项卡，将图标和文本样式化在一起
【发布时间】：2016-04-28 16:50:04
【问题描述】：

首先是我当前标签栏的图片

我想要的是将图像向左对齐，同时保持文本居中或将图像移动到居中的文本顶部。

这是我添加文本的方式：

var tab = this.ActionBar.NewTab ();            
tab.SetText (tabText);
tab.SetIcon (iconResourceId);

这是我的相关 style.xml 条目：

<style name="Theme.Discover" parent="@android:style/Theme.Holo.Light">
    <item name="android:actionBarStyle">@style/MyActionBar</item>
    <item name="android:actionBarTabStyle">@style/MyActionBarTabStyle</item>
    <item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>
    <item name="android:actionMenuTextColor">#ffffff</item>
    <item name="android:windowBackground">@drawable/bg</item>
</style>

<style name="MyActionBarTabStyle" parent="@android:style/Widget.Holo.Light.ActionBar.TabView">
    <item name="android:background">@drawable/action_tab_selector</item>
</style> 

<!-- ActionBar tabs text styles -->
<style name="MyActionBarTabText"
       parent="@android:style/Widget.Holo.ActionBar.TabText">
    <item name="android:textColor">#ffffff</item>
</style>

我也能看懂 Java 代码，所以如果你不熟悉 Xamarin，我仍然很欣赏 Java 示例和答案。

【问题讨论】：

标签： android xamarin.android xamarin

【解决方案1】：

我的解决方案并不完美，但将图标移动到此处是我目前所拥有的，这可能会对您有所帮助。

TabLayout.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <ImageView
        android:id="@+id/tab_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent" />
    <TextView
        android:id="@+id/tab_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

MainActivity.cs

 void AddTabToActionBar(int labelResourceId, int iconResourceId)
        {
            var tab = this.ActionBar.NewTab();
            tab.SetCustomView(Resource.Layout.Tablayout);
            tab.CustomView.FindViewById<ImageView>(Resource.Id.tabImage).SetImageResource(iconResourceId);
            tab.CustomView.FindViewById<TextView>(Resource.Id.tabText).SetText(labelResourceId);
            tab.TabSelected += TabOnTabSelected;
            ActionBar.AddTab(tab);

        }

【讨论】：

这真的很有帮助。我会尝试按照我想要的方式设计这个样式。
我似乎无法编辑标签栏的高度或宽度。我尝试将 linearLayouts layout_height 属性作为 wrap_content 和 100dp 和 150dp 没有任何改变。有什么想法吗？
我还没有尝试过，但是看起来你必须更改操作栏的样式：stackoverflow.com/a/10280063/3183686
使用您提供的链接尝试了不同的方法。我无法更改操作栏选项卡的高度。即使我改变了标签的高度，它也没有帮助。
说实话，我认为Android真的希望你把你的图标放在文本的左边或右边。也许新版本的 API 将允许将图标轻松放置在操作栏上的文本上方。这可能是他们将自己与 iOS 区分开来的方式。将图标放在最左边的一个想法是在字符串中添加空格，使其对用户不可见。

【解决方案2】：

我成功地做到了。这是我使用的xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:p1="http://schemas.android.com/apk/res/android"
    p1:minWidth="15px"
    p1:minHeight="15px"
    p1:layout_width="wrap_content"
    p1:layout_height="wrap_content"
    p1:id="@+id/tabRelative"
    p1:gravity="center">
    <ImageView
        p1:src="@drawable/discover_icon_nightlife"
        p1:layout_width="20dp"
        p1:layout_height="20dp"
        p1:id="@+id/tabImage"
        p1:layout_centerHorizontal="true"
        p1:scaleType="centerInside"
        p1:layout_marginTop="4dp"
        p1:paddingTop="1dp" />
    <TextView
        p1:text="Menu"
        p1:layout_width="wrap_content"
        p1:layout_height="wrap_content"
        p1:id="@+id/tabText"
        p1:layout_centerHorizontal="true"
        p1:layout_below="@+id/tabImage"
        p1:paddingTop="2dp" />
</RelativeLayout>

我将其设置为我的 ab 的自定义视图，就像 goober_nuts 回答所建议的那样。

它没有我想要的那么好。我也想改变标签的高度，但没能做到。这是最后一次看的图片：

【讨论】：