如何在Android中应用边框来切换紧凑

cidc1ykv  于 2023-05-27  发布在  Android
关注(0)|答案(1)|浏览(99)

下面是我为switchcompact应用的代码,我可以得到没有边框的代码,但我的要求是应用与下图类似的边框
mylayout.xml

<android.support.v7.widget.SwitchCompat
        android:id="@+id/switch_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/switch_email"
        android:visibility="invisible"
        android:layout_marginRight="10dp"
        android:theme="@style/SwitchStyle"/>

styles.xml

<style name="SwitchStyle" parent="Theme.AppCompat.Light">
    <item name="colorControlActivated">@color/blue_action_bar</item>
    <item name="colorSwitchThumbNormal">@color/white</item>
    <item name="android:colorForeground">@color/gray</item>

但我需要一个类似的图像像这样

如何应用像这样的开关紧凑的边框来渲染。

izkcnapc

izkcnapc1#

我想到了这个解决方案:
1.准备两个可绘制对象用于轨道的打开和关闭状态,一个用于拇指:switch_track_on.xml

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <solid android:color="@color/blue" />
        <corners android:radius="18dp" />
        <stroke android:width="1dp" android:color="@color/white" />
        <size android:width="36dp" android:height="@dimen/dp20" />
    </shape>

switch_track_off.xml

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <solid android:color="@color/gray2" />
        <corners android:radius="18dp" />
        <size android:width="36dp" android:height="@dimen/dp20" />
    </shape>

switch_thumb.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
        <solid android:color="@color/white"/>
        <corners android:radius="16dp"/>
        <size android:width="@dimen/dp16" android:height="@dimen/dp16" />
    </shape>

1.将SwitchCompat的轨迹设置为透明,并使用以下样式将拇指设置为可绘制:

<style name="CustomSwitch" parent="Theme.AppCompat.Light">
        <item name="colorControlActivated">@color/white</item>
        <item name="colorSwitchThumbNormal">@color/white</item>
        <item name="trackTint">@android:color/transparent</item>
        <item name="android:thumb">@drawable/switch_thumb</item>
        <item name="thumbElevation">0dp</item>
    </style>

1.将可绘制轨迹的ImageView和SwitchCompat放入RelativeLayout:

<RelativeLayout
        android:id="@+id/profile_subscribe_item_switch_wrap"
        android:layout_height="@dimen/dp20"
        android:layout_width="@dimen/dp36">
    
        <ImageView
            android:id="@+id/switch_track_on"
            android:layout_width="@dimen/dp36"
            android:layout_height="@dimen/dp20"
            android:alpha="1"
            android:src="@drawable/switch_track_on"
            android:layout_centerVertical="true"
            android:layout_alignParentEnd="true" />
    
        <ImageView
            android:id="@+id/switch_track_off"
            android:layout_width="@dimen/dp36"
            android:layout_height="@dimen/dp20"
            android:alpha="0"
            android:src="@drawable/switch_track_off"
            android:layout_centerVertical="true"
            android:layout_alignParentEnd="true" />
    
        <androidx.appcompat.widget.SwitchCompat
            android:id="@+id/profile_subscribe_item_switch"
            style="@style/CustomSwitch"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text=""
            android:textOff=""
            android:textOn=""
            android:padding="0dp"
            android:layout_centerVertical="true"
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="2dp"
            app:switchPadding="0dp"
            app:showText="false" />
    
    </RelativeLayout>

1.最后将setOnCheckedChangeListener添加到SwitchCompat,并根据isChecked值动画跟踪ImageViews alpha值。

相关问题