menusearch
javapro.ir

جلسه پنجم:طراحی ui (بخش اول)

جستجو
دوشنبه ۵ اسفند ۱۳۹۸ | ۲۳:۹:۱۹
۱۳۹۸/۱۱/۲۰ یکشنبه
(4)
(0)
جلسه پنجم:طراحی ui (بخش اول)
جلسه پنجم:طراحی ui (بخش اول)

آموزش پروژه محور اندروید ساخت برنامه اینستاگرام

 

 

عرض سلام خدمت دوستان عزیز امیدوارم احوالتون خوب باشه


خب طبق قرارمون این جلسه با  بخش اول طراحی ui خدمتتون هستیم.


بدون مقدمه بریم سراغ اصل مطلب


این جلسه میخوایم  ui صفحه های ورود و ثبت نام اینستاگرام رو طراحی کنیم


اما قبلش بریم اکتیویتی هایی که لازم داریم رو بسازیم:

 
        آموزش پروژه محور طراحی ui در اندروید


در تصویر(1) ابتدا مطابق شکل رو اپ (app) کلیک میکنیم و به مرحله بعد میریم(تصویر شماره 2)
 
آموزش رایگان پروژه محور اندروید
در تصویر(2) مطابق مرحله 2 ، روی پوشه جاوا کلیک می کنیم اینجا 3 تا پوشه میبینیم که هم نام اسم پکیجمون هست
2 تاش test هست یکیش نیست.
مطابق مرحله 3 روی اون که test نیست راست کلیک می کنیم و میریم به تصویر شماره 3:

 
آموزش پروژه محور ساخت برنامه اینستاگرام
بعد از مرحله 3 که روی فولدر کلیک راست کردیم مطابق مرحله 4 یک پکیج جدید میسازیم و اسمشو میذاریم Login.
 
کتاب آموزش رایگان اندروید
مطابق تصویر شماره 4 و مرحله 5 روی پکیج Login که جدید ساختیم راست کلیک میکنیم و دوتا اکتیویتی با لایه های مربوطش از نوع Empty Activity میسازیم و اسمشون رو میذاریم LoginActivity و SignupActivity.


خب الان اکتیویتی ها رو ساختیم و الان باید بریم لایه ها رو طراحی کنیم


من ابتدا صورت کلی دو لایه صفحه ثبت نام و صفحه ورود رو میذارم که شما یه دید کلی ازش داشته باشید و بعد به سراغ پیاده سازی جزئی و تگ نویسی xml اون میریم.

 
آموزش پروژه محور رایگان برنامه نویسی اندروید
تصویر شماره 5 مربوط به صفحه ورود کاربر هست
خب همونطور که میبینید کامپوننت ها به صورت خطی زیر یک دیگه قرار گرفتن
طبق شماره گذاری که که در تصویر شماره 5 کردم ما 3 تا لایه خطی داریم نیاز داریم به صورت کلی که کامپوننت هامون رو نگه داریم.
چیز دیگه ای که توی تصویر میبینیم پشت زمینه صفحه هست که به صورت gradient هست
بنده رنگهاشو با استفاده از ابزاری که روی فایرفاکس نصب کردم از اینترنت برداشتم شما هم میتونید همین کار رو انجام بدید و رنگ دلخواه به صورت gradient توی پشت زمینه تون بذارید.
خب حالا بریم سراغ طراحی مرحله به مرحله این صفحه مون:

 


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:background="@drawable/bg_login"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context=".Login.LoginActivity">

 

</LinearLayout>

 

نمونه کد 1


ابتدا حالت کلی لایه xml رو از constraintLayout به LinearLayout تغییر میدیم چون میخوایم لایه مون خطی باشه.


تصویر شماره 5 رو که ملاحظه کنید متوجه خواهید شد که لایه ها به صورت عمودی زیر هم قرار گرفتن پس orientation رو میذاریم vertical
بعدش میخواهیم که اون صفحه که به صورت gradient بود رو طراحی کنیم و بذاریم به عنوان پشت زمینه صفحه مون.


پس طبق تصویر شماره 6 عمل میکنیم:

 

آموزش تصویری طراحی گرافیک در اندروید
 

مطابق مراحل شماره گذاری شده در تصویر شماره 6 به پوشه res میریم و سپس روی drawable کلیک راست میکنیم و از قسمت new گزینه drawable resource file رو انتخاب می کنیم


سپس اسم اون رو میذاریم bg_login و میریم پس زمینه مون رو طراحی می کنیم.
 
آموزش تصویری پروژه محور رایگان اندروید
ابتدا چنین صفحه ای مطابق تصویر شماره 7 میبینیم


اولین کاری که میکنیم اینه selector رو به shape تغییر میدیم و میریم مرحله بعد:
 
آموزش رایگان اندروید
اگه دوره مقدماتی اندروید رو گذرونده باشید که حتما میدونید و اگه هم نه ان شاالله توی دوره مقدماتی که در اینده ای نزدیک توی سایت خواهیم گذاشت مفصل توضیح خواهیم داد.


gradient از دوتا رنگ تشکیل شده و یه زاویه که هر 45 درجه تغییر میکنه و مطابق همون زاویه اون دوتا رنگ ها gradient میشن.
پس مطابق تصویر شماره 8 یه تگ gradient باز میکنیم.


من دوتا رنگ ها رو با استفاده از همون ابزاری که عرض کردم از اینترنت برداشتم شما هم میتونید از همینا استفاده کنید اگه هم مایلید رنگ های دیگه انتخاب کنید میتونید رنگ های دلخواه بذارید و با استفاده از زاویه 90 درجه gradient بشن.


خب تنها کار باقیمانده اینه که مطابق نمونه کد شماره 1 background رو بذاریم همین drawable/bg_login که ساختیم.


خب بریم سراغ ادامه طراحی
یک بار دیگه تصویر شماره 5 رو ببینید
ما 3 تا لایه خطی زیر هم نیاز داریم باز
که توی شماره1 یه Textview هست که نوشته Instagram
توش شماره2 دوتا edittext هست برای نام کاربری و رمز عبور و یک button برای لاگین شدن
و توی شماره 3 یک لایه خطی این بار از نوع افقی(Horizontal) هست که دوتا textview کنار هم اومدن
قبل از اینکه کد xml لایه ها رو بذارم یه نکته رو بگم اینکه اگه من به لایه ها اندازه بدم ممکنه توی تبلت که صفحه بزرگتری داره لایه ها فیکس نباشن واسه همین من ارتفاع همه لایه ها رو 0 گذاشتم و به اونا مطابق با فضایی که لازم دارن وزن دادم اینجوری این مشکل رو هم هندل کردیم.


کد های هر لایه جداگانه به صورت زیر هست:

 

 


لایه 1:

 


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="vertical"
    android:gravity="bottom|center"
    >
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginBottom="10dp"
        android:fontFamily="@font/stromcrow_regular"
        android:text="instagram"
        android:textColor="#ffffff"
        android:textSize="60dp"></TextView>

 

</LinearLayout>


نمونه کد 2


نمونه کد 2 داره به لایه 1 اشاره میکنه که قراره یک textview با  عبارت Instagram بالای صفحه مون بسازه
برای فونت این عبارت هم میتونید فونت دلخواهتون رو دانلود کنید و به قسمت res برید و یه فولدر جدید به اسمfont بسازید و فونت مورد نظر رو درونش قرار بدید و ازش استفاده کنید.


توضیحات:


برای ساخت فولدر فونت روی res کلیک راست کنید و new و سپس android resource directory رو انتخاب کنید و resource type رو روی font بذارید.به این ترتیب فولدر font ساخت میشه و میتونید فونت های دلخواهتون رو درونش قرار بدید.

 

لایه2:

 


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_weight="2">

    <EditText
        android:id="@+id/edt_username_login"
        android:layout_width="match_parent"
        android:layout_height="54dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:hint="Username"
        android:padding="10dp"
        android:background="@drawable/bg_edit_login"
        android:textColorHint="#ffffff"
        ></EditText>
    <EditText
        android:id="@+id/edt_password_login"
        android:layout_width="match_parent"
        android:layout_height="54dp"
        android:layout_marginLeft="20dp"
        android:layout_margintop="10dp"
        android:layout_marginRight="20dp"
        android:hint="Password"
        android:padding="10dp"
        android:background="@drawable/bg_edit_login"
        android:textColorHint="#ffffff"
        ></EditText>
    <Button
        android:id="@+id/btn_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Login"
        android:layout_marginRight="30dp"
        android:layout_marginLeft="30dp"
        android:textColor="#CF5489"
        android:background="@drawable/btn_login"
        android:layout_margintop="10dp"
        ></Button>

</LinearLayout>


نمونه کد 3


برای هر کدام یک id نیز تعریف می کنیم که بتونیم ازشون توی کد استفاده کنیم.

 

توضیحات:


برای Edittext ها و همچنین Button مطابق تصویر شماره 8 عمل میکنیم و یک لایه در پوشه  drawableبرای بک گراند آنها میسازیم  که کد اونها مطابق زیر میباشد.


بک گراند Edittext:

 

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

<solid android:color="#C63A82"></solid>

</shape>

 

بک گراند button:

 

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/transparent"></solid>
<stroke android:color="#CF5489"
    android:width="3dp"></stroke>
</shape>

 

لایه3:

 

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="horizontal"
    android:gravity="bottom|center"
    >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="Don't have an account?"
        android:textColor="#ffffff"></TextView>

    <TextView
        android:id="@+id/btn_signup_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="Signup"
        android:textColor="#ffffff"
        android:textSize="16dp"
        android:textStyle="bold"></TextView>
</LinearLayout>


نمونه کد 4

 

توضیحات:


در اینجا برای textview که عبارت Signup رو درون خودش داره یه آیدی تعریف می کنیم به این دلیل که هرگاه روی اون کلیک کنیم از صفحه ورود به صفحه ثبت نام بره.

 

طراحی ui رو همونطور که ملاحظه کردید به 3 بخش تقسیم کردیم و به صورت جداگانه گذاشتیم کدها رو
اما در اینجا ابتدا کد کامل اون رو میذارم که به صورت زیر هست و سپس میریم برای تعریف ویوها توی بخش کدنویسی اپلیکیشن.

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:background="@drawable/bg_login"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context=".Login.LoginActivity">
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="vertical"
    android:gravity="bottom|center"
    >
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginBottom="10dp"
        android:fontFamily="@font/stromcrow_regular"
        android:text="instagram"
        android:textColor="#ffffff"
        android:textSize="60dp"></TextView>

</LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_weight="2">

        <EditText
            android:id="@+id/edt_username_login"
            android:layout_width="match_parent"
            android:layout_height="54dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:hint="Username"
            android:padding="10dp"
            android:background="@drawable/bg_edit_login"
            android:textColorHint="#ffffff"
            ></EditText>
        <EditText
            android:id="@+id/edt_password_login"
            android:layout_width="match_parent"
            android:layout_height="54dp"
            android:layout_marginLeft="20dp"
            android:layout_margintop="10dp"
            android:layout_marginRight="20dp"
            android:hint="Password"
            android:padding="10dp"
            android:background="@drawable/bg_edit_login"
            android:textColorHint="#ffffff"
            ></EditText>
        <Button
            android:id="@+id/btn_login"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Login"
            android:layout_marginRight="30dp"
            android:layout_marginLeft="30dp"
            android:textColor="#CF5489"
            android:background="@drawable/btn_login"
            android:layout_margintop="10dp"
            ></Button>

    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:gravity="bottom|center"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:text="Don't have an account?"
            android:textColor="#ffffff"></TextView>

        <TextView
            android:id="@+id/btn_signup_login"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:text="Signup"
            android:textColor="#ffffff"
            android:textSize="16dp"
            android:textStyle="bold"></TextView>
    </LinearLayout>


</LinearLayout>


نمونه کد 5


خب بریم سراغ تعریف ویوها توی اکتویتی مون،میریم توی اکتیویتی مربوط به لایه ای که طراحی کردیم :
ابتدا ویو ها رو به این شکل تعریف می کنیم:

 

EditText username,password;
Button login;
TextView signup;


نمونه کد 6


سپس توی onCreate اونها رو با استفاده از آیدی که داشتند به ویوهاشون وصل می کنیم:

 

username=findViewById(R.id.edt_username_login);
password=findViewById(R.id.edt_password_login);
login=findViewById(R.id.btn_login);
signup=findViewById(R.id.btn_signup_login);


نمونه کد 6


و بعد برای signup رویداد کلیک تعریف میکنیم که هرگاه روی اون کلیک کنیم به صفحه ثبت نام بره
به این شکل(مطابق نمونه کد8):

 

signup.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        startActivity(new Intent(LoginActivity.this,SignupActivity.class));
        finish();
    }
});


نمونه کد 7

 

 

و در اخر اکتیویتی ما به صورت زیر میباشد(تصویر شماره9)

 
آموزش متنی برنامه نویسی اندروید

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


 

................ادامه این آموزش را به صورت پی دی اف شده دانلود کنید................

 


 این جلسه آموزشی را می توانید بصورت  کتاب الکترونیکی (PDF شده) در لینک زیر دریافت کنید.
این جلسه آموزشی را بصورت کامل و مرتب شده در لینک زیر دانلود کنید:(در صورت خرابی لینک گزارش دهید)

 

 

 

 

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

لینک دانلود کتاب

 

 


نشر این مطلب با ذکر منبع (لینک سایت) بلامانع است.
برای با خبر شدن از جدیدترین مطالب آموزشی جاوا 
عضو کانال تلگرام ما شوید.

 

نظرات کاربران
*نام و نام خانوادگی
* پست الکترونیک
* متن پیام

بستن
*نام و نام خانوادگی
* پست الکترونیک
* متن پیام

1 نظر
علی
یکشنبه چهارم اسفند ۹۸
پاسخ
()
()
علی
سلام خسته نباشيد بسيار عالي
پاسخ مدیر سایت
سلام.مرسی از محبت شما علی جان
پاسخ مدیر سایت