Как я могу настроить вкладки Android, чтобы получить 3D-взгляд?

Я хочу создать представление вкладки Android, чтобы выглядеть как этот образ: Панель 3D-вкладок

Я думаю, в Риме есть много способов, но я думаю, что до сих пор не нашел идеального. Моя идея состояла в том, чтобы вырезать разделитель и активный делитель и поместить их между кнопками. Тем не менее, я не знаю, было ли это подходящим решением, потому что для первой и последней кнопки мне все равно понадобился бы другой стиль. У меня уже есть 9 патчей для окружающего (серого) контейнера.

Я также думал о создании красного 9 патча для красного бара, а не просто стиль выбранной кнопки. Проблема с этим решением заключается в том, что мне все равно придется поместить верхние диагональные белые линии в соответствии с количеством кнопок.

У кого-нибудь есть лучшее решение для меня?

Вот еще один подход: отделить заголовок от вкладок. Немного сложно, да, но преимущества:

  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_bg

И R.drawable.header_divider – это простой (необязательно прозрачный) растровый рисунок:

R.drawable.header_divider

Для меня лично создание другого фона для первой и последней кнопок – это наименее сложное решение, но это зависит от конкретной задачи.