如何设置Android标签的样式以获得3D外观？

Question

我想创建一个Android标签视图，如下图所示：

我想罗马有很多方法，但我想我还没找到理想的方法。我的想法是剪掉一个分隔线和一个活动的分隔线，并将它们放在按钮之间。但是，我不知道这是否是一个很好的解决方案，因为我仍然需要为第一个和最后一个按钮设置不同的样式。我已经为周围（灰色）容器准备了9个补丁。

我还想过为红条制作一个红色的9补丁，而不仅仅是选择按钮的样式。这个解决方案的问题是我仍然需要根据按钮的数量放置顶部对角白线。

有没有人为我提供更好的解决方案？

Answer 1

这是另一种方法：将标题与标签分开。有点复杂，是的，但好处是：

1. 它允许您定义常用标签样式;
2. 支持任意数量的按钮。



在此图片上，按钮的宽度不同，因此实际上标题左侧可能需要额外的ImageView。

让我们将标题视图创建为LinearLayout。我们可以使用相同的layout_weight来设置上部分隔线和可拉伸间隙。

public class HeaderLayout extends LinearLayout {

    public HeaderLayout(Context context) {
        super(context);
        initView();
    }

    public HeaderLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }

    public void setNumberOfColumns(int number) {
        removeAllViews();
        for (int i = 0; i < number; i++) {
            addView(getColumnView(), getColumnLayoutParams());
            // We don't need a divider after the last item
            if (i < number - 1) {
                addView(getDividerView(), getDividerLayoutParams());
            }
        }
    }

    private void initView() {
        setBackgroundResource(R.drawable.header_bg);
    }

    private View getColumnView() {
        return new View(getContext());
    }

    private View getDividerView() {
        ImageView dividerView = new ImageView(getContext());
        dividerView.setImageResource(R.drawable.header_divider);
        dividerView.setScaleType(ImageView.ScaleType.FIT_XY);
        return dividerView;
    }

    private LayoutParams getColumnLayoutParams() {
        return new LayoutParams(0, LayoutParams.MATCH_PARENT, 1.0f);
    }

    private LayoutParams getDividerLayoutParams() {
        return new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
    }

}

R.drawable.header_bg是9patch的地方：



R.drawable.header_divider是一个简单的（可选透明的）位图：



就我个人而言，为第一个和最后一个按钮设置不同的背景是最难的解决方案，但这取决于实际任务。