menusearch
javapro.ir

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

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

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

 

عرض سلام و درود خدمت شما دوستان عزیز و همراهان جاوا پرو
این جلسه هم طبق قرارمون با ادامه طراحی ui برنامه در خدمت شما عزیزان هستیم
در این جلسه قراره لایه ویرایش پروفایل کاربر رو طراحی کنیم.
خب بریم برای طراحی لایه ویرایش پروفایل کاربر.
ما اول باید یه اکتیویتی و لایه مربوطش رو ابتدا بسازیم و بعد بریم سراغ طراحی اون
ابتدا یه اکتیویتی خالی از نوع(Empty Activity) میسازیم همراه با لایه اش به اسمEdit_Profile_Activity و میریم برای طراحیش.

آموزش ساخت برنامه اینستاگرام با اندروید
چیزی که ما باید طراحی کنیم تصویر 1 است
لایه 1 همونطور که میبینید 1 عکس هست و یک texview
لایه 2 نیز چندین فیلد میبینیم که ما میتونیم درونش چیزی رو وارد کنیم
اینا مثل قبل edittext نیستن
بلکه textinputlayout هستن که درونش یه edittext هست
مزیت این نسبت به edittext اینه که این عباراتی رو که شما به صورت hint برای راهنمایی کاربر میبینید بعد از اینکه روش کلیک شد این عبارت به صورت شناور بالا قرار میگیره و مثل edittext از بین نمیره.
خب بریم برای طراحی

 

<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:layout_height="match_parent"
  android:background="#ffffff"
  android:gravity="center|top"
  android:orientation="vertical"
  tools:context=".Edit_Profile_Activity">

</LinearLayout>

نمونه کد1


ابتدا روت کلی لایه که طبق معمول خطی عمودی هست و لایه های 1 و 2 قراره توی این قرار بگیرن.
بر خلاف سابق برای لایه 1،یک لایه جداگانه در نظر نگرفتم و مستقیم و پلت ها رو مستقیم توی لایه اصلی گذاشتم به این شکل:

 

<com.github.abdularis.civ.CircleImageView
  android:id="@+id/edit_profile_image"
  android:layout_width="80dp"
  android:layout_height="80dp"
  android:src="@mipmap/userimage"
  android:layout_marg into p="10dp">
</com.github.abdularis.civ.CircleImageView>

<TextView
  android:id="@+id/btn_change_profile"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Change Profile Photo"
  android:textColor="@color/Blue"
  android:layout_marg into p="8dp"
  ></TextView>

نمونه کد 2


خب برای عکس کاربر از یک circle Image view استفاده میکنیم که کتابخونه اش رو جلسه پیش با هم دیگه اضافه کردیم
و یه id هم میدیم بهش که بتونیم ازش استفاده کنیم و عکس کاربر رو توش ذخیره کنیم و یک textview که به اونم id میدیم برای اینکه هروقت روش کلیک کردیم بریم و باهاش عکس کاربر رو عوض کنیم.
این از لایه 1
بریم برای لایه 2:
ما برای لایه 2 از یک لایه خطی استفاد کردیم که فیلد ها بتونن درون اون قرار بگیرن به صورت خطی به این شکل:

 

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_marg into p="12dp"
  android:orientation="vertical">

 

نمونه کد 3


خب حالا 4 تا textinput layout قرار میدیم و درون هرکدوم از اینها یه edittext میذاریم که کاربر اطلاعات رو بتونه درونش تایپ کنه و در اخر هم یه button میذاریم برای اینکه هرگاه روش کلیک شد اطلاعات ثبت بشه توی دیتابیسمون.
کد کلی لایه دو به این شکل هست:

 

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_marg into p="12dp"
  android:orientation="vertical">

  <android.support.design.widget.TextInputLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="left|center"
      android:hint="Name"
      app:hintTextAppearance="@style/MyHintStyle"

      android:textColorHint="#22000000">

      <EditText
          android:id="@+id/edt_name"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"></EditText>
  </android.support.design.widget.TextInputLayout>

  <android.support.design.widget.TextInputLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="left|center"
      android:hint="Username"
      android:textColorHint="#22000000">

      <EditText
          android:id="@+id/edt_username"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"></EditText>
  </android.support.design.widget.TextInputLayout>


  <android.support.design.widget.TextInputLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="left|center"
      android:hint="Bio"
      android:textColorHint="#22000000">

      <EditText
          android:id="@+id/edt_bio"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"></EditText>
  </android.support.design.widget.TextInputLayout>


  <android.support.design.widget.TextInputLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="left|center"
      android:hint="E-mail Address"
      android:textColorHint="#22000000">

      <EditText
          android:id="@+id/edt_Email"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"></EditText>
  </android.support.design.widget.TextInputLayout>


  <android.support.design.widget.TextInputLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="left|center"
      android:hint="Phone number"
      android:textColorHint="#22000000">

      <EditText
          android:id="@+id/edt_phone"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"></EditText>
  </android.support.design.widget.TextInputLayout>

  <Button
      android:id="@+id/btn_submit"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_margin="25dp"
      android:background="@drawable/btneditbg"
      android:text="Submit" />


</LinearLayout>


نمونه کد 4


نمونه کد 2 به لایه 2 اشاره میکند
مثل همیشه به یاد داشته باشید که مطابق نمونه کد ها برای ویوها id تعریف کنید.
حالا نوبت به تعریف ویوها در قسمت کد نویسی میرسه
ابتدا به اکتیویتی مربوط به لایه یعنی Edit_Profile_Activity میریم.
سپس ویوها رو تعریف میکنیم به این شکل:

 

CircleImageView user_profile;
TextView change_image;
EditText name,username,bio,email,phone;
Button submit;


نمونه کد 5


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

 

user_profile=findViewById(R.id.edit_profile_image);
change_image=findViewById(R.id.btn_change_profile);
name=findViewById(R.id.edt_name);
username=findViewById(R.id.edt_username);
bio=findViewById(R.id.edt_bio);
email=findViewById(R.id.edt_Email);
phone=findViewById(R.id.edt_phone);
submit=findViewById(R.id.btn_subm
it);


نمونه کد 6


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

 

public class Edit_Profile_Activity extends AppCompatActivity {
CircleImageView user_profile;
TextView change_image;
EditText name,username,bio,email,phone;
Button submit;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_edit__profile);
      user_profile=findViewById(R.id.edit_profile_image);
      change_image=findViewById(R.id.btn_change_profile);
      name=findViewById(R.id.edt_name);
      username=findViewById(R.id.edt_username);
      bio=findViewById(R.id.edt_bio);
      email=findViewById(R.id.edt_Email);
      phone=findViewById(R.id.edt_phone);
      submit=findViewById(R.id.btn_submit);
  }
}

 

نمونه کد 7

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


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

 

 

 

 

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

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

 

 


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

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

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

0 نظر
هدر سایت
دوره های مقدماتی تا پیشرفته جاوا، اسپرینگ بوت و اسپرینگ سکیورتی
مشاهده سرفصل ها و ثبت نام در دوره Spring Boot جاواپرو  [کلیک کنید]
آموزش پروژه محور اسپرینگ بوت(Spring Boot)-سیستم دانشگاه
ثبت نام در دوره آموزش Spring security
دوره معماری میکروسرویس ها (Microservices) با استفاده از Spring Boot و Spring Cloud
دوره پرتاب | آموزش پیش نیازهای برنامه نویسی
دوره آموزش مبانی زبان برنامه نویسی جاوا
دوره آموزش مفاهیم پیشرفته زبان برنامه نویسی جاوا
مقدمه ای از زبان برنامه نویسی جاوا(java)
آموزش زبان برنامه نویسی جاوا
آموزش گرافیک در زبان برنامه نویسی جاوا
آموزش مدیریت چیدمان گرافیکی در زبان جاوا
آموزش ساخت بازی دوبعدی در زبان جاوا
Collection ها در زبان برنامه نویسی جاوا
آموزش پروژه محور ساخت برنامه مدیریت بانک با JavaFX
نمونه پروژه های رایگان زبان جاوا
آموزش دیتابیس در زبان برنامه نویسی جاوا
نمونه مثال پایه ای زبان برنامه نویسی جاوا
نمونه مثال String در زبان برنامه نویسی جاوا
آموزش جامع برنامه نویسی JavaFX
آموزش ساخت برنامه آزمون تستی در JavaFX
آموزش برنامه نویسی سوکت در جاوا
آموزش ساخت برنامه دفترچه تلفن با JavaFX
آموزش ساخت ربات ساده تلگرام با زبان جاوا
آموزش ساخت برنامه ماشین حساب با JavaFX
آموزش ساخت برنامه ساده مدیریت ایمیل ها با JavaFX
دوره آموزش Spring Boot
سفارش انجام پروژه زبان برنامه نویسی جاوا(JAVA)
سفارش انجام پروژه برنامه نویسی متلب(MATLAB) با قیمت منصفانه و تحویل به موقع
سفارش انجام پروژه زبان برنامه نویسی سی شارپ (#C)
سفارش انجام پروژه زبان برنامه نویسی سی(C)
سفارش انجام پروژه زبان برنامه نویسی پایتون(Python)
سفارش انجام پروژه زبان برنامه نویسی PHP (پی اچ پی)
سفارش انجام پروژه زبان برنامه نویسی اسمبلی(Assembly)
سفارش انجام پروژه زبان برنامه نویسی جاوا اسکریپت (Javascript)
سفارش انجام پروژه هوش مصنوعی
سفارش انجام پروژه طراحی الگوریتم
سفارش انجام پروژه ساختمان داده ها
سفارش انجام پروژه مهندسی نرم افزار
سفارش انجام پروژه شبکه های کامپیوتری
سفارش انجام پروژه پایگاه داده: دیتابیس (database)
 سفارش انجام پروژه سیستم عامل
سفارش انجام پروژه پاورپوینت(PowerPoint)
سفارش انجام پروژه اکسل (Excel)
سفارش انجام تحقیق و تهیه مقاله
سوالات متداول برنامه نویسی
جدیدترین مطالب
گفتگو را شروع کنید
مشاوره ،تدریس خصوصی و سفارش انجام انواع پروژه های برنامه نویسی