android仿12306图片验证码选择——自定义控件

android仿12306图片验证码选择

大家好，最近公司的项目需求，顺手撸了一个自定义控件，顺便和大家分享一下。

（白心为选中状态）

• 可以自定义行的数量与列的数量，会根据传值自适应
• 可以配合volley完成网络自动读图
• 简单的回调，得到点击反馈，也可直接获得所点击的值

用处：

• 选择图片的验证码
• 相亲网用于选择心仪的对象
• 等……

---

感觉自己萌萌哒

没事，我就卖个萌

代码块

xml

<com.yhj.uiCustom.customImgChose                android:id="@+id/zxyy_my_imgChose"                android:layout_width="match_parent"                android:layout_height="200dp" />

代码块

java

/** * 图片选择器 *  * @author yhj *  */public class customImgChose extends LinearLayout implements  OnClickListener{    public interface onImageChoseClick{        void imageChoseClick(int position);    }    Context context;    public customImgChose(Context context) {        super(context);        // TODO Auto-generated constructor stub        this.context = context;    }    public customImgChose(Context context, AttributeSet attrs) {        super(context, attrs);        // TODO Auto-generated constructor stub        this.context = context;    }    public customImgChose(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        // TODO Auto-generated constructor stub        this.context = context;    }    int height;    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        height = heightMeasureSpec;    };    LayoutParams maxParams;//max的属性    LayoutParams flayoutParams;//小爸爸的属性    LayoutParams llayoutParamsV;//行的属性    FrameLayout.LayoutParams imgParams;//打钩图片的属性    int lineCount;//行数    int rowCount;//列数    String imgUrl[];    private int count;//总数量    myTool tool;    customTool customTool;    ImageLoader imageloader;    public int nowIndex;    onImageChoseClick onImageChoseClick;    public void initData(int lineCount,int rowCount,String imgUrl[],onImageChoseClick onImageChoseClick) {        tool = new myTool(context);        customTool = new customTool();        maxParams = new LayoutParams(LayoutParams.MATCH_PARENT,                LayoutParams.MATCH_PARENT);        llayoutParamsV = new LayoutParams(LayoutParams.MATCH_PARENT,                0,1);        flayoutParams = new LayoutParams(0, LayoutParams.MATCH_PARENT, 1);        flayoutParams.setMargins(5, 5, 5, 5);        //这里必须用FrameLayout的,否则无法居中        imgParams = new FrameLayout.LayoutParams(                customTool.dip2px(context, 20.0f),                customTool.dip2px(context, 20.0f),Gravity.CENTER);        this.lineCount = lineCount;        this.rowCount = rowCount;        this.imgUrl = imgUrl;        //得到总数量        count = lineCount * rowCount;        this.onImageChoseClick = onImageChoseClick;        imageloader = tool.getVolleyImageloader();    }    public void initView() {        //清除下        removeAllViews();        //设置爸爸的属性//      this.setLayoutParams(maxParams);        this.setOrientation(LinearLayout.VERTICAL);        LinearLayout llayoutH;        ImageView img;        ImageView gou;        FrameLayout flayout;        int value;        //遍历行        for(int i=0;i<lineCount;i++){            llayoutH = new LinearLayout(context);            //设置控件属性            llayoutH.setLayoutParams(llayoutParamsV);            llayoutH.setOrientation(LinearLayout.HORIZONTAL);            //遍历列            for(int j=0;j<rowCount;j++){                //得到序号(递增)                value = j+(i*rowCount);                //小爸爸创建                flayout = new FrameLayout(context);                flayout.setLayoutParams(flayoutParams);                flayout.setId(value);                flayout.setOnClickListener(this);                //图片                img = new ImageView(context);                //设置图片的属性                img.setLayoutParams(maxParams);                img.setImageResource(R.drawable.icon_bottom_home);                img.setScaleType(ScaleType.FIT_CENTER);                //加入到小爸爸中                flayout.addView(img);                //自动加载图片                ImageListener listener = imageloader.getImageListener(img,                        R.drawable.ic_launcher, R.drawable.ic_launcher);                imageloader.get(imgUrl[value], listener);                //打钩                img = new ImageView(context);                //设置图片的属性                img.setLayoutParams(imgParams);                img.setImageResource(R.drawable.icon_right);                img.setScaleType(ScaleType.FIT_CENTER);                img.setVisibility(View.GONE);                img.setTag("gou"+value);                //加入到小爸爸中                flayout.addView(img);                //加入到爸爸中                llayoutH.addView(flayout);            }            this.addView(llayoutH);        }    }    ImageView img;    void initGou(){        for(int i =0;i<count;i++){            img = (ImageView) findViewWithTag("gou"+i);            img.setVisibility(View.GONE);        }    }    @Override    public void onClick(View v) {        Log.d("tool", v.getId() +"this");        if(v.getId()>=0 && v.getId()<99){            initGou();            //得到所点击的小爸爸的打钩            img = (ImageView) findViewWithTag("gou"+v.getId());            img.setVisibility(View.VISIBLE);            //得到当前选中项            nowIndex = v.getId();            onImageChoseClick.imageChoseClick(nowIndex);        }    }}

customTool类

public class customTool {      /**      * 设备像素(dip,dp)转屏幕像素(px)      * px就是像素，如果用px,就会用实际像素画，比个如吧，用画一条长度为240px的横线，在480宽的模拟器上看就是一半的屏宽，而在320宽的模拟器上看就是2／3的屏宽了。      　　   * 而dip，就是把屏幕的高分成480分，宽分成320分。比如你做一条160dip的横线，无论你在320还480的模拟器上，都是一半屏的长度。      * @param context      * @param dipValue      * @return      */      public int dip2px(Context context, float dipValue){          final float scale = context.getResources().getDisplayMetrics().density;          return (int)(dipValue * scale + 0.5f);      }  }

注意：tool.getVolleyImageloader()为volley返回VolleyImageloader的实现，需自己实现或修改

调用方法

initData：

参数 解释 lineCount 行 rowCount 列 imgUrl 图片地址（也可以图片id，需要自己修改下代码） onImageChoseClick 点击接口回调

        my_imgChose = (customImgChose) findViewById(R.id.zxyy_my_imgChose);        String url[] = {        "http://d.hiphotos.baidu.com/image/pic/item/e4dde71190ef76c65c41402b9f16fdfaaf51671b.jpg",                "http://d.hiphotos.baidu.com/image/pic/item/e4dde71190ef76c65c41402b9f16fdfaaf51671b.jpg",                "http://d.hiphotos.baidu.com/image/pic/item/e4dde71190ef76c65c41402b9f16fdfaaf51671b.jpg",                "http://d.hiphotos.baidu.com/image/pic/item/e4dde71190ef76c65c41402b9f16fdfaaf51671b.jpg",                "http://d.hiphotos.baidu.com/image/pic/item/e4dde71190ef76c65c41402b9f16fdfaaf51671b.jpg",                "http://d.hiphotos.baidu.com/image/pic/item/e4dde71190ef76c65c41402b9f16fdfaaf51671b.jpg",                "http://d.hiphotos.baidu.com/image/pic/item/e4dde71190ef76c65c41402b9f16fdfaaf51671b.jpg",                "http://d.hiphotos.baidu.com/image/pic/item/e4dde71190ef76c65c41402b9f16fdfaaf51671b.jpg"                };        my_imgChose.initData(2, 4,url,this);        my_imgChose.initView();