需要完整源码的可直接看最后
控件的xml布局：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/man_ic"
android:src="@drawable/ic_man"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/man_tx"
android:text="男"
android:layout_margin="4dp"
android:textColor="#C3C3C3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="@+id/woman_ic"
android:src="@drawable/ic_woman"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/woman_tx"
android:text="女"
android:layout_margin="4dp"
android:textColor="#C3C3C3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
布局外层为水平的线性布局，内容为两对ImageView和TextView，分别用来显示男女图标以及文字。
控件的效果看起来是这样的：
控件预览效果
这里图标用的是矢量图（VectorDrawable），随意放缩都没有锯齿看起来很舒服，习惯用一般图片资源的可自行修改。这里一共需要四个图标，分别是男和女被选中以及未被选中的图标样式。
下面是Java代码部分，创建一个继承线性布局的SexBox类，除了创建控件对象之外，还需要创建两个boolean变量用来记录选择状态。
private boolean man_selected=false;
private boolean woman_selected=false;
ImageView manicon,womanicon;
TextView mantext,womantext;
接着就是构造方法，在构造里先取得布局，然后四个控件设置View
public SexBox(Context context, AttributeSet attrs)
{
super(context,attrs);
LayoutInflater.from(context).inflate(R.layout.sex_select,this);
manicon=(ImageView) findViewById(R.id.man_ic);
womanicon=(ImageView) findViewById(R.id.woman_ic);
mantext=(TextView) findViewById(R.id.man_tx);
womantext=(TextView) findViewById(R.id.woman_tx);
}
而后是逻辑处理，这里将情况根据点击前状态以及点击对象列举一下：
点击前状态为男：
1.点击男
无事件
2.点击女
男图标以及文字变为暗 女图标以及文字变为亮
点击前状态为女：
1.点击男
男图标以及文字变为亮 女图标以及文字变为暗
2.点击女
无事件
点击前均未选择：
1.点击男
男图标以及文字变为亮
2.点击女
女图标以及文字变为亮
也就是说，至少需要写两个函数，一个是选择状态从男变女，一个为从女变男，而点之前均未选择的情况里可以重用这两个函数而不会发生冲突。
public void turnToWoman()
{
manicon.setImageResource(R.drawable.ic_man);
mantext.setTextColor(Color.rgb(195,195,195));
womanicon.setImageResource(R.drawable.ic_woman_x);
womantext.setTextColor(Color.rgb(68,68,68));
man_selected=false;
woman_selected=true;
}
public void turnToMan()
{
manicon.setImageResource(R.drawable.ic_man_x);
mantext.setTextColor(Color.rgb(68,68,68));
womanicon.setImageResource(R.drawable.ic_woman);
womantext.setTextColor(Color.rgb(195,195,195));
man_selected=true;
woman_selected=false;
}
状态变换函数逻辑很简单，原理相同，都是将要改变为的性别对应的图标设为亮，文字颜色设为深色，将被改变的性别对应的图标变为暗，文字颜色设为浅色，而且将记录状态的boolean做相对应的改变。
这两个函数在图标的OnClick事件里调用但是是有调用前提条件的，例如如果此时已经选择了男，再点击男应该不再进行一次改变（其实再执行一次也没什么问题，这里为了优化起见），所以应该有一个判定状态的函数：
//判断目前状态
public int getstatu()
{
//均未选择
if (!man_selected&&!woman_selected)
{
return 0;
}
else if(man_selected&&!woman_selected) //选男
{
return 1;
}
else if(!man_selected&&woman_selected) //选女
{
return 2;
}
else //均选择 不可能发生
{
return -1;
}
}
这个函数里判断两个布尔值，并返回相应的int值，为OnClick里的判断提供依据。
最后设置OnClick事件：
manicon.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
switch (getstatu())
{
case 0:
case 2:
turnToMan();
break;
case 1:
break;
default:
break;
}
}
});
womanicon.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
switch (getstatu())
{
case 0:
case 1:
turnToWoman();
break;
case 2:
break;
default:
break;
}
}
});
getstatu函数为public是因为需要通过此函数来获取最后的结果。而turnToMan和turnToWoman函数为public是因为可能需要设置初始状态（比如APP的修改个人资料界面需要载入之前的资料）至此，性别选择控件就完成了。
下面写个测试程序：
xml部分为刚刚写好的控件和一个按钮，按钮用来模拟获取结果。
<com.cycycd.testx.SexBox
android:id="@+id/sex"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</com.cycycd.testx.SexBox>
<Button
android:id="@+id/bt1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
Java部分在Button设置一个Click监听事件，调用getstatu获取状态后弹出Toast显示当前选择情况。
public class MainActivity extends AppCompatActivity {
SexBox st;
Button bt;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
bt=(Button)findViewById(R.id.bt1);
st=(SexBox) findViewById(R.id.sex);
bt.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String t;
switch (st.getstatu())
{
case 0:
t="未选择";
break;
case 1:
t="男";
break;
case 2:
t="女";
break;
default:
t="错误";
break;
}
Toast.makeText(MainActivity.this,t,Toast.LENGTH_SHORT).show();
}
});
}
}
测试结果：
未选择
男
女
最后奉上源码
https://share.weiyun.com/466db07881e6a7a645abff4a4e9c784e
网友评论