Конкретная Кнопка Layout

Question

Я хотел бы иметь этот специфический дизайн:

Тексты "A", "B" и "C" по центру.

Я предлагаю 200 баллов, если вы предложите решение в xml. Он должен быть сделан из 3 кнопок. Мне НЕ нужна логика в java. Это я могу сделать сам, но мне НУЖНО xml drawables и layout.

EDIT

Примите во внимание обратной совместимости и андроида 5 пожалуйста.

Answer 1

Во-первых, я неправильно прочитал ваш вопрос. Для меня казалось, что вам нужен макет, как показано на картинке, которую вы опубликовали. Но, посмотрев библиотеку android-segmented-control, ясно, что вы ищете элемент управления, который позволяет переключаться между A, B, C ... и т. Д. Библиотека использует RadioGroup, что действительно является лучшим вариантом.

Я заметил, что библиотека использует отрицательные поля, которые я читал, вызывает проблемы на некоторых устройствах. Поддержка API 21 также отсутствует.

Как работает xml подход: RadioGroup построен на основе LinearLayout.Немного известная функция (вероятно, потому, что она не подходит большую часть времени) LinearLayout - ее атрибут divider. Если используется android:showDividers="...", то LinearLayout будет показывать разделители вместе со своими дочерними элементами. Там, где показаны эти разделители, зависит от значения, указанного для showDivider="..". Возможны три значения: middle, beginning & end. Мы будем использовать middle, чтобы показать разделители между A & B, и B & C.

Для проводной рамки нам не нужно несколько чертежей (по крайней мере, не сейчас). Мы можем сделать со следующим:

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> 
    <stroke android:color="@color/stroke_color" android:width="@dimen/stroke_width"/> 
    <corners android:radius="@dimen/corner_radius"/> 
</shape> 

вытяжка выше будет установлена ​​в качестве фона RadioGroup в. И showDividers позаботится о вертикальных подразделениях между A, B & C. Итак, наш макет выглядит так же, как и ваша опубликованная фотография. Ну, с showDividers, мы также должны обеспечить divider вытяжки:

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> 
    <solid android:color="@color/stroke_color"/> 
    <size android:width="@dimen/stroke_width"/> 
</shape> 

Теперь мы должны заботиться о активных состояниях для RadioButtons. Учитывая закругленные углы, нам нужно будет написать 3 разных рисунка: один для первого ребенка, один для середины, один для последнего. Этот подход является масштабируемым - первый и последний доступный остаются неизменными, в то время как каждый ребенок между первым & последним получает средний результат.Я создал несколько гов, которые можно добавить в свой проект:

API < 21 - место в этих res/drawable:

RadioGroup background

RadioGroup divider

RadioButton background for first child

RadioButton background for middle child

RadioButton background for last child

API> = 21 - место их в res/drawable-v21:

RadioButton background for first child

RadioButton background for middle child

RadioButton background for last child

Ресурсы - содержит определенные цвета, д imensions и стили - Вы можете поместить этот файл в res/values или скопируйте и вставьте каждый тип ресурса к соответствующему файлу:

Resources

Наконец, вот пример XML-макет, который показывает, как определенные стили, чтобы это произошло :

Sample

в действии на уровне API < 21:

pre_lollipop.mp4

В действии на API 21:

lollipop.mp4

Answer 2

вам нужны две различные формы, один мы обогнули угол на левой

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle" > 
<solid android:color="@color/your_color"/> 
    <corners 
    android:topLeftRadius="0dp" 
    android:bottomLeftRadius="0dp" 
    android:topLeftRadius="15dp" 
    android:topRightRadius="15dp"/> 
</shape> 

и один с закругленным углом на правой

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle" > 
<solid android:color="@color/your_color"/> 
    <corners 
    android:topRightRadius="0dp" 
    android:bottomRightRadius 
    android:topLeftRadius="15dp" 
    android:topRightRadius="15dp"/> 
</shape> 

в качестве фона для кнопок. Вы можете расположить три кнопки по горизонтали LinearLayout. Чтобы дать три одинаковой ширины, поставьте layout_width="0dp" и layout_weight="1".

Answer 3

Вам нужно создать три XML

вводимого коэффициента

shape_left.xml:

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 

    <corners 
     android:bottomLeftRadius="5dp" 
     android:topLeftRadius="5dp"/> 

    <stroke 
     android:color="@android:color/darker_gray" 
     android:width="1dp"/> 

    <solid 
     android:color="@android:color/transparent"/> 

</shape> 

shape_middle.xml:

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle"> 

    <stroke 
     android:color="@android:color/darker_gray" 
     android:width="1dp"/> 

    <solid 
     android:color="@android:color/transparent"/> 

</shape> 

shape_right.xml:

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle"> 

    <corners 
     android:bottomRightRadius="5dp" 
     android:topRightRadius="5dp"/> 

    <stroke 
     android:color="@android:color/darker_gray" 
     android:width="1dp"/> 

    <solid 
     android:color="@android:color/transparent"/> 

</shape> 

В макете :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       xmlns:tools="http://schemas.android.com/tools" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:paddingLeft="@dimen/activity_horizontal_margin" 
       android:paddingRight="@dimen/activity_horizontal_margin" 
       android:paddingTop="@dimen/activity_vertical_margin" 
       android:paddingBottom="@dimen/activity_vertical_margin" 
       android:orientation="horizontal" 
       tools:context=".MainActivity"> 

    <Button 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" 
     android:background="@drawable/drawable_left"/> 

    <Button 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" 
     android:background="@drawable/shape_middle"/> 

    <Button 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" 
     android:background="@drawable/shape_right"/> 

</LinearLayout> 

Будьте осторожны, хотя для кнопок в Android 5.0 могут возникнуть некоторые проблемы. Но вы можете поместить это как фон для любого вида.

Я тестировал его на Android 5.0, и он работает. Добавлен прозрачный цвет (может быть любого цвета) для поддержки более старых версий. Для версий ниже Android 4.0 вам необходимо создать папку drawable-v14 и поместить туда эти фигуры. В обычной выпадающей папке вы должны поместить те же фигуры, но вместо bottomLeftRadius вы должны сделать bottomRightRadius. То же самое касается shape_right. Это из-за ошибки, которая неправильно поворачивает нижние углы.