【问题标题】:Android custom action bar with action buttons带有操作按钮的 Android 自定义操作栏
【发布时间】:2013-02-23 21:01:27
【问题描述】:

这是我要创建的操作栏。

这是我放在菜单中的项目。

   <item
        android:id="@+id/search"
        android:title="Search"
        android:showAsAction="ifRoom|collapseActionView"
        android:actionLayout="@layout/search_layout"
    />

     <item
        android:id="@+id/search1"
        android:title="PHOTO"
        android:showAsAction="ifRoom"
        android:actionLayout="@layout/search_layout"
    />

collapseActionView - 在启动时折叠搜索菜单。

单击搜索项后,它会显示如图 1 所示的编辑文本。但我需要始终看到它,不仅在单击后。

如果我将它设置为 Always,它会因为 fill_parent 而从屏幕上弹出菜单项。

<EditText
        android:id="@+id/txt_search"
        android:inputType="text"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
    />  

是否可以在没有菜单项的情况下获得标题栏布局的宽度?在这种情况下,我可以将固定宽度设置为 edittext 项。

还有其他方法可以让它发挥作用吗? 结果它必须是自定义标题布局+菜单项。此自定义布局必须填充菜单项和图标之间的空白空间。

【问题讨论】:

    标签: android width android-actionbar menuitem


    【解决方案1】:

    使用自定义操作栏,您可以解决您的问题。对于 Custom ActionBar,您必须按照以下方式在自定义布局上创建:

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:enabled="false"
    android:orientation="horizontal"
    android:layout_alignParentRight="true"
    android:layout_gravity="right"
    android:paddingEnd="8dip"
    android:paddingRight="8dip"
    android:paddingLeft="8dip">
    
    <EditText
        android:layout_width="200dip"
        android:layout_height="wrap_content"
        android:id="@+id/action_bar_edt_search"/>
    <ImageButton
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:id="@+id/action_bar_img_search"
        android:background="@drawable/search_ico"/>
    <Button
        android:id="@+id/action_bar_search"
        android:layout_alignParentRight="true"
        android:layout_gravity="right"
        style="@style/ActionBarButtonWhite" />
    
    <Button
        android:id="@+id/action_bar_photo"
        android:layout_alignParentRight="true"
        android:layout_gravity="right"
        style="@style/ActionBarButtonOffWhite" />
    
    <Button
        android:id="@+id/action_bar_video"
        android:layout_alignParentRight="true"
        android:layout_gravity="right"
        style="@style/ActionBarButtonOffWhite" />
    
    <Button
        android:id="@+id/action_bar_mobile"
        android:layout_alignParentRight="true"
        android:layout_gravity="right"
        style="@style/ActionBarButtonOffWhite" />
    

    color.xml

    <resources>
    <color name="action_bar">#ff0d0d0d</color>
    <color name="white">#ffffffff</color>
    <color name="off_white">#99ffffff</color>
    </resources>
    

    styles.xml

    <style name="MyActionButtonStyle" parent="android:Widget.ActionButton">
        <item name="android:minWidth">28dip</item>
    </style>
    
    
    <style name="ActionBarButton">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:background">@null</item>
        <item name="android:ellipsize">end</item>
        <item name="android:singleLine">true</item>
        <item name="android:textSize">@dimen/text_size_small</item>
    </style>
    

    现在您需要在您的 java 文件中创建 ViewGroupActionBar,如下所示:

    final ViewGroup actionBarLayout = (ViewGroup) getLayoutInflater().inflate(
                R.layout.actions,
                null);
    
        // Set up your ActionBar
        final ActionBar actionBar = getActionBar();
        actionBar.setDisplayShowHomeEnabled(false);
        actionBar.setDisplayShowTitleEnabled(false);
        actionBar.setDisplayShowCustomEnabled(true);
        actionBar.setCustomView(actionBarLayout);
    
    
        // You customization
    
        final int actionBarColor = getResources().getColor(R.color.action_bar);
        actionBar.setBackgroundDrawable(new ColorDrawable(actionBarColor));
    
        final EditText actionBarEditSearch = (EditText) findViewById(R.id.action_bar_edt_search);
        actionBarEditSearch.setVisibility(View.GONE);
    
        final ImageButton actionBarImgSearch = (ImageButton) findViewById(R.id.action_bar_img_search);
        actionBarImgSearch.setVisibility(View.GONE);
    
        final Button actionBarSearch = (Button) findViewById(R.id.action_bar_search);
        actionBarSearch.setText("SEARCH");
    
        final Button actionBarPhoto = (Button) findViewById(R.id.action_bar_photo);
        actionBarPhoto.setText("PHOTO");
    
        final Button actionBarVideo = (Button) findViewById(R.id.action_bar_video);
        actionBarVideo.setText("VIDEO");
    
        final Button actionBarMobile = (Button) findViewById(R.id.action_bar_mobile);
        actionBarMobile.setText("MOBILE");
    
        actionBarSearch.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                actionBarEditSearch.setVisibility(View.VISIBLE);
                actionBarImgSearch.setVisibility(View.VISIBLE);
                actionBarSearch.setVisibility(View.GONE);
            }
        });
    
        actionBarImgSearch.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                actionBarEditSearch.setVisibility(View.GONE);
                actionBarImgSearch.setVisibility(View.GONE);
                actionBarSearch.setVisibility(View.VISIBLE);
            }
        });
    
    
    <style name="ActionBarButtonWhite" parent="@style/ActionBarButton">
        <item name="android:textColor">@color/white</item>
    </style>
    
    <style name="ActionBarButtonOffWhite" parent="@style/ActionBarButton">
        <item name="android:textColor">@color/off_white</item>
    </style>
    

    【讨论】:

    • 如果您需要自定义操作栏,这是最好的方法。
    【解决方案2】:

    您可以通过设置自定义视图来代替操作栏标题来实现此目的。

    ActionBar actionBar = getActionBar();
    actionBar.setCustomView(R.layout.search_layout);
    actionBar.setDisplayShowCustomEnabled(true);
    

    结果是一个EditText,它填充了操作栏的整个宽度,除了操作按钮。它看起来与问题中的第一张图片完全相同。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-12-07
      • 2012-11-08
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多