toggbutton

简介: 2013年8月14日Android记录 很多应用都会有用户设置,用户的一些偏好可以由用户来决定那是应用人性化的体现,在实际开发中很多情况都作成可配置的了,本篇博客要介绍的是一个比较炫的状态按钮切换,我想很多开发者都想做出这样的效果,在这里我也就把自己参与的项目当中的这部分实现,做出Demo来于朋友们分享。 没有图,我感觉就特别不舒服:
2013年8月14日Android记录

很多应用都会有用户设置,用户的一些偏好可以由用户来决定那是应用人性化的体现,在实际开发中很多情况都作成可配置的了,本篇博客要介绍的是一个比较炫的状态按钮切换,我想很多开发者都想做出这样的效果,在这里我也就把自己参与的项目当中的这部分实现,做出Demo来于朋友们分享。

没有图,我感觉就特别不舒服:


这样看没办法看出效果,如果能做出动态图就好了,下次吧。

除了ToggleButton的自定义之外,用户配置的信息也是要保存起来的,每一次启动程序的时候要能保证使用的是之前的配置,而不是默认配置,在这里使用SharedPreferences是最好的选择了。

想要源码的猛戳这里:http://download.csdn.net/detail/wwj_748/5945829


布局文件:
/2013.08.14_ToggleButton_demo/res/layout/settings.xml
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:id="@+id/LinearLayout1"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:background="@drawable/bg"  
  6.     android:orientation="vertical" >  
  7.   
  8.     <RelativeLayout  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="wrap_content"  
  11.         android:background="@drawable/banner_bg" >  
  12.   
  13.         <TextView  
  14.             android:id="@+id/tv_Title"  
  15.             android:layout_width="wrap_content"  
  16.             android:layout_height="42dp"  
  17.             android:layout_centerHorizontal="true"  
  18.             android:gravity="center"  
  19.             android:text="设置"  
  20.             android:textColor="#ffffff"  
  21.             android:textSize="22sp" />  
  22.     </RelativeLayout>  
  23.   
  24.     <ScrollView  
  25.         android:layout_width="match_parent"  
  26.         android:layout_height="match_parent" >  
  27.   
  28.         <LinearLayout  
  29.             android:layout_width="match_parent"  
  30.             android:layout_height="wrap_content"  
  31.             android:orientation="vertical" >  
  32.   
  33.             <LinearLayout  
  34.                 android:id="@+id/layout_AutoPlay"  
  35.                 android:layout_width="match_parent"  
  36.                 android:layout_height="wrap_content"  
  37.                 android:background="@drawable/item_short_bg_selector"  
  38.                 android:gravity="center_vertical" >  
  39.   
  40.                 <TextView  
  41.                     android:id="@+id/tv_AutoPlay"  
  42.                     android:layout_width="0dp"  
  43.                     android:layout_height="wrap_content"  
  44.                     android:layout_marginLeft="10dp"  
  45.                     android:layout_weight="1"  
  46.                     android:focusable="false"  
  47.                     android:singleLine="true"  
  48.                     android:text="自动播放"  
  49.                     android:textColor="#7a6f66"  
  50.                     android:textSize="18sp" />  
  51.   
  52.                 <RelativeLayout  
  53.                     android:layout_width="wrap_content"  
  54.                     android:layout_height="wrap_content"  
  55.                     android:layout_marginRight="10dp" >  
  56.   
  57.                     <ToggleButton  
  58.                         android:id="@+id/toggle_AutoPlay"  
  59.                         android:layout_width="wrap_content"  
  60.                         android:layout_height="wrap_content"  
  61.                         android:background="@drawable/toggle_selector"  
  62.                         android:gravity="left|center_vertical"  
  63.                         android:paddingLeft="14dp"  
  64.                         android:paddingRight="14dp"  
  65.                         android:textColor="#ffffff"  
  66.                         android:textOff="OFF"  
  67.                         android:textOn="ON" />  
  68.   
  69.                     <ImageButton  
  70.                         android:id="@+id/toggleButton_AutoPlay"  
  71.                         android:layout_width="wrap_content"  
  72.                         android:layout_height="wrap_content"  
  73.                         android:layout_alignRight="@+id/toggle_AutoPlay"  
  74.                         android:background="#00000000"  
  75.                         android:src="@drawable/progress_thumb_selector" />  
  76.                 </RelativeLayout>  
  77.             </LinearLayout>  
  78.   
  79.             <ImageView  
  80.                 android:layout_width="match_parent"  
  81.                 android:layout_height="wrap_content"  
  82.                 android:scaleType="fitXY"  
  83.                 android:src="@drawable/list_divider" />  
  84.   
  85.             <LinearLayout  
  86.                 android:id="@+id/layout_StartOnBoot"  
  87.                 android:layout_width="match_parent"  
  88.                 android:layout_height="wrap_content"  
  89.                 android:background="@drawable/item_short_bg_selector"  
  90.                 android:gravity="center_vertical" >  
  91.   
  92.                 <TextView  
  93.                     android:id="@+id/tv_StartOnBoot"  
  94.                     android:layout_width="0dp"  
  95.                     android:layout_height="wrap_content"  
  96.                     android:layout_marginLeft="10dp"  
  97.                     android:layout_weight="1"  
  98.                     android:focusable="false"  
  99.                     android:singleLine="true"  
  100.                     android:text="开机自启动"  
  101.                     android:textColor="#7a6f66"  
  102.                     android:textSize="18sp" />  
  103.   
  104.                 <RelativeLayout  
  105.                     android:layout_width="wrap_content"  
  106.                     android:layout_height="wrap_content"  
  107.                     android:layout_marginRight="10dp" >  
  108.   
  109.                     <ToggleButton  
  110.                         android:id="@+id/toggle_StartOnBoot"  
  111.                         android:layout_width="wrap_content"  
  112.                         android:layout_height="wrap_content"  
  113.                         android:background="@drawable/toggle_selector"  
  114.                         android:gravity="left|center_vertical"  
  115.                         android:paddingLeft="14dp"  
  116.                         android:paddingRight="14dp"  
  117.                         android:textColor="#ffffff"  
  118.                         android:textOff="OFF"  
  119.                         android:textOn="ON" />  
  120.   
  121.                     <ImageButton  
  122.                         android:id="@+id/toggleButton_StartOnBoot"  
  123.                         android:layout_width="wrap_content"  
  124.                         android:layout_height="wrap_content"  
  125.                         android:layout_alignRight="@+id/toggle_StartOnBoot"  
  126.                         android:background="#00000000"  
  127.                         android:src="@drawable/progress_thumb_selector" />  
  128.                 </RelativeLayout>  
  129.             </LinearLayout>  
  130.         </LinearLayout>  
  131.     </ScrollView>  
  132.   
  133. </LinearLayout>  


哪些selector文件的代码就不贴了,自己看源码吧


Activity文件
/2013.08.14_ToggleButton_demo/src/com/wwj/toggle/Setting.java
  1. package com.wwj.toggle;  
  2.   
  3.   
  4. import android.app.Activity;  
  5. import android.os.Bundle;  
  6. import android.view.Gravity;  
  7. import android.view.View;  
  8. import android.view.View.OnClickListener;  
  9. import android.widget.ImageButton;  
  10. import android.widget.LinearLayout;  
  11. import android.widget.RelativeLayout;  
  12. import android.widget.ToggleButton;  
  13.   
  14. /** 
  15.  * 自定义ToggleButton的例子 
  16.  *  
  17.  * @author wwj 2013年8月14 
  18.  */  
  19. public class Setting extends Activity {  
  20.   
  21.     private LinearLayout layout_AutoPlay;  
  22.     private LinearLayout layout_StartOnBoot;  
  23.     private ToggleButton toggle_AutoPlay;  
  24.     private ToggleButton toggle_StartOnBoot;  
  25.     private ImageButton toggleButton_AutoPlay;  
  26.     private ImageButton toggleButton_StartOnBoot;  
  27.   
  28.     @Override  
  29.     protected void onCreate(Bundle savedInstanceState) {  
  30.         super.onCreate(savedInstanceState);  
  31.         setContentView(R.layout.settings);  
  32.   
  33.         // 找到控件  
  34.         layout_AutoPlay = (LinearLayout) findViewById(R.id.layout_AutoPlay);  
  35.         layout_StartOnBoot = (LinearLayout) findViewById(R.id.layout_StartOnBoot);  
  36.         toggle_AutoPlay = (ToggleButton) findViewById(R.id.toggle_AutoPlay);  
  37.         toggle_StartOnBoot = (ToggleButton) findViewById(R.id.toggle_StartOnBoot);  
  38.         toggleButton_AutoPlay = (ImageButton) findViewById(R.id.toggleButton_AutoPlay);  
  39.         toggleButton_StartOnBoot = (ImageButton) findViewById(R.id.toggleButton_StartOnBoot);  
  40.   
  41.         initViews();  
  42.         setListeners();  
  43.     }  
  44.   
  45.     private void initViews() {  
  46.         // 是否自动播放,获取SharePerference保存的用户配置  
  47.         boolean isAutoPlay = SettingUtils.get(this, SettingUtils.AUTO_PLAY,  
  48.                 false);  
  49.         toggle_AutoPlay.setChecked(isAutoPlay);  
  50.         RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) toggleButton_AutoPlay  
  51.                 .getLayoutParams();  
  52.         if (isAutoPlay) { // 如果是自动播放  
  53.             // 调整位置  
  54.             params.addRule(RelativeLayout.ALIGN_RIGHT, -1);  
  55.             params.addRule(RelativeLayout.ALIGN_LEFT,  
  56.                     R.id.toggleButton_AutoPlay);  
  57.             toggleButton_AutoPlay.setLayoutParams(params);  
  58.             toggleButton_AutoPlay  
  59.                     .setImageResource(R.drawable.progress_thumb_selector);  
  60.             toggle_AutoPlay.setGravity(Gravity.RIGHT | Gravity.CENTER_VERTICAL);  
  61.         } else {  
  62.             // 调整位置  
  63.             params.addRule(RelativeLayout.ALIGN_RIGHT, R.id.toggle_AutoPlay);  
  64.             params.addRule(RelativeLayout.ALIGN_LEFT, -1);  
  65.             toggleButton_AutoPlay.setLayoutParams(params);  
  66.             toggleButton_AutoPlay  
  67.                     .setImageResource(R.drawable.progress_thumb_off_selector);  
  68.             toggle_AutoPlay.setGravity(Gravity.LEFT | Gravity.CENTER_VERTICAL);  
  69.         }  
  70.   
  71.         boolean isAutostart = SettingUtils.get(this,  
  72.                 SettingUtils.IS_AUTO_START, true);  
  73.   
  74.         toggle_StartOnBoot.setChecked(isAutostart);  
  75.         RelativeLayout.LayoutParams params3 = (RelativeLayout.LayoutParams) toggleButton_StartOnBoot  
  76.                 .getLayoutParams();  
  77.         if (isAutostart) {  
  78.             // 调整位置  
  79.             params3.addRule(RelativeLayout.ALIGN_RIGHT, -1);  
  80.             params3.addRule(RelativeLayout.ALIGN_LEFT, R.id.toggle_StartOnBoot);  
  81.             toggleButton_StartOnBoot.setLayoutParams(params3);  
  82.             toggleButton_StartOnBoot  
  83.                     .setImageResource(R.drawable.progress_thumb_selector);  
  84.   
  85.             toggle_StartOnBoot.setGravity(Gravity.RIGHT  
  86.                     | Gravity.CENTER_VERTICAL);  
  87.         } else {  
  88.             // 调整位置  
  89.             params3.addRule(RelativeLayout.ALIGN_RIGHT, R.id.toggle_StartOnBoot);  
  90.             params3.addRule(RelativeLayout.ALIGN_LEFT, -1);  
  91.             toggleButton_StartOnBoot.setLayoutParams(params3);  
  92.             toggleButton_StartOnBoot  
  93.                     .setImageResource(R.drawable.progress_thumb_off_selector);  
  94.   
  95.             toggle_StartOnBoot.setGravity(Gravity.LEFT  
  96.                     | Gravity.CENTER_VERTICAL);  
  97.         }  
  98.     }  
  99.   
  100.     private void setListeners() {  
  101.         toggle_AutoPlay.setOnCheckedChangeListener(new ToggleListener(this,  
  102.                 "自动播放", toggle_AutoPlay, toggleButton_AutoPlay));  
  103.         toggle_StartOnBoot.setOnCheckedChangeListener(new ToggleListener(this,  
  104.                 "开机自启动", toggle_StartOnBoot, toggleButton_StartOnBoot));  
  105.   
  106.         // UI事件,按钮点击事件  
  107.         OnClickListener clickToToggleListener = new OnClickListener() {  
  108.   
  109.             @Override  
  110.             public void onClick(View v) {  
  111.                 toggle_AutoPlay.toggle();  
  112.             }  
  113.         };  
  114.   
  115.         toggleButton_AutoPlay.setOnClickListener(clickToToggleListener);  
  116.         layout_AutoPlay.setOnClickListener(clickToToggleListener);  
  117.   
  118.         // UI事件,按钮点击事件  
  119.         OnClickListener clickToToggleAutostartListener = new OnClickListener() {  
  120.             public void onClick(View v) {  
  121.                 toggle_StartOnBoot.toggle();  
  122.             }  
  123.         };  
  124.         toggleButton_StartOnBoot  
  125.                 .setOnClickListener(clickToToggleAutostartListener);  
  126.         layout_StartOnBoot  
  127.                 .setOnClickListener(clickToToggleAutostartListener);  
  128.     }  
  129.   
  130. }  

工具类:
/2013.08.14_ToggleButton_demo/src/com/wwj/toggle/SettingUtils.java
  1. package com.wwj.toggle;  
  2.   
  3. import android.content.Context;  
  4. import android.content.SharedPreferences;  
  5. import android.content.SharedPreferences.Editor;  
  6. import android.preference.PreferenceManager;  
  7.   
  8. public class SettingUtils {  
  9.     public static final String AUTO_PLAY = "auto_play"// 自动播放  
  10.     public static final String IS_AUTO_START = "is_auto_start"// 开机自启动  
  11.       
  12.       
  13.     /** 
  14.      * 获取配置 
  15.      * @param context 
  16.      * @param name 
  17.      * @param defaultValue 
  18.      * @return 
  19.      */  
  20.     public static boolean get(Context context, String name, boolean defaultValue) {  
  21.         final SharedPreferences prefs = PreferenceManager.getDefaultSharedPreferences(context);  
  22.         boolean value = prefs.getBoolean(name, defaultValue);  
  23.         return value;  
  24.     }  
  25.       
  26.     /** 
  27.      * 保存用户配置 
  28.      * @param context 
  29.      * @param name 
  30.      * @param value 
  31.      * @return 
  32.      */  
  33.     public static boolean set(Context context, String name, boolean value) {  
  34.         final SharedPreferences prefs = PreferenceManager.getDefaultSharedPreferences(context);  
  35.         Editor editor = prefs.edit();  
  36.         editor.putBoolean(name, value);  
  37.         return editor.commit(); //提交  
  38.     }  
  39. }  

/2013.08.14_ToggleButton_demo/src/com/wwj/toggle/DisplayUtils.java
  1. package com.wwj.toggle;  
  2.   
  3. import android.content.Context;  
  4.   
  5. public class DisplayUtils {  
  6.     public static int dip2px(Context context, float dpValue) {  
  7.         final float scale = context.getResources().getDisplayMetrics().density;  
  8.         return (int) (dpValue * scale + 0.5f);  
  9.     }  
  10.   
  11.     public static int px2dip(Context context, float pxValue) {  
  12.         final float scale = context.getResources().getDisplayMetrics().density;  
  13.         return (int) (pxValue / scale + 0.5f);  
  14.     }  
  15.   
  16.     public static int getScreenWidth(Context context) {  
  17.         return context.getResources().getDisplayMetrics().widthPixels;  
  18.     }  
  19.   
  20.     public static int getScreenHeight(Context context) {  
  21.         return context.getResources().getDisplayMetrics().heightPixels;  
  22.     }  
  23. }  


/2013.08.14_ToggleButton_demo/src/com/wwj/toggle/ToggleListener.java
  1. package com.wwj.toggle;  
  2.   
  3.   
  4. import android.content.Context;  
  5. import android.view.Gravity;  
  6. import android.view.animation.TranslateAnimation;  
  7. import android.widget.CompoundButton;  
  8. import android.widget.CompoundButton.OnCheckedChangeListener;  
  9. import android.widget.ImageButton;  
  10. import android.widget.RelativeLayout;  
  11. import android.widget.ToggleButton;  
  12.   
  13. /** 
  14.  * 状态按钮的监听事件 
  15.  *  
  16.  * @author wwj 
  17.  *  
  18.  */  
  19. public class ToggleListener implements OnCheckedChangeListener {  
  20.     private Context context;  
  21.     private String settingName;  
  22.     private ToggleButton toggle;  
  23.     private ImageButton toggle_Button;  
  24.   
  25.     public ToggleListener(Context context, String settingName,  
  26.             ToggleButton toggle, ImageButton toggle_Button) {  
  27.         this.context = context;  
  28.         this.settingName = settingName;  
  29.         this.toggle = toggle;  
  30.         this.toggle_Button = toggle_Button;  
  31.     }  
  32.   
  33.     @Override  
  34.     public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {  
  35.         // 保存设置  
  36.         if ("自动播放".equals(settingName)) {  
  37.             SettingUtils.set(context, SettingUtils.AUTO_PLAY, isChecked);  
  38.         } else if ("开机自启动".equals(settingName)) {  
  39.             SettingUtils.set(context, SettingUtils.IS_AUTO_START, isChecked);  
  40.         }  
  41.         // 播放动画  
  42.         RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) toggle_Button  
  43.                 .getLayoutParams();  
  44.         if (isChecked) {  
  45.             // 调整位置  
  46.             params.addRule(RelativeLayout.ALIGN_RIGHT, -1);  
  47.             if ("自动播放".equals(settingName)) {  
  48.                 params.addRule(RelativeLayout.ALIGN_LEFT, R.id.toggle_AutoPlay);  
  49.             } else if ("开机自启动".equals(settingName)) {  
  50.                 params.addRule(RelativeLayout.ALIGN_LEFT,  
  51.                         R.id.toggle_StartOnBoot);  
  52.             }  
  53.             toggle_Button.setLayoutParams(params);  
  54.             toggle_Button.setImageResource(R.drawable.progress_thumb_selector);  
  55.             toggle.setGravity(Gravity.RIGHT | Gravity.CENTER_VERTICAL);  
  56.             // 播放动画  
  57.             TranslateAnimation animation = new TranslateAnimation(  
  58.                     DisplayUtils.dip2px(context, 40), 000);  
  59.             animation.setDuration(200);  
  60.             toggle_Button.startAnimation(animation);  
  61.         } else {  
  62.             // 调整位置  
  63.             if ("自动播放".equals(settingName)) {  
  64.                 params.addRule(RelativeLayout.ALIGN_RIGHT, R.id.toggle_AutoPlay);  
  65.             } else if ("开机自启动".equals(settingName)) {  
  66.                 params.addRule(RelativeLayout.ALIGN_RIGHT,  
  67.                         R.id.toggle_StartOnBoot);  
  68.             }  
  69.             params.addRule(RelativeLayout.ALIGN_LEFT, -1);  
  70.             toggle_Button.setLayoutParams(params);  
  71.             toggle_Button  
  72.                     .setImageResource(R.drawable.progress_thumb_off_selector);  
  73.   
  74.             toggle.setGravity(Gravity.LEFT | Gravity.CENTER_VERTICAL);  
  75.             // 播放动画  
  76.             TranslateAnimation animation = new TranslateAnimation(  
  77.                     DisplayUtils.dip2px(context, -40), 000);  
  78.             animation.setDuration(200);  
  79.             toggle_Button.startAnimation(animation);  
  80.         }  
  81.     }  
  82.   

目录
相关文章
|
2天前
|
人工智能 自动驾驶 大数据
预告 | 阿里云邀您参加2024中国生成式AI大会上海站,马上报名
大会以“智能跃进 创造无限”为主题,设置主会场峰会、分会场研讨会及展览区,聚焦大模型、AI Infra等热点议题。阿里云智算集群产品解决方案负责人丛培岩将出席并发表《高性能智算集群设计思考与实践》主题演讲。观众报名现已开放。
|
18天前
|
存储 人工智能 弹性计算
阿里云弹性计算_加速计算专场精华概览 | 2024云栖大会回顾
2024年9月19-21日,2024云栖大会在杭州云栖小镇举行,阿里云智能集团资深技术专家、异构计算产品技术负责人王超等多位产品、技术专家,共同带来了题为《AI Infra的前沿技术与应用实践》的专场session。本次专场重点介绍了阿里云AI Infra 产品架构与技术能力,及用户如何使用阿里云灵骏产品进行AI大模型开发、训练和应用。围绕当下大模型训练和推理的技术难点,专家们分享了如何在阿里云上实现稳定、高效、经济的大模型训练,并通过多个客户案例展示了云上大模型训练的显著优势。
|
22天前
|
存储 人工智能 调度
阿里云吴结生:高性能计算持续创新,响应数据+AI时代的多元化负载需求
在数字化转型的大潮中,每家公司都在积极探索如何利用数据驱动业务增长,而AI技术的快速发展更是加速了这一进程。
|
13天前
|
并行计算 前端开发 物联网
全网首发!真·从0到1!万字长文带你入门Qwen2.5-Coder——介绍、体验、本地部署及简单微调
2024年11月12日,阿里云通义大模型团队正式开源通义千问代码模型全系列,包括6款Qwen2.5-Coder模型,每个规模包含Base和Instruct两个版本。其中32B尺寸的旗舰代码模型在多项基准评测中取得开源最佳成绩,成为全球最强开源代码模型,多项关键能力超越GPT-4o。Qwen2.5-Coder具备强大、多样和实用等优点,通过持续训练,结合源代码、文本代码混合数据及合成数据,显著提升了代码生成、推理和修复等核心任务的性能。此外,该模型还支持多种编程语言,并在人类偏好对齐方面表现出色。本文为周周的奇妙编程原创,阿里云社区首发,未经同意不得转载。
|
7天前
|
人工智能 自然语言处理 前端开发
100个降噪蓝牙耳机免费领,用通义灵码从 0 开始打造一个完整APP
打开手机,录制下你完成的代码效果,发布到你的社交媒体,前 100 个@玺哥超Carry、@通义灵码的粉丝,可以免费获得一个降噪蓝牙耳机。
3736 13
|
26天前
|
缓存 监控 Linux
Python 实时获取Linux服务器信息
Python 实时获取Linux服务器信息
|
12天前
|
人工智能 自然语言处理 前端开发
什么?!通义千问也可以在线开发应用了?!
阿里巴巴推出的通义千问,是一个超大规模语言模型,旨在高效处理信息和生成创意内容。它不仅能在创意文案、办公助理、学习助手等领域提供丰富交互体验,还支持定制化解决方案。近日,通义千问推出代码模式,基于Qwen2.5-Coder模型,用户即使不懂编程也能用自然语言生成应用,如个人简历、2048小游戏等。该模式通过预置模板和灵活的自定义选项,极大简化了应用开发过程,助力用户快速实现创意。
|
14天前
|
人工智能 自然语言处理 前端开发
用通义灵码,从 0 开始打造一个完整APP,无需编程经验就可以完成
通义灵码携手科技博主@玺哥超carry 打造全网第一个完整的、面向普通人的自然语言编程教程。完全使用 AI,再配合简单易懂的方法,只要你会打字,就能真正做出一个完整的应用。本教程完全免费,而且为大家准备了 100 个降噪蓝牙耳机,送给前 100 个完成的粉丝。获奖的方式非常简单,只要你跟着教程完成第一课的内容就能获得。
6133 10
|
8天前
|
人工智能 C++ iOS开发
ollama + qwen2.5-coder + VS Code + Continue 实现本地AI 辅助写代码
本文介绍在Apple M4 MacOS环境下搭建Ollama和qwen2.5-coder模型的过程。首先通过官网或Brew安装Ollama,然后下载qwen2.5-coder模型,可通过终端命令`ollama run qwen2.5-coder`启动模型进行测试。最后,在VS Code中安装Continue插件,并配置qwen2.5-coder模型用于代码开发辅助。
616 4
|
10天前
|
云安全 人工智能 自然语言处理