Android Iphone风格的切换按钮

在android中，

切换按钮

如下所示-

我们是否可以将其修改为

Iphone

样式，如下所示-

此外，我们还可以包括iphone的切换按钮功能，如拖放切换功能

---

如何完成此操作？提前感谢。

您只需提供2个可牵引电缆即可

<ToggleButton 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/toggle_me"/>

可拉伸的将类似于：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true"
        android:drawable="@drawable/toggle_me_on" /> <!-- checked -->
    <item android:drawable="@drawable/toggle_me_off" /> <!-- default/unchecked -->
</selector>

---

不幸的是，这个解决方案并没有提供很好的过渡效果，但会完全满足您的要求。

获取“关闭”和“打开”按钮的所有图像，并在相对布局中创建一个这样的布局

然后在代码中，当按下on时，使用下面示例中的代码将后台资源设置为off。我可以得到想要的输出

public MySwitch(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);

    mTextPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
    Resources res = getResources();
    mTextPaint.density = res.getDisplayMetrics().density;
    mTextPaint.setShadowLayer(0.5f, 1.0f, 1.0f, Color.BLACK);

    TypedArray a = context.obtainStyledAttributes(attrs,
            R.styleable.MySwitch, defStyle, 0);

    mThumbDrawable = a.getDrawable(R.styleable.MySwitch_thumb);
    mTrackDrawable = a.getDrawable(R.styleable.MySwitch_track);
    mTextOn = a.getText(R.styleable.MySwitch_textOn);
    mTextOff = a.getText(R.styleable.MySwitch_textOff);
    mTextOutsideTrack = a.getBoolean(R.styleable.MySwitch_textOutsideTrack, false);
    mTextOnThumb = a.getBoolean(R.styleable.MySwitch_textOnThumb, false);
    mThumbTextPadding = a.getDimensionPixelSize( R.styleable.MySwitch_thumbTextPadding, 0);
    mTrackTextPadding = a.getDimensionPixelSize( R.styleable.MySwitch_trackTextPadding, 0);
    mSwitchMinWidth = a.getDimensionPixelSize( R.styleable.MySwitch_switchMinWidth, 0);
    mSwitchMinHeight = a.getDimensionPixelSize( R.styleable.MySwitch_switchMinHeight, 0);
    mSwitchPadding =  a.getDimensionPixelSize( R.styleable.MySwitch_switchPadding, 0);

    mTrackDrawable.getPadding(mTrackPaddingRect) ;
    //Log.d(TAG, "mTrackPaddingRect=" + mTrackPaddingRect);
    mThumbDrawable.getPadding(mThumbPaddingRect);
    //Log.d(TAG, "mThumbPaddingRect=" + mTrackPaddingRect);


    int appearance = a.getResourceId(R.styleable.MySwitch_switchTextAppearanceAttrib, 0);
    if (appearance != 0) {
        setSwitchTextAppearance(context, appearance);
    }
    a.recycle();

    ViewConfiguration config = ViewConfiguration.get(context);
    mTouchSlop = config.getScaledTouchSlop();
    mMinFlingVelocity = config.getScaledMinimumFlingVelocity();

    // Refresh display with current params
    refreshDrawableState();
    setChecked(isChecked());
    this.setClickable(true);
    //this.setOnClickListener(clickListener);
}

应用程序的屏幕截图-

---

如果您想处理形状（不使用图像）试试这个。当前我正在自定义复选框中使用它

checkbox\u selector.xml

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

    <item android:state_checked="false"
        android:drawable="@drawable/toggle_button_off" /> <!-- pressed -->
    <item android:state_checked="true"
        android:drawable="@drawable/toggle_button_on" /> <!-- focused -->
    <!-- default -->
    <item
        android:drawable="@drawable/toggle_button_off" />
</selector>

<?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="oval">
        <solid android:color="@android:color/white" />
        <size android:width="20dp" android:height="20dp" />
        <stroke android:width="2dp" android:color="#0000ffff" />
    </shape>
</item>
<item android:state_checked="true">
    <shape android:shape="oval">
        <solid android:color="@android:color/white" />
        <size android:width="20dp" android:height="20dp" />
        <stroke android:width="2dp" android:color="#0000ffff" />
    </shape>
</item>
</selector>`

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

<item android:state_checked="true">
    <shape android:shape="rectangle">
        <size android:width="36dp" android:height="20dp"/>
        <solid android:width="1dp" android:color="@color/primary"/>
        <corners android:radius="50dp"/>
    </shape>
</item>

<item android:state_checked="false">
    <shape android:shape="rectangle">
        <size android:width="36dp" android:height="20dp"/>
        <solid android:width="1dp" android:color="@android:color/darker_gray"/>
        <corners android:radius="50dp"/>
    </shape>
</item>

</selector>

toggle_button_off.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/toggle_background_off"></item>
    <item


        android:drawable="@drawable/white_toggle_icon"
        android:left="2dp"
        android:right="27.5dp"
        android:bottom="1.5dp"
        android:top="1.5dp"></item>
</layer-list>

在.xml上切换按钮

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/toggle_background_on"></item>

    <item


        android:drawable="@drawable/white_toggle_icon"
        android:right="2dp"
        android:left="27.5dp"
        android:bottom="1.5dp"
        android:top="1.5dp"></item>
</layer-list>

切换_background_off.xml

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


    <size android:height="32dp" android:width="60dp"/>
    <solid android:width="1dp" android:color="#919090"/>

    <corners android:radius="18dp" />

</shape>

在.xml上切换_background_

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


    <size android:height="32dp" android:width="60dp"/>
    <solid android:width="1dp" android:color="@color/orange"/>

    <corners android:radius="18dp" />
</shape>

白色切换图标.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
 <solid android:color="#ffffff"/>
   <stroke android:width="2dp" android:color="#fff" />
   <size android:width="25dp" android:height="25dp"/>
</shape>

---

使用

SwitchCompat

：

<!-- SwitchCompat -->
    <androidx.appcompat.widget.SwitchCompat
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:thumb="@drawable/thumb_selector"
                app:track="@drawable/track_selector"/>


 <!-- thumb_selector.xml -->
      <?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="oval">
                        <solid android:color="@android:color/white" />
                        <size android:width="20dp" android:height="20dp" />
                        <stroke android:width="2dp" android:color="#0000ffff" />
                    </shape> <!-- shape circle -->
                </item>
            </selector>

 <!-- track_selector.x -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <size android:width="36dp" android:height="20dp"/>
            <solid android:width="1dp" android:color="@android:color/holo_orange_dark"/>
            <corners android:radius="50dp"/>
        </shape>
    </item>

    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <size android:width="36dp" android:height="20dp"/>
            <solid android:width="1dp" android:color="@android:color/darker_gray"/>
            <corners android:radius="50dp"/>
        </shape>  
    </item>

</selector>

我的
SwitchCompat
带
62dp
带和
26dp
高度（基于@Thắng回答，但我添加了2个文本视图和1个样式）



switch\u thumb\u selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <size android:width="31dp" android:height="26dp" />
            <solid android:color="@android:color/white" />
            <stroke android:width="2dp" android:color="@android:color/transparent"/>
            <corners android:radius="26dp"/>
        </shape>
    </item>
</selector>

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <size android:width="62dp" android:height="26dp" />
            <solid android:color="#F50000" />
            <corners android:radius="26dp" />
        </shape>
    </item>

    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <size android:width="62dp" android:height="26dp" />
            <solid android:color="#888888" />
            <corners android:radius="26dp" />
        </shape>
    </item>
</selector>

<resources xmlns:tools="http://schemas.android.com/tools">
    ...
    <!-- It helps change color when you press and slide on Switch -->
    <style name="MyIOSSwitch" parent="Theme.AppCompat.Light">
          <item name="colorControlActivated">#F50000</item>
          <item name="android:colorForeground">#888888</item>
    </style>
</resources>



switch\u track\u selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <size android:width="31dp" android:height="26dp" />
            <solid android:color="@android:color/white" />
            <stroke android:width="2dp" android:color="@android:color/transparent"/>
            <corners android:radius="26dp"/>
        </shape>
    </item>
</selector>

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <size android:width="62dp" android:height="26dp" />
            <solid android:color="#F50000" />
            <corners android:radius="26dp" />
        </shape>
    </item>

    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <size android:width="62dp" android:height="26dp" />
            <solid android:color="#888888" />
            <corners android:radius="26dp" />
        </shape>
    </item>
</selector>

<resources xmlns:tools="http://schemas.android.com/tools">
    ...
    <!-- It helps change color when you press and slide on Switch -->
    <style name="MyIOSSwitch" parent="Theme.AppCompat.Light">
          <item name="colorControlActivated">#F50000</item>
          <item name="android:colorForeground">#888888</item>
    </style>
</resources>



themes.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <size android:width="31dp" android:height="26dp" />
            <solid android:color="@android:color/white" />
            <stroke android:width="2dp" android:color="@android:color/transparent"/>
            <corners android:radius="26dp"/>
        </shape>
    </item>
</selector>

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <size android:width="62dp" android:height="26dp" />
            <solid android:color="#F50000" />
            <corners android:radius="26dp" />
        </shape>
    </item>

    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <size android:width="62dp" android:height="26dp" />
            <solid android:color="#888888" />
            <corners android:radius="26dp" />
        </shape>
    </item>
</selector>

<resources xmlns:tools="http://schemas.android.com/tools">
    ...
    <!-- It helps change color when you press and slide on Switch -->
    <style name="MyIOSSwitch" parent="Theme.AppCompat.Light">
          <item name="colorControlActivated">#F50000</item>
          <item name="android:colorForeground">#888888</item>
    </style>
</resources>


...
#F50000
#888888

您不需要打开/关闭显示/隐藏文本，因为
thumb
和
text
的颜色都是白色。如果您的文本颜色不同，您可以通过在
SwitchCompat
上收听
setoncheckedchangelister
来显示/隐藏文本。可以使用com.google.android.material.switchmaterial.switchmaterial

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <size android:width="31dp" android:height="26dp" />
            <solid android:color="@android:color/white" />
            <stroke android:width="2dp" android:color="@android:color/transparent"/>
            <corners android:radius="26dp"/>
        </shape>
    </item>
</selector>

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <size android:width="62dp" android:height="26dp" />
            <solid android:color="#F50000" />
            <corners android:radius="26dp" />
        </shape>
    </item>

    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <size android:width="62dp" android:height="26dp" />
            <solid android:color="#888888" />
            <corners android:radius="26dp" />
        </shape>
    </item>
</selector>

<resources xmlns:tools="http://schemas.android.com/tools">
    ...
    <!-- It helps change color when you press and slide on Switch -->
    <style name="MyIOSSwitch" parent="Theme.AppCompat.Light">
          <item name="colorControlActivated">#F50000</item>
          <item name="android:colorForeground">#888888</item>
    </style>
</resources>

我们还可以得到一个好的转换

<com.google.android.material.switchmaterial.SwitchMaterial
android:id="@+id/switch1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:switchMinWidth="56dp"
android:layout_marginLeft="100dp"
android:layout_marginTop="120dp"
android:text="Switch1:"
android:thumb="@drawable/thumb_selector"
app:track="@drawable/track_selector"
android:checked="true"
app:thumbTint="@color/white"
app:trackTintMode="multiply"
android:layout_marginStart="100dp" />



thumb_selector.xml

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

    <item android:state_checked="false"
        android:drawable="@drawable/toggle_button_off" /> <!-- pressed -->
    <item android:state_checked="true"
        android:drawable="@drawable/toggle_button_on" /> <!-- focused -->
    <!-- default -->
    <item
        android:drawable="@drawable/toggle_button_off" />
</selector>

<?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="oval">
        <solid android:color="@android:color/white" />
        <size android:width="20dp" android:height="20dp" />
        <stroke android:width="2dp" android:color="#0000ffff" />
    </shape>
</item>
<item android:state_checked="true">
    <shape android:shape="oval">
        <solid android:color="@android:color/white" />
        <size android:width="20dp" android:height="20dp" />
        <stroke android:width="2dp" android:color="#0000ffff" />
    </shape>
</item>
</selector>`

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

<item android:state_checked="true">
    <shape android:shape="rectangle">
        <size android:width="36dp" android:height="20dp"/>
        <solid android:width="1dp" android:color="@color/primary"/>
        <corners android:radius="50dp"/>
    </shape>
</item>

<item android:state_checked="false">
    <shape android:shape="rectangle">
        <size android:width="36dp" android:height="20dp"/>
        <solid android:width="1dp" android:color="@android:color/darker_gray"/>
        <corners android:radius="50dp"/>
    </shape>
</item>

</selector>


`

track_selector.xml

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

    <item android:state_checked="false"
        android:drawable="@drawable/toggle_button_off" /> <!-- pressed -->
    <item android:state_checked="true"
        android:drawable="@drawable/toggle_button_on" /> <!-- focused -->
    <!-- default -->
    <item
        android:drawable="@drawable/toggle_button_off" />
</selector>

<?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="oval">
        <solid android:color="@android:color/white" />
        <size android:width="20dp" android:height="20dp" />
        <stroke android:width="2dp" android:color="#0000ffff" />
    </shape>
</item>
<item android:state_checked="true">
    <shape android:shape="oval">
        <solid android:color="@android:color/white" />
        <size android:width="20dp" android:height="20dp" />
        <stroke android:width="2dp" android:color="#0000ffff" />
    </shape>
</item>
</selector>`

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

<item android:state_checked="true">
    <shape android:shape="rectangle">
        <size android:width="36dp" android:height="20dp"/>
        <solid android:width="1dp" android:color="@color/primary"/>
        <corners android:radius="50dp"/>
    </shape>
</item>

<item android:state_checked="false">
    <shape android:shape="rectangle">
        <size android:width="36dp" android:height="20dp"/>
        <solid android:width="1dp" android:color="@android:color/darker_gray"/>
        <corners android:radius="50dp"/>
    </shape>
</item>

</selector>




我在这里发布问题时已经获得了此链接。不管怎样，谢谢你的链接是的，当然。我会的。你知道这种对拖拽功能的支持会不会导致一些虚假的欺诈网站链接被删除。谢谢。这不是我的问题，我不会对这样的问题投反对票，但我想这是因为你还没有写出你迄今为止尝试过的东西，只是在等待一个完整的答案，也许还因为安卓指南中说：不要模仿其他平台的UI元素。对于某些设备，swtch没有显示颜色（开关均为灰色），在某些设备上，它的尺寸真的很大。有解决办法吗？@未知没有，我没有解决过。一直在使用iOS开发。请解释如何自定义com.myapp.views.MyCheckBox？这是一个很好的答案，但刷卡对此不起作用way@playmaker420请发布com.myapp.views.mycheckbox的代码，以任何方式缩放这些i高度和宽度方面的法师？我的意思是，它只适合宽度60dp和高度32dp。这是使用形状实现的，我不使用图像。可能你将不得不使用宽度和高度。请更具体或准确地回答你的问题。你也可以将你的照片插入你的问题。还有一个选项可以调整大小e在你的帖子中给出了图片（请看），我是新手。这是我的第一个答案，所以不允许我插入图片。它说我需要获得一些分数