نحوهی کار با فریم لیوت (FrameLayout)
فیلم آشنایی با نحوهی کار با فریم لیوت (FrameLayout)
متن به همراه عکس آشنایی با نحوهی کار با فریم لیوت (FrameLayout)
در این مقاله به چگونگی فریم لیوت (FrameLayout) ونحوهی استفاده از آن میپردازیم.
FrameLayout (فریم لیوت) چیست؟
FrameLayout نوعی لایه است که به ما اجازه میدهد چند لایه یا ویو را روی هم قرار دهیم. در واقع دو کاربرد دارد:
1. چند ویو یا لایه را روی هم قرار دهیم.
2. از ویوهای زنده استفاده کنیم. ویوهای زنده مثل: کار با دوربین (وقتی که میخواهیم دوربین کاربر را داخل اپلیکیشن باز کنیم) و استفاده از بوم نقاشی (بومی بسازیم که کاربر بتواند بکشد یا طراحی انجام دهد)
البته برای استفاده از این موارد میتوانیم از لایههای دیگر مثل کانسترینت لیوت، رلیتیو لیوت، لینیر لیوت نیز استفاده کنیم. اما ویژگی خوب فریم لیوت این است که سبکتر و کار کردن با آن آسانتر است.
استفاده از FrameLayout:
ابتدا وارد قسمت گرافیکی پروژه میشویم و مسیر زیر را طی میکنیم:
app>res>layout>activity_main.xml
وقتی پروژهای میسازیم، به صورت پیش فرض یک تکست ویو وجود دارد که آن را پاک میکنیم.
مشاهده میکنیم که لایهی اصلی ما کانسترینت لیوت است. میتوانیم آن را به FrameLayout تغییر دهیم و یا یک لایهی FrameLayout روی آن قرار دهیم (بهتر است از روش دوم استفاده نکنیم)
برای تغییر کانسترینت لیوت به FrameLayout از دو روش میتوانیم استفاده کنیم:
1. وارد قسمت text میشویم، کدنویسی مربوط به کانسترینت لیوت در خط دوم را پاک میکنیم و کد مربوط به FrameLayout را اضافه میکنیم.
2. در همان قسمت گرافیکی روی کانسترینت لیوت کلیک راست میکنیم. گزینهی convert view را انتخاب میکنیم. پنجرهی کوچکی برایمان باز میشود. در اینجا میتوانیم با انتخاب گزینهی FrameLayout نوع لایه را تغییر دهیم.
استفاده از چند ویو در فریم لیوت (FrameLayout):
حال میخواهیم یک ایمیج ویو و چند تکست ویو به FrameLayout اضافه کنیم. قبل از این کار ابتدا از طریق دراوبل یک عکس به لایه اضافه میکنیم.
1. عکس موردنظرمان را انتخاب و کپی میکنیم، روی پوشهی دراوبل (Drawable) پِیست میکنیم. سپس صفحهای برایمان باز میشود.
2. پوشهی …app/scr/main/res/Derawable را انتخاب میکنیم و گزینهی ok را میزنیم.
3. صفحهی دیگری باز میشود که میتوانیم اسم عکس را تغییر دهیم.
اضافه کردن ایمیج ویو به فریم لیوت (FrameLayout):
1. روی ایمیج ویو کلیک و آن را روی لایه میکشیم و اضافه میکنیم.
2. صفحهای برایمان باز میشود، عکس مدنظرمان را انتخاب و اضافه میکنیم.
3. طول و عرض عکس را روی match_parent قرار میدهیم.
4. سپس در سمت راست در قسمت search گزینهی scale type را پیدا میکنیم و گزینهی center crop را انتخاب میکنیم تا عکس به صورت زیر تمام صفحه شود.
اضافه کردن تکست ویو به FrameLayout:
حال میخواهیم ویوهای دیگر را به FrameLayout اضافه کنیم.
1. روی تکست ویو کلیک کرده و آن را روی لایه میکشیم تا اضافه شود.
2. میخواهیم تکست ویو را در وسط قرار دهیم. برای این کار در سمت راست صفحه در قسمت search، gravity را جست و جو میکنیم.
3. در بخش layout gravity گزینهی center horizontal را تیک میزنیم. مشاهده میکنیم که تکست ویو در قسمت بالای لایه FrameLayout در وسط قرار گرفته است.
4. در بخش Declered Attributtes در قسمت text میتوانیم متن مدنظرمان را اضافه کنیم. مثلا مینویسیم: “این یک خورشید است”.
5. یک تکست ویوی دیگر به FrameLayout اضافه میکنیم. به صورت پیش فرض در بالا سمت چپ لایه قرار میگیرد.
6. این بار در قسمت layout gravity گزینههای button و center horizontal را تیک میزنیم که مشاهده میکنیم که تکست ویو در پایین و وسط لایه قرار میگیرد.
7. در همان بخش Declered Attributtes در قسمت text میتوانیم متن مدنظرمان را اضافه کنیم. مثلا “این یک دریا است”.
8. میتوانیم رنگ متنمان را نیز تغییر دهیم. برای اینکار در قسمت search گزینهی text color را پیدا میکنیم، روی آن کلیک میکنیم و رنگ موردنظرمان را انتخاب میکنیم.
9. میتوانیم ویژگیهای دیگری نیز به تکست ویو اضافه کنیم. مثلا در سمت راست در قسمت layout_gravity روی پرچمی که مشاهده میکنیم کلیک میکنیم. صفحهی کوچکی باز میشود گزینههای center_horizontal و center_vertical را تیک میزنیم تا تکست ویو در وسط لایهی FrameLayout قرار بگیرد.
ویژگی FrameLayout این است که ما میتوانیم در داخل یک عکس، ویژگیهای مختلفی را قرار دهیم. در واقع میتوانیم ویوهای مختلف را در هر قسمتی که میخواهیم قرار دهیم. البته در لایههای کانسترینت لیوت، رلیتیو لیوت و لینیر لیوت نیز میتوانیم این کار را انجام دهیم.
کار با ویوهای زنده:
فرض کنید به جای ایمیج ویو و تکست ویوها، از ویدئو ویو استفاده کنیم. معمولا برای استفاده از ویدئو ویو از FrameLayout استفاده میکنند. برای آشنایی با این قسمت، حتما بخوانید زیر را مطالعه بفرمایید.
کدهای کامل لایه:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<?xml version="1.0" encoding="utf-8?”> <FrameLayout 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" tools:context=".MainActivity<" <ImageView android:id="@+id/imageView" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" app:srcCompat="@drawable/images" /> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text"این یک خورشید است"=/> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center|center_horizontal" android:text="این یک دریا است" android:textColor="#FFFFFF"/> </FrameLayout> |
کدهای قسمت جاوا:
1 2 3 4 5 6 7 8 9 10 11 |
package com.kazemieh.www.framelayout; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } } |
دانلود فایل
دانلود فایل
مطالب زیر را حتما بخوانید
-
نحوهی کار با ویدئوپلیر (Video Player) از طریق پوشهی raw
7.42k بازدید
-
آلرت دیالوگ (AlertDialog) چیست و نحوهی کار با آن چگونه است؟
7.02k بازدید
-
اسنکبار (Snackbar) در اندروید
4.56k بازدید
-
ّFloating action Button (فلوتینگ اکشن باتن) در اندروید
4.39k بازدید
-
یک روش برای تمرکز در برنامهنویسی
3.27k بازدید
-
رادیو باتن (RadioButton) در اندروید
1.94k بازدید
دیدگاهتان را بنویسید