SwitchButton各种样式

最新推荐文章于 2024-06-12 10:12:45 发布
最新推荐文章于 2024-06-12 10:12:45 发布
阅读量1.8k 收藏 1
点赞数 3
分类专栏： Android，SwitchButton

从github上下载了源码，然后摘取了几种switchButton的样式

摘至https://github.com/kyleduo/SwitchButton

最下面有样式截图


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.switchbuttondemo.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1" />

    <com.kyleduo.switchbutton.SwitchButton
        android:id="@+id/switchButton"
        style="@style/SwitchButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#FFFFFF"
        android:textSize="16dp"
        app:kswTextOff="Off"
        app:kswTextOn="On" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2" />

    <com.kyleduo.switchbutton.SwitchButton
        android:id="@+id/sb_default"
        style="@style/SwitchButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3" />

    <com.kyleduo.switchbutton.SwitchButton
        android:id="@+id/sb_text_state"
        style="@style/SwitchButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/custom_text_state_color"
        android:textSize="16dp"
        app:kswTextOff="Off"
        app:kswTextOn="On" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="4" />

    <com.kyleduo.switchbutton.SwitchButton
        android:id="@+id/sb_nofade"
        style="@style/SwitchButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:kswFadeBack="false" />

    <TextView
        android:layout_width="match_parent"
        android:gravity="center"
        android:layout_height="wrap_content"
        android:text="5" />

    <com.kyleduo.switchbutton.SwitchButton
        android:id="@+id/sb_custom"
        style="@style/SwitchButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:kswBackMeasureRatio="2.2"
        app:kswBackRadius="2dp"
        app:kswThumbRadius="2dp"
        app:kswTintColor="#49416E" />

    <TextView
        android:layout_width="match_parent"
        android:gravity="center"
        android:layout_height="wrap_content"
        android:text="6" />

    <com.kyleduo.switchbutton.SwitchButton
        android:id="@+id/sb_custom_flyme"
        style="@style/SwitchButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:kswBackDrawable="@drawable/flyme_back_drawable"
        app:kswBackMeasureRatio="2.2"
        app:kswThumbDrawable="@drawable/flyme_thumb_drawable"
        app:kswThumbHeight="16dp"
        app:kswThumbWidth="16dp" />

    <TextView
        android:layout_width="match_parent"
        android:gravity="center"
        android:layout_height="wrap_content"
        android:text="7" />

    <com.kyleduo.switchbutton.SwitchButton
        android:id="@+id/sb_custom_miui"
        style="@style/SwitchButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:kswBackDrawable="@drawable/miui_back_drawable"
        app:kswBackMeasureRatio="2"
        app:kswThumbDrawable="@drawable/miui_thumb_drawable"
        app:kswThumbHeight="18dp"
        app:kswThumbWidth="18dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="8" />

    <com.kyleduo.switchbutton.SwitchButton
        android:id="@+id/sb_tint_color_0"
        style="@style/SwitchButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        app:kswTintColor="#B13254" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="9" />

    <com.kyleduo.switchbutton.SwitchButton
        android:id="@+id/sb_tint_color_1"
        style="@style/SwitchButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        app:kswTintColor="#FF5449" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="10" />

    <com.kyleduo.switchbutton.SwitchButton
        android:id="@+id/sb_tint_color_2"
        style="@style/SwitchButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        app:kswTintColor="#0E5AA4" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="11" />

    <com.kyleduo.switchbutton.SwitchButton
        android:id="@+id/sb_md"
        style="@style/SwitchButtonStyleMD"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="12" />

    <com.kyleduo.switchbutton.SwitchButton
        android:id="@+id/sb_ios"
        style="@style/SwitchButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:kswAnimationDuration="300"
        app:kswBackDrawable="@drawable/ios_back_drawable"
        app:kswBackMeasureRatio="1.4"
        app:kswThumbDrawable="@drawable/ios_thumb_selector"
        app:kswThumbMarginBottom="-8dp"
        app:kswThumbMarginLeft="-5dp"
        app:kswThumbMarginRight="-5dp"
        app:kswThumbMarginTop="-2.5dp" />

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="13" />

        <com.kyleduo.switchbutton.SwitchButton
            android:id="@+id/sb_disable"
            style="@style/SwitchButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:enabled="false" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="14" />

        <com.kyleduo.switchbutton.SwitchButton
            android:id="@+id/sb_disable_checked"
            style="@style/SwitchButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:enabled="false" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="15" />

        <com.kyleduo.switchbutton.SwitchButton
            android:id="@+id/sb_disable_control"
            style="@style/SwitchButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="16" />

        <com.kyleduo.switchbutton.SwitchButton
            android:id="@+id/sb_disable_control_no_event"
            style="@style/SwitchButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

</LinearLayout>
================================================
接下来是资源文件 style.xml
直接粘贴进去就行

<style name="StyleTitleText">
        <item name="android:paddingTop">4dp</item>
        <item name="android:paddingBottom">2dp</item>
        <item name="android:textColor">#444444</item>
        <item name="android:textSize">16sp</item>
    </style>
    <style name="SwitchButtonStyle">
    <item name="android:paddingLeft">10dp</item>
    <item name="android:paddingRight">10dp</item>
    <item name="android:paddingTop">4dp</item>
    <item name="android:paddingBottom">4dp</item>
</style>

    <style name="SwitchButtonStyleMD" parent="SwitchButtonMD">
        <item name="android:paddingLeft">10dp</item>
        <item name="android:paddingRight">10dp</item>
        <item name="android:paddingTop">4dp</item>
        <item name="android:paddingBottom">4dp</item>
    </style>
--------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------
flyme_back_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:state_enabled="false">
      <shape>
         <solid android:color="#FBFBFB"/>
         <corners android:radius="99dp"/>
         <stroke
            android:width="1dp"
            android:color="#DEDEDE"/>
      </shape>
   </item>
   <item>
      <shape>
         <solid android:color="#FBFBFB"/>
         <corners android:radius="99dp"/>
         <stroke
            android:width="1dp"
            android:color="#D0D0D0"/>
      </shape>
   </item>
</selector>
----------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------
flyme_thumb_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:state_checked="true" android:state_enabled="false">
      <shape android:shape="oval">
         <solid android:color="#B8E2F8"/>
      </shape>
   </item>
   <item android:state_enabled="false">
      <layer-list>
         <item android:bottom="6dp" android:left="4dp" android:right="4dp" android:top="6dp">
            <shape>
               <solid android:color="#DEDEDE"/>
               <corners android:radius="1dp"/>
            </shape>
         </item>
      </layer-list>
   </item>
   <item android:state_checked="true">
      <shape android:shape="oval">
         <solid android:color="#28A4E9"/>
      </shape>
   </item>
   <item>
      <layer-list>
         <item android:bottom="6dp" android:left="4dp" android:right="4dp" android:top="6dp">
            <shape>
               <solid android:color="#D0D0D0"/>
               <corners android:radius="1dp"/>
            </shape>
         </item>
      </layer-list>
   </item>
</selector>

-----------------------------------=======================================
ios_back_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:state_checked="true">
        <shape>
            <solid android:color="#b3ecbc"/>
            <corners android:radius="50dp"/>
        </shape>
    </item>
    <item android:state_enabled="false" android:state_checked="false">
        <shape>
            <solid android:color="#FEFEFE"/>
            <corners android:radius="50dp"/>
            <stroke
                android:width="1.5dp"
                android:color="#F0F0F0"/>
        </shape>
    </item>
   <item android:state_checked="true">
      <shape>
         <solid android:color="#43d95d"/>
         <corners android:radius="50dp"/>
      </shape>
   </item>
   <item>
      <shape>
         <solid android:color="#FEFEFE"/>
         <corners android:radius="50dp"/>
         <stroke
            android:width="1.5dp"
            android:color="#E6E6E6"/>
      </shape>
   </item>
</selector>
======================================================================
ios_thumb_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@drawable/ios_thumb_disable"/>
    <item android:drawable="@drawable/ios_thumb"/>
</selector>

========================================================================
miui_back_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:state_enabled="false">
      <shape>
         <solid android:color="#F8F8F8"/>
         <corners android:radius="99dp"/>
         <stroke
            android:width="1px"
            android:color="#DEDEDE"/>
      </shape>
   </item>
   <item>
      <shape>
         <solid android:color="#F8F8F8"/>
         <corners android:radius="99dp"/>
         <stroke
            android:width="1px"
            android:color="#BABABA"/>
      </shape>
   </item>
</selector>
==========================================================================
miui_thumb_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:state_enabled="false" android:state_checked="true">
      <shape android:shape="oval">
         <solid android:color="#FFA75E"/>
         <stroke
            android:width="1px"
            android:color="#DB8056"/>
      </shape>
   </item>
   <item android:state_enabled="false">
      <shape android:shape="oval">
         <solid android:color="#E1E1E1"/>
         <stroke
            android:width="1px"
            android:color="#ECECEC"/>
      </shape>
   </item>
   <item android:state_checked="true">
      <shape android:shape="oval">
         <solid android:color="#FF7201"/>
         <stroke
            android:width="1px"
            android:color="#DB5517"/>
      </shape>
   </item>
   <item>
      <shape android:shape="oval">
         <solid android:color="#E0E0E0"/>
         <stroke
            android:width="1px"
            android:color="#D0D0D0"/>
      </shape>
   </item>
</selector>
================================================================
在res文件夹下new一个color文件夹，用来保存color样式

custom_thumb_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:color="#334F2D54" android:state_enabled="false" android:state_checked="true"/>
   <item android:color="#AAAAAA" android:state_enabled="false"/>
   <item android:color="#513D54" android:state_pressed="true"/>
   <item android:color="#4F2D54" android:state_checked="true"/>
   <item android:color="#EEEEEE" />
</selector>


custom_text_state_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:color="?attr/colorAccent" android:state_checked="true"/>
   <item android:color="#FFFFFF" android:state_checked="false"/>
</selector>

custom_back_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:color="#204F2D54" android:state_checked="true"/>
   <item android:color="#D4D4D4" android:state_checked="false" />
</selector>


顺序用序号标注了，自己对着找 
-------------------------------------


老伞
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
安卓 android 自定义 switch button，滑动开关
09-19
安卓 android 自定义 switch button，滑动开关，绝对漂亮美观
Android SwitchButton 开关按钮 的多种实现方式
09-08
最近做项目时 ，有设置界面的开关按钮然后发现一个特别好用的SwitchButton，在这里记录一下，之前很多东西都没用记录，现在我开始记录一些好用的东西,Android SwitchButton 开关按钮 demo,大家参考后可根据自己需求修改应用到自己项目中，
Qt实现SwitchButton滑动开关按钮组件
最新发布
SuperYang_的博客
06-12 373
使用Qt如何制作一个滑动开关按钮，同类的文章和代码网上很多，但很多都是pyqt编写的，也有c++编写的，大家可以参考. 我这里主要是实现了一个滑动按钮，富有滑动动画和文字，话不多说，上代码自定义滑动按钮。
仿ios样式的SwitchButton
lumingzhang的博客
05-07 425
1.添加依赖 implementation 'com.kyleduo.switchbutton:library:1.4.1' 2.布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xml...
Android开发：仿苹果iPhone 切换按钮SwitchButton的实现
小五博客园
10-16 1607
目录 引言 效果图 一、在您的应用程序中使用SwitchButton 二、布局中使用 三、SwitchButton的属性值 四、需要注意的地方 结束语 引言 项目开发中用到了switch切换按钮，所以在网上找了一个用的比较多的控件，这里记录一下用法。 效果图 一、在您的应用程序中使用SwitchButton 该控件github地址：https...
Android开发之玩转SwitchButton
lulusayhi的博客
03-08 6948
/**  * SwitchButton开关控件早已经非常流行。有各种各样的样式，SwitchButton开关控件一般用于app软件设置那里，控制缓存、声音、提示、下载等等。是具有很好的UI体验以及用户的习惯性  */ Part 1、使用自定义View来实现SwitchButton 步骤： [java] view plain copy
switchbutton
08-12
这种控件在各种应用程序中都有广泛的应用，如设置界面、选项配置等。在本讨论中，我们将深入探讨自定义开关控件的相关知识点，包括其设计原理、实现方式、自定义属性以及在实际项目中的应用。 首先，Android SDK...
自定义SwitchButton
02-28
然而，系统默认的`SwitchButton`样式可能无法满足所有设计需求，因此开发者有时需要自定义`SwitchButton`来实现更个性化的视觉效果或交互逻辑。本篇文章将深入探讨如何在Android中自定义`SwitchButton`，并以`...
AS 各种switchButton的快速使用
07-13
本教程将深入讲解如何在Android应用中高效地使用各种形态的`SwitchButton`，包括ISO类型的以及不同形状的圆形和方形`SwitchButton`。 首先，我们来了解`SwitchButton`的基础知识。`SwitchButton`是Android SDK中的`...
SwitchButton
08-12
考虑到不同设备的屏幕尺寸和分辨率，开发者需要确保SwitchButton在各种设备上都能正常显示和使用。这可能涉及到使用尺寸资源和百分比布局。 5. **触摸事件与手势识别**： 对于滑动操作，SwitchButton会自动处理...
SwitchButton 开关按钮的多种实现方式源码
04-15
`SwitchButton`的默认样式和行为可以通过XML布局文件直接配置，例如设置开关的颜色、大小、文字等属性。在XML中，你可以使用`<android.widget.Switch>`标签来创建一个开关按钮，并通过`android:textOn`和`android:...
SwitchButton 开关按钮的多种实现方式
06-04
SwitchButton 开关按钮的多种实现方式
Android第三方开源SwitchButton
weixin_34308389的博客
06-21 359
Android第三方开源SwitchButton Android SwitchButton是github上的一个第三方开源项目，其项目主页是：https://github.com/kyleduo/SwitchButton Android平台上的Switch Button样式单一，SwitchButton旨在丰富Android平台的Switch样式的Button，其实现的结果如...
用开源项目SwitchButton实现各种风格的switch
weixin_33883178的博客
01-18 298
今天介绍的开源项目是否的优秀，又是国人的作品。之前我接触过很多很多的自定义switch，有些动画僵硬，有些不能自定义switch的宽度，有些只能定义宽度不能设置滑块的宽高。但，这个项目提供了各种定制的选项，堪称完美！ 项目地址：https://github.com/kyleduo/SwitchButton 作者博客：http://www.kyleduo.com/   一、在xml中使用...
SwitchButton（原ToggleButton）
Android小飞の博客
12-08 662
样式图： gradle绑定: repositories { mavenCentral() jcenter() } ... dependencies { compile 'com.github.zcweng:switch-button:0.0.3@aar' } 布局使用: LinearLayout xmlns:android="http:
记个SwitchButton笔记
web_longboss的博客
06-26 1361
https://github.com/kyleduo/SwitchButton 在xml布局文件中配置属性. name info kswThumbDrawable 手柄 kswThumbColor 手柄颜色 kswThumbMargin 手柄周边margin kswThumbMarginTop 上外边距 kswThumbM...
夜间模式
sweetliteli的博客
09-03 265
package com.exbawei.liteli.switchbutton; import android.app.Application; import android.support.v7.app.AppCompatDelegate; /** * Created by li te li on 2017/9/2. */ public class App extends Applic
Android第三方开源 SwitchButton
IT666DHW的博客
06-07 2254
                                    Android第三方开源SwitchButtonAndroid SwitchButton是github上的一个第三方开源项目，其项目主页是：https://github.com/kyleduo/SwitchButton Android平台上的Switch Button样式单一，SwitchButton旨在丰富Android平台...
Android中如何选择SwitchButton
AmazonUnicon的博客
04-23 580
1,系统自带switch 缺点:不能自定义设置宽高,不建议使用 2,第三方SwitchButton 1com.suke.widget.SwitchButton,github star2k多 <com.suke.widget.SwitchButton android:id="@+id/switch_go_home" android:layout_width="@dimen/m_iot_dp_100" android:layout_height="@dimen/m_iot

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值