في هذه المسودة، سوف نقوم بتوضيح كيفية إنشاء مشروع شاشة تسجيل دخول بسيطة بإستخدام آليات (Android Studio).
في البداية قم بإنشاء مشروع جديد، وضع إسم (login) للنشاط (activity) كما هو موضح أدناه:
- الخطوة 1: ضع الكود التالي مكان الموجود في ملف (activity_login.xml)
<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=".Login"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="@string/login_text" android:id="@+id/textView_login" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="@string/usename_text" android:id="@+id/textView_username" android:layout_marginTop="66dp" android:layout_below="@+id/textView_login" android:layout_alignRight="@+id/textView_login" android:layout_alignEnd="@+id/textView_login" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="@string/password_text" android:id="@+id/textView_password" android:layout_below="@+id/editText_user" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" /> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:inputType="textPersonName" android:ems="10" android:id="@+id/editText_user" android:layout_alignTop="@+id/textView_username" android:layout_alignParentRight="true" android:layout_alignParentEnd="true" /> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:inputType="textPassword" android:ems="10" android:id="@+id/editText_password" android:layout_below="@+id/editText_user" android:layout_alignLeft="@+id/editText_user" android:layout_alignStart="@+id/editText_user" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="@string/attempts_text" android:id="@+id/textView_attempts" android:layout_below="@+id/editText_password" android:layout_marginTop="59dp" android:layout_alignRight="@+id/textView_username" android:layout_alignEnd="@+id/textView_username" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:id="@+id/textView_attemt_Count" android:layout_alignBottom="@+id/textView_attempts" android:layout_alignLeft="@+id/editText_password" android:layout_alignStart="@+id/editText_password" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_login" android:id="@+id/button_login" android:layout_below="@+id/textView_attempts" android:layout_alignLeft="@+id/textView_password" android:layout_alignStart="@+id/textView_password" android:layout_marginTop="60dp" /> </RelativeLayout>
- الخطوة 2: ضع الكود التالي مكان الموجود في ملف (AndroidManifest.xml)
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.myname.simpleloginapp" > <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name=".Login" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name=".User" android:label="@string/title_activity_user" > <intent-filter> <action android:name="com.example.myname.simpleloginapp.User" /> <category android:name="android.intent.category.DEFAULT" /> </intent-filter> </activity> </application> </manifest>
- الخطوة 3: ضع الكود التالي مكان الموجود في ملف (strings.xml)
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">SimpleLoginApp</string> <string name="hello_world">Hello world!</string> <string name="action_settings">Settings</string> <string name="title_activity_user">User</string> <string name="login_text">Login Page</string> <string name="usename_text">User Name</string> <string name="password_text">Password</string> <string name="attempts_text">Attempts :</string> <string name="button_login">Login</string> <string name="Secon_page_text">Welocome to the Second Page</string> </resources>
- الخطوة 4: أضف نشاط جديد، (Right Click Project -> New -> Activity -> BlankActivity) قم بتسميته (User). تم ضع الكود التالي داخل ملف (activity_user.xml)
<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="com.example.myname.simpleloginapp.User" android:id="@+id/user_layout"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="@string/Secon_page_text" android:id="@+id/textView" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="137dp" /> </RelativeLayout>
- الخطوة 5: ضع الكود التالي مكان الموجود في ملف (Login.xml)
package com.example.myname.simpleloginapp; import android.content.Intent; import android.support.v7.app.ActionBarActivity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; import android.widget.Toast; public class Login extends ActionBarActivity { private static EditText username; private static EditText password; private static TextView attempts; private static Button login_btn; int attempt_counter = 5; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_login); LoginButton(); } public void LoginButton() { username = (EditText)findViewById(R.id.editText_user); password = (EditText)findViewById(R.id.editText_password); attempts = (TextView)findViewById(R.id.textView_attemt_Count); login_btn = (Button)findViewById(R.id.button_login); attempts.setText(Integer.toString(attempt_counter)); login_btn.setOnClickListener( new View.OnClickListener() { @Override public void onClick(View v) { if(username.getText().toString().equals("user") && password.getText().toString().equals("pass") ) { Toast.makeText(Login.this,"User and Password is correct", Toast.LENGTH_SHORT).show(); Intent intent = new Intent("com.example.myname.simpleloginapp.User"); startActivity(intent); } else { Toast.makeText(Login.this,"User and Password is not correct", Toast.LENGTH_SHORT).show(); attempt_counter--; attempts.setText(Integer.toString(attempt_counter)); if(attempt_counter == 0){ login_btn.setEnabled(false); } } } } ); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_login, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } }
- الخطوة 6: ضع الكود التالي مكان الموجود في ملف (User.xml)
package com.example.myname.simpleloginapp; import android.support.v7.app.ActionBarActivity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; public class User extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_user); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_user, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } }
الآن قم بتشغيل التطبيق.