在选项卡文本上方对齐 ActionBar 导航选项卡图标？答案

【问题标题】：Align ActionBar Navigation Tab icons above the tab text?在选项卡文本上方对齐 ActionBar 导航选项卡图标？
【发布时间】：2012-04-16 16:02:10
【问题描述】：

应用程序有一个 ActionBar，ActionBar 有导航选项卡，每个选项卡都包含文本。除了文本之外，我还需要向选项卡添加图标。

我已成功使用ActionBar.Tab.setIcon(drawable) 添加图标，但图标显示在标签文本的左侧。

如何移动标签图标，使其位于导航标签文本上方？

（我正在使用 ActionBarSherlock，但认为解决方案将适用于本机和 ABS 实现）

【问题讨论】：

标签： android actionbarsherlock android-actionbar

【解决方案1】：

您可以为每个选项卡设置自定义视图。

https://gist.github.com/3167287

PropositionListActivity.java

import com.actionbarsherlock.app.ActionBar;
import com.actionbarsherlock.app.ActionBar.Tab;
import com.actionbarsherlock.app.SherlockActivity;
import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.ImageView;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.app.NavUtils;

public class PropositionListActivity extends SherlockActivity implements ActionBar.TabListener {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState); 

        setContentView(R.layout.proposition_list);

        getSupportActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        createTab(R.layout.tab_to_opine, R.id.tab_to_opine_title, "Vou Opinar");
        createTab(R.layout.tab_opined, R.id.tab_opined_title, "Já Opinei");
        createTab(R.layout.tab_feedback, R.id.tab_feedback_title, "Feedback");
    }

    public void createTab(int view, int titleView, String title) {
        ActionBar.Tab tab = getSupportActionBar().newTab();
        tab.setTabListener(this);
        tab.setCustomView(view);
        getSupportActionBar().addTab(tab);

        ((TextView) findViewById(titleView)).setText(title);
    }
}

tab_to_opine.xml

<?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:src="@drawable/tab_to_opine"
        android:background="@android:color/transparent" />

    <TextView
        android:id="@+id/tab_to_opine_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

【讨论】：

如果您在此处发布代码以防链接中断，那就太好了。
完成了，琼妮。 Stack Overflow 不是几行代码的完美占位符，所以我仍然保留了 gist 链接。
这里是 vogella.com 的链接，他展示了如何在没有 actionBarSherlock 的情况下将自定义视图添加到操作栏。 vogella.com/articles/AndroidActionBar/…

【解决方案2】：

在styles.xml 文件中你可以添加一个 <item name="android:drawableTop">@drawable/your_image.</item> 如果您希望所有图像在顶部都相同，这将起作用。不幸的是，我不太清楚如何为使用不同图像的标签执行此操作。

【讨论】：

【解决方案3】：

它非常简单，只需将 android:drawableTop="@drawable/your_image" 添加到您的 Textview 并删除 ImageView

<?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" >

<TextView
    android:id="@+id/tab_to_opine_title"
    android:layout_width="wrap_content"
    android:drawableTop="@drawable/your_image" 
    android:layout_height="wrap_content" />

</LinearLayout>

【讨论】：