ساخت یک Image در سوئیفت یو آی
در این جلسه میخوایم با عکس ها و نحوه قرار دادنشون در برنامه آشنا بشویم، اما قبل از لازم است تعدادی عکس رو وارد پوشه Xasset کنید.
ایجاد یک Image در SwiftUi
برای ایجاد عکس براحتی میتوانید از دستور Image استفاده کنید و درون آن نام عکس را قرار دهید.(نام عکس ها را میتوانید از پوشه Xasset ببینید.)
import
SwiftUi
struct
ContentView:
View
{
var
body:
some
View
{
Image("apple")
}
}
struct
ContentView_Previews:
PreviewProvider
{
static
var
previews:
some
View
{
ContentView()
}
}
به همین راحتی میشود یک عکس را ایجاد کرد! حالا بریم سراغ با ویژگی های بیشتری ازش آشنا بشویم
تغییر سایز Image در SwiftUi
اگر چند عکس را تست کرده باشید متوجه میشوید که فضایی که عکس اشغال میکند بر حسب رزولوشن عکس میباشد، و اگر عکس شما خیلی بزرگ باشد فقط بخشی از نشان داده میشود.
برای این که بتوانیم عکس را اندازه صفحه نمایش کنیم میتوانیم ازresizable استفاده کنیم.
Image("apple")
.resizable()
خب حالا میخواهیم عکس را طوری قرار دهیم که حداکثر عرض یا ارتفاع صفحه نمایش(هر کدوم زودتر کله صفحه رو میگیره) بگیره ولی نسبت طول و عرض عوض نشد.
برای این کار میتوانیم از scaledToFit استفاده کنیم. اما دقت کنید که قابلیت resize شدن عکس رو هم باید با دستور قبلی یعنی resizable بهش بدهیم.
Image("apple")
.resizable()
.scaledToFit()
حالا میخواهیم عکس کل صفحه نمایش را بگیرد ولی عکس تغییر نسبت ندهد، بلکه در صورت نیاز بخشی از آن برش بخورد.
برا این کار میتوانیم از aspectRatio استفاده کنیم.
Image("apple")
.resizable()
.aspectRatio(contentMode:
.fill)
برای مشخص کردن دقیق ابعاد عکس هم میتوانید از frame استفاده کنید.
Image("apple")
.resizable()
.frame(width:
200,
height:
250)
دایره کردن Image در SwiftUi
ممکنه نیاز داشته باشید که عکستون برش بخوره و بصورت دایره در بیاد (مثلا برای گذاشتن عکس پروفایل) در اینصورت میتوانید از clipShape استفاده کنید.
Image("apple")
.clipShape(Circle())
123456
fdsfsd