android - 操作栏菜单项的分隔线

Question

我正在开发平板电脑 android 应用程序。在这里，我遇到了操作栏菜单项的 UI 问题。

注意:我使用的是android Native actionbar。

1) 如何在菜单项之间显示分隔线，如图所示。
我尝试使用分隔线样式和自定义样式，但它没有反射(reflect)在我的操作栏中。

2) 如何将多个菜单项添加到单个菜单项中，如图所示。

我尝试使用自定义布局，但未显示项目的溢出菜单。我尝试使用 PopupMenu 作为溢出菜单，但该图标在溢出列表中不可见。

这里我使用了操作栏应用程序的样式，styles.xml

    <resources xmlns:android="http://schemas.android.com/apk/res/android">

<style name="AppTheme" parent="@android:style/Theme.Holo.Light">
    <item name="android:actionBarStyle">@style/AppTheme.ActionBar</item>
    <item name="android:textAllCaps">false</item>
    <item name="android:actionMenuTextAppearance">@style/AppTheme.ActionBar.MenuTextStyle</item>
    <item name="android:actionOverflowButtonStyle">@style/OverFlow</item>
    <item name="android:divider">@color/dividercolor</item>

</style>

  <style name="OverFlow" parent="@android:style/Widget.Holo.ActionButton.Overflow">
    <item name="android:src">@drawable/ic_actionbar_dots</item>
</style>


<style name="AppTheme.ActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
    <item name="android:background">@drawable/actionbar_background</item>
    <item name="android:height">100dip</item>
    <item name="android:titleTextStyle">@style/AppTheme.ActionBar.Text</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:divider">@drawable/divider</item>
    <item name="android:showDividers">beginning</item>
    <item name="android:dividerPadding">10dp</item>
</style>

<style name="AppTheme.ActionBar.MenuTextStyle" parent="android:style/TextAppearance.Holo.Widget.ActionBar.Menu">
    <item name="android:textAllCaps">false</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:textSize">26sp</item>
</style>

<style name="AppTheme.ActionBar.Text" parent="@android:style/TextAppearance">
    <item name="android:textAllCaps">false</item>
    <item name="android:textColor">@color/white</item>
</style>

菜单.xml

<group android:id="@+id/menu_mainGroup" >
    <item
        android:id="@+id/connection"
        android:icon="@drawable/nw_pt_calc"
        android:showAsAction="always"
        android:title=" ">
    </item>
    <item
        android:id="@+id/status_menu"
        android:actionLayout="@layout/application_status_overflowmenu"
        android:showAsAction="ifRoom|withText">
    </item>

    <!--
    <item
        android:id="@+id/status"
        android:icon="@drawable/ic_available"
        android:showAsAction="always"
        >
        <menu>
            <item
                android:id="@+id/status1"
                android:icon="@drawable/ic_available"
                android:showAsAction="always"
                android:title="@string/menu_available">
            </item>
            <item
                android:id="@+id/status2"
                android:icon="@drawable/ic_busy"
                android:showAsAction="always"
                android:title="@string/menu_busy">
            </item>
            <item
                android:id="@+id/status3"
                android:icon="@drawable/ic_logoff"
                android:showAsAction="always"
                android:title="@string/menu_logoff">
            </item>
        </menu>
    </item>
    <item
        android:id="@+id/display_pic"
        android:icon="@drawable/ic_person"
        android:showAsAction="always">
    </item>


    <item
        android:id="@+id/display_name"
        android:showAsAction="always">
    </item>


    -->
    <item
        android:id="@+id/menu_search"
        android:icon="@drawable/ic_search"
        android:showAsAction="always"
        android:visible="false">
    </item>
    <item
        android:id="@+id/help"
        android:icon="@drawable/ic_help"
        android:showAsAction="always"
        android:visible="false">
    </item>
    <item
        android:id="@+id/about"
        android:showAsAction="never"
        android:title="@string/about">
    </item>
    <!--
         <item
        android:id="@+id/notification_history"
        android:showAsAction="never"
        android:title="@string/notification_history">
    </item>
    <item
        android:id="@+id/comm_msg_history"
        android:showAsAction="never"
        android:title="@string/comm_msg_history">
    </item>



    -->
</group>

帮助将不胜感激。感谢期待听到极客们的回答:)。

Answer 1

不知道你的问题解决了没有。但我可以向您解释以防万一。
首先，自定义 ActionBar 中的分隔符，您必须在您的 Theme 中执行此操作与 parent ActionButton .你这样做:

<style name="AppTheme" parent="@android:style/Theme.Holo.Light">
    <item name="android:divider">@color/dividercolor</item>
</style>

<style name="AppTheme.ActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
    <item name="android:divider">@drawable/divider</item>
</style>

试试这个方法:

<style name="AppTheme" parent="@android:style/Theme.Holo.Light">
    <item name="android:actionButtonStyle">@style/ActionButton</item>
    <item name="android:actionBarDivider">@color/blue</item>
    <item name="actionBarDivider">@color/blue</item>
</style>  

<style name="ActionButton" parent="@android:style/Widget.Holo.Light.ActionButton">
   <item name="android:background">@color/blue</item>
</style>

您可以在此处阅读解决方案:Can't change color of actionBar divider还有:ActionBar MenuItem Divider .

然后，您可以创建一个 9-Patch 可绘制看起来完全像你的形象。尝试使用像这样的图片:
黑色边框表示在哪里展开图像。我在左侧/右侧做了它以在其高度上扩展你的分隔线。你可以阅读Draw 9-patch从文档中了解如何使用 Draw 9-Patch tool在 SDK 中。
或者，您可以用 xml 制作它，如下所示:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <!-- first line vertical blue -->
   <item android:left="1dp">
       <shape android:shape="line">
           <stroke
               android:color="@color/blue"
               android:width="1dp" />
       </shape>
   </item>
   <!-- second line vertical white -->
   <item android:right="1dp">
       <shape android:shape="line">
            <stroke
               android:color="@color/white"
               android:width="1dp" />
       </shape>
    </item>
</layer-list>  

之后，您只需在 style.xml 中声明它即可如:
<item ...>@drawable/blue_divider</item> .

现在您已经自定义了分隔符 (=

---

然后，您在 ActionBar 中的自定义布局.
可以这样做:

 ActionBar actionBar = getActionBar();
 actionBar.setCustomView(R.layout.application_status_overflowmenu);
 actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM|
                                    ActionBar.DISPLAY_SHOW_HOME);  

和application_status_overflowmenu.xml将是这样的:

 <RelativeLayout
     android="@+id/theCustomIcon"
     android:layout_width="fill_parent" android:layout_height="fill_parent"
     android:layout_gravity="right" android:gravity="center"
     android:paddingLeft="10dp" android:paddingRight="10dp"
     android:clickable="true" >

     <ImageView
          android:id="@+id/blockCustomIcon"
          android:layout_width="50dp" android:layout_height="50dp"  
          android:src="@drawable/green_block"  
          android:layout_centerVertical="true" 
          android:layout_alignParentLeft="true" />

     <ImageView
          android:id="@+id/imgCustomIcon"
          android:layout_width="wrap_content" android:layout_height="wrap_content"  
          android:src="@drawable/green_block"  
          android:layout_centerVertical="true" 
          android:layout_toRightOf="@id/blockCustomIcon" />

     <TextView
          android:id="@+id/txtCustomIcon"
          android:layout_width="wrap_content" android:layout_height="wrap_content"  
          android:src="@drawable/green_block"  
          android:layout_centerVertical="true" 
          android:layout_alignParentRight="true"
          android:gravity="left" />  

 </RelativeLayout>

最后，您可以访问 View s 更新项目:

 TextView text = (TextView) actionBar.getCustomView().findViewById(R.id.txtCustomIcon);
 text.setText("Emily Nichols");  

就是这样!
如果您的菜单选项消失，请检查您的 onCreateOptionsMenu 是否正在膨胀一个好的布局，如果它返回 true。您还可以在选项菜单前添加自定义项目或动态添加项目。我让你随心所欲。
我希望这会很有用，它也会有所帮助。