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();