Как правильно масштабировать пользовательский большой палец для виджета переключателя?

Question

У меня есть пользовательский набор для большого пальца для Switch виджета внутри LinearLayout. Я не могу заставить его правильно отображаться на всех видах экранов. На большинстве экранов это выглядит так:

Это нормально, но на некоторых экранах (например, 440 dpi) это выглядит так this-

Как сделать так, чтобы это выглядело одинаково на всех экранах? Я пробовал много вещей, в том числе switchMinWidth, установив android:width= в 0dp, используя thumbTextPadding, но ничего не работает. Все имеет точный тот же результат, он работает на некоторых экранах, но не на других.

Вот мой Switch виджет, помещенный в LinearLayout с layout_weight из 2. Там обычно 5 виджетов в каждом горизонтальном LinearLayout, но этот спецификатор c один имеет 4, так как Switch должен занимать 2 слота.

        <Switch
            android:id="@+id/btndegreerad"
            style="?android:attr/borderlessButtonStyle"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:background="@drawable/degree_rad_track"
            android:showText="true"
            android:switchTextAppearance="@style/SwitchTextTheme"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
            android:textOff="@string/btnrad"
            android:textOn="@string/btndegree"
            android:thumb="@drawable/degree_rad_thumb"
            android:thumbTextPadding="@dimen/_3sdp"
            android:thumbTint="@color/colorSwitch"
            android:track="@drawable/degree_rad_track" />

Вот degree_rad_thumb drawable-

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <size android:height="@dimen/_38sdp" android:width="0dp"/>
            <corners android:bottomRightRadius="10dp"
                android:bottomLeftRadius="10dp"
                android:topRightRadius="10dp"
                android:topLeftRadius="10dp"/>
        </shape>
    </item>
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <size android:height="@dimen/_38sdp" android:width="0dp"/>
            <corners android:bottomRightRadius="10dp"
                android:bottomLeftRadius="10dp"
                android:topRightRadius="10dp"
                android:topLeftRadius="10dp"/>
        </shape>
    </item>
</selector>

Вот также degree_rad_track, хотя это, вероятно, не требуется-

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorFadedPrimary"/>
            <corners android:bottomRightRadius="10dp"
                android:bottomLeftRadius="10dp"
                android:topRightRadius="10dp"
                android:topLeftRadius="10dp"/>
        </shape>
    </item>
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorFadedPrimary"/>
            <corners android:bottomRightRadius="10dp"
                android:bottomLeftRadius="10dp"
                android:topRightRadius="10dp"
                android:topLeftRadius="10dp"/>
        </shape>
    </item>
</selector>

Answer 1

Если вы хотите правильно масштабировать все экраны на что угодно; Мои лучшие правила - это использование ScrollView и RelativeLayout / ConstraintLayout в целом, поэтому его можно использовать и масштабировать.

Вы можете выбрать между ConstraintLayout и RelativeLayout; Оба должны корректно масштабироваться, возможно, относительное проще, так как вам не нужно устанавливать ограничения. ScrollView здесь не обязательно нужен, так как у нас мало данных.

Попробуйте поместить коммутатор в RelativeLayout / ConstraintLayout, и он должен работать.

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <Switch
                    android:id="@+id/btndegreerad"
                    style="?android:attr/borderlessButtonStyle"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="2"
                    android:background="@drawable/degree_rad_track"
                    android:showText="true"
                    android:switchTextAppearance="@style/SwitchTextTheme"
                    android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                    android:textOff="@string/btnrad"
                    android:textOn="@string/btndegree"
                    android:thumb="@drawable/degree_rad_thumb"
                    android:thumbTextPadding="@dimen/_3sdp"
                    android:thumbTint="@color/colorSwitch"
                    android:track="@drawable/degree_rad_track" />

            </RelativeLayout>

        </LinearLayout>

Примечание. Настройте макеты так, как вы хотите

Надеюсь, это поможет.

Answer 2

В настоящее время я работаю над похожим макетом, используя Switch с настраиваемым рисованием для большого пальца и дорожки. Из того, что я узнал, свойство веса LinearLayout может повлиять на растягиваемость вашей дорожки коммутатора (обрезанную или сжатую), если ширина вашего устройства не обеспечивает достаточно места.

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

Но если вы действительно хотите использовать LinearLayout, не используйте layout_weight для своего коммутатора.