如何设置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_bg9patch在哪里：

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

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