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

androidのiOS風数字パスワードロック画面の例

以下の通りです:

それぞれのAndroid開発者は知っていますが、現在Androidの最も一般的なロック解除方法は九朱鍵ロック解除で、iOSのロック解除は数字パスワードロック解除が一般的です。開発プロジェクトでは、AndroidとiOSを組み合わせることが多く、時にはiOSの数字キーボードと同じようにロック解除画面を作成する必要があります。

ここでは、iOSのパスワードロック画面を模倣した実装を行いました。ここでは、2つの方法を使用して実装しました。一つはカスタムコンテンツを使用した方法、もう一つはレイアウトを使用した方法です。カスタムコンテンツを使用した実装の考え方について詳しく説明します。レイアウトを使用した実装方法については具体的に説明しませんが、後でソースコードをアップロードし、研究学習用に提供します。

もちろんです。私の能力には限界がありますので、私の方法が良くないと思う場合は、お気軽に意見をいただければと思います。具体的な実現方法について具体的に考え、一緒に研究学習しましょう。

もう少し詳しく説明します。カスタムコンテンツの実現方法を説明します:

1.主に、カスタム数字キーボード(カスタムビューのコンテンツ)を実現します:

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);
 // 描画します第2並4,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);
 // 描画します第3並7,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);
 // 描画します第40番列を描画します
 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){//リフレッシュを押下
 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){//最初の列
 //クリックした場所の円心の横座標を取得
 circle_x = xs[0];
 //クリックしたのはどの列かを判断
 if(ys[0] - 50 <= y && ys[0] + 50 >= y){//第1並
 //クリックした数字円の円心の縦座標を取得
 circle_y = ys[0];
 number = 1;//クリックした数字を設定
 }1]; - 50 <= y && ys[1]; + 50 >= y){//第2並
 //クリックした数字円の円心の縦座標を取得
 circle_y = ys[1];
 number = 4;//クリックした数字を設定
 }2]; - 50 <= y && ys[2]; + 50 >= y){//第3並
 //クリックした数字円の円心の縦座標を取得
 circle_y = ys[2];
 number = 7;//クリックした数字を設定
 }
 }1]; - 50 <= x && x <= xs[1]; + 50){//第2行
 //クリックした場所の円心の横座標を取得
 circle_x = xs[1];
 //クリックしたのはどの列かを判断
 if(ys[0] - 50 <= y && ys[0] + 50 >= y){//第1並
 //クリックした数字円の円心の縦座標を取得
 circle_y = ys[0];
 number = 2;//クリックした数字を設定
 }1]; - 50 <= y && ys[1]; + 50 >= y){//第2並
 //クリックした数字円の円心の縦座標を取得
 circle_y = ys[1];
 number = 5;//クリックした数字を設定
 }2]; - 50 <= y && ys[2]; + 50 >= y){//第3並
 //クリックした数字円の円心の縦座標を取得
 circle_y = ys[2];
 number = 8;//クリックした数字を設定
 }3]; - 50 <= y && ys[3]; + 50 >= y){//第4並
 //クリックした数字円の円心の縦座標を取得
 circle_y = ys[3];
 number = 0;//クリックした数字を設定
 }
 }2]; - 50 <= x && x <= xs[2]; + 50){//第3行
 //クリックした場所の円心の横座標を取得
 circle_x = xs[2];
 //クリックしたのはどの列かを判断
 if(ys[0] - 50 <= y && ys[0] + 50 >= y){//第1並
 //クリックした数字円の円心の縦座標を取得
 circle_y = ys[0];
 number = 3;//クリックした数字を設定
 }1]; - 50 <= y && ys[1]; + 50 >= y){//第2並
 //クリックした数字円の円心の縦座標を取得
 circle_y = ys[1];
 number = 6;//クリックした数字を設定
 }2]; - 50 <= y && ys[2]; + 50 >= y){//第3並
 //クリックした数字円の円心の縦座標を取得
 circle_y = ys[2];
 number = 9;//クリックした数字を設定
 }
 }
 sendAccessEvent(R.string.numeric_keyboard_down);
 type = 0;//リフレッシュを押下
 //クリック時の背景円を描画
 invalidate();
}

それでは、私のものはこれくらいです。それに、私のここ4パスワードを表示するコントロールもカスタムコントロールの方法で使用され、数字を入力した後にスレッドを使用して処理されます。1数秒後にパスワード文字で入力された数字を置き換えます。(システムのEditTextコントロールのスタイルをパスワードに設定することで実現できるかもしれませんが、これはできません。少なくとも私が試したところではそうでした。)

以上のandroid がiOSのデジタルパスワードロックインターフェースに似た例が、編集者が皆さんに提供した全ての内容です。皆さんに参考になれば幸いですし、皆さんからのサポートを大切に思っています。

声明:この記事の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーによって自発的に貢献し、自己でアップロードされたものであり、このサイトは所有権を持ちません。また、人工編集は行われていません。著作権に関する問題がある場合は、メールを送信してください:notice#oldtoolbag.com(メールを送信する際は、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認が取れたら、このサイトは即座に侵害を疑われるコンテンツを削除します。)

おすすめ