在图片上面添加一个图片，实现12306验证码的选择并获取相关坐标的功能

先看一下布局吧



然后是布局代码

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:id="@+id/gamearea"
>
<RelativeLayout
android:id="@+id/title"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#386f96">
<ImageView
android:id="@+id/user_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/TV"
android:layout_alignParentLeft="true"
android:layout_alignTop="@+id/TV"
android:src="@drawable/sub_title_back" />

<TextView
android:id="@+id/TV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center"
android:text="登录"
android:textSize="20sp"
android:textColor="#FFFFFF"/>
</RelativeLayout>

<RelativeLayout

android:layout_below="@id/title"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:id="@+id/login"
android:layout_width="fill_parent"
android:orientation="vertical"
android:layout_height="100dp"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin">
<LinearLayout
android:id="@+id/name_linearlayout"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="50dp"
android:text="账号："
android:textSize="20dp"
android:gravity="center"/>
<EditText
android:id="@+id/edit_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="@+id/password_linearlayout"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="50dp"
android:text="密码："
android:textSize="20dp"
android:gravity="center"/>
<EditText
android:id="@+id/edit_password"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:password="true"/>
</LinearLayout>

</LinearLayout>

<ImageView
android:id="@+id/Image"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:scaleType="fitCenter"
android:layout_below="@id/login"
android:layout_centerHorizontal="true"
/>

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/Image"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin">
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="登录"
android:id="@+id/button_login"

android:layout_centerHorizontal="true"
android:background="#2894FF"
android:layout_marginTop="23dp"
/>
</RelativeLayout>

</RelativeLayout>
</RelativeLayout>

相对来说布局还是普通的布局，只是参考了一下12306的点击验证码的功能啦。。。

接下来是Java代码

因为我们要把笑脸加上去，所以我们在Java中就不采用这种方法直接关联.XML文件了

而是用init（）函数的方法，其中的bitmap就是我们要显示出来的验证码，其他的就是我们XML中的一些控件了

这里要注意了，例如button_load=(Button)view.findViewById(R.id.button_login);此时控件都是继承View的，所以在这里要加上view。

public void init(Bitmap bitmap){
ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT);
LayoutInflater inflater =(LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = inflater.inflate(R.layout.activity_login_, null);
image=(ImageView)view.findViewById(R.id.Image);
image.setImageBitmap(bitmap);
layout.addView(view);
setContentView(layout, layoutParams);
edit_name=(EditText)view.findViewById(R.id.edit_name);
edit_password=(EditText)view.findViewById(R.id.edit_password);
button_load =(Button)view.findViewById(R.id.button_login);
back=(ImageView)view.findViewById(R.id.user_back);
toucharea=(RelativeLayout)view.findViewById(R.id.gamearea);

}

然后就是添加一个笑脸的ImageView了
这里出现的一些数字的运算那些变量都是为了让那个验证码图片显示出来是它原始的宽高比例，首先我们在布局中已经设定好ImageView的宽为fill_parent，高为wrap_parent。然后要获取ImagView的相对屏幕的实际坐标及宽高以及我们Bitmap的在屏幕中显示的宽高进行必要的运算。且在这里为每一个产生的ImageView设置了点击事件，在点击后消除改坐标点的笑脸图片。

//点击验证码生成一个选择图标
public void showselect(int x,int y) {
final ImageView im=new ImageView(this);
Resources res=getResources();
bmp= BitmapFactory.decodeResource(res, R.drawable.select_verifying);
im.setImageBitmap(bmp);
//        ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(
//                ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);
RelativeLayout.LayoutParams params=new RelativeLayout.LayoutParams(40,40);
params.setMargins(x,y,0,0);
im.setLayoutParams(params);
layout.addView(im);
layout.postInvalidate();
im.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
int[] location = new int[2];
im.getLocationOnScreen(location);
int x1 = location[0];
int y1 = location[1];
layout.removeView(im);
layout.postInvalidate();
float check_x=(x1+15-(imageright-bitmapWidth)/2)/multiple;
float check_y=(y1+15-imageview_y-((bitmapHeighet*3)/19))/ multiple;
removeSelect(check_x+"");
removeSelect(check_y+"");
}
});
}

再然后就是。。。自己看了，挺简单的

public class login_Activity extends Activity {
ImageView image;
Button button_load; //登录
ImageView back;        //返回按钮
RelativeLayout toucharea;
Bitmap b_image;
Bitmap bmp;
int imageright,imageleft,imagetop,imagebottom;
int imageview_y=0;
float bitmapHeighet=0;
float bitmapWidth=0;
float multiple;//multiple为实际显示出来的图片是原始图片的多少倍
EditText edit_name;
EditText edit_password;
RelativeLayout layout;
String editname="";
String editpassword="";
List<String> blist = new ArrayList<String>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
layout=new RelativeLayout(this);

Resources res_image=getResources();
b_image= BitmapFactory.decodeResource(res_image, R.drawable.getpasscodenew);
init(b_image);//将获取验证码的bitmap放入函数

image.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
float x = event.getRawX();
float y = event.getRawY();
int[] location = new int[2];
image.getLocationOnScreen(location);
int x1 = location[0];
imageview_y = location[1];
imageleft = image.getLeft();
imageright = image.getRight();
imagetop = image.getTop();
imagebottom = image.getBottom();
bitmapHeighet = b_image.getHeight();
bitmapWidth = b_image.getWidth();
multiple = bitmapWidth / 293;//multiple为实际显示出来的图片是原始图片的多少倍
//                System.out.println("图片各个角Left：" + image.getLeft() + "Right：" + image.getRight() + "Top：" +
//                        image.getTop() + "Bottom：" + image.getBottom() + "h:" + bitmapHeighet + "w"
//                        + bitmapWidth);
//                Toast.makeText(getApplicationContext(), "X:" + x + "Y:" + y, Toast.LENGTH_LONG).show();
//                System.out.print("X:" + x + "Y:" + y);
if (y > (imageview_y + 15 + (bitmapHeighet * 3) / 19) && y < (imageview_y + bitmapHeighet-15)) {
if ((x > (imageright - bitmapWidth) / 2 + 15) && x < (bitmapWidth + (imageright - bitmapWidth) / 2) - 15) {
float Add_x = (x - (imageright - bitmapWidth) / 2) / multiple;
float Add_y = (y - imageview_y - ((bitmapHeighet * 3) / 19))/ multiple;
addSelect(Add_x + "");
addSelect(Add_y + "");
showselect((int) x - 15, (int) y - 50 - 15);
}
}
return false;
}
});

最后就是处理一下点击获取的折算后的坐标，和消除取消点击的坐标啦。。。。

//把折算后的坐标加入list
public void addSelect(String st){
blist.add(st);
System.out.print("hahahaha" + blist);
}
//把用户取消选择的数据删除
public void removeSelect(String st){
for (int i = 0; i < blist.size(); i++) {
if ((blist.get(i)).equals(st)) {
blist.remove(i);
}
}
}

也很简单的，是不是，以上就是这个功能的代码了，有不足的地方自己修正，哈哈哈