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