یکی از مهمترین بخش های هر نرم افزاری، رابط کاربری آن می باشد. اگر نرم افزار شما یک رابط کاربری UI خوب داشته باشد می تواند کاربران بسیاری را به خود جذب کند، همچنین نشان از حرفه ای بودن شما می دهد.
در این آموزش قصد دارید یک صفحه لاگین در اندروید را طراحی کنیم که شامل یک فیلد نام کاربری، پسوورد و یک دکمه ورود می باشد.
آموزش ایجاد صفحه ورود به اپلیکیشن material design در اندروید
یک پروژه جدید در اندروید استودیو ایجاد نمایید.
فایل MainActivity پروژه را بصورت زیر تغییر دهید:
package ddbarcoder.com.ddholidays.loginul;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.EditText;
import android.widget.Toast;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
public class MainActivity extends AppCompatActivity {
private EditText txt_email;
private EditText txt_password;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
txt_email = (EditText) findViewById(R.id.username);
txt_password = (EditText) findViewById(R.id.password);
}
public void checkLogin(View arg0) {
final String email = txt_email.getText().toString();
if (!isValidEmail(email)) {
Toast.makeText(this, "Email Validate Error!", Toast.LENGTH_SHORT).show();
}
final String pass = txt_password.getText().toString();
if (!isValidPassword(pass)) {
Toast.makeText(this, "Password Error!", Toast.LENGTH_SHORT).show();
}
if(isValidEmail(email) && isValidPassword(pass))
{
Toast.makeText(this, "Now Login :)", Toast.LENGTH_SHORT).show();
}
}
// validating email
private boolean isValidEmail(String email) {
String EMAIL_PATTERN = "^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@"
+ "[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$";
Pattern pattern = Pattern.compile(EMAIL_PATTERN);
Matcher matcher = pattern.matcher(email);
return matcher.matches();
}
// validating password
private boolean isValidPassword(String pass) {
if (pass != null && pass.length() >= 4) {
return true;
}
return false;
}
}
* دقت کنید که در خط اول نام پروژه را لازم نیست جایگزین کنید
اگر به کد بالا دقت کنید یک تابع بنام checkLogin() تعریف کردیم که یک ورودی می گیره.
این تابع میاد ایمیل و پسوورد رو بررسی می کنه و در شرایط مختلف پیغام های متفاوتی به شما نمایش خواهد داد.
شما می توانید به راحتی این بخش را مطابق سلیقه و نیاز خود ویرایش کنید
حال فایل activity_main.xml را باز و کد زیر را در آن قرار دهید:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@mipmap/bg_login"
android:padding="40dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:ems="10"
android:id="@+id/username"
android:drawableLeft="@mipmap/account"
android:hint="Username"
android:layout_marginTop="170dp"
android:textColor="#FFF"
android:paddingLeft="0dp"
android:drawablePadding="5dp"
android:textColorHint="#999"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:ems="10"
android:id="@+id/password"
android:drawableLeft="@mipmap/lock"
android:hint="Password"
android:layout_marginTop="10dp"
android:textColor="#FFF"
android:paddingLeft="0dp"
android:drawablePadding="5dp"
android:textColorHint="#999"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:text="SignIn"
android:id="@+id/btn_login"
android:background="@drawable/btn_login"
android:layout_gravity="center_horizontal"
android:onClick="checkLogin"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Forgot password?"
android:id="@+id/textView3"
android:layout_gravity="center_horizontal"
android:layout_marginTop="40dp"
android:textColor="#FFF"
/>
</LinearLayout>
در این بخش هم ما قسمت اصلی UI را ایجاد کرده ایم، که شامل دو فیلد ایمیل و نام کاربری و یک دکمه وورد می باشد.
در پوشه ی drawable اپلیکیشن خود یک فایل بنام btn_login.xml ایجاد نمایید و کدهای زیر را در آن قرار دهید:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="5dp" />
<solid android:color="#D5AA00" />
</shape>
</item>
<item >
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="5dp" />
<solid android:color="#FFCC00" />
</shape>
</item>
</selector>
این کدها کار ایجاد و زیبا سازی دکمه UI را انجام میدهند که شما میت وانید رنگ یا radius آن را تغییر دهید یا قابلیت های دیگری به آن اضاف نمایید
در نهایت نیز فایل styles.xml پروژه را بصورت زیر تغییر دهید:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
شما می توانید فایل نهایی پروژه به همراه تصاویر را از اینجا دانلود کنید
تصویر نهایی پروژه
برای اطلاع از پاسخ به نظر شما می توانید ایمیل یا شماره موبایل خود را وارد نمایید. *
ایمیل و شماره موبایل شما کاملا مخفی خواهد ماند و در سایت نمایش داده نخواهد شد. *
هنوز برای این مطلب نظری ارسال نشده است!