动作条 - 与中心ImageView的自定义视图，两侧行动项目 [英] ActionBar - custom view with centered ImageView, Action Items on sides

问题描述

我有一个要求，中心自定义徽标（使用ImageView的），在动作条为家的活动。我使用的是ABS为这个项目。这非常类似于张贴在SO另一个问题（<一href="http://stackoverflow.com/questions/12750013/actionbar-logo-centered-and-action-items-on-sides">ActionBar标志为中心，两侧行动项），但我不知道，如果ImageView的或搜索菜单有差别，因为我没有得到我在寻找（一个居中的图像的结果），或我刚刚听错了。基本上，我在左侧设置一个图标，插入自定义视图的中心，并有右侧（OptionsMenu）一个搜索图标。该图像确实显得有点在图标的右边，但它仍然留下的中心。如何居中的ImageView在动作条任何指针将大大AP preciated。

Home.java：

 公共无效的onCreate（包savedInstanceState）{
    super.onCreate（savedInstanceState）;
    的setContentView（R.layout.activity_home）;

    LayoutInflater充气=（LayoutInflater）getSupportActionBar（）。getThemedContext（）
            .getSystemService（LAYOUT_INFLATER_SERVICE）;

    最后查看customActionBarView = inflater.inflate（
            R.layout.actionbar_custom_view_home，NULL）;

    / *显示自定义的操作栏视图和隐藏正常的主页图标和标题* /
    最后的动作条动作条= getSupportActionBar（）;
    actionBar.setHomeButtonEnabled（真正的）;
    actionBar.setDisplayHomeAsUpEnabled（假）;
    actionBar.setDisplayShowTitleEnabled（假）;
    actionBar.setIcon（R.drawable.ic_ab_som）;
    actionBar.setCustomView（customActionBarView）;
    actionBar.setDisplayShowCustomEnabled（真正的）;

}

@覆盖
公共布尔onCreateOptionsMenu（功能菜单）{
    MenuInflater充气=新MenuInflater（本）;
    inflater.inflate（R.menu.search，菜单）;
    返回true;
}
 

RES /布局/ actionbar_custom_view_home.xml：

 ＆LT; XML版本=1.0编码=UTF-8＆GT？;
＆LT; LinearLayout中的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
机器人：layout_width =FILL_PARENT
机器人：layout_height =WRAP_CONTENT
机器人：方向=横向
机器人：layout_gravity =中心＆GT;

＆LT; ImageView的
    机器人：ID =@ + ID / actionBarLogo
    机器人：contentDescription =@字符串/ APPLICATION_NAME
    机器人：layout_width =WRAP_CONTENT
    机器人：layout_height =WRAP_CONTENT
    机器人：可点击=假
    机器人：duplicateParentState =假
    机器人：可聚焦=假
    机器人：longClickable =假
    机器人：填充=@扪/ padding_small
    机器人：SRC =@可绘制/ logo_horizo​​ntal/＆GT;

＆LT; / LinearLayout中＆GT;
 

RES /菜单/ search.xml：

 ＆LT; XML版本=1.0编码=UTF-8＆GT？;
＆LT;菜单的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android＆GT;
    ＆LT;项目
        机器人：ID =@ ID / search_item
        机器人：ATTR / ACTION_SEARCH图标=
        机器人：标题=@字符串/ search_label
        机器人：showAsAction =ifRoom | collapseActionView＆GT;
    ＆LT; /项目＆GT;
＆LT; /菜单＆gt;
 

解决方案

解释：

粉红色的容器，是真正的空间，在这里你将添加视图。

诀窍是做一些数学，到View（无论）中心到中间。

在我的情况下，该观点是一个TextView。这是我的完整的方法：

 公共无效addTextToActionBar（字符串textToSet）
{
    mActionbar.setDisplayShowCustomEnabled（真正的）;

    //充气的自定义视图
    LayoutInflater充气= LayoutInflater.from（本）;
    查看标题= inflater.inflate（R.layout.actionbar_header，NULL）;

    //这里做你需要做的视图（集文本，如果它是一个TextView或其他）
    TextView的电视=（TextView中）header.findViewById（R.id.program_title）;
    tv.setText（textToSet）;

    //魔术恰好居中。
    INT actionBarWidth = DeviceHelper.getDeviceWidth（本）; //谷歌的这种方法。还挺方便。

    tv.measure（0，0）;
    INT tvSize = tv.getMeasuredWidth（）;

    尝试
    {
        INT leftSpace = 0;

        查看为homeButton = findViewById（android.R.id.home）;
        最后的ViewGroup架=（ViewGroup中）homeButton.getParent（）;

        视图则firstChild = holder.getChildAt（0）;
        视图secondChild = holder.getChildAt（1）;

        leftSpace = firstChild.getWidth（）+ secondChild.getWidth（）;
    }
    赶上（异常忽略）
    {}

    mActionbar.setCustomView（头）;

    如果（NULL！=报头）
    {
        ActionBar.LayoutParams PARAMS =（ActionBar.LayoutParams）header.getLayoutParams（）;

        如果（NULL！= PARAMS）
        {
            INT LEFTMARGIN =（actionBarWidth / 2  - （leftSpace）） - （tvSize / 2）;

            params.leftMargin = 0＆GT = LEFTMARGIN？ 0：LEFTMARGIN;
        }
    }
}
 

布局：

 ＆LT; RelativeLayout的
    的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
    机器人：layout_width =match_parent
    机器人：layout_height =WRAP_CONTENT
    机器人：重力=center_horizo​​ntal | center_vertical |中心
    机器人：方向=横向＆GT;

＆LT;的TextView
    机器人：ID =@ + ID / program_title
    机器人：layout_width =WRAP_CONTENT
    机器人：layout_height =WRAP_CONTENT
    机器人：文字颜色=@机器人：彩色/白
    机器人：contentDescription =@字符串/ content_description_program_title
    机器人：ellipsize =结束
    机器人：MAXLINES =1
    机器人：TEXTSIZE =22sp/＆GT;

＆LT; / RelativeLayout的＆GT;
 

享受。

I have a requirement to center a custom logo (using an ImageView) in the Actionbar for the "Home" activity. I'm using ABS for this project. This is very similar to a another question posted on S.O. (ActionBar logo centered and Action Items on sides), but I'm not sure if the ImageView or search menu makes a difference, as I'm not getting the results I'm looking for (a centered image), or if I've just got it wrong. Basically, I set an Icon on the left, insert the custom view in the center, and have a search icon on the right (OptionsMenu). The image does appear a bit to the right of the icon, but it's still left of centered. Any pointers on how to center an ImageView in the actionbar would be greatly appreciated.

Home.java:

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_home);

    LayoutInflater inflater = (LayoutInflater) getSupportActionBar().getThemedContext()
            .getSystemService(LAYOUT_INFLATER_SERVICE);

    final View customActionBarView = inflater.inflate(
            R.layout.actionbar_custom_view_home, null);

    /* Show the custom action bar view and hide the normal Home icon and title */
    final ActionBar actionBar = getSupportActionBar();
    actionBar.setHomeButtonEnabled(true);
    actionBar.setDisplayHomeAsUpEnabled(false);
    actionBar.setDisplayShowTitleEnabled(false);
    actionBar.setIcon(R.drawable.ic_ab_som);
    actionBar.setCustomView(customActionBarView);
    actionBar.setDisplayShowCustomEnabled(true);

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = new MenuInflater(this);
    inflater.inflate(R.menu.search, menu);
    return true;
}

res/layout/actionbar_custom_view_home.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center">

<ImageView
    android:id="@+id/actionBarLogo"
    android:contentDescription="@string/application_name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="false"
    android:duplicateParentState="false"
    android:focusable="false"
    android:longClickable="false"
    android:padding="@dimen/padding_small"
    android:src="@drawable/logo_horizontal" />

</LinearLayout>

res/menu/search.xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item 
        android:id="@id/search_item"
        android:icon="?attr/action_search"
        android:title="@string/search_label"
        android:showAsAction="ifRoom|collapseActionView">
    </item>
</menu>

解决方案

Explained:

The pink container, is the real space where you will add the view.

The trick is doing some maths, to center the View (whatever) to the middle.

In my case, the View was a TextView. Here's my full method:

public void addTextToActionBar( String textToSet )
{
    mActionbar.setDisplayShowCustomEnabled( true );

    // Inflate the custom view
    LayoutInflater inflater = LayoutInflater.from( this );
    View header = inflater.inflate( R.layout.actionbar_header, null );

    //Here do whatever you need to do with the view (set text if it's a textview or whatever)
    TextView tv = (TextView) header.findViewById( R.id.program_title );
    tv.setText( textToSet );

    // Magic happens to center it.
    int actionBarWidth = DeviceHelper.getDeviceWidth( this ); //Google for this method. Kinda easy.

    tv.measure( 0, 0 );
    int tvSize = tv.getMeasuredWidth();

    try
    {
        int leftSpace = 0;

        View homeButton = findViewById( android.R.id.home );
        final ViewGroup holder = (ViewGroup) homeButton.getParent();

        View firstChild =  holder.getChildAt( 0 );
        View secondChild =  holder.getChildAt( 1 );

        leftSpace = firstChild.getWidth()+secondChild.getWidth();
    }
    catch ( Exception ignored )
    {}

    mActionbar.setCustomView( header );

    if ( null != header )
    {
        ActionBar.LayoutParams params = (ActionBar.LayoutParams) header.getLayoutParams();

        if ( null != params )
        {
            int leftMargin =  ( actionBarWidth / 2 - ( leftSpace ) ) - ( tvSize / 2 ) ;

            params.leftMargin = 0 >= leftMargin ? 0 : leftMargin;
        }
    }
}

Layout:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal|center_vertical|center"
    android:orientation="horizontal" >

<TextView
    android:id="@+id/program_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="@android:color/white"
    android:contentDescription="@string/content_description_program_title"
    android:ellipsize="end"
    android:maxLines="1"
    android:textSize="22sp"/>

</RelativeLayout>

Enjoy.

这篇关于动作条 - 与中心ImageView的自定义视图，两侧行动项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！