您的位置:首页 > 移动开发 > Android开发

Android自定义控件2:自定义带下划线的文本或按钮、组合使用可切换tab

2016-05-16 16:40 531 查看

效果一:文本下面带有下划线,或者按钮带有下划线。

效果二:做tab切换时,带下划线的切换。

效果图:

一:单按钮实现:

1、在attrs.xml中定义declare-styleable:
<!-- 带下划线的按钮 -->
<declare-styleable name="underLineBtn">
<attr name="unCheckedColor" format="reference|color"/><!-- 未选中时颜色 -->
<attr name="checkedColor" format="reference|color"/><!-- 选中时颜色 -->
<attr name="isChecked" format="boolean"/><!-- 是否选中 -->
<attr name="lineHeight" format="dimension"/><!-- 底部线的高度 -->
<attr name="lineWight" format="dimension"/><!-- 底部线的宽度 -->
<attr name="text" format="string"/><!-- 中间文本内容 -->
<attr name="textSize" format="dimension"/><!-- 中间字体大小 -->
</declare-styleable>


2、自定义下划线按钮控件UnderLineBtn.class:
package com.custom.controls.button;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.custom.R;
import com.custom.utils.StringUtil;

/**
* Created by Kevin on 2016/5/13.
*/
public class UnderLineBtn extends RelativeLayout {
/**
* 对应属性
*/
private float lineHeight, lineWeight, textSize;
private int unCheckedColor, checkedColor;
private boolean isChecked;
private String text;

/**
* 控件
*/
private TextView textView;//文字
private View view;//下划线
private LayoutParams textViewParams, viewParams;

public UnderLineBtn(Context context) {
super(context);
}

public UnderLineBtn(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public UnderLineBtn(Context context, AttributeSet attrs) {
super(context, attrs);
/**
* 获取自定义属性
*/
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.underLineBtn);
lineHeight = array.getDimension(R.styleable.underLineBtn_lineHeight, 1);
lineWeight = array.getDimension(R.styleable.underLineBtn_lineWight, LayoutParams.MATCH_PARENT);
textSize = array.getDimensionPixelSize(R.styleable.underLineBtn_textSize, 14);
unCheckedColor = array.getColor(R.styleable.underLineBtn_unCheckedColor, Color.WHITE);
checkedColor = array.getColor(R.styleable.underLineBtn_checkedColor, Color.BLUE);
isChecked = array.getBoolean(R.styleable.underLineBtn_isChecked, false);
text = array.getString(R.styleable.underLineBtn_text);
array.recycle();//属性获取完之后及时回收

//给控件赋值
textView = new TextView(context);
textView.setId(StringUtil.generateViewId());
view = new View(context);
if (isChecked) {
textView.setTextColor(checkedColor);
view.setBackgroundColor(checkedColor);
} else {
textView.setTextColor(unCheckedColor);
view.setBackgroundColor(unCheckedColor);
}
textView.setText(text);
//        textView.setTextSize(textSize);
textView.getPaint().setTextSize(textSize);
//控件位置
textViewParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
textViewParams.addRule(RelativeLayout.CENTER_IN_PARENT);
textView.setGravity(Gravity.CENTER_HORIZONTAL);
addView(textView, textViewParams);

viewParams = new LayoutParams((int) lineWeight, (int) lineHeight);
viewParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
addView(view, viewParams);
}
}


二:双按钮,点击切换实现:

1、主要就是在单按钮的基础上将isCHecked的setChecked()方法暴露。
2、并在UnderLineBtn.class中加入drawableStateChanged(),此方法中执行改变时的切换逻辑。
3、在setChecked()方法中调用refreshDrawableState();执行改变。
完整代码如下:
package com.custom.controls.button;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.custom.R;
import com.custom.utils.StringUtil;

/**
* Created by Kevin on 2016/5/13.
*/
public class UnderLineBtn extends RelativeLayout {
/**
* 对应属性
*/
private float lineHeight, lineWeight, textSize;
private int unCheckedColor, checkedColor;
private boolean isChecked;
private String text;

/**
* 控件
*/
private TextView textView;//文字
private View view;//下划线
private LayoutParams textViewParams, viewParams;

public UnderLineBtn(Context context) {
super(context);
}

public UnderLineBtn(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public UnderLineBtn(Context context, AttributeSet attrs) {
super(context, attrs);
/**
* 获取自定义属性
*/
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.underLineBtn);
lineHeight = array.getDimension(R.styleable.underLineBtn_lineHeight, 1);
lineWeight = array.getDimension(R.styleable.underLineBtn_lineWight, LayoutParams.MATCH_PARENT);
textSize = array.getDimensionPixelSize(R.styleable.underLineBtn_textSize, 14);
unCheckedColor = array.getColor(R.styleable.underLineBtn_unCheckedColor, Color.WHITE);
checkedColor = array.getColor(R.styleable.underLineBtn_checkedColor, Color.BLUE);
isChecked = array.getBoolean(R.styleable.underLineBtn_isChecked, false);
text = array.getString(R.styleable.underLineBtn_text);
array.recycle();//属性获取完之后及时回收

//给控件赋值
textView = new TextView(context);
textView.setId(StringUtil.generateViewId());
view = new View(context);
if (isChecked) {
textView.setTextColor(checkedColor);
view.setBackgroundColor(checkedColor);
} else {
textView.setTextColor(unCheckedColor);
view.setBackgroundColor(unCheckedColor);
}
textView.setText(text);
//        textView.setTextSize(textSize);
textView.getPaint().setTextSize(textSize);
//控件位置
textViewParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
textViewParams.addRule(RelativeLayout.CENTER_IN_PARENT);
textView.setGravity(Gravity.CENTER_HORIZONTAL);
addView(textView, textViewParams);

viewParams = new LayoutParams((int) lineWeight, (int) lineHeight);
viewParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
addView(view, viewParams);
}

public void setChecked(boolean checked) {
if (isChecked != checked) {
isChecked = checked;
/**
* 保留改变后的显示,执行drawableStateChanged()中的变化
* 不执行本方法:drawableStateChanged()中设置的改变将被复原
*/
refreshDrawableState();
}
}

@Override
protected void drawableStateChanged() {
super.drawableStateChanged();
//改变时的切换逻辑
if(isChecked){
textView.setTextColor(checkedColor);
view.setBackgroundColor(checkedColor);
}else{
textView.setTextColor(unCheckedColor);
view.setBackgroundColor(unCheckedColor);
}
}
}


以下问题可以直接点击了解:

declare-styleable:自定义控件的属性

自定义控件中setText()设置字体相同大小无法与原生控件一致
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: