menusearch
javapro.ir

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

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

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

 

به نام خدا

 

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

 

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

خب کل لایه مون مشابه تصویر 1 هست
ما 3 تا لایه خطی داریم
ک به طراحی بخش به بخش اون میپردازیم
توی لایه 1 ما یه لایه افقی داریم که یه عکس و 6 تا textview  هست که دو به دو زیر هم قرار گرفتن برای نشون دادن اطلاعات کاربرمون.
قبل از طراحی دقیق این لایه دقت کرده باشید تصویر ما دایره ای شکل می باشد که خود اندروید استودیو این قابلیت رو به ما نمیده پس میریم با هم دیگه کتابخونه اش رو اضافه میکنیم که بتونیم از این ویژگی توی طراحیمون استفاده کنیم.

 

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

مثل تصویر 2 عمل میکنیم ابتدا به Gradle scripts میریم و بعد از تون به build.gradle(Module:app) میریم

 

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

 

implementation 'com.github.abdularis:circularimageview:+'    


کتابخانه 1


مطابق تصویر 3 کتابخانه 1 رو اضافه میکنیم،تحریم شکن برای شکستن تحریم ها رو روشن میکنیم و sync رو میزنیم تا کتابخانه به پروژه اضافه بشه.
 خب میریم برای طراحی جزیی

 

<FrameLayout 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:background="#ffffff"
    tools:context=".fragments.HomeFragment">

</FrameLayout>


نمونه کد 1


روت کلی لایه مون که یک frameLayout هست چون قراره فرگمنت هامون توش جابجا بشن.
پس ما برای اینکه 3 تا لایه مون خطی زیر هم قرار بگیرن از یک لایه خطی عمودی استفاده میکنیم به این شکل.

 


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

</LinearLayout>


نمونه کد 2


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

 


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margintop="12dp"
    android:gravity="center"
    android:orientation="horizontal"
    android:padding="10dp">

</LinearLayout>

 


نمونه کد 3


یه سری ویژگی دیگه مثل margin و padding رو هم میدیم بهش که لایه مون دقیقا سرجای خودش قرار بگیره
و بعد موارد رو توی این لایه اضافه میکنیم.
ابتدا باید عکس رو اضافه کنیم ولی نه عکس مربع شکل پیش فرض اندروید استودیو
بلکه از عکس دایره ای شکلی استفاده میکنیم که کتابخونه اش رو قبل تر اضافه کردیم.

 


<com.github.abdularis.civ.CircleImageView
    android:id="@+id/circle_user_image"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:src="@mipmap/userimage"></com.github.abdularis.civ.CircleImageView> 

 


نمونه کد 4


خب عکس رو اضافه میکنم و بهش ایدی هم میدیم که بعد بتونیم توی کد ازش استفاده کنیم.
بعدش ما 6 تا تکست ویو داریم که دو به دو زیر هم قرار گرفتن
لایه ما که افقی هست
پس چجوری این کار رو انجام بدیم؟؟!!
خب ساده هست
از 3 تا لایه خطی عمودی کنار عکس استفاده میکنیم و توی هر کدومش 2 تا تکست ویو میذاریم
به همین سادگی

 


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

    <TextView
        android:id="@+id/numofposts"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:hint="0"
        android:text="TextView"
        android:textColor="#000000"
        android:textColorHint="#000000"
        tools:text="0" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Posts"
        android:textColor="#000000"
        android:textSize="18sp"
        android:textStyle="bold" />

</LinearLayout>

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="TextView"
        android:textColor="#000000"
        tools:text="0" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Followers"
        android:textColor="#000000"
        android:textSize="18sp"
        android:textStyle="bold" />

</LinearLayout>

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

    <TextView
        
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="TextView"
        android:textColor="#000000"
        tools:text="0" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Following"
        android:textColor="#000000"
        android:textSize="18sp"
        android:textStyle="bold" />

</LinearLayout>

 


نمونه کد 4


فراموش نکنید برای textview که قراره تعداد پست ها رو نشون بده یه id بذارید که بعد ازش میخوایم استفاده کنیم.خب طراحی این لایه هم تموم شد.
میریم با هم دیگه لایه 2 رو طراحی میکنیم.

 

 

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="vertical"
    android:padding="10dp">


</LinearLayout>


نمونه کد 5


لایه 2 خیلی سادست
توی این لایه 2 تا textview داریم که قراره یکیش اسم کاربر و اون یکی رو bio رو نگه داره توی خودش و یه button برای اینکه وقتی روش کلیک کردیم بره توی صفحه ویرایش اطلاعات کاربرمون.
من سه تاشو یجا میذارم چون کار خاصی نداره.

 

 

<TextView
    android:id="@+id/txtname"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:gravity="left"
    android:text="TextView"
    android:textColor="#000000"
    android:textStyle="bold" />

<TextView
    android:id="@+id/txtbio"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="2"
    android:text="TextView"
    android:textColor="#000000" />

<Button
    android:id="@+id/btneditprofile"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:background="@drawable/btneditbg"
    android:text="Edit Profile" />


نمونه کد 6


فقط تنها نکته ای که وجود داره بک گراند button هست که جلسات پیش روش ساختنش در پوشه drawable رو کاملا توضیح دادیم.ابتدا توی drawable یک drawable recourse file جدید ایجاد میکنیم به اسم btneditprofile که کد اون به این صورت می باشد:
 

 

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

    <solid android:color="@color/Blue"></solid>
    <corners android:radius="8dp"></corners>
    <stroke android:color="#33000000">
    </stroke>
    <stroke android:width="3dp"></stroke>

</shape>


نمونه کد 7


در خصوص رنگ اون شما میتونید یک رنگ جدید در res/values/colors به همین اسم Blue اضافه کنید و در همه جای پروژه از اون استفاده کنید که کد hex این رنگ هم 007ff7 # هست و یا میتونید از همین کد و یا حتی رنگ دلخواه خودتون استفاده کنید.
لایه 2 هم به این شکل به اتمام رسید.
لایه 3 هم لازم نیست کاری رو انجام بدیم و فعلا یه لایه خطی میذاریم تا بعد در صورت لزوم از اون استفاده کنیم.
به این شکل:

 

 

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

</LinearLayout>


نمونه کد 8


طبق عادت هر جلسه کد کامل لایه رو میذاریم و بد میریم سراغ تعریف لایه ها در سمت کد نویسی.

 

 

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

 


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

 

 

 

 

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

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

 

 


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

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

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

0 نظر