English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Exemplo de interface de desbloqueio de senha digital iOS falsa para Android

Como mostrado a seguir:

Cada desenvolvedor Android sabe que, atualmente, o método mais comum de desbloqueio do Android é o desbloqueio de 9 quadrados, enquanto o método mais comum de desbloqueio do iOS é o desbloqueio de senha numérica. Durante o desenvolvimento de projetos, muitas vezes precisamos combinar Android e iOS. Às vezes, precisamos fazer nossa interface de desbloqueio parecer um teclado numérico como o do iOS.

这里我就实现了一个仿照ios的数字密码解锁界面。在这里我采用了两种方式来实现,第一种就是使用自定义控件的形式,第二种就是使用我们的布局来实现的。这里我就着重讲一下使用自定义控件形式实现的思路。至于使用布局文件实现的方式,我就不进行具体的讲解了,具体的在后面我会上传源码供大家下载进行研究学习。

当然,我的能力有限,可能你们觉得我的方式不好,那么你们就给我提出来,看看具体你们觉得怎么实现才好,我们一起研究学习。

好了,废话不多说了,现在就来讲解一下,我所使用自定义控件的实现方法:

1.最主要还是实现自定义数字键盘(一个自定义View的控件):

1.绘制数字

// 绘制第一排1,2,3
 canvas.drawText("1", first_x, 40 + first_y, paint);
 canvas.drawText("2", first_x * 2, 40 + first_y, paint);
 canvas.drawText("3", first_x * 3, 40 + first_y, paint);
 // 绘制第2fil4,5,6
 canvas.drawText("4", first_x, 40 + first_y + first_x, paint);
 canvas.drawText("5", first_x * 2, 40 + first_y + first_x, paint);
 canvas.drawText("6", first_x * 3, 40 + first_y + first_x, paint);
 // 绘制第3fil7,8,9
 canvas.drawText("7", first_x, 40 + first_y + first_x * 2, paint);
 canvas.drawText("8", first_x * 2, 40 + first_y + first_x * 2, paint);
 canvas.drawText("9", first_x * 3, 40 + first_y + first_x * 2, paint);
 // 绘制第4排0
 canvas.drawText("0", first_x * 2, 40 + first_y + first_x * 3, paint);

2.绘制好数字后,我们需要在每一个数字外面添加一层圆,绘制圆

//依次绘制第一排的圆
 canvas.drawCircle(first_x+10, 40 + first_y - 15, 50, paint);
 canvas.drawCircle(first_x*2+10, 40 + first_y - 15, 50, paint);
 canvas.drawCircle(first_x*3+10, 40 + first_y - 15, 50, paint);
 //依次绘制第2排的圆
 canvas.drawCircle(first_x+10, 40 + first_y + first_x - 15, 50, paint);
 canvas.drawCircle(first_x*2+10, 40 + first_y + first_x - 15, 50, paint);
 canvas.drawCircle(first_x*3+10, 40 + first_y + first_x - 15, 50, paint);
 //依次绘制第3排的圆
 canvas.drawCircle(first_x+10, 40 + first_y + first_x * 2 - 15, 50, paint);
 canvas.drawCircle(first_x*2+10, 40 + first_y + first_x * 2 - 15, 50, paint);
 canvas.drawCircle(first_x*3+10, 40 + first_y + first_x * 2 - 15, 50, paint);
 //绘制最后一个圆
 canvas.drawCircle(first_x*2+10, 40 + first_y + first_x * 3 - 15, 50, paint);

3点击数字后,我们给一个不同的效果,让用户知道自己点击了该数字,这里我是吧外面的圆的颜色改为了黄色

//判断是否点击数字
 if(circle_x > 0 && circle_y > 0){//点击
 if(type == 0){//pressionar atualizar
 paint.setColor(Color.YELLOW);//设置画笔颜色
 canvas.drawCircle(circle_x, circle_y, 50, paint);//绘制圆
 }else if(type == 1{//弹起刷新
 paint.setColor(Color.WHITE);//设置画笔颜色
 canvas.drawCircle(circle_x, circle_y, 50, paint);//绘制圆
 //绘制完成后,重置
 circle_x = 0; circle_y = 0;
 }
 }

4最后就是判断点击的数字

/*
 * 判断点击的是哪一个数字圆
 */
private void handleDown(float x, float y){
 //判断点击的是那一列的数据
 if(xs[0] - 50 <= x && x <= xs[0] + 50){//primeira coluna
 //Obter a coordenada longitudinal do centro do ponto clicado
 circle_x = xs[0];
 //Determinar qual linha foi clicada
 if(ys[0] - 50 <= y && ys[0] + 50 >= y){//o1fil
 //Obter a coordenada纵向 do centro da circunferência do número clicado
 circle_y = ys[0];
 number = 1;//Definir o número clicado
 }1]; - 50 <= y && ys[1]; + 50 >= y){//o2fil
 //Obter a coordenada纵向 do centro da circunferência do número clicado
 circle_y = ys[1];
 number = 4;//Definir o número clicado
 }2]; - 50 <= y && ys[2]; + 50 >= y){//o3fil
 //Obter a coordenada纵向 do centro da circunferência do número clicado
 circle_y = ys[2];
 number = 7;//Definir o número clicado
 }
 }1]; - 50 <= x && x <= xs[1]; + 50){//o2col
 //Obter a coordenada longitudinal do centro do ponto clicado
 circle_x = xs[1];
 //Determinar qual linha foi clicada
 if(ys[0] - 50 <= y && ys[0] + 50 >= y){//o1fil
 //Obter a coordenada纵向 do centro da circunferência do número clicado
 circle_y = ys[0];
 number = 2;//Definir o número clicado
 }1]; - 50 <= y && ys[1]; + 50 >= y){//o2fil
 //Obter a coordenada纵向 do centro da circunferência do número clicado
 circle_y = ys[1];
 number = 5;//Definir o número clicado
 }2]; - 50 <= y && ys[2]; + 50 >= y){//o3fil
 //Obter a coordenada纵向 do centro da circunferência do número clicado
 circle_y = ys[2];
 number = 8;//Definir o número clicado
 }3]; - 50 <= y && ys[3]; + 50 >= y){//o4fil
 //Obter a coordenada纵向 do centro da circunferência do número clicado
 circle_y = ys[3];
 number = 0;//Definir o número clicado
 }
 }2]; - 50 <= x && x <= xs[2]; + 50){//o3col
 //Obter a coordenada longitudinal do centro do ponto clicado
 circle_x = xs[2];
 //Determinar qual linha foi clicada
 if(ys[0] - 50 <= y && ys[0] + 50 >= y){//o1fil
 //Obter a coordenada纵向 do centro da circunferência do número clicado
 circle_y = ys[0];
 number = 3;//Definir o número clicado
 }1]; - 50 <= y && ys[1]; + 50 >= y){//o2fil
 //Obter a coordenada纵向 do centro da circunferência do número clicado
 circle_y = ys[1];
 number = 6;//Definir o número clicado
 }2]; - 50 <= y && ys[2]; + 50 >= y){//o3fil
 //Obter a coordenada纵向 do centro da circunferência do número clicado
 circle_y = ys[2];
 number = 9;//Definir o número clicado
 }
 }
 sendAccessEvent(R.string.numeric_keyboard_down);
 type = 0;//pressionar atualizar
 //Desenhar o fundo circular ao clicar
 invalidate();
}

Bom, mais ou menos é isso. Deixe-me mencionar, aqui em cima4O controle de exibição de senha também usa uma maneira de controle personalizado, usando threads para implementar após a entrada de números1Depois de alguns segundos, substitua os números digitados pelos caracteres de senha. (Alguém pode dizer que ajustar o estilo do controle EditText do sistema também pode ser feito, mas eu quero dizer que não é possível, pelo menos eu testei e não funcionou)

Este exemplo de interface de desbloqueio de senha digital iOS clone para Android que o editor compartilha é tudo o que tenho a oferecer. Espero que isso forneça uma referência útil e que todos apoiem o tutorial gritar.

Declaração: O conteúdo deste artigo é extraído da Internet, pertence ao respectivo proprietário. O conteúdo é contribuído e carregado voluntariamente pelos usuários da Internet. Este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade por eventuais responsabilidades legais. Se você encontrar conteúdo suspeito de infringência de direitos autorais, por favor, envie e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar, e forneça provas relevantes. Aparentemente, o site deletará conteúdo suspeito de infringência de direitos autorais imediatamente.

Você também pode gostar