Вкладки в стиле Android SlidingTabs с закругленными углами

Я использую SlidingTabs для создания двух вкладок. Пользовательский интерфейс вкладки должен выглядеть следующим образом:

При выборе первой вкладки SlidingTab UI

Когда выбрана вторая вкладка. SlidingTab UI 2

(Обратите внимание на прямые углы синего прямоугольника)

Я использую следующий селектор для создания пользовательского интерфейса, показанного выше.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--  Active tab -->
    <item android:state_selected="true" android:state_focused="false"
        android:state_pressed="false" android:drawable="@drawable/round_corner_rectangle" />
    <!--  Inactive tab -->
    <item android:state_selected="false" android:state_focused="false"
        android:state_pressed="false" android:drawable="@android:color/transparent" />
    <!--  Pressed tab -->
    <item android:state_pressed="true" android:state_selected="true" android:drawable="@drawable/round_corner_rectangle" />

    <item android:state_pressed="true" android:state_selected="false" android:drawable="@color/transparent" />
    <!--  Selected tab (using d-pad) -->
    <item android:state_focused="true" android:state_selected="true"
        android:state_pressed="false" android:drawable="@android:color/transparent" />
</selector>

Код round_corner_rectangle выглядит следующим образом:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="5dp"/>
    <solid android:color="@color/login_background" />
</shape>

login_background — темно-синий цвет. Используя приведенный выше код, я получаю следующее:

UI 1Интерфейс 2

Я, конечно, могу удалить элемент corner из round_corner_rectangle, чтобы темно-синий фон получился прямым, а не круглым. Если я делаю правую сторону синего прямоугольника прямой, когда выбрана другая вкладка, прямоугольник округляется с неправильной стороны.

Что я должен сделать, чтобы получить пользовательский интерфейс, как показано на первом изображении?

Обновление:- Как видно из моего кода, у меня нет проблем с созданием закругленных углов, проблема заключается в наличии прямых углов на выбранной вкладке. Если я просто добавляю закругленные углы, при выборе второй вкладки углы закругляются не с той стороны.


person Rohan Kandwal    schedule 18.07.2015    source источник
comment
проверить мой ответ .. я надеюсь, что это поможет вам   -  person Moinkhan    schedule 22.07.2015
comment
@Rohan Kandwal Вы нашли решение для этого?   -  person ShutterSoul    schedule 11.02.2016
comment
@PRB да, проверьте выбранный ответ.   -  person Rohan Kandwal    schedule 11.02.2016
comment
@Rohan Kandwal Я пытался, но не получилось :( Не могли бы вы опубликовать свой ответ. Я не знаю, где я делаю неправильно.   -  person ShutterSoul    schedule 11.02.2016
comment
@RohanKandwal Я сделал следующее: stackoverflow.com/questions/35337754/   -  person ShutterSoul    schedule 11.02.2016
comment
@PRB ваша проблема точно такая же, как у меня, просто немного изменен стиль. Вы пробовали выбранное решение?   -  person Rohan Kandwal    schedule 11.02.2016
comment
@RohanKandwal то, что я пробовал, упоминается в приведенной выше ссылке. Выбранное решение также пробовал. Но не повезло :(   -  person ShutterSoul    schedule 11.02.2016


Ответы (7)


Хорошо, во-первых, просто создайте этот простой прямоугольный xml. и Не беспокойтесь об углах, которые мы будем создавать динамически.

tabbackground.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="your_color" />
    <size android:height="40dp" />
</shape>

Теперь, когда вы меняете вкладку. Вы должны получить позицию выбранной вкладки, используя прослушиватели в переменной selectedTabPosition. Я не пишу полный код, просто даю вам скелет

if (selectedTabPosition == 0) { // that means first tab

    GradientDrawable drawable = (GradientDrawable) getResources().getDrawable(R.drawable.tabbackground);
    drawable.setCornerRadii(new float[]{30,30,0,0,0,0,30,30}); // this will create the corner radious to left side

} else if (selectedTabPosition == your_total_tabcount) { // that menas it's a last tab

    GradientDrawable drawable = (GradientDrawable) getResources().getDrawable(R.drawable.tabbackground);
    drawable.setCornerRadii(new float[]{0,0,30,30,30,30,0,0}); // this will create the corner radious to right side

} else { // you don't have to worry about it. it is only used if you have more then 2 tab. means for all middle tabs

    GradientDrawable drawable = (GradientDrawable) getResources().getDrawable(R.drawable.tabbackground); 
    drawable.setCornerRadii(new float[]{0,0,0,0,0,0,0,0}); // this will remove all corner radious

}
// and at last don't forget to set this drawable.

это то, что я пробовал при нажатии кнопки

введите описание изображения здесь

введите описание изображения здесь

person Moinkhan    schedule 22.07.2015
comment
Выглядит хорошо, я не могу попробовать в данный момент, но дам вам знать через 24 часа. Спасибо. - person Rohan Kandwal; 22.07.2015
comment
получение этого исключения. java.lang.ClassCastException: android.graphics.drawable.StateListDrawable нельзя преобразовать в android.graphics.drawable.GradientDrawable - person ShutterSoul; 10.02.2016
comment
ваш xml должен быть файлом для рисования, как я упоминал выше. не файл выбора.. - person Moinkhan; 10.02.2016
comment
@PRB, можешь опубликовать свой xml ?? - person Moinkhan; 10.02.2016
comment
@Moinkhan да, теперь работает нормально, но правая сторона не закругляется :( - person ShutterSoul; 10.02.2016
comment
@Moinkhan, еще одна проблема, обе вкладки имеют одинаковый цвет. Если он выбран, то только он должен быть цветным, иначе белым. - person ShutterSoul; 10.02.2016
comment
для круглого выпуска у вас могут возникнуть проблемы с if .. esle .. состояние .. И вы также можете установить цвет в этом случае если условие .. надеюсь, вы понимаете4 - person Moinkhan; 10.02.2016
comment
Давайте продолжим обсуждение в чате. - person ShutterSoul; 10.02.2016
comment
какие изменения я должен сделать, если мне нужны две разные цветные вкладки с разным цветом текста с закругленными углами. - person ULHAS PATIL; 22.08.2016
comment
@ULHAS PATIL Просто измените tabBackgroundColor и textColor выше, если условие .. это будет работать так, как вы хотите - person Moinkhan; 22.08.2016
comment
@Moinkhan спасибо за ваш быстрый ответ, но как насчет невыбранной вкладки, мне нужно снова изменить ее другим цветом? - person ULHAS PATIL; 22.08.2016
comment
@ULHAS PATIL да, конечно. Что вам нужно сделать, так это перед этим, если условие просто устанавливает цвет по умолчанию для всех ваших вкладок. И после этого ваш код выполняет условие if, и он изменит только выбранный цвет вкладки... - person Moinkhan; 22.08.2016

Используйте этот xml и A/c, чтобы изменить радиус. Он используется для установки угла в виде закругленной формы.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:topLeftRadius="5dp"
android:topRightRadius="5dp"
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
/>
<solid
android:color="#134F4D"
/>
<size
android:width="270dp"
android:height="60dp"
/>
</shape>
person Prabhakar    schedule 18.07.2015
comment
Это нормально работает для вкладки с левой стороны, но когда выбрана вкладка с правой стороны, закругленные углы находятся не на той стороне. - person Rohan Kandwal; 20.07.2015
comment
Я могу изменить код, но как убедиться, что закругленные углы находятся в правильном направлении относительно выбранной вкладки? - person Rohan Kandwal; 20.07.2015
comment
Как изменить радиус на ходу? Не подскажете, как изменить фон конкретной вкладки по отдельности? - person Rohan Kandwal; 20.07.2015
comment
вы должны справиться с этим из java-кодирования .. теперь вы должны принять мой ответ. - person Prabhakar; 21.07.2015
comment
В этом проблема, я знаю, что мне придется справиться с этим из java, но я не знаю, где. Можете ли вы хотя бы сказать мне, какие функции я должен использовать? - person Rohan Kandwal; 21.07.2015
comment
В адаптере проверьте, какая вкладка выбрана. Если вы найдете ее десять, измените цвет фона. - person Prabhakar; 21.07.2015
comment
У меня достаточно понимания, можете ли вы сказать мне, какой код в SlidingTab я должен вызвать, чтобы изменить фон вкладки? - person Rohan Kandwal; 21.07.2015
comment
Да, SlidingTabLayout от Google github.com/google/iosched/blob/master/android/src/main/java/com/ - person Rohan Kandwal; 22.07.2015
comment
в SlidingTabLayout можно редактировать код здесь @Override public void onPageSelected(int position) { if (mScrollState == ViewPager.SCROLL_STATE_IDLE) { mTabStrip.onViewPagerPageChanged(position, 0f); scrollToTab (позиция, 0); } for (int i = 0; i ‹ mTabStrip.getChildCount(); i++) { mTabStrip.getChildAt(i).setSelected(position == i); TextView tv = (TextView) mTabStrip.getChildAt(i); if(i == position){ tv.setBackground(введите свой код); } }} - person Prabhakar; 22.07.2015
comment
Хорошая идея, позвольте мне проверить и вернуться к вам. - person Rohan Kandwal; 22.07.2015
comment
теперь примите мой ответ и поблагодарите меня за помощь ... :) - person Prabhakar; 22.07.2015
comment
если ваша проблема решена, примите мой ответ, и он поможет другим, у кого такая же проблема. - person Prabhakar; 23.07.2015
comment
У меня не было времени протестировать код, как только я протестирую код, я отмечу вопрос решенным. - person Rohan Kandwal; 23.07.2015

Этот код отлично работает на Android 4.0 и выше и даст вам результат, как вы упомянули, и не судите код с предварительным просмотром в Android Studio.

<?xml version="1.0" encoding="utf-8"?>

<item>
    <shape>
        <solid
            android:angle="270.0"
            android:color="#5C83AF" />

        <corners android:topLeftRadius="8dp"
            android:bottomLeftRadius="8dp"/>
    </shape>
</item>

Редактировать 1: другое решение вашей проблемы можно решить с помощью изображения с 9 исправлениями.

Редактировать 2: https://github.com/hoang8f/android-segmented-control

person Vipul Asri    schedule 18.07.2015
comment
Спасибо за ответ, проверю и посмотрю - person Rohan Kandwal; 18.07.2015
comment
для этого вам, возможно, придется создать два отдельных селектора или каждую из вкладок и применять их по мере необходимости. У XML есть свои ограничения, поэтому, на мой взгляд, это лучший вариант, который вы можете сделать. В противном случае вы также можете создать собственное представление для этого. - person Vipul Asri; 20.07.2015
comment
Я понимаю, что мне нужно использовать два разных селектора, но проблема в том, что я не знаю, как добавить разные селекторы к каждому Slidingtab. - person Rohan Kandwal; 20.07.2015
comment
Попробуйте реализовать свои собственные SlidingTab.java и SlidingTabLayout.java. Вы также можете попробовать реализовать собственный макет для пейджера просмотра и использовать его метод getCurrentItem, чтобы отобразить правильное радио или флажок. - person Vipul Asri; 20.07.2015

Ваша левая вкладка (кнопка) в xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
    android:width="0dp"
    android:color="@color/transparent" />
<!-- you can add multiple colors -->
<gradient
    android:startColor="@color/your_start_color"
    android:endColor="@color/your_end_color" 
    />
<corners
    android:topLeftRadius="10dp"
    android:topRightRadius="0.1dp"
    android:bottomLeftRadius="10dp"
    android:bottomRightRadius="0.1dp"
    />
</shape>

для правой вкладки (кнопки) измените его следующим образом:

<corners
    android:topLeftRadius="0.1dp"
    android:topRightRadius="10dp"
    android:bottomLeftRadius="0.1dp"
    android:bottomRightRadius="10dp"
    />

и используйте его в своем селекторе xml.

person Fedor Tsyganov    schedule 24.07.2015

Вы пытались сделать свой темно-синий прямоугольник со всеми прямыми углами и просто сделать так, чтобы бежевые углы перекрывали прямоугольник, чтобы его прямые углы не были видны? Это должно заставить его работать так, как вы хотите.

Сделать так, чтобы бежевые углы перекрывали темно-синий прямоугольник

Другое возможное решение - использовать какую-то стороннюю библиотеку, например

https://github.com/hoang8f/android-segmented-control

Вы также можете проверить этот сайт, чтобы найти библиотеки:

https://android-arsenal.com/

person Ivan V    schedule 25.07.2015

Вам следует попробовать эту библиотеку https://github.com/hoang8f/android-segmented-control.

Его легко настроить, и легко установить выбранные и невыбранные состояния.

person pavle    schedule 26.07.2015

используйте следующий код в файле rounded_corner.xml в папке с возможностью рисования

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="50dp" />
    <stroke android:width="5px" android:color="#1a1a1a" />
</shape>

и используйте следующее в файле activity_main.xml

<Button
        android:id="@+id/btnCodeInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="@drawable/rounded_corner"
        android:text="CodeInput" />

Это оно

person Ganpat Kaliya    schedule 05.09.2015
comment
Вы не поняли вопроса должным образом, я знаю, как сделать закругленные фоны или кнопки, но проблема заключалась в том, как правильно настроить их при изменении вкладки. - person Rohan Kandwal; 07.09.2015
comment
вы можете использовать следующий код для выбранной и невыбранной вкладки selector.xml в папке с возможностью рисования. ‹?xml version=1.0 encoding=utf-8?› ‹селектор xmlns:android=schemas.android .com/apk/res/android› ‹item android:drawable=@drawable/box_open android:state_selected=true/› ‹item android:drawable=@drawable/box_open android:state_activated=true/› ‹item android :drawable=@drawable/box_closed›‹/item› ‹/selector› - person Ganpat Kaliya; 07.09.2015