menusearch
javapro.ir

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

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

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

 

سلام و درود خدمت شما دوستان عزیز و همراهان همیشگی سایت جاوا پرو
طبق قرارمون در این جلسه قصد داریم قسمت های باقیمانده از طراحی UI یعنی صفحه پست جدید و صفحه سرچ رو با هم دیگه تکمیل کنیم.
ابتدا میریم و صفحه پست جدید رو طراحی میکنیم.
مثل سابق من طرح کلی که خیلیم ساده هست رو میذارم و بعد با هم دیگه تکمیل می‌کنیم این طرح رو.


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

همونوطور که در تصویر 1 میبینید لایه ما خیلی خیلی ساده هست و کار خاصی برای طراحی لازم نیست انجام بدیم.
خب برای شروع طراحی ابتدا باید activity مربوط به لایه مون رو بسازیم
یک اکتیویتی از نوع Empty Activity به نام AddPost همراه با لایه متصلش میسازیم.
به لایه ای که ساخته شد میریم و روت کلی اون رو به این شکل تغییر میدیم:

 

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

</LinearLayout>


نمونه کد 1


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

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marg into p="12dp"
  android:orientation="horizontal"
  android:gravity="right">
  <EditText
      android:id="@+id/caption"
      android:layout_width="0dp"
      android:layout_weight="1"
      android:layout_height="match_parent"
      android:textColor="#000000"
      android:hint="Write a caption..."
      android:textColorHint="#66000000"
      ></EditText>
  <ImageView
      android:id="@+id/postimage"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@mipmap/userimage"
      ></ImageView>
</LinearLayout>


نمونه کد 2


این نکته رو به یاد داشتید باشید که برای هر دو کامپوننت یعنی Imageview و Edittext یک id تعریف کنید تا در قسمت کد نویسی بتوانیم از‌ آنها استفاده کنیم.
کد کلی لایه xml نیز به این صورت است:
طراحی لایه 1 تموم شد به همین سادگی
و الان لایه 2 رو طراحی میکنیم
ما برای لایه 2 نیازی به یک لایه مجزا نداریم و هر دو کامپوننت رو در لایه اصلی میذاریم به این شکل:

 

<EditText
      android:id="@+id/location"
      android:layout_marg into p="12dp"
      android:padding="8dp"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:hint="Add a location..."
      android:textColorHint="#66000000"
      ></EditText>

<Button
  android:id="@+id/btn_sharepost"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="share"
  android:textColor="#ffffff"
  android:background="@color/Blue"
  android:layout_marg into p="15dp"
  ></Button>


نمونه کد 3


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

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

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marg into p="12dp"
  android:orientation="horizontal"
  android:gravity="right">

  <EditText
      android:id="@+id/caption"
      android:layout_width="0dp"
      android:layout_weight="1"
      android:layout_height="match_parent"
      android:textColor="#000000"
      android:hint="Write a caption..."
      android:textColorHint="#66000000"
      ></EditText>
  <ImageView
      android:id="@+id/postimage"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@mipmap/userimage"
      ></ImageView>

</LinearLayout>


      <EditText
          android:id="@+id/location"
          android:layout_marg into p="12dp"
          android:padding="8dp"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:hint="Add a location..."
          android:textColorHint="#66000000"
          ></EditText>

  <Button
      android:id="@+id/btn_sharepost"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="share"
      android:textColor="#ffffff"
      android:background="@color/Blue"
      android:layout_marg into p="15dp"
      ></Button>

</LinearLayout>


نمونه کد 4


طراحی لایهxml اضافه کردن پست به این شکل اتمام رسید
حالا میریم در سمت کد نویسی هم کامپوننت ها رو تعریف میکنیم.
ابتدا میریم توی اکتیویتی مربوط به لایه مون و کامپوننت ها رو تعریف میکنیم به این شکل:

EditText caption,location;
Button share;
ImageView userimage;


نمونه کد 5


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

caption=findViewById(R.id.caption);
location=findViewById(R.id.location);
share=findViewById(R.id.btn_sharepost);
userimage=findViewById(R.id.postimage);


نمونه کد 6


کد کلی اکتیویتی تا به این لحظه هم به صورت زیر است:

public class AddPost extends AppCompatActivity {
EditText caption,location;
Button share;
ImageView userimage;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_add_post);
      caption=findViewById(R.id.caption);
      location=findViewById(R.id.location);
      share=findViewById(R.id.btn_sharepost);
      userimage=findViewById(R.id.postimage);
  }
}


نمونه کد 7


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

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

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

<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>


نمونه کد 8


مثل بقیه فرگمنت هامون روت کلی صفحه FrameLayout هست و لایه 1 و 2 درون اون قرار میگیرن به ای شکل:

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

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

      <EditText
          android:id="@+id/edt_search"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_margin="10dp"
          android:background="@drawable/search_bgbtn"
          android:drawableEnd="@drawable/ic_search_black_24dp"
          android:hint="Search..."
          android:textColor="#000000"
          android:textColorHint="#77000000"
          android:padding="15dp"></EditText>

  </LinearLayout>

  <Button
      android:id="@+id/btnsearch"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@color/Blue"
      android:layout_margin="20dp"
      android:text="search"></Button>

</LinearLayout>


نمونه کد 9


برای هر دو کامپوننت یعنی EditText مربوط به سرچ و Button سرچ id تعیین میکنیم و میریم توی فرگمنت سرچ و در قسمت کدنویسی هم اونها رو تعریف میکنیم.

EditText edt_search;
Button search;


نمونه کد 10


ابتدا به این شکل مشابه نمونه کد 10 ویوها رو تعریف میکنیم.
و سپس در متد onCreateView ویوها رو تعریف میکنیم:

edt_search = view.findViewById(R.id.edt_search);
search = view.findViewById(R
.id.btnsearch);


نمونه کد 11


کد کلی فرگمنت سرچ تا اینجای کار به این شکل هست:

public class SearchFragment extends Fragment {

  EditText edt_search;
  Button search;

  public SearchFragment() {

  }

  public static SearchFragment newInstance() {
      SearchFragment fragment = new SearchFragment();
      return fragment;
  }

  @Override
  public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);

  }

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
                            Bundle savedInstanceState) {
      View view = inflater.inflate(R.layout.fragment_search, container, false);
      edt_search = view.findViewById(R.id.edt_search);
      search = view.findViewById(R.id.btnsearch);
      return view;
  }

}


نمونه کد 12


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


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

 

 

 

 

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

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

 

 


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

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

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

1 نظر
علی بیرانوند
دوشنبه پنجم اسفند ۹۸
پاسخ
()
()
علی بیرانوند
ممنون بابت آموزش خوبتون
پاسخ مدیر سایت
سلام.ممنون از نظر لطفت علی جان :)
پاسخ مدیر سایت
هدر سایت
مشاهده سرفصل ها و ثبت نام در دوره 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)
سفارش انجام تحقیق و تهیه مقاله
سوالات متداول برنامه نویسی
جدیدترین مطالب
گفتگو را شروع کنید
مشاوره ،تدریس خصوصی و سفارش انجام انواع پروژه های برنامه نویسی