变化是永恒的,产品需求稳定不变是不可能的,和产品经理互怼是没有用的,但有一个方向是可以努力的:让代码更有弹性,以不变应万变。
继上一次发版前突然变更单选按钮样式之后,又新增了两个和选项按钮有关的需求。它们分别是多选和菜单选。多选类似于原生CheckBox
,而菜单选是多选和单选的组合,类似于西餐点菜,西餐菜单将食物分为前菜、主食、汤,每种只能选择 1 个(即同组内单选,多组间多选)。
上一篇中的自定义单选按钮Selector + SelectorGroup
完美 hold 住按钮样式的变化,这一次能否从容应对新增需求?
自定义单选按钮
回顾下Selector + SelectorGroup
的效果:
其中每一个选项就是Selector
,它们的状态被SelectorGroup
管理。
这组自定义控件突破了原生单选按钮的布局限制,选项的相对位置可以用 xml 定义(原生控件只能是垂直或水平铺开),而且还可以方便地更换按钮样式以及定义选中效果(上图中选中后有透明度动画)
实现关键逻辑如下:
- 单个按钮是一个抽象容器控件,它可以被点击并借助
View.setSelected()
记忆按钮选中状态。按钮内元素布局由其子类填充。
public abstract class Selector extends FrameLayout implements View.OnClickListener {
//'按钮唯一标示符'
private String tag;
//'按钮所在组的标示符,单选的按钮应该设置相同的groupTag'
private String groupTag;
private SelectorGroup selectorGroup;
public Selector(Context context) {
super(context);
initView(context, null);
}
private void initView(Context context, AttributeSet attrs) {
//'构建视图(延迟到子类进行)'
View view = onCreateView();
LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
this.addView(view, params);
this.setOnClickListener(this);
}
//'构建视图(在子类中自定义视图)'
protected abstract View onCreateView();
//'设置按钮的按钮组'
public Selector setGroup(String groupTag, SelectorGroup selectorGroup) {
this.selectorGroup = selectorGroup;
this.groupTag = groupTag;
return this;
}
@Override
public void setSelected(boolean selected) {
//'设置按钮选中状态'
boolean isPreSelected = isSelected();
super.setSelected(selected);
if (isPreSelected != selected) {
onSwitchSelected(selected);
}
}
//'按钮选中状态变更(在子类中自定义变更效果)'
protected abstract void onSwitchSelected(boolean isSelect);
@Override
public void onClick(View v) {
//'通知选中组,当前按钮被选中'
if (selectorGroup != null) {
selectorGroup.onSelectorClick(this);
}
}
}
Selector
通过模版方法模式,将构建按钮视图和按钮选中效果延迟到子类构建。所以当按钮内部元素布局发生改变时不需要修改Selector
,只需要新建它的子类。
- 单选组会保存上一次选中的按钮,以便新的按钮被选中时取消之前按钮的选中状态。
public class SelectorGroup {
//'持有上次选中的按钮组'
private HashMap<String, Selector> selectorMap = new HashMap<>();
//'获取上次选中按钮'
public Selector getPreSelector(String groupTag) {
return selectorMap.get(groupTag);
}
//'取消上次选中按钮'
private void cancelPreSelector(Selector selector) {
String groupTag = selector.getGroupTag();
Selector preSelector = getPreSelector(groupTag);
if (preSelector != null) {
preSelector.setSelected(false);
}
}
void onSelectorClick(Selector selector) {
//'选中当前按钮'
selector.setSelected(true);
//'取消之前按钮'
cancelPreSelector(selector);
//'将这次选中按钮保存在map中'
selectorMap.put(selector.getGroupTag(), selector);
}
}
剥离行为
选中按钮后的行为被写死在SelectorGroup.onSelectorClick()
中,这使得SelectorGroup
中的行为无法被替换。
每次行为扩展都重新写一个SelectorGroup
怎么样?不行!因为Selector
是和SelectorGroup
耦合的,这意味着Selector
的代码也要跟着改动,这不符合开闭原则。
SelectorGroup
中除了会变的“选中行为”之外,也有不会变的成分,比如“持有上次选中按钮”。是不是可以增加一层抽象将变化的行为封装起来,使得SelectorGroup
与变化隔离?
接口是封装行为的最佳选择,可以运用 策略模式将选中行为封装起来
策略模式的详细介绍可以点击这里。
这样就可以在外部构建具体的选中行为,再将其注入到SelectorGroup
中,以实现动态修改行为:
public class SelectorGroup {
private ChoiceAction choiceMode;
//'注入具体选中行为'
public void setChoiceMode(ChoiceAction choiceMode) {
this.choiceMode = choiceMode;
}
//'当按钮被点击时应用选中行为'
void onSelectorClick(Selector selector) {
if (choiceMode != null) {
choiceMode.onChoose(selector, this, onStateChangeListener);
}
}
//'选中后的行为被抽象成接口'
public interface ChoiceAction {
void onChoose(Selector selector, SelectorGroup selectorGroup, StateListener stateListener);
}
}
将具体行为替换成接口后就好像是在原本严严实实的SelectorGroup
中挖了一个洞,只要符合这个洞形状的东西都可以塞进来,这样就很灵活了。
如果每次使用SelectorGroup
,都需要重新自定义选中行为也很费力,所以在其中添加了最常用的单选和多选行为:
public class SelectorGroup {
public static final int MODE_SINGLE_CHOICE = 1;
public static final int MODE_MULTIPLE_CHOICE = 2;
private ChoiceAction choiceMode;
//'通过这个方法设置默认行为'
public void setChoiceMode(int mode) {
switch (mode) {
case MODE_MULTIPLE_CHOICE:
choiceMode = new MultipleAction();
break;
case MODE_SINGLE_CHOICE:
choiceMode = new SingleAction();
break;
}
}
//'单选行为'
private class SingleAction implements ChoiceAction {
@Override
public void onChoose(Selector selector, SelectorGroup selectorGroup, StateListener stateListener) {
selector.setSelected(true);
cancelPreSelector(selector);
if (stateListener != null) {
stateListener.onStateChange(selector.getSelectorTag(), true);
}
}
}
//'多选行为'
private class MultipleAction implements ChoiceAction {
@Override
public void onChoose(Selector selector, SelectorGroup selectorGroup, StateListener stateListener) {
boolean isSelected = selector.isSelected();
selector.setSelected(!isSelected);
if (stateListener != null) {
stateListener.onStateChange(selector.getSelectorTag(), !isSelected);
}
}
}
}
将原本具体的行为都移到了接口中,而SelectorGroup
只和抽象的接口互动,不和具体行为互动,这样的SelectorGroup
具有弹性。
现在只要像这样就可以分别实现单选和多选:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//多选
SelectorGroup multipleGroup = new SelectorGroup();
multipleGroup.setChoiceMode(SelectorGroup.MODE_MULTIPLE_CHOICE);
multipleGroup.setStateListener(new MultipleChoiceListener());
((Selector) findViewById(R.id.selector_10)).setGroup("multiple", multipleGroup);
((Selector) findViewById(R.id.selector_20)).setGroup("multiple", multipleGroup);
((Selector) findViewById(R.id.selector_30)).setGroup("multiple", multipleGroup);
//单选
SelectorGroup singleGroup = new SelectorGroup();
singleGroup.setChoiceMode(SelectorGroup.MODE_SINGLE_CHOICE);
singleGroup.setStateListener(new SingleChoiceListener());
((Selector) findViewById(R.id.single10)).setGroup("single", singleGroup);
((Selector) findViewById(R.id.single20)).setGroup("single", singleGroup);
((Selector) findViewById(R.id.single30)).setGroup("single", singleGroup);
}
}
在activity_main.xml
中布局了6个Selector
,其中三个用于单选,三个用于多选。
菜单选
这一次新需求是多选和单选的组合:菜单选。这种模式将选项分成若干组,组内单选,组间多选。看下使用策略模式重构后的SelectorGroup
是如何轻松应对的:
private class OderChoiceMode implements SelectorGroup.ChoiceAction {
@Override
public void onChoose(Selector selector, SelectorGroup selectorGroup, SelectorGroup.StateListener stateListener) {
//'取消同组的上次选中按钮'
cancelPreSelector(selector, selectorGroup);
//'选中当前点击按钮'
selector.setSelected(true);
}
//'取消同组上次选中按钮,同组的按钮具有相同的groupTag'
private void cancelPreSelector(Selector selector, SelectorGroup selectorGroup) {
Selector preSelector = selectorGroup.getPreSelector(selector.getGroupTag());
if (preSelector!=null) {
preSelector.setSelected(false);
}
}
}
然后就可以像这样动态的为SelectorGroup
扩展菜单选行为了:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//'菜单选'
SelectorGroup orderGroup = new SelectorGroup();
orderGroup.setStateListener(new OrderChoiceListener());
orderGroup.setChoiceMode(new OderChoiceMode());
//'为同组按钮设置相同的groupTag'
((Selector) findViewById(R.id.selector_starters_duck)).setGroup("starters", orderGroup);
((Selector) findViewById(R.id.selector_starters_pork)).setGroup("starters", orderGroup);
((Selector) findViewById(R.id.selector_starters_springRoll)).setGroup("starters", orderGroup);
((Selector) findViewById(R.id.selector_main_pizza)).setGroup("main", orderGroup);
((Selector) findViewById(R.id.selector_main_pasta)).setGroup("main", orderGroup);
((Selector) findViewById(R.id.selector_soup_mushroom)).setGroup("soup", orderGroup);
((Selector) findViewById(R.id.selector_soup_scampi)).setGroup("soup", orderGroup);
}
}
效果如下:
其中单选按钮通过继承Selector
重写onSwitchSelected()
,定义了选中效果为爱心动画。
总结
至此,选项按钮这个repository已经将两种设计模式运用于实战。
- 运用了模版方法模式将变化的按钮布局和点击效果和按钮本身隔离。
- 运用了策略模式将变化的选中行为和选中组隔离。
在经历多次需求变更的突然袭击后,遍体鳞伤的我们需要找出自救的方法:
实现需求前,通过分析需求识别出“会变的”和“不变的”逻辑,增加一层抽象将“会变的”逻辑封装起来,以实现隔离和分层,将“不变的”逻辑和抽象的互动代码在上层类中固定下来。需求发生变化时,通过在下层实现抽象以多态的方式来应对。这样的代码具有弹性,就能 以“不变的”上层逻辑应对变化的需求。
talk is cheap, show me the code
实例代码省略了一些非关键的细节,完整代码在这里