Android UI 之ToggleTextView的妙用(自定义可切换TextView)
2015-09-11 15:41
381 查看
最近在开发中遇到一个这样的UI,想把心得与大家分享下,要求是这样的,当选中是出现文字,未选中没有文字,间距变小,先看下UI效果:
有人看完后可能觉得这挺简单的阿,有什么阿,用个ImageView+TextView就可以实现了,但是我想用一个组件就实现这样的效果,看我之前的博客的朋友也能认为用TextView或CheckBox也可以实现,是可以,不过还是觉得有点麻烦。icon可以用selector但是text没有selector,得在点击的时候用代码实现改变文字,觉得有些不爽,就想啊想,突然想起以前作滑动开关时用到过ToggleButton其实和CheckBox差不多,都是继承CompoundButton。但是用的时候什么发现,让图片(icon)居左(android:button或 android:drawableLeft)什么也不设置,icon之间也有很大间距,很影响UI布局。最后决定自己写个组件,参考ToggleButton源码后,ToggleTextView就诞生了,先看下代码:
需要加自定义属性attrs
很简单,有注释,不赘述了,再看看布局中的引用:
基本和使用ToggleButton或CheckBox差不多,注意如果使用android:drawableLeft属性,一定要设置android:backgroud=''@color/transparent''要不会出现诡异的不适配问题,同时将android:button设置成透明,去掉默认的CheckBox按钮,也可以不用android:drawableLeft直接用android:button但调整文字与图片间距很麻烦(详见Android
UI 之CheckBox的妙用一文)
好了,就是这样了,欢迎交流~
有人看完后可能觉得这挺简单的阿,有什么阿,用个ImageView+TextView就可以实现了,但是我想用一个组件就实现这样的效果,看我之前的博客的朋友也能认为用TextView或CheckBox也可以实现,是可以,不过还是觉得有点麻烦。icon可以用selector但是text没有selector,得在点击的时候用代码实现改变文字,觉得有些不爽,就想啊想,突然想起以前作滑动开关时用到过ToggleButton其实和CheckBox差不多,都是继承CompoundButton。但是用的时候什么发现,让图片(icon)居左(android:button或 android:drawableLeft)什么也不设置,icon之间也有很大间距,很影响UI布局。最后决定自己写个组件,参考ToggleButton源码后,ToggleTextView就诞生了,先看下代码:
package com.ml512.live.view; import com.ml512.live.R; import android.annotation.SuppressLint; import android.content.Context; import android.content.res.TypedArray; import android.util.AttributeSet; import android.widget.CompoundButton; /** * @Package com.ml512.live.view * @ClassName: ToggleTextView * @Description: 自定义【可切换TextView】 * @author malong * @date Sep 10, 2015 6:13:30 PM */ @SuppressLint("NewApi") public class ToggleTextView extends CompoundButton { private CharSequence mTextOn; private CharSequence mTextOff; public ToggleTextView(Context context) { super(context); initView(context, null, android.R.attr.checkboxStyle, 0); } public ToggleTextView(Context context, AttributeSet attrs) { super(context, attrs, android.R.attr.checkboxStyle); /** *这里传入checkboxStyle,使其有checkbox属性,以便作选中效果 */ initView(context, attrs, android.R.attr.checkboxStyle, 0); } public ToggleTextView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr, 0); initView(context, attrs, defStyleAttr, 0); } public ToggleTextView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { super(context, attrs, defStyleAttr, defStyleRes); initView(context, attrs, defStyleAttr, defStyleRes); } /** * @Description: 初始化 * @return void * @author malong * @date Sep 11, 201510:33:50 AM */ private void initView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { final TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ToggleTextView, defStyleAttr, defStyleRes); mTextOn = a.getText(R.styleable.ToggleTextView_android_textOn); mTextOff = a.getText(R.styleable.ToggleTextView_android_textOff); syncTextState(); a.recycle(); } @Override public void setChecked(boolean checked) { super.setChecked(checked); syncTextState(); } private void syncTextState() { boolean checked = isChecked(); if (checked && mTextOn != null) { setText(mTextOn); } else if (!checked && mTextOff != null) { setText(mTextOff); } } /** * Returns the text for when the ToggleTextView is in the checked state. * * @return The text. */ public CharSequence getTextOn() { return mTextOn; } /** * Sets the text for when the ToggleTextView is in the checked state. * * @param textOn * The text. */ public void setTextOn(CharSequence textOn) { mTextOn = textOn; if (isChecked()) { setText(textOn); } } /** * Returns the text for when the ToggleTextView is not in the checked state. * * @return The text. */ public CharSequence getTextOff() { return mTextOff; } /** * Sets the text for when the ToggleTextView is not in the checked state. * * @param textOff * The text. */ public void setTextOff(CharSequence textOff) { mTextOff = textOff; if (!isChecked()) { setText(textOff); } } @Override public CharSequence getAccessibilityClassName() { return ToggleTextView.class.getName(); } }
需要加自定义属性attrs
<?xml version="1.0" encoding="utf-8"?> <resources> <!-- ToggleTextView --> <declare-styleable name="ToggleTextView"> <attr name="android:textOn" /> <attr name="android:textOff" /> </declare-styleable> </resources>
很简单,有注释,不赘述了,再看看布局中的引用:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/color_000000" android:gravity="center_vertical" android:paddingLeft="10dp" android:paddingRight="20dp" > <com.ml512.live.view.ToggleTextView android:id="@+id/bottom_live_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@color/transparent" android:button="@color/transparent" android:drawableLeft="@drawable/selector_bottom_indicator_live" android:drawablePadding="5dp" android:padding="10dp" android:textColor="@color/color_ffffff" android:textOff="" android:textOn="直播" android:textStyle="bold" /> <com.ml512.live.view.ToggleTextView android:id="@+id/bottom_trailer_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@id/bottom_live_button" android:background="@color/transparent" android:button="@color/transparent" android:drawableLeft="@drawable/selector_bottom_indicator_trailer" android:drawablePadding="3dp" android:padding="10dp" android:textColor="@color/color_ffffff" android:textOff=" " android:textOn="预告" android:textStyle="bold" /> <com.ml512.live.view.ToggleTextView android:id="@+id/bottom_mine_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@id/bottom_trailer_button" android:background="@color/transparent" android:button="@color/transparent" android:drawableLeft="@drawable/selector_bottom_indicator_mine" android:drawablePadding="5dp" android:padding="10dp" android:textColor="@color/color_ffffff" android:textOff="" android:textOn="我的" android:textStyle="bold" /> </RelativeLayout>
基本和使用ToggleButton或CheckBox差不多,注意如果使用android:drawableLeft属性,一定要设置android:backgroud=''@color/transparent''要不会出现诡异的不适配问题,同时将android:button设置成透明,去掉默认的CheckBox按钮,也可以不用android:drawableLeft直接用android:button但调整文字与图片间距很麻烦(详见Android
UI 之CheckBox的妙用一文)
好了,就是这样了,欢迎交流~
相关文章推荐
- 交互设计
- UIDocumentInteractionController 的使用
- UIday1402:mac 终端 常用命令
- HDU 5136 Yue Fei's Battle
- 关于UICollectionViewController
- UIScrollView及UIPageControl的使用
- getgid getuid
- UGUI 按钮的监听事件系统
- UITableViewCell的4种显示格式
- UITableViewCell的4种显示格式
- Jsp中引用的taglib标签的声明和${pageContext.request.contextPath} 的含义
- UGUI 5.0版本Anchors功能详解
- easy ui 表单ajax和from两种提交数据方法
- 一种让 IE6/7/8 支持 media query 响应式设计的方法
- DataGuard Gap sequence的处理方法
- getContextPath、getServletPath、getRequestURI的区别
- parquet原理分析
- 探究requestDisallowInterceptTouchEvent失效的原因
- 简析StringBuffer与StringBuilder
- LeetCode_Implement Stack using Queues