《代码里的世界》 —UI篇
用文字札记描绘自己 android学习之路
转载请保留出处 by Qiao
http://blog.csdn.net/qiaoidea/article/details/46715453
1.概述
Android中关于控制开关和页面/状态切换的使用场景还是比较多的。源生做的支持也有比如RadioGroup 和Tabhost等。这里准备通过自定义View来模仿学习下IOS两种常见UI样式： SwitchButton 和 SegmentControl。
首先先通过简易的组装View来实现两种UI的相应效果，其次呢，尝试通过绘制来达到同样的更灵活的样式。代码前后共实现按钮切换和页面切换两个样式，三种实现方案，其中，两种SwitchButton实现，一种SegmentControl实现。实现方案中关于自定义View绘制，本篇只讲述SwitchView，希望大家能举一反三，同样做到SegmentControl的相同效果。个人也更倾向于使用自定义实现，更方便灵活。
先看效果图：
头部即为切换页面的SegmentControl，然后第一行是通过组装view来实现SwitchButton，第二行则是完全绘制出来的SwitchButton效果。接下来我们分别一一讲述代码实现。
2.SwitchButton样式两种实现
状态开关按钮常用于某些控制开关，设置选项里最为常见。
2.1 组合View实现
该方法比较简单明了，定义三个view，开启状态和关闭状态两个背景View，一个圆形按钮view。点击时候利用滑动动画移动按钮和状态背景，达到类似的视觉效果。
先看xml布局：
<?xml version="1.0" encoding="utf-8"?><merge xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content" > <ImageView android:id="@+id/on_bg_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/switch_on_bg" /> <ImageView android:id="@+id/off_bg_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/switch_off_bg" /> </FrameLayout> <ImageView android:id="@+id/circle_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/switch_circle" /></merge>因为是帧布局，所以顶层使用merge（merge简化xml不解释，自行百度）。然后使用两个开关状态背景和一个圆形按钮组合而成。
1. 全局变量参数
public class SwitchView extends FrameLayout { protected boolean isChecked; //是否选中状态 protected View onBgView; protected View offBgView; protected View circleView; protected boolean autoForPerformClick = true; //是否允许点击自动切换 protected OnCheckedChangedListener onCheckedChangedListener; //切换事件监听 //...}一般状态切换是由click事件监听，根据业务逻辑来判断是否切换状态。但对于switchButton,通常我们操作时直观感受应该是先切换了状态才执行相应操作的，所以我们在performClick事件中直接根据autoForPerformClick 的状态来相应点击操作。
至于performClick ，其实就是控制条用onClickListener的方法体，具体逻辑在View源码中查看。
2. 初始化
public SwitchView(Context context) { super(context); initialize(); } public SwitchView(Context context, AttributeSet attrs) { super(context, attrs); initialize(); } public SwitchView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); initialize(); } protected void initialize() { setClickable(true); LayoutInflater layoutInflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE); layoutInflater.inflate(R.layout.switch_view, this); onBgView = findViewById(R.id.on_bg_view); offBgView = findViewById(R.id.off_bg_view); circleView = findViewById(R.id.circle_view); }3. 点击响应
@Override public boolean performClick() { if (!autoForPerformClick) //如果不是自动响应则调用默认处理方法 return super.performClick(); /** *否则直接切换switch状态并触发事件监听 */ setChecked(!isChecked, true); if (onCheckedChangedListener != null) { onCheckedChangedListener.onChanged(this, isChecked); } return super.performClick(); }View点击后会执行performClick方法，并判断是否调用clickLisentener。这里我们直接重写performClick方法，如果自动响应autoForPerformClick为ture则直接切换Switch状态，否则调用默认处理逻辑。
4.切换状态动画
点击打开，则圆形按钮从左端滑动到右端，onBg显示，offBg隐藏；
再点击关闭，圆形按钮从右端滑动到左端，onBg隐藏,offBg显示。
public void setChecked(boolean value, boolean needAnimate) { if (isChecked == value) return; isChecked = value; float targetX = 0; //要移动的目标位置 if (getWidth() != 0) { //当前view没有渲染上去时候，getWidth()为零 targetX = getWidth() - circleView.getWidth(); } else { measure(0, 0); targetX = getMeasuredWidth() - circleView.getMeasuredWidth(); } long durationMillis = needAnimate ? 200 : 0; if (isChecked) { onBgView.bringToFront(); //显示在最前端 onBgView.setVisibility(View.VISIBLE); offBgView.setVisibility(View.VISIBLE); //平移动画 TranslateAnimation an1 = new TranslateAnimation(0, targetX, 0, 0); an1.setFillAfter(true); an1.setDuration(durationMillis); circleView.startAnimation(an1); //透明度动画 AlphaAnimation an2 = new AlphaAnimation(0, 1); an2.setFillAfter(true); an2.setDuration(durationMillis); onBgView.startAnimation(an2); } else { offBgView.bringToFront(); onBgView.setVisibility(View.VISIBLE); offBgView.setVisibility(View.VISIBLE); TranslateAnimation an1 = new TranslateAnimation(targetX, 0, 0, 0); an1.setFillAfter(true); an1.setDuration(durationMillis); circleView.startAnimation(an1); AlphaAnimation an2 = new AlphaAnimation(0, 1); an2.setFillAfter(true); an2.setDuration(durationMillis); offBgView.startAnimation(an2); } } 状态切换的两个参数，value是否打开状态，needAnimate是否需要动画（否则直接切换效果）。setFillAfter保留动画结束状态，但并不影响View本身位置和状态。切换时，先将当前显示背景移动到最前端，其次添加按钮动画和渐隐动画。
至此，最基本的组合View实现已经完成了。想要了解详情的请在源码中查看。源码分为两部分，一个项目是View的实现lib，另一块是示例演示demo.
2.2 自定义View绘制实现
由于该样式并不十分复杂，所以可以通过基本的图形绘制draw出同样的效果。
具体实现逻辑：通过自定view属性来确定按钮大小和中间圆钮大小，在测量onMesure方法中控制测量值mode和Size，并在onLayout方法中得到圆钮半径和起始点位置。然后进行绘制，先绘制底部on圆角矩形背景，再绘制off渐变缩放的圆角矩形，最后绘制spot圆钮。
嘴比较笨拙，又不会画图。用word的图形工具将就画下可以看就好了。
具体实现大体都类似，这里贴上主要部分代码
1.全局参数
public class SwitchButton extends View{ /** */ private float radius; /** 开启颜色*/ private int onColor = Color.parseColor("#4ebb7f"); /** 关闭颜色*/ private int offBorderColor = Color.parseColor("#dadbda"); /** 灰色带颜色*/ private int offColor = Color.parseColor("#ffffff"); /** 手柄颜色*/ private int spotColor = Color.parseColor("#ffffff"); /** 边框颜色*/ private int borderColor = offBorderColor; /** 画笔*/ private Paint paint ; /** 开关状态*/ private boolean toggleOn = false; /** 边框大小*/ private int borderWidth = 2; /** 垂直中心*/ private float centerY; /** 按钮的开始和结束位置*/ private float startX, endX; /** 手柄X位置的最小和最大值*/ private float spotMinX, spotMaxX; /**手柄大小 */ private int spotSize ; /** 手柄X位置*/ private float spotX; /** 关闭时内部灰色带高度*/ private float offLineWidth; /** */ private RectF rect = new RectF(); /** 默认使用动画*/ private boolean defaultAnimate = true; private OnSwitchChanged listener; //...}2.初始化与读取
读取自定义属性并赋值。讲了又讲的东西，略。
3.测量onMeasure与布局onLayout
在onMeasure方法中根据给定mode和size来限定View，如果高宽不为明确值（UNSPECIFIED/AT_MOST）,则定义自身高宽为明确值。 关于MeasureSpec的详细讲解，这里附上爱哥的一篇文章–MeasureSpec，深入到赋值读取的内部，不妨试着深入研究下。当然，更直接的方法就是点开源码一探究竟咯。
onLayout方法中取得view的实际高宽，计算出圆角矩形半径，圆钮半径以及起始点x方向位置。还有On矩形和off矩形的宽度。
@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { final int widthMode = MeasureSpec.getMode(widthMeasureSpec); final int heightMode = MeasureSpec.getMode(heightMeasureSpec); int widthSize = MeasureSpec.getSize(widthMeasureSpec); int heightSize = MeasureSpec.getSize(heightMeasureSpec); /** *如果高宽未指定，则使用内置高宽明确大小 */ Resources r = Resources.getSystem(); if(widthMode == MeasureSpec.UNSPECIFIED || widthMode == MeasureSpec.AT_MOST){ widthSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, r.getDisplayMetrics()); widthMeasureSpec = MeasureSpec.makeMeasureSpec(widthSize, MeasureSpec.EXACTLY); } if(heightMode == MeasureSpec.UNSPECIFIED || heightSize == MeasureSpec.AT_MOST){ heightSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 30, r.getDisplayMetrics()); heightMeasureSpec = MeasureSpec.makeMeasureSpec(heightSize, MeasureSpec.EXACTLY); } super.onMeasure(widthMeasureSpec, heightMeasureSpec); } @Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { super.onLayout(changed, left, top, right, bottom); final int width = getWidth(); final int height = getHeight(); /** *测量相应大小 */ radius = Math.min(width, height) * 0.5f; centerY = radius; startX = radius; endX = width - radius; spotMinX = startX + borderWidth; spotMaxX = endX - borderWidth; spotSize = height - 4 * borderWidth; spotX = toggleOn ? spotMaxX : spotMinX; offLineWidth = 0; } 前三步完成基本赋值之后，开始设置和绑定相应事件。这里不作为重点部分也省略，主要讲一下绘制过程和核心控制逻辑。
4.绘制过程
按照前面的简易示例图来绘制我们的ui图。
@Override public void draw(Canvas canvas) { //绘制on背景 rect.set(0, 0, getWidth(), getHeight()); paint.setColor(borderColor); canvas.drawRoundRect(rect, radius, radius, paint); //绘制off背景（缩放至0时候不绘制） if(offLineWidth > 0){ final float cy = offLineWidth * 0.5f; rect.set(spotX - cy, centerY - cy, endX + cy, centerY + cy); paint.setColor(offColor); canvas.drawRoundRect(rect, cy, cy, paint); } //绘制圆钮轮廓border rect.set(spotX - 1 - radius, centerY - radius, spotX + 1.1f + radius, centerY + radius); paint.setColor(borderColor); canvas.drawRoundRect(rect, radius, radius, paint); //绘制圆钮 final float spotR = spotSize * 0.5f; rect.set(spotX - spotR, centerY - spotR, spotX + spotR, centerY + spotR); paint.setColor(spotColor); canvas.drawRoundRect(rect, spotR, spotR, paint); }及诶按来便是我们的状态切换动画控制逻辑，即点击按钮之后setToggleOn或者setToggleOff执行的相应动作。
4.状态切换动画效果
/** * 执行效果，如果animate为true表示有动画效果 * 否则直接执行计算并显示最终打开"1"或者关闭"0"的效果绘制 */ private void takeEffect(boolean animate) { if(animate){ slide(); }else{ calculateEffect(toggleOn ? 1 : 0); } } /** *这里偷个懒，直接使用空的animation，根据当前interpolatedTime（0~1）渐变过程来绘制不同阶段的View，达到动画效果 *当然，也可以开启个线程或者定时任务，来实现从0到1的变换，劲儿改变视图绘制过程 */ private void slide(){ Animation animation = new Animation() { @Override protected void applyTransformation(float interpolatedTime, Transformation t) { if(toggleOn){ calculateEffect(interpolatedTime); }else{ calculateEffect(1-interpolatedTime); } } }; animation.setDuration(200); clearAnimation(); startAnimation(animation); } /** *计算绘制位置 *mapValueFromRangeToRange方法计算从当前位置相对于目标位置所对应的值 *通过颜色变化来达到透明度动画效果（颜色渐变） */ private void calculateEffect(final double value) { final float mapToggleX = (float) mapValueFromRangeToRange(value, 0, 1, spotMinX, spotMaxX); spotX = mapToggleX; float mapOffLineWidth = (float) mapValueFromRangeToRange(1 - value, 0, 1, 10, spotSize); offLineWidth = mapOffLineWidth; final int fb = Color.blue(onColor); final int fr = Color.red(onColor); final int fg = Color.green(onColor); final int tb = Color.blue(offBorderColor); final int tr = Color.red(offBorderColor); final int tg = Color.green(offBorderColor); int sb = (int) mapValueFromRangeToRange(1 - value, 0, 1, fb, tb); int sr = (int) mapValueFromRangeToRange(1 - value, 0, 1, fr, tr); int sg = (int) mapValueFromRangeToRange(1 - value, 0, 1, fg, tg); sb = clamp(sb, 0, 255); sr = clamp(sr, 0, 255); sg = clamp(sg, 0, 255); borderColor = Color.rgb(sr, sg, sb); postInvalidate(); }以上就是自定义View绘制的核心代码，详细查看源码SwitchButton。相较于组合方法，它更便捷，也有更高的灵活性和扩展性。同时还不需要图片资源支持。
3.SegmentControl样式实现
常见的Tab有很多种，这里使用的是IOS常见的一种切换效果SegmentControl。本篇只用最简单的拼装View实现类似效果。有兴趣的可以自己尝试绘制达到更优效果。（有空的话也会在后边放出）
- 通过view组合生成 最近单的方案，没有之一。使用现成的selector和背景来控制显示效果。各个子view分别继承 RelativeLayout并实现OnClick接口。最后在Segment中控制显示和点击切换。
- 自定义View绘制生成 这里只是提供思路。定义一个ItemView,根据在Segment中位置挥之不同效果。背景效果会用selector.xml的都知道，使用shape标签产生的drawable对象，其实就是一个GradientDrawable。所以我们自定义view可以直接通过使用GradientDrawable的setCornerRadii(float[] radii) 来绘制同样的背景效果，劲儿可以做到不同颜色。最后，使用一个ViewGroup不含这些item即可。通过click事件来切换tab就可以了。
3.1 组合View实现
首先，类似的定义一个可点击的通用的RelativLayout。（实现 Checkable接口使其可被选中也移除选中状态，详细可以参考前面的博文 微博/动态 点赞效果）。这里涉及三个新内容，稍微说明讲解下。
- checkMode 选中模式，是单选 CHECKMODE_CHECK 还是 CHECKMODE_RADIO 单选效果。使我们的自定义RelativeLayout可以做到单选和复选。
- onInitializeAccessibilityEvent 添加View接受事件源信息。即订阅checked事件。由于事件可能由内部子view点击触发，所以这里应该接收并处理相应的checked事件。当然，使用该方法首先要重写onInitializeAccessibilityNodeInfo方法，添加我们关注的状态信息。
- SavedState状态保存 当我们内部可能嵌套复杂view的时候，为了防止数据状态丢失，一般需要定义状态保存类，用以保存和恢复当前View状态。
#### 1.可点击的通用RelativeLayout
- 继承实现Clickable接口，简要略过。
//定义checked状态 public static final int[] CHECKED_STATE_SET = { android.R.attr.state_checked }; //重写SetChecked方法和isChecked方法略 /** *根据当前选择模式checkMode 来控制单复选 */ @Override public boolean performClick() { if (checkMode == CHECKMODE_CHECK) { toggle(); } else if (checkMode == CHECKMODE_RADIO) { setChecked(true); } return super.performClick(); } /** *添加Drawable 的checked状态 ，并再绘制view是绘制相应状态效果 */ @Override public int[] onCreateDrawableState(int extraSpace) { int[] states = super.onCreateDrawableState(extraSpace + 1); if (isChecked()) { mergeDrawableStates(states, CHECKED_STATE_SET); } return states; } @Override protected void drawableStateChanged() { super.drawableStateChanged(); Drawable drawable = getBackground(); if (drawable != null) { int[] myDrawableState = getDrawableState(); drawable.setState(myDrawableState); invalidate(); } }- 接受checked状态事件信息
@Override public void onInitializeAccessibilityEvent(AccessibilityEvent event) { super.onInitializeAccessibilityEvent(event); event.setClassName(CheckedRelativeLayout.class.getName()); event.setChecked(checked); } @Override public void onInitializeAccessibilityNodeInfo(AccessibilityNodeInfo info) { super.onInitializeAccessibilityNodeInfo(info); info.setClassName(CheckedRelativeLayout.class.getName()); info.setCheckable(true); info.setChecked(checked); }- 保存View状态和恢复
View自身重写保存和恢复的方法
@Override public Parcelable onSaveInstanceState() {//保存 Parcelable superState = super.onSaveInstanceState(); SavedState ss = new SavedState(superState); ss.checked = isChecked(); return ss; } @Override public void onRestoreInstanceState(Parcelable state) {//恢复 SavedState ss = (SavedState) state; super.onRestoreInstanceState(ss.getSuperState()); setChecked(ss.checked); requestLayout(); }用于保存数据的基本状态类型
static class SavedState extends BaseSavedState { boolean checked; SavedState(Parcelable superState) { super(superState); } private SavedState(Parcel in) { super(in); checked = (Boolean) in.readValue(null); } @Override public void writeToParcel(Parcel out, int flags) { super.writeToParcel(out, flags); out.writeValue(checked); } public static final Creator<SavedState> CREATOR = new Creator<SavedState>() { public SavedState createFromParcel(Parcel in) { return new SavedState(in); } public SavedState[] newArray(int size) { return new SavedState[size]; } }; } @Override public String toString() { return "CompoundButton.SavedState{" + Integer.toHexString(System.identityHashCode(this)) + " checked=" + checked + "}"; }2.控制tab切换的SegmentView
代码比较易于理解，这里直接贴出来查阅即可。
基本思路，水平线性布局包裹对应左中右不同item个数的选项，并通过设置对应left/right/center来设置背景。然后分别为每个Item设置同一个点击事件，点击之后检查是否当前item被选中，改变statu，同时出发切换事件。详细代码：
public class SegmentView extends LinearLayout { protected final static int SEGMENT_LEFT_BG = R.drawable.segment_left_selector; protected final static int SEGMENT_CENTER_BG = R.drawable.segment_center_selector; protected final static int SEGMENT_RIGHT_BG = R.drawable.segment_right_selector; protected int leftBg = SEGMENT_LEFT_BG; protected int centerBg = SEGMENT_CENTER_BG; protected int rightBg = SEGMENT_RIGHT_BG; protected CheckedRelativeLayout2[] checkedRelativeLayouts; protected int index = -1; protected float textSize = -1; protected int textColorN = Color.BLACK, textColorP = Color.BLACK; protected OnIndexChangedListener onIndexChangedListener; public SegmentView(Context context) { super(context); initialize(); } public SegmentView(Context context, AttributeSet attrs) { super(context, attrs); initialize(); initFromAttributes(context, attrs); } public SegmentView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); initialize(); initFromAttributes(context, attrs); } protected void initialize() { setGravity(Gravity.CENTER); } protected void initFromAttributes(Context context, AttributeSet attrs) { TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.SegmentView); String content = a.getString(R.styleable.SegmentView_content); index = a.getInt(R.styleable.SegmentView_index, index); textSize = a.getDimension(R.styleable.SegmentView_textSize, textSize); textColorN = a.getColor(R.styleable.SegmentView_textColorN, textColorN); textColorP = a.getColor(R.styleable.SegmentView_textColorP, textColorP); leftBg = a.getResourceId(R.styleable.SegmentView_leftBg, leftBg); centerBg = a.getResourceId(R.styleable.SegmentView_centerBg, centerBg); rightBg = a.getResourceId(R.styleable.SegmentView_rightBg, rightBg); a.recycle(); if (!TextUtils.isEmpty(content)) { String[] contentStrings = content.split(","); setContent(contentStrings); } setIndex(index); } public void setContent(String... content) { View[] views = new View[content.length]; for (int i = 0, len = content.length; i < len; i++) { String s = content[i]; TextView tv = new TextView(getContext()); tv.setTextColor(textColorN); tv.setText(s); if (textSize != -1) { tv.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSize); } views[i] = tv; } setContent(views); } public void setContent(View... content) { removeAllViews(); int lastIndex = content.length - 1; checkedRelativeLayouts = new CheckedRelativeLayout2[content.length]; checkedRelativeLayouts[0] = createLeftView(content[0]); checkedRelativeLayouts[lastIndex] = createRightView(content[lastIndex]); for (int i = 1; i < lastIndex; i++) { checkedRelativeLayouts[i] = createCenterView(content[i]); } for (View view : checkedRelativeLayouts) { LayoutParams llp = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT); llp.weight = 1; addView(view, llp); } } public int getIndex() { return index; } public void setIndex(int i) { if (i < 0) return; checkedRelativeLayouts[i].setChecked(true); } public void setTextColorN(int textColorN) { this.textColorN = textColorN; } public void setTextColorP(int textColorP) { this.textColorP = textColorP; } protected CheckedRelativeLayout.OnCheckedChangeListener checkedChangeListener = new CheckedRelativeLayout.OnCheckedChangeListener() { @Override public void onCheckedChanged(CheckedRelativeLayout layout, boolean isChecked) { if (isChecked) { for (CheckedRelativeLayout2 item : checkedRelativeLayouts) { if (!item.equals(layout)) { item.setChecked(false); } } if (onIndexChangedListener != null) { int i = indexOf(checkedRelativeLayouts, layout); index = i; if (onIndexChangedListener != null) { onIndexChangedListener.onChanged(SegmentView.this, index); } } } } }; protected CheckedRelativeLayout2 createLeftView(View contentView) { CheckedRelativeLayout2 layout = new CheckedRelativeLayout2(getContext()); layout.setBackgroundResource(leftBg); layout.setGravity(Gravity.CENTER); layout.addView(contentView); layout.setOnCheckedChangeListener(checkedChangeListener); return layout; } protected CheckedRelativeLayout2 createCenterView(View contentView) { CheckedRelativeLayout2 layout = new CheckedRelativeLayout2(getContext()); layout.setBackgroundResource(centerBg); layout.setGravity(Gravity.CENTER); layout.addView(contentView); layout.setOnCheckedChangeListener(checkedChangeListener); return layout; } protected CheckedRelativeLayout2 createRightView(View contentView) { CheckedRelativeLayout2 layout = new CheckedRelativeLayout2(getContext()); layout.setBackgroundResource(rightBg); layout.setGravity(Gravity.CENTER); layout.addView(contentView); layout.setOnCheckedChangeListener(checkedChangeListener); return layout; } public void setOnIndexChangedListener(OnIndexChangedListener l) { this.onIndexChangedListener = l; } protected class CheckedRelativeLayout2 extends CheckedRelativeLayout { protected TextView textView; public CheckedRelativeLayout2(Context context) { super(context); } @Override public void addView(View child) { super.addView(child); if (child instanceof TextView) { textView = (TextView) child; } } @Override public void setChecked(boolean checked) { super.setChecked(checked); if (textView != null) { if (checked) { textView.setTextColor(textColorP); } else { textView.setTextColor(textColorN); } } } } public static interface OnIndexChangedListener { public void onChanged(SegmentView view, int index); } public static <T> int indexOf(T[] array, T obj) { for (int i = 0, len = array.length; i < len; i++) { if (array[i].equals(obj)) return i; } return -1; }} 该方法比较简陋，背景颜色定制性不高。即只能通过既定drawable北京来实现。不过，其实是可以通过selector来定义相关背景drawable的。不妨试一下。
3.2 自定义View实现
本来此方法只是简单提及的一个想法而已，今天有空就一并写了。时间匆忙，代码稍微有些混乱，不过还是能起到一定示范效用的，这里也贴出来供大家参考。
整体思路：
定义子item 设置其选中状态和字体/背景色。通过测量方法保证显示范围和字体大小，通过GradientDrawable绘制圆角背景，并画对应字体。
定义Segment 继承自ViewGroup,读取自定义属性，根据文本内容添加子View。然后重写OnMeasure方法和OnLayout方法来测量和布局子View。最后添加点击事件，提供监听接口。
代码如下：
import com.qiao.demo.R;import com.qiao.demo.R.styleable;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Rect;import android.graphics.drawable.GradientDrawable;import android.util.AttributeSet;import android.util.TypedValue;import android.view.View;import android.view.ViewGroup;import android.view.View.OnClickListener;public class SegmentView extends ViewGroup implements OnClickListener{ private final float r = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 4, getResources().getDisplayMetrics()); private int bgColor = 0xff0072c6; private int fgColor = Color.WHITE; private float mTextSize = 3f*r; private String []mText= {"item1","item2","item3"}; private int checkedItem=1; private OnItemClickListener listener; public SegmentView(Context context) { super(context); initFromAttributes(context, null); initalize(); } public SegmentView(Context context, AttributeSet attrs) { super(context, attrs); initFromAttributes(context,attrs); initalize(); } protected void initFromAttributes(Context context, AttributeSet attrs) { if(attrs==null) return; TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.SegmentView0); String content = a.getString(R.styleable.SegmentView0_content0); if(!isEmpty(content)){ mText = content.split(","); } checkedItem = a.getInt(R.styleable.SegmentView0_index0, checkedItem); mTextSize = a.getDimension(R.styleable.SegmentView0_textSize0, mTextSize); bgColor = a.getColor(R.styleable.SegmentView0_bgColor, bgColor); fgColor = a.getColor(R.styleable.SegmentView0_textColor, fgColor); a.recycle(); } public void initalize(){ int length = mText.length; for(int i=0;i<length;i++){ View view = new ItemView(getContext(),mText[i],getGravity(i,length),i==checkedItem); view.setOnClickListener(this); addView(view,LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT); } } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int widthMode = MeasureSpec.getMode(widthMeasureSpec); int widthSize = MeasureSpec.getSize(widthMeasureSpec); int count = getChildCount(); int childWidthMeasureSpec = widthMeasureSpec; int maxWidth = 0; int maxHeight = 0; if(widthSize>=0){ maxWidth = widthSize/count; childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(maxWidth,widthMode); } for(int i=0;i<count;i++){ View child = getChildAt(i); measureChild(child, childWidthMeasureSpec,heightMeasureSpec); maxWidth = Math.max(maxWidth,child.getMeasuredWidth()); maxHeight = Math.max(maxHeight,child.getMeasuredHeight()); } setMeasuredDimension(getDefaultSize(maxWidth*count, widthMeasureSpec), getDefaultSize(maxHeight, heightMeasureSpec)); } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { if(!changed) return; int count = getChildCount(); int left = 0; for(int i=0;i<count;i++){ View child = getChildAt(i); child.layout(left,0,left+child.getMeasuredWidth(),child.getMeasuredHeight()); left += child.getMeasuredWidth(); } } private int getGravity(int i,int len){ if(i==0){ if(i==len-1) return ItemView.GRAVITY_SINGLE; else return ItemView.GRAVITY_LEFT; }else if(i==len-1){ return ItemView.GRAVITY_RIGHT; }else return ItemView.GRAVITY_CENTER; } @Override public void onClick(View v) { int count = getChildCount(); for(int i=0;i<count;i++){ View child = getChildAt(i); if(v.equals(child)){ checkedItem = i; ((ItemView)child).setChecked(true); }else{ ((ItemView)child).setChecked(false); } child.postInvalidate(); } if(listener!=null){ listener.onItemClick((ItemView)v, checkedItem); } } /** * segment子集item */ class ItemView extends View{ public final static int GRAVITY_SINGLE = 1<<0; public final static int GRAVITY_LEFT = 1<<1; public final static int GRAVITY_CENTER = 1<<2; public final static int GRAVITY_RIGHT = 1<<3; private GradientDrawable drawable; private int gravity = GRAVITY_SINGLE; private boolean isChecked; private String text; private Paint mTextPaint; private Rect mTextBound = new Rect(); private ItemView(Context context,String text,int gravity,boolean isChecked){ super(context); this.text = text; this.gravity = gravity; this.isChecked = isChecked; init(); } private void init(){ mTextPaint = new Paint(); mTextPaint.setTextSize(mTextSize); mTextPaint.getTextBounds(text, 0, text.length(), mTextBound); drawable = new GradientDrawable(); drawable.setStroke((int)(r/5), bgColor); setItemGravity(gravity); setChecked(isChecked); } public void setItemGravity(int gravity){ this.gravity = gravity; switch (gravity){ case GRAVITY_SINGLE: drawable.setCornerRadii(new float[]{r,r,r,r,r,r,r,r}); break; case GRAVITY_LEFT: drawable.setCornerRadii(new float[]{r,r,0,0,0,0,r,r}); break; case GRAVITY_CENTER: drawable.setCornerRadii(new float[]{0,0,0,0,0,0,0,0}); break; case GRAVITY_RIGHT: drawable.setCornerRadii(new float[]{0,0,r,r,r,r,0,0}); break; } } public void setChecked(boolean isChecked){ this.isChecked = isChecked; mTextPaint.setColor(isChecked? fgColor:bgColor); drawable.setColor(isChecked? bgColor:fgColor); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int widthMode = MeasureSpec.getMode(widthMeasureSpec); int widthSize = MeasureSpec.getSize(widthMeasureSpec); int heightMode = MeasureSpec.getMode(heightMeasureSpec); int heightSize = MeasureSpec.getSize(heightMeasureSpec); if(widthMode == MeasureSpec.AT_MOST){ widthSize = mTextBound.width() + (int)(8*r); widthMode = MeasureSpec.EXACTLY; } if(heightMode == MeasureSpec.AT_MOST){ heightSize = mTextBound.height() + (int)(4*r); heightMode = MeasureSpec.EXACTLY; } widthMeasureSpec = MeasureSpec.makeMeasureSpec(widthSize,widthMode); heightMeasureSpec = MeasureSpec.makeMeasureSpec(heightSize,heightMode); setMeasuredDimension(widthMeasureSpec,heightMeasureSpec); int height = getMeasuredHeight(); int width = getMeasuredWidth(); if(height>=0){ float textSize = Math.min(mTextSize,height-2*r); if(width>0){ textSize = Math.min(textSize,(width-2*r)*2/text.length()); //英文比中文短（中文为两个字符），故取mText.length()/2作为平均宽度 } if(textSize != mTextSize ){ mTextPaint.setTextSize(textSize); mTextPaint.getTextBounds(text, 0, text.length(), mTextBound); } } } @Override public void draw(Canvas canvas) { Rect rect = canvas.getClipBounds(); drawable.setBounds(new Rect(rect)); drawable.draw(canvas); int l = (rect.width() - mTextBound.width())/2; int b = (rect.height() + mTextBound.height())/2; canvas.drawText(text, l, b, mTextPaint); } } public void setOnItemClickListener(OnItemClickListener onItemClickListener){ this.listener = onItemClickListener; } interface OnItemClickListener{ void onItemClick(ItemView item,int checkedItem); } public static boolean isEmpty(String str){ return null==str || str.trim().length() == 0; }}参照前面两段讲述完全可以理解了。使用时候可以方便的通过自定义属性来控制字体颜色和点击背景。可以动态变更View高宽。有问题的同学可以在文末提出或指正。
3.总结
感觉自己学习进步的速度很慢，常常伴随着焦急浮躁。这篇文章也是积累了好久才慢吞吞的写完了。代码方面，个人也有不少不良习惯，助事业不够清晰，不过总体上不是有碍观瞻吧。
同样的东西，尝试用不同想法写两遍，我觉得是有好处的。至少于我，能看到不少有意思的东西。
最后， 附上本文的 示例源码 . 由于资源上传较早，第二部分的自定义View并没有打包上传。不过上便已经贴出完整代码了，可以直接拿来使用。
后边在考虑是写一写非UI层面的东西，还是继续写关于常见的增删改UI界面。待定，总之，fighting..
版权声明：本文为博主原创文章，未经博主允许不得转载。