Iphone 风格的切换按钮
Posted
技术标签:
【中文标题】Iphone 风格的切换按钮【英文标题】：Toggle button in Iphone Style 【发布时间】：2012-04-13 20:43:34 【问题描述】：在 android 中，Toggle buttons 如下所示 -
我们可以将其修改为Iphone 样式，如下所示 -
而且，我们能否将切换按钮的 iphone 功能也包括在内，例如拖动来切换功能。
如何完成这个动作？提前致谢。
【问题讨论】：
那不是我，我不会对这样的问题投反对票，但我想那是因为你还没有写出你迄今为止尝试过的东西，只是在等待一个完整的答案，也许也是因为据说在 Android 指南中：不要模仿其他平台的 UI 元素developer.android.com/design/patterns/pure-android.html 【参考方案1】：使用SwitchCompat:
<!-- SwitchCompat -->
<androidx.appcompat.widget.SwitchCompat
android:layout_
android:layout_
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: android: />
<stroke android: 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: android:/>
<solid android: android:color="@android:color/holo_orange_dark"/>
<corners android:radius="50dp"/>
</shape>
</item>
<item android:state_checked="false">
<shape android:shape="rectangle">
<size android: android:/>
<solid android: android:color="@android:color/darker_gray"/>
<corners android:radius="50dp"/>
</shape>
</item>
</selector>
【讨论】：
【参考方案2】：您只需提供 2 个可绘制对象。
<ToggleButton
android:layout_
android:layout_
android:background="@drawable/toggle_me"/>
并且drawable将类似于：
<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>
不幸的是，这个解决方案不能提供很好的过渡效果，但会给出你所要求的。
【讨论】：
在此处发布我的问题时，我已经获得了此链接。无论如何，谢谢你的链接 是的。生病。你知道这会支持切换操作的拖动功能吗 该链接指向一些虚假的诈骗网站 链接已删除。谢谢。【参考方案3】：如果你想处理形状（不使用图像），试试这个。目前我在自定义复选框中使用它
<com.myapp.views.MyCheckBox xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/checkbox"
android:layout_
android:layout_
android:layout_marginRight="5dp"
android:button="@null"
android:checked="false"
android:clickable="false"
android:drawableRight="@drawable/checkbox_selector"
android:focusable="false"
android:textColor="@color/orange" />
checkbox_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>
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>
toggle_button_on.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>
toggle_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: android:/>
<solid android: android:color="#919090"/>
<corners android:radius="18dp" />
</shape>
toggle_background_on.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size android: android:/>
<solid android: android:color="@color/orange"/>
<corners android:radius="18dp" />
</shape>
white_toggle_icon.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: android:color="#fff" />
<size android: android:/>
</shape>
【讨论】：
请说明您是如何自定义 com.myapp.views.MyCheckBox 的？ 这是一个很好的答案，但刷卡不能这样工作 @playmaker420 请发布 com.myapp.views.MyCheckBox 的代码 有什么方法可以根据高度和宽度缩放这些图像？我的意思是它看起来只适用于宽度 60dp 和高度 32dp。 这是使用形状实现的，我不使用图像。可能你将不得不使用宽度和高度【参考方案4】：使用来自Android-Switch-Demo 示例的以下代码。我可以得到想要的输出。
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);
应用程序的屏幕截图 -
【讨论】：
这种情况发生在某些设备上，swtch 不显示颜色（打开和关闭时都是灰色），并且在某些设备上它的尺寸非常大。任何解决方法？ @TheUnknown 不，我还没有解决这个问题。一直从事 ios 开发。【参考方案5】：我的 SwitchCompat 和 62dp 和 26dp 高度（基于 @Thắng 的回答，但我添加了 2 个 TextView 和 1 个样式）
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_
android:layout_
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.SwitchCompat
android:id="@+id/switch_on_off"
android:layout_
android:layout_
android:checked="true"
android:theme="@style/MyIOSSwitch"
android:thumb="@drawable/switch_thumb_selector"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:track="@drawable/switch_track_selector" />
<TextView
android:id="@+id/switch_text_on"
android:layout_
android:layout_
android:gravity="center"
android:paddingLeft="4dp"
android:text="ON"
android:textColor="#fff"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/switch_text_off"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/switch_text_off"
android:layout_
android:layout_
android:gravity="center"
android:paddingRight="4dp"
android:text="OFF"
android:textColor="#fff"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@id/switch_text_on"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
switch_thumb_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: android: />
<solid android:color="@android:color/white" />
<stroke android: android:color="@android:color/transparent"/>
<corners android:radius="26dp"/>
</shape>
</item>
</selector>
switch_track_selector.xml
<?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: android: />
<solid android:color="#F50000" />
<corners android:radius="26dp" />
</shape>
</item>
<item android:state_checked="false">
<shape android:shape="rectangle">
<size android: android: />
<solid android:color="#888888" />
<corners android:radius="26dp" />
</shape>
</item>
</selector>
themes.xml
<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>
您不需要打开/关闭显示/隐藏文本，因为thumb 和text 的颜色都是白色。如果您的文字颜色不同，您可以通过在SwitchCompat 上收听setOnCheckedChangeListener 来显示/隐藏文字
【讨论】：
【参考方案6】：可以使用 com.google.android.material.switchmaterial.SwitchMaterial
我们也可以得到一个很好的过渡
<com.google.android.material.switchmaterial.SwitchMaterial
android:id="@+id/switch1"
android:layout_
android:layout_
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">
<shape android:shape="oval">
<solid android:color="@android:color/white" />
<size android: android: />
<stroke android: android:color="#0000ffff" />
</shape>
</item>
<item android:state_checked="true">
<shape android:shape="oval">
<solid android:color="@android:color/white" />
<size android: android: />
<stroke android: android:color="#0000ffff" />
</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="true">
<shape android:shape="rectangle">
<size android: android:/>
<solid android: android:color="@color/primary"/>
<corners android:radius="50dp"/>
</shape>
</item>
<item android:state_checked="false">
<shape android:shape="rectangle">
<size android: android:/>
<solid android: android:color="@android:color/darker_gray"/>
<corners android:radius="50dp"/>
</shape>
</item>
</selector>
【讨论】：
请对您的问题更具体或更准确。您也可以将您的照片插入到您的问题中。还可以选择调整帖子中给定图像的大小（请参阅meta.***.com/a/253405/3894304） 我是初学者。这是我的第一个答案，所以不允许我插入图像。它说我需要获得一些积分【参考方案7】：获取所有关闭和打开按钮的图像，并以这样的相对布局进行布局
<RelativeLayout
android:id="@+id/setting1"
android:layout_
android:layout_
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="@drawable/switchon"
android:clickable="true"
android:onClick="setting1Click" >
<ImageView
android:id="@+id/settingicon"
android:layout_
android:layout_
android:layout_alignParentRight="true"
android:src="@drawable/switchball" />
<TextView
android:id="@+id/calsettingtxt"
android:layout_
android:layout_
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:layout_toLeftOf="@+id/settingicon"
android:text="@string/settingon"
android:textColor="@color/black"
android:textSize="18sp"
android:textStyle="bold" />
</RelativeLayout>
然后在代码中按下 on 时将背景资源设为关闭
【讨论】：
以上是关于Iphone 风格的切换按钮的主要内容，如果未能解决你的问题，请参考以下文章