Android UI 之ToggleTextView的妙用(自定义可切换TextView)

最近在开发中遇到一个这样的UI，想把心得与大家分享下，要求是这样的，当选中是出现文字，未选中没有文字，间距变小，先看下UI效果：





有人看完后可能觉得这挺简单的阿，有什么阿，用个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的妙用一文）

好了，就是这样了，欢迎交流～