android - 如何将所有操作项放在左侧，尽可能多地占用空间，同时在右侧溢出？

Question

背景

假设我有一个工具栏和多个操作项。有些可能是自定义的(例如:带有图像的 TextView)。

我需要做的是将它们全部左对齐，而不是右对齐，但溢出项仍然在右侧。

我也尝试为行动项目留出尽可能多的空间。

问题

我发现的都行不通

我尝试过的

1.对于对齐，我在 StackOverflow 上找到了一些解决方案，即在工具栏内添加 View ，但由于某些原因这不会很好地工作，因为按下一个项目不会显示对整个项目的影响(好像它的高度更小)。

我为此尝试的其他事情:

• android:layoutDirection="ltr" - 不对操作项做任何事情
• android:gravity="left|start" - 相同

2.对于空间问题，我试过都没用。我试图删除所有可能增加边距或填充的东西。

这是一个示例代码，展示了我如何测试这两个问题:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" tools:context="com.example.user.myapplication.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
        android:layoutDirection="ltr" android:padding="0px" android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:contentInsetEnd="0px" app:contentInsetEndWithActions="0px" app:contentInsetLeft="0px"
        app:contentInsetRight="0px" app:contentInsetStart="0px" app:contentInsetStartWithNavigation="0px"
        app:logo="@null" app:title="@null" app:titleMargin="0px" app:titleTextColor="#757575"
        tools:ignore="UnusedAttribute" tools:title="toolbar"/>

</FrameLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar mainToolbar = findViewById(R.id.toolbar);
        for (int i = 0; i < 10; ++i) {
            final View menuItemView = LayoutInflater.from(this).inflate(R.layout.action_item, mainToolbar, false);
            ImageView imageView = (ImageView) menuItemView.findViewById(android.R.id.icon);
            String text = "item" + i;
            final int itemIconResId = R.drawable.ic_launcher_background;
            imageView.setImageResource(itemIconResId);
            ((TextView) menuItemView.findViewById(android.R.id.text1)).setText(text);
            final OnClickListener onClickListener = new OnClickListener() {
                @Override
                public void onClick(final View view) {
                    //do something on click
                }
            };
            menuItemView.setOnClickListener(onClickListener);
            final MenuItem menuItem = mainToolbar.getMenu()
                    .add(text).setActionView(menuItemView).setIcon(itemIconResId)
                    .setOnMenuItemClickListener(new OnMenuItemClickListener() {
                        @SuppressLint("MissingPermission")
                        @Override
                        public boolean onMenuItemClick(final MenuItem menuItem) {
                            onClickListener.onClick(menuItemView);
                            return true;
                        }
                    });
            MenuItemCompat.setShowAsAction(menuItem, MenuItem.SHOW_AS_ACTION_IF_ROOM);

        }
    }
}

action_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content" android:layout_height="match_parent"
    android:background="?android:attr/selectableItemBackground" android:clickable="true" android:focusable="true"
    android:focusableInTouchMode="false" android:gravity="center" android:orientation="horizontal">

    <ImageView
        android:id="@android:id/icon" android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:scaleType="center" tools:src="@android:drawable/sym_def_app_icon"/>

    <TextView
        android:id="@android:id/text1" android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_marginLeft="6dp" android:layout_marginStart="6dp" android:gravity="center"
        android:textColor="#c2555555" android:textSize="15sp" tools:text="text"/>

</LinearLayout>

这是我得到的:

问题

如何支持工具栏的最大空间使用，并使操作项向左对齐？

---

编辑:经过一些工作，我得到了部分工作的对齐解决方案:

activity_main.xml

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent" android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
        android:background="#fff" android:gravity="center_vertical|start"
        android:layoutDirection="ltr" android:padding="0px" android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:contentInsetEnd="0px" app:contentInsetEndWithActions="0px" app:contentInsetLeft="0px"
        app:contentInsetRight="0px" app:contentInsetStart="0px" app:contentInsetStartWithNavigation="0px"
        app:logo="@null" app:title="@null" app:titleMargin="0px" app:titleTextColor="#757575"
        tools:ignore="UnusedAttribute" tools:title="toolbar">

        <android.support.v7.widget.ActionMenuView
            android:id="@+id/amvMenu" android:layout_width="match_parent" android:layout_height="match_parent"/>
    </android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>

在代码中，唯一的区别是我使用了 ActionMenuView 的菜单，而不是工具栏:

    final ActionMenuView amvMenu = (ActionMenuView) toolbar.findViewById(R.id.amvMenu);
    final Menu menu =amvMenu.getMenu();
    ...
       final MenuItem menuItem = menu.add...

它确实将溢出项放在最右边，而操作项放在左边。

但是，按下的效果并不包括项目的整个高度，而且项目似乎比平时占用更多空间。另外，我仍然没有弄清楚如何使用这里所有可能的空间:

编辑:

为了解决按压效果的问题，我所要做的就是在循环中为正在充气的项目添加 android:minHeight="?attr/actionBarSize"。

按压效果仍然奇怪的是，如果我添加一个普通的 Action 项(只是文本/图标，没有膨胀)，它会产生微小的涟漪效应，并且 Action 项本身比我的要占用很多空间添加。

这导致的另一个新问题是，点击溢出菜单附近的任何地方都会触发点击它。

编辑:

此解决方案的另一个问题是，在某些情况下项目之间存在空格，例如在只有几个项目的情况下:

所以，简而言之，这个解决方案根本行不通。

Answer 1

因此，如果我理解正确的话，您想在工具栏中添加一些操作。这些操作应从左侧开始并占据所有可用空间。

您是否愿意使用自定义 View (ImageView 等)代替 MenuItem 进行操作？

将水平 LinearLayout 添加到您的工具栏。并为所有 child ( Action )设置相同的权重。

<Toolbar>
    <LinearLayout horizontal>
        <ImageView layout_width="0dp" layout_weight="1" />
        <ImageView layout_width="0dp" layout_weight="1" />
        <ImageView layout_width="0dp" layout_weight="1" />
    </LinearLayout>
</Toolbar>

您现在可以附加菜单以获得垂直 3 点操作。或者您可以在水平布局的末尾添加另一个固定宽度的 ImageView。

编辑:

这是我很快想到的解决方案。您当然需要稍微改进代码。此解决方案使用自定义 LinearLayout 来测量每个子项并决定是否需要溢出菜单。它将再次重新测量每个 child ，为所有人提供平等的空间。

它使用 PopupWindow 显示菜单，使用简单的 OnClickListener 和回调来检查单击了哪个菜单项。

灵活菜单容器

public class FlexibleMenuContainer extends LinearLayout {

    private List<FlexibleMenu.MenuItem> items;

    private List<FlexibleMenu.MenuItem> drawableItems;
    private List<FlexibleMenu.MenuItem> overflowItems;

    private List<FlexibleMenu.MenuItem> overflowItemsTempContainer;

    private ImageView overflow;

    private int overflowViewSize;
    private boolean isOverflowing;

    public FlexibleMenuContainer(Context context) {
        this(context, null);
    }

    public FlexibleMenuContainer(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public FlexibleMenuContainer(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    private void init(Context context, @Nullable AttributeSet attrs) {
        setOrientation(HORIZONTAL);
        items = new ArrayList<>();
        overflowItems = new ArrayList<>();
        drawableItems = new ArrayList<>();
        overflowItemsTempContainer = new ArrayList<>();

        overflowViewSize = getResources().getDimensionPixelOffset(R.dimen.menu_more_size);

        overflow = new ImageView(context);
        overflow.setImageResource(R.drawable.ic_more_vert_white_24dp);
        overflow.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                showOverflowMenu();
            }
        });
//      overflow.setVisibility(GONE);

        LinearLayout.LayoutParams params = new LayoutParams(overflowViewSize, overflowViewSize);
        params.gravity = Gravity.CENTER_VERTICAL;

        addView(overflow, params);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthRequired = 0;
        isOverflowing = false;
        overflowItems.clear();
        drawableItems.clear();

        if (items.size() == 0) {
            return;
        }

        int availableWidth = MeasureSpec.getSize(widthMeasureSpec) - overflowViewSize;

        for (int i=0; i<items.size(); i++) {
            View child = items.get(i).getView();
            measureChild(child, widthMeasureSpec, heightMeasureSpec);
            widthRequired += child.getMeasuredWidth();

            if (widthRequired > availableWidth) {
                isOverflowing = true;
                overflowItems.add(items.get(i));
            } else {
                drawableItems.add(items.get(i));
            }
        }

        int drawableWidth = MeasureSpec.getSize(widthMeasureSpec) - (isOverflowing ? overflowViewSize : 0);
        int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(drawableWidth/drawableItems.size(), MeasureSpec.EXACTLY);

        for (int i=0; i<drawableItems.size(); i++) {
            View child = drawableItems.get(i).getView();
            child.measure(childWidthMeasureSpec, heightMeasureSpec);
        }
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int left = 0;
        for (int i=0; i<drawableItems.size(); i++) {
            View child = drawableItems.get(i).getView();
            int height = Math.min(child.getMeasuredHeight(), b - t);
            int top = (b - t - height)/2;
            child.layout(left, top, left + child.getMeasuredWidth(), top + height);
            left += child.getMeasuredWidth();
        }

        if (isOverflowing) {
            overflow.layout(getMeasuredWidth() - overflowViewSize, t, getMeasuredWidth(), b);
        }

        // After opening the menu and dismissing it, the views are still laid out
        for (int i=0; i<overflowItems.size(); i++) {
            View child = overflowItems.get(i).getView();
            if (child.getParent() == this) {
                child.layout(0, 0, 0, 0);
            }
        }
    }

    public void addItem(FlexibleMenu.MenuItem item) {
        items.add(item);
        _addView(item.getView());
    }

    private void _addView(View view) {
        LinearLayout.LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        params.gravity = Gravity.CENTER_VERTICAL;
        addView(view, getChildCount() - 1, params);
    }

    private void showOverflowMenu() {
        if (overflowItems.size() == 0) {
            return;
        }

        final ViewGroup contentView = prepareContentViewForPopup();
        final PopupWindow popup = new PopupWindow(contentView, 400, 300, true);
        popup.setOutsideTouchable(false);
        popup.setFocusable(true);
        popup.showAsDropDown(overflow);

        popup.setOnDismissListener(new PopupWindow.OnDismissListener() {
            @Override
            public void onDismiss() {
                contentView.removeAllViews();
                for (int i=0; i<overflowItemsTempContainer.size(); i++) {
                    View view = overflowItemsTempContainer.get(i).getView();
                    _addView(view);
                }

                overflowItemsTempContainer.clear();
            }
        });
    }

    private ViewGroup prepareContentViewForPopup() {
        overflowItemsTempContainer.clear();
        LinearLayout layout = new LinearLayout(getContext());
        layout.setBackgroundColor(ContextCompat.getColor(getContext(), R.color.colorAccent));
        layout.setOrientation(VERTICAL);
        for (int i=0; i<overflowItems.size(); i++) {
            overflowItemsTempContainer.add(overflowItems.get(i));
            View view = overflowItems.get(i).getView();
            removeView(view);
            layout.addView(view);
        }

        return layout;
    }

}

灵活菜单

public class FlexibleMenu {

    private final List<MenuItem> items;
    private final MenuCallback callback;

    public FlexibleMenu(List<MenuItem> items, MenuCallback callback) {
        this.items = items;
        this.callback = callback;
    }

    public void inflate(FlexibleMenuContainer container) {
        for (int i=0; i<items.size(); i++) {
            final MenuItem item = items.get(i);
            container.addItem(item);
            item.getView().setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    callback.onItemClicked(item);
                }
            });
        }
    }

    public interface MenuCallback {
        void onItemClicked(MenuItem item);
    }

    public static class MenuItem {

        private final int id;
        private final View view;

        public MenuItem(int id, View view) {
            this.id = id;
            this.view = view;
        }

        public View getView() {
            return view;
        }

        public int getId() {
            return id;
        }
    }
}

布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.fenchtose.flexiblemenu.MainActivity">

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:paddingStart="0dp"
        android:background="@color/colorPrimary">

        <com.fenchtose.flexiblemenu.FlexibleMenuContainer
            android:id="@+id/menu_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    </android.support.v7.widget.Toolbar>

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:paddingStart="0dp"
        android:background="@color/colorPrimary">

        <com.fenchtose.flexiblemenu.FlexibleMenuContainer
            android:id="@+id/menu_container1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    </android.support.v7.widget.Toolbar>

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:paddingStart="0dp"
        android:background="@color/colorPrimary">

        <com.fenchtose.flexiblemenu.FlexibleMenuContainer
            android:id="@+id/menu_container2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    </android.support.v7.widget.Toolbar>

</LinearLayout>

主 Activity

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setupMenu(R.id.menu_container, 6);
        setupMenu(R.id.menu_container1, 2);
        setupMenu(R.id.menu_container2, 4);
    }

    private void setupMenu(int id, int size) {
        FlexibleMenuContainer container = (FlexibleMenuContainer) findViewById(id);
        FlexibleMenu menu = new FlexibleMenu(populate(size), new FlexibleMenu.MenuCallback() {
            @Override
            public void onItemClicked(FlexibleMenu.MenuItem item) {
                Toast.makeText(MainActivity.this, "menu selected: " + item.getId(), Toast.LENGTH_SHORT).show();
            }
        });
        menu.inflate(container);
    }

    private List<FlexibleMenu.MenuItem> populate(int size) {
        List<FlexibleMenu.MenuItem> items = new ArrayList<>();
        for (int i=0; i<size; i++) {
            View view = createView("Menu Item " + (i + 1));
            items.add(new FlexibleMenu.MenuItem(i, view));
        }

        return items;
    }

    private TextView createView(String text) {
        TextView view = new TextView(this);
        view.setText(text);
        view.setGravity(Gravity.CENTER);
        view.setTextColor(0xffffffff);
        return view;
    }
}