۱۹
آبان

جلسه ۴۸ : صفحه Login در اندروید

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش برنامه نویسی اندروید را دنبال می کنند. یک اپلیکیشن Login یک صفحه ی ورودی است که از اعتبار کاربران مختلف که عضو اپلیکیشن هستند، برای ورود به برخی از برنامه های خاص آن اپلیکیشن استفاده می کند. شما به احتمال زیاد با صفحه ی Login یا نظیر آن در هنگام ورود به حساب کاربری ایمیل خود یا هنگام ورود به شبکه ی های اجتماعی نظیر فیس بوک، توئیتر، تلگرام و… رو به رو شده اید. ممکن است شما در اپلیکیشنی که در اندروید استدیو توسعه می دهید نیاز به ایجاد یک صفحه ی Login داشته باشید، برای این منظور ما مباحث این بخش را به چگونگی ایجاد صفحه Login در اندروید اختصاص داده ایم.

صفحه Login در برنامه نویسی اندروید

در این مبحث نیز ساختار کلی ایجاد یک صفحه Login در برنامه نویسی اندروید را به همراه متدهای مفید ارائه کرده ایم.

در ادامه ی این آموزش یک مثال ساده از ایجاد صفحه Login در برنامه نویسی اندروید نیز قرار داده ایم.

ساختار کلی کار

ابتدا شما باید دو TextView را برای دریافت نام کاربری و رمز عبور کاربر در اپلیکیشن خود پیاده سازی کنید.

نوع ورودی در هر TextView را باید به صورت زیر تنظیم کنید:

مثال :

<EditText
   android:id = "@+id/editText2"
   android:layout_width = "wrap_content"
   android:layout_height = "wrap_content"
   android:inputType = "textPassword" />

<EditText
   android:id = "@+id/editText1"
   android:layout_width = "wrap_content"
   android:layout_height = "wrap_content"
/>

<EditText

android:id = "@+id/editText2"

android:layout_width = "wrap_content"

android:layout_height = "wrap_content"

android:inputType = "textPassword" />

<EditText

android:id = "@+id/editText1"

android:layout_width = "wrap_content"

android:layout_height = "wrap_content"

سپس به یک button برای Login کردن در صفحه با استفاده از ویژگی onClick نیاز داریم.

سپس باید تابع مربوط به ویژگی onClick در کد جاوای برنامه ایجاد شود:

مثال :

<Button
   android:id = "@+id/button1"
   android:layout_width = "wrap_content"
   android:layout_height = "wrap_content"
   android:onClick = "login"
   android:text = "@string/Login" 
/>

<Button

android:id = "@+id/button1"

android:layout_width = "wrap_content"

android:layout_height = "wrap_content"

android:onClick = "login"

android:text = "@string/Login"

در فایل جاوا در متد رویداد onClick متن username و password با استفاده از متدهای ()getText و ()toString استفاده می شود.

سپس این ورودی با متن تابع ()equals مقایسه می شود:

مثال :

EditText username = (EditText)findViewById(R.id.editText1);
EditText password = (EditText)findViewById(R.id.editText2);		

public void login(View view){
   if(username.getText().toString().equals("admin") && password.getText().toString().equals("admin")){
   
   //correcct password
   }else{
   //wrong password
}

EditText username = (EditText)findViewById(R.id.editText1);

EditText password = (EditText)findViewById(R.id.editText2);

public void login(View view){

if(username.getText().toString().equals("admin") && password.getText().toString().equals("admin")){

//correcct password

}else{

//wrong password

}

سپس باید یک مکانیسم امنیتی نیز برای جلوگیری از تلاش های غیر مجاز برای ورود اعمال کنید.

برای این منظور ما با استفاده از یک شمارنده تعداد تلاش های با ورودی اشتباه را گرفته و وقتی به یک تعداد رسید، دکمه login را غیرفعال می کنیم:

مثال :

int counter = 3;
counter--;

if(counter==0){
   //button را غیر فعال کرده و اپلیکیشن را می بندیم.
}

int counter = 3;

counter--;

if(counter==0){

//button را غیر فعال کرده و اپلیکیشن را می بندیم.

}

مثال

در ادامه به یک مثال ساده از یک برنامه ی Login می پردازیم.

در این برنامه کاربر فقط می تواند تا سه تلاش اشتباه برای ورود داشته باشد.

شما می توانید این مثال را در دستگاه واقعی اندروید یا در شبیه ساز اندروید اجرا کرده و یا تست کنید:

مراحل انجام کار:

مراحل	توضیحات
۱	مراحل ایجاد برنامه در اندروید استدیو را طبق بخش های قبلی دنبال کنید.
۳	کدهای مورد نیاز را در فایل src/MainActivity.java قرار دهید.
۴	طراحی متناسب با برنامه را به فایل res/layout/activity_main اضافه کنید.
۵	برنامه را اجرا کنید تا شبیه ساز اندروید نتیجه را نمایش دهد.

محتوای فایل src/MainActivity.java:

مثال :

package com.example.sairamkrishna.myapplication;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;

import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;


public class MainActivity extends Activity  {
   Button b1,b2;
   EditText ed1,ed2;

   TextView tx1;
   int counter = 3;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);

      b1 = (Button)findViewById(R.id.button);
      ed1 = (EditText)findViewById(R.id.editText);
      ed2 = (EditText)findViewById(R.id.editText2);

      b2 = (Button)findViewById(R.id.button2);
      tx1 = (TextView)findViewById(R.id.textView3);
      tx1.setVisibility(View.GONE);

      b1.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View v) {
            if(ed1.getText().toString().equals("admin") &&
               ed2.getText().toString().equals("admin")) {
                  Toast.makeText(getApplicationContext(),
                     "Redirecting...",Toast.LENGTH_SHORT).show();
               }else{
                  Toast.makeText(getApplicationContext(), "Wrong 
                     Credentials",Toast.LENGTH_SHORT).show();

                  tx1.setVisibility(View.VISIBLE);
                  tx1.setBackgroundColor(Color.RED);
                  counter--;
                  tx1.setText(Integer.toString(counter));

                  if (counter == 0) {
                     b1.setEnabled(false);
                  }
               }
         }
      });

      b2.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View v) {
            finish();
         }
      });
   }
}

package com.example.sairamkrishna.myapplication;

import android.app.Activity;

import android.graphics.Color;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.EditText;

import android.widget.TextView;

import android.widget.Toast;

public class MainActivity extends Activity {

Button b1,b2;

EditText ed1,ed2;

TextView tx1;

int counter = 3;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

b1 = (Button)findViewById(R.id.button);

ed1 = (EditText)findViewById(R.id.editText);

ed2 = (EditText)findViewById(R.id.editText2);

b2 = (Button)findViewById(R.id.button2);

tx1 = (TextView)findViewById(R.id.textView3);

tx1.setVisibility(View.GONE);

b1.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

if(ed1.getText().toString().equals("admin") &&

ed2.getText().toString().equals("admin")) {

Toast.makeText(getApplicationContext(),

"Redirecting...",Toast.LENGTH_SHORT).show();

}else{

Toast.makeText(getApplicationContext(), "Wrong

Credentials",Toast.LENGTH_SHORT).show();

tx1.setVisibility(View.VISIBLE);

tx1.setBackgroundColor(Color.RED);

counter--;

tx1.setText(Integer.toString(counter));

if (counter == 0) {

b1.setEnabled(false);

}

});

b2.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

finish();

}

});

}

محتوای فایل xml طراحی برنامه در res/layout/activity_main.xml:

مثال :

<?xml version = "1.0" encoding = "utf-8"?>
<RelativeLayout xmlns:android = "http://schemas.android.com/apk/res/android"
   xmlns:tools = "http://schemas.android.com/tools" android:layout_width="match_parent"
   android:layout_height = "match_parent" android:paddingLeft= "@dimen/activity_horizontal_margin"
   android:paddingRight = "@dimen/activity_horizontal_margin"
   android:paddingTop = "@dimen/activity_vertical_margin"
   android:paddingBottom = "@dimen/activity_vertical_margin" tools:context = ".MainActivity">
   
   <TextView android:text = "Login" android:layout_width="wrap_content"
      android:layout_height = "wrap_content"
      android:id = "@+id/textview"
      android:textSize = "35dp"
      android:layout_alignParentTop = "true"
      android:layout_centerHorizontal = "true" />
      
   <TextView
      android:layout_width = "wrap_content"
      android:layout_height = "wrap_content"
      android:text = "Tutorials point"
      android:id = "@+id/textView"
      android:layout_below = "@+id/textview"
      android:layout_centerHorizontal = "true"
      android:textColor = "#ff7aff24"
      android:textSize = "35dp" />
      
   <EditText
      android:layout_width = "wrap_content"
      android:layout_height = "wrap_content"
      android:id = "@+id/editText"
      android:hint = "Enter Name"
      android:focusable = "true"
      android:textColorHighlight = "#ff7eff15"
      android:textColorHint = "#ffff25e6"
      android:layout_marginTop = "46dp"
      android:layout_below = "@+id/imageView"
      android:layout_alignParentLeft = "true"
      android:layout_alignParentStart = "true"
      android:layout_alignParentRight = "true"
      android:layout_alignParentEnd = "true" />
      
   <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/imageView"
      android:src="@drawable/abc"
      android:layout_below="@+id/textView"
      android:layout_centerHorizontal="true" />
      
   <EditText
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:inputType="textPassword"
      android:ems="10"
      android:id="@+id/editText2"
      android:layout_below="@+id/editText"
      android:layout_alignParentLeft="true"
      android:layout_alignParentStart="true"
      android:layout_alignRight="@+id/editText"
      android:layout_alignEnd="@+id/editText"
      android:textColorHint="#ffff299f"
      android:hint="Password" />
      
   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Attempts Left:"
      android:id="@+id/textView2"
      android:layout_below="@+id/editText2"
      android:layout_alignParentLeft="true"
      android:layout_alignParentStart="true"
      android:textSize="25dp" />
      
   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="New Text"
      android:id="@+id/textView3"
      android:layout_alignTop="@+id/textView2"
      android:layout_alignParentRight="true"
      android:layout_alignParentEnd="true"
      android:layout_alignBottom="@+id/textView2"
      android:layout_toEndOf="@+id/textview"
      android:textSize="25dp"
      android:layout_toRightOf="@+id/textview" />
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="login"
      android:id="@+id/button"
      android:layout_alignParentBottom="true"
      android:layout_toLeftOf="@+id/textview"
      android:layout_toStartOf="@+id/textview" />
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Cancel"
      android:id="@+id/button2"
      android:layout_alignParentBottom="true"
      android:layout_toRightOf="@+id/textview"
      android:layout_toEndOf="@+id/textview" />

</RelativeLayout>

100

101

102

103

104

<?xml version = "1.0" encoding = "utf-8"?>

<RelativeLayout xmlns:android = "http://schemas.android.com/apk/res/android"

xmlns:tools = "http://schemas.android.com/tools" android:layout_width="match_parent"

android:layout_height = "match_parent" android:paddingLeft= "@dimen/activity_horizontal_margin"

android:paddingRight = "@dimen/activity_horizontal_margin"

android:paddingTop = "@dimen/activity_vertical_margin"

android:paddingBottom = "@dimen/activity_vertical_margin" tools:context = ".MainActivity">

<TextView android:text = "Login" android:layout_width="wrap_content"

android:layout_height = "wrap_content"

android:id = "@+id/textview"

android:textSize = "35dp"

android:layout_alignParentTop = "true"

android:layout_centerHorizontal = "true" />

<TextView

android:layout_width = "wrap_content"

android:layout_height = "wrap_content"

android:text = "Tutorials point"

android:id = "@+id/textView"

android:layout_below = "@+id/textview"

android:layout_centerHorizontal = "true"

android:textColor = "#ff7aff24"

android:textSize = "35dp" />

<EditText

android:layout_width = "wrap_content"

android:layout_height = "wrap_content"

android:id = "@+id/editText"

android:hint = "Enter Name"

android:focusable = "true"

android:textColorHighlight = "#ff7eff15"

android:textColorHint = "#ffff25e6"

android:layout_marginTop = "46dp"

android:layout_below = "@+id/imageView"

android:layout_alignParentLeft = "true"

android:layout_alignParentStart = "true"

android:layout_alignParentRight = "true"

android:layout_alignParentEnd = "true" />

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/imageView"

android:src="@drawable/abc"

android:layout_below="@+id/textView"

android:layout_centerHorizontal="true" />

<EditText

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:inputType="textPassword"

android:ems="10"

android:id="@+id/editText2"

android:layout_below="@+id/editText"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:layout_alignRight="@+id/editText"

android:layout_alignEnd="@+id/editText"

android:textColorHint="#ffff299f"

android:hint="Password" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Attempts Left:"

android:id="@+id/textView2"

android:layout_below="@+id/editText2"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:textSize="25dp" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="New Text"

android:id="@+id/textView3"

android:layout_alignTop="@+id/textView2"

android:layout_alignParentRight="true"

android:layout_alignParentEnd="true"

android:layout_alignBottom="@+id/textView2"

android:layout_toEndOf="@+id/textview"

android:textSize="25dp"

android:layout_toRightOf="@+id/textview" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="login"

android:id="@+id/button"

android:layout_alignParentBottom="true"

android:layout_toLeftOf="@+id/textview"

android:layout_toStartOf="@+id/textview" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Cancel"

android:id="@+id/button2"

android:layout_alignParentBottom="true"

android:layout_toRightOf="@+id/textview"

android:layout_toEndOf="@+id/textview" />

</RelativeLayout>

محتوای فایل res/values/string.xml:

مثال :

<resources>
   <string name="app_name">My Application</string>
</resources>

<string name="app_name">My Application</string>

</resources>

محتوای فایل AndroidManifest.xml:

مثال :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.sairamkrishna.myapplication" >
   
   <application
      android:allowBackup="true"
      android:icon="@mipmap/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
      
      <activity
         android:name=".MainActivity"
         android:label="@string/app_name" >
         
         <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
         
      </activity>
      
   </application>
</manifest>

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.example.sairamkrishna.myapplication" >

<application

android:allowBackup="true"

android:icon="@mipmap/ic_launcher"

android:label="@string/app_name"

android:theme="@style/AppTheme" >

<activity

android:name=".MainActivity"

android:label="@string/app_name" >

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

اجرای برنامه

برای اجرای برنامه ی اندرویدی خود یکی از فایل های activity در برنامه ی خود کلیک کنید.

سپس روی نماد (Run) از نوار ابزار برای شروع اجرای برنامه کلیک کنید.

سپس نتیجه اجرای برنامه را در دستگاه اندروید خود مشابه زیر مشاهده خواهید کرد:

صفحه Login در برنامه نویسی اندروید

حالا برای آزمایش عبارت ABC را در هر دو فیلد نام کاربری و رمز عبور تایپ کرده و دکمه LOGIN را فشار دهید.

صفحه Login در برنامه نویسی اندروید -تست برنامه

حالا همین تلاش را دو بار دیگر نیز انجام دهید و خواهید دید که تلاشهای ورود شما ۰ شده و دکمه LOGIN شما غیرفعال می شود.

سپس برنامه را دوباره باز کرده و اینبار نام کاربری و رمز عبور درست را که admin و password می باشد در فیلدهای text مربوطه وارد کنید:

صفحه Login در برنامه نویسی اندروید -تست صحیح

و اگر دکمه ی cancel را فشار دهید از اپلیکیشن خارج می شوید.

کلام آخر

در اغلب اپلیکیشن هایی که صفحات و قابلیت های مختلف با سطوح دسترسی گوناگون دارد حتما به یک صفحه ی Login برای اعتبارسنجی کاربران نیاز خواهی داشت از این رو می توانید از مباحث آموزشی کار با صفحه Login در برنامه نویسی اندروید استفاده کنید.

در بخش بعدی نیز به آموزش چگونگی کار با MediaPlayer در اندروید استدیو خواهیم پرداخت.

به اشتراک بگذارید

صفحه Login در اندروید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۴۸ : صفحه Login در اندروید

مقدمه

صفحه Login در برنامه نویسی اندروید

ساختار کلی کار

مثال

اجرای برنامه

کلام آخر

لیست مطالب دوره

آموزش اندروید

رابط کاربری در اندروید

مفاهیم پیشرفته در اندروید

مثال های مفید

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ