ইউআইভিউ ফ্রেম, সীমানা এবং কেন্দ্র


320

আমি এই বৈশিষ্ট্যগুলি কীভাবে সঠিক পদ্ধতিতে ব্যবহার করতে হয় তা জানতে চাই।

যেমনটি আমি বুঝতে পারি, আমি frameযে ভিউটি তৈরি করছি তার ধারক থেকে ব্যবহার করা যেতে পারে। এটি ধারক দৃশ্যের তুলনায় ভিউ অবস্থানটি সেট করে। এটি সেই দৃশ্যের আকারও নির্ধারণ করে।

এছাড়াও centerদৃশ্য আমি তৈরি করছি কন্টেনার থেকে ব্যবহার করা যাবে। এই সম্পত্তিটি তার ধারকটির তুলনায় ভিউয়ের অবস্থান পরিবর্তন করে।

পরিশেষে, boundsদেখুন নিজেই আপেক্ষিক। এটি দেখার জন্য অঙ্কনযোগ্য অঞ্চল পরিবর্তন করে।

আপনি frameএবং এর মধ্যে সম্পর্ক সম্পর্কে আরও তথ্য দিতে পারেন bounds? clipsToBoundsএবং masksToBoundsসম্পত্তি সম্পর্কে কি ?


1
এই আলোচনা ইতিমধ্যে এখানে সমাধান করা হয়েছে। সুতরাং দয়া করে এটি এখানে দেখুন বা ডেভেলপার ডকুমেন্টেশন এখানে প্রদেয় বিকাশকারীকে দেখতে পাবে বিকাশকারী / অ্যাপ্লিকেশন / লাইব্রেরি /
গুলজার

উত্তর:


577

যেহেতু আমি জিজ্ঞাসা করা প্রশ্নটি বহুবার দেখা হয়েছে আমি এর বিস্তারিত উত্তর সরবরাহ করব। আপনি যদি আরও সঠিক সামগ্রী যুক্ত করতে চান তবে এটি নির্দ্বিধায় অনুভব করুন।

প্রথমে প্রশ্নের পুনরুদ্ধার: ফ্রেম, সীমানা এবং কেন্দ্র এবং তাদের সম্পর্ক।

ফ্রেম একটি দর্শন frame( CGRect) superviewএর সমন্বয় সিস্টেমে এর আয়তক্ষেত্রের অবস্থান । ডিফল্টরূপে এটি উপরের বাম দিকে শুরু হয়।

বাউন্ডস একটি দৃশ্যের bounds( CGRect) তার নিজস্ব সমন্বয় ব্যবস্থাতে একটি দর্শন আয়তক্ষেত্রকে প্রকাশ করে।

সেন্টার একটি centerএকটি হয় CGPointপরিপ্রেক্ষিতে প্রকাশ superviewএর তুল্য সিস্টেম এবং এটি দেখতে সঠিক কেন্দ্রবিন্দু অবস্থান নির্ধারণ করে।

পূর্ববর্তী বৈশিষ্ট্যগুলির মধ্যে ইউআইভিউ + অবস্থান থেকে নেওয়া এই সম্পর্কগুলি (তারা কোডে কাজ করে না কারণ তারা অনানুষ্ঠানিক সমীকরণ):

  • frame.origin = center - (bounds.size / 2.0)

  • center = frame.origin + (bounds.size / 2.0)

  • frame.size = bounds.size

দ্রষ্টব্য: দর্শনগুলি ঘোরানো হলে এই সম্পর্কগুলি প্রযোজ্য নয়। আরও তথ্যের জন্য, আমি আপনাকে স্ট্যানফোর্ড সিএস 193 পি কোর্সের উপর ভিত্তি করে দ্য কিচেন ড্রয়ার থেকে নেওয়া নিম্নলিখিত চিত্রটি একবার দেখে নেওয়ার পরামর্শ দেব । ক্রেডিটগুলি @ রবার্বে যায় ।

ফ্রেম, সীমানা এবং কেন্দ্র

অনুমতিগুলি ব্যবহার করে frameআপনি এর মধ্যে একটি ভিউজকে পুনঃস্থাপন করতে এবং / অথবা এর আকার পরিবর্তন করতে পারবেন superview। সাধারণত একটি থেকে ব্যবহার করা যেতে পারে superview, উদাহরণস্বরূপ, আপনি যখন একটি নির্দিষ্ট সাবভিউ তৈরি করেন। উদাহরণ স্বরূপ:

// view1 will be positioned at x = 30, y = 20 starting the top left corner of [self view]
// [self view] could be the view managed by a UIViewController
UIView* view1 = [[UIView alloc] initWithFrame:CGRectMake(30.0f, 20.0f, 400.0f, 400.0f)];    
view1.backgroundColor = [UIColor redColor];

[[self view] addSubview:view1];

viewআপনার সাধারণত যখন উল্লেখ করা হয় তার ভিতরে আঁকতে স্থানাঙ্কগুলির প্রয়োজন হয় boundsviewপ্রথম উদাহরণটি ইনসেট হিসাবে কোনও সাবউভিউয়ের মধ্যে অঙ্কন করা একটি সাধারণ উদাহরণ হতে পারে । সাবভিউ আঁকার জন্য সুপারভিউয়ের বিষয়টি জানতে হবে bounds। উদাহরণ স্বরূপ:

UIView* view1 = [[UIView alloc] initWithFrame:CGRectMake(50.0f, 50.0f, 400.0f, 400.0f)];    
view1.backgroundColor = [UIColor redColor];

UIView* view2 = [[UIView alloc] initWithFrame:CGRectInset(view1.bounds, 20.0f, 20.0f)];    
view2.backgroundColor = [UIColor yellowColor];

[view1 addSubview:view2];

যখন আপনি boundsকোনও দৃশ্যের পরিবর্তন করেন তখন বিভিন্ন আচরণ হয় । উদাহরণস্বরূপ, আপনি যদি পরিবর্তন করেন bounds sizeতবে frameপরিবর্তনগুলি (এবং বিপরীতে)। পরিবর্তনটি দৃশ্যটির চারপাশে ঘটে center। নীচের কোডটি ব্যবহার করুন এবং দেখুন কী ঘটে:

NSLog(@"Old Frame %@", NSStringFromCGRect(view2.frame));
NSLog(@"Old Center %@", NSStringFromCGPoint(view2.center));    

CGRect frame = view2.bounds;
frame.size.height += 20.0f;
frame.size.width += 20.0f;
view2.bounds = frame;

NSLog(@"New Frame %@", NSStringFromCGRect(view2.frame));
NSLog(@"New Center %@", NSStringFromCGPoint(view2.center));

তদ্ব্যতীত, আপনি bounds originযদি পরিবর্তন করেন তবে originএর অভ্যন্তরীণ সমন্বয় ব্যবস্থাটি পরিবর্তন করুন change ডিফল্টরূপে originহয় (0.0, 0.0)(উপরের কোনায় বাম)। উদাহরণস্বরূপ, আপনি যদি এর originজন্য পরিবর্তন করেন তবে view1দেখতে পাচ্ছেন (আপনি চাইলে আগের কোডটি মন্তব্য করুন) যে এখনের জন্য উপরের বাম কোণটি view2স্পর্শ করে view1। প্রেরণা বেশ সহজ। আপনি বলতে view1যে তার উপরের বাঁদিকের কোণায় এখন অবস্থানে রয়েছে (20.0, 20.0)কিন্তু যেহেতু view2এর frame originথেকে শুরু (20.0, 20.0), তারা কাকতালীয়ভাবে হবে।

CGRect frame = view1.bounds;
frame.origin.x += 20.0f;
frame.origin.y += 20.0f;
view1.bounds = frame; 

originপ্রতিনিধিত্ব করে viewতার মধ্যে এর অবস্থান superviewকিন্তু অবস্থান বর্ণনা boundsসেন্টার।

অবশেষে, boundsএবং originসম্পর্কিত ধারণা নয়। উভয়ই frameএকটি দর্শন (পূর্ববর্তী সমীকরণগুলি দেখুন) প্রাপ্ত করার অনুমতি দেয় ।

ভিউ 1 এর কেস স্টাডি

নিম্নলিখিত স্নিপেট ব্যবহার করার পরে যা ঘটে তা এখানে।

UIView* view1 = [[UIView alloc] initWithFrame:CGRectMake(30.0f, 20.0f, 400.0f, 400.0f)];
view1.backgroundColor = [UIColor redColor];

[[self view] addSubview:view1];

NSLog(@"view1's frame is: %@", NSStringFromCGRect([view1 frame]));
NSLog(@"view1's bounds is: %@", NSStringFromCGRect([view1 bounds]));
NSLog(@"view1's center is: %@", NSStringFromCGPoint([view1 center]));

আপেক্ষিক চিত্র।

এখানে চিত্র বর্ণনা লিখুন

এর পরিবর্তে যদি আমি [self view]নীচের মতো সীমা পরিবর্তন করি তবে কি হয় ।

// previous code here...
CGRect rect = [[self view] bounds];
rect.origin.x += 30.0f;
rect.origin.y += 20.0f;
[[self view] setBounds:rect];

আপেক্ষিক চিত্র।

এখানে চিত্র বর্ণনা লিখুন

এখানে আপনি বলছেন [self view]যে এর শীর্ষ বাম কোণটি এখন অবস্থানে রয়েছে (30.0, 20.0) তবে যেহেতু view1ফ্রেমের উত্সটি (30.0, 20.0) থেকে শুরু হয়, তারা মিলবে।

অতিরিক্ত রেফারেন্স (আপনি চাইলে অন্যান্য রেফারেন্সের সাথে আপডেট করতে)

সম্পর্কে clipsToBounds(উত্স অ্যাপল ডক)

YES এ এই মানটি সেট করার ফলে সাবভিউগুলি রিসিভারের সীমানায় ক্লিপ হয়ে যায়। যদি NO তে সেট করা থাকে তবে সাবভিউগুলি যার ফ্রেমগুলি রিসিভারের দৃশ্যমান সীমার বাইরে প্রসারিত হবে না তা ছাঁটা হয় না। ডিফল্ট মান নেই.

অন্য কথায়, যদি কোনও দৃশ্যের frameহয় (0, 0, 100, 100)এবং এর সংক্ষিপ্তসার হয় (90, 90, 30, 30), আপনি সেই সংক্ষিপ্তসারটির কেবলমাত্র একটি অংশ দেখতে পাবেন। দ্বিতীয়টি পিতামাতার দৃশ্যের সীমা অতিক্রম করবে না।

masksToBoundsসমতূল্য clipsToBounds। পরিবর্তে একটি UIView, এই সম্পত্তি একটি প্রয়োগ করা হয় CALayer। ফণা নীচে, clipsToBoundsকল masksToBounds। আরও রেফারেন্সের জন্য ইউআইভিউ-র ক্লিপস টোবাউন্ডস এবং ক্যালিয়ারের মাস্কস টোবাউন্ডসের মধ্যে কীভাবে সম্পর্ক রয়েছে তা একবার দেখুন ।


@ রবার্ব আপনি পুরোপুরি ঠিক বলেছেন আমি আমার উত্তরে এটি উল্লেখ করব। ধন্যবাদ।
লরেঞ্জো বি

আমি জানি না আমি উত্তর পেয়েছি কিনা তবে সীমানা উত্স পরিবর্তিত হলে কেন সাবউভিউটি নেতিবাচক দিকে চলে যায়। ঠিক মনে হয় না যে আমার মাথাটা খানিকটা কাছে গেছে। ধন্যবাদ !!
নিমগ্রাগ

@ নিমগ্রাগ দেখে মনে হচ্ছে যে ভিউটি নেতিবাচক দিকে চলেছে তবে তা নয়। তদারকির অভ্যন্তরীণ স্থানাঙ্কগুলি পরিবর্তন করা হয়েছে।
লোরেঞ্জো বি

আমার জ্যামিতিক ক্ষমতা ক্ষমা করুন, যদি তত্ত্বাবধানের অভ্যন্তরীণ স্থানাঙ্কগুলি উত্সে পরিবর্তিত হয় (30.0, 20.0), বিন্দুটি (0,0) নীল বর্গাকার ভিতরে বা এর বাইরে থাকে? আমি কেবল পরিবর্তনগুলি নিখুঁত করে তা উপলব্ধি করার চেষ্টা করছি। উত্তর দেওয়ার জন্য সময় দেওয়ার জন্য ধন্যবাদ।
নিমগ্রেগ

@ ফ্লেক্সাডিক্টিক্টড: হাই, আপনি যে স্লাইডটি যুক্ত করেছেন সেগুলি বলে: "বি এর মাঝের নিজস্ব স্থানাঙ্কস্থ স্থানে দেখুন: সীমানা.সাইজ.উইথথ / ২ + অরিজিন.এক্স" - কেন এই ঘটনা? যেহেতু শিরোনামটি তার নিজস্ব স্থানাঙ্কের জায়গায় বলছে , আমি এটি বলব: সীমানা.সাইজ.উইথথ / 2 + বাউন্ডস.রিগিন.এক্স ?? তাই না ??

134

এই প্রশ্নের ইতিমধ্যে একটি ভাল উত্তর আছে, তবে আমি এটি আরও কয়েকটি ছবি দিয়ে পরিপূরক করতে চাই। আমার পুরো উত্তর এখানে।

সাহায্যের আমাকে স্মরণ করার জন্য ফ্রেম , আমি মনে একটি দেয়ালে একটি ছবি ফ্রেম । ছবি যেমন দেয়ালের যে কোনও জায়গায় সরিয়ে নেওয়া যায়, তেমনি একটি দৃশ্যের ফ্রেমের সমন্বয় ব্যবস্থা হ'ল সুপারভাইউ। (প্রাচীর = তত্ত্বাবধান, ফ্রেম = দেখুন)

আমাকে সীমা মনে রাখতে সাহায্য করার জন্য , আমি বাস্কেটবল কোর্টের সীমানা সম্পর্কে চিন্তা করি । বাস্কেটবলটি আদালতের কোথাও কোথাও ঠিক যেমন ভিউয়ের সীমাবদ্ধতার সমন্বয় ব্যবস্থাটি ভিউয়ের মধ্যে থাকে। (আদালত = দেখুন, বাস্কেটবল / প্লেয়ার = ভিউয়ের মধ্যে সামগ্রী)

ফ্রেমের মতো, ভিউ.সেন্টারও তদারকির স্থানাঙ্কে রয়েছে।

ফ্রেম বনাম বাউন্ডস - উদাহরণ 1

হলুদ আয়তক্ষেত্রটি দেখার ফ্রেমের প্রতিনিধিত্ব করে। সবুজ আয়তক্ষেত্রটি দেখার সীমাটি উপস্থাপন করে। উভয় চিত্রের লাল বিন্দু ফ্রেম বা তাদের স্থানাঙ্ক সিস্টেমের মধ্যে সীমানার উত্সকে উপস্থাপন করে।

Frame
    origin = (0, 0)
    width = 80
    height = 130

Bounds 
    origin = (0, 0)
    width = 80
    height = 130

এখানে চিত্র বর্ণনা লিখুন


উদাহরণ 2

Frame
    origin = (40, 60)  // That is, x=40 and y=60
    width = 80
    height = 130

Bounds 
    origin = (0, 0)
    width = 80
    height = 130

এখানে চিত্র বর্ণনা লিখুন


উদাহরণ 3

Frame
    origin = (20, 52)  // These are just rough estimates.
    width = 118
    height = 187

Bounds 
    origin = (0, 0)
    width = 80
    height = 130

এখানে চিত্র বর্ণনা লিখুন


উদাহরণ 4

এটি উদাহরণস্বরূপ 2 এর সমান, এই সময়ের ব্যতীত সম্পূর্ণ দৃশ্যরূপটি দেখানো হবে যেমন দেখে মনে হয় এটি দেখার সীমানায় না কাটলে।

Frame
    origin = (40, 60)
    width = 80
    height = 130

Bounds 
    origin = (0, 0)
    width = 80
    height = 130

এখানে চিত্র বর্ণনা লিখুন


উদাহরণ 5

Frame
    origin = (40, 60)
    width = 80
    height = 130

Bounds 
    origin = (280, 70)
    width = 80
    height = 130

এখানে চিত্র বর্ণনা লিখুন

আবার, আরও বিশদ সহ আমার উত্তরের জন্য এখানে দেখুন।


2
ধন্যবাদ সুরগাচ। এটি ফ্রেম এবং আবদ্ধ পার্থক্যের সত্যই খুব স্পষ্ট চিত্র। আমি আপনার প্রচেষ্টার সত্যই প্রশংসা করি
মোহাম্মদ হায়দার

আমি সমস্ত সংক্ষিপ্ত এবং সংক্ষিপ্ত উত্তরে যা দেখতে চাইছি তা। ধন্যবাদ!
ম্যাট চুয়াং

অসাধারণ! উদাহরণস্বরূপ 3: আমি এটি পাই না। আপনি কেবলমাত্র আপনার ফ্রেমের উত্সকে কিছুটা সরিয়ে নিয়েছেন, কীভাবে এটি আপনার চিত্রের আবর্তন পরিবর্তন করে?
মধু

@ আসমা 22, উদাহরণস্বরূপ 3 আমি কেবল এটি দেখানোর চেষ্টা করছিলাম যে আপনি যখন কোনও চিত্র ঘোরান তখন ফ্রেম পরিবর্তিত হয় তবে সীমানা পরিবর্তন হয় না। আমার পূর্ণ উত্তর দেখুন
সুরগাচ

89

আমি এই চিত্রটি ফ্রেম, সীমানা ইত্যাদি বোঝার জন্য সবচেয়ে সহায়ক বলে মনে করেছি

এখানে চিত্র বর্ণনা লিখুন

এছাড়াও দয়া করে নোট করুন frame.size != bounds.sizeযখন চিত্রটি ঘোরানো হয়।


14
হাজার শব্দের মূল্যবান একটি ছবি।
নরেন্দ্র কাম্ম

3
সর্বোত্তম সম্ভাব্য ব্যাখ্যা
রতিকান্ত পাত্র

@ এরবেন মো: হাই, আপনি যে স্লাইডটি যুক্ত করেছেন তাতে বলেছেন: "দেখুন বি এর মাঝামাঝি নিজস্ব স্থানাঙ্কিক স্থানে: সীমানা.সাইজ.উইথথ / ২ + অরিজিন.এক্স" - কেন এটি হয়? যেহেতু শিরোনামটি তার নিজস্ব স্থানাঙ্কের জায়গায় বলছে , আমি এটি বলব: সীমানা.সাইজ.উইথথ / 2 + বাউন্ডস.রিগিন.এক্স ?? তাই না ??

1
এই চিত্রটির উত্স কী? লিঙ্ক করবেন?
ডেভিড

1
@ ডেভিড এটি আইটিউনসইউতে স্ট্যানফোর্ডের সিএস 193 পি কোর্স থেকে পাওয়া গেছে: www.stanford.edu/class/cs193p/cgi-bin/drupal/downloads-2013- ফল
প্রিনোল্ডস

3

আমি মনে করি আপনি যদি এটি থেকে বিবেচনা করেন তবে CALayerসবকিছু আরও পরিষ্কার।

ফ্রেম দৃশ্য বা স্তরের মোটেও পৃথক সম্পত্তি নয়, এটি একটি ভার্চুয়াল সম্পত্তি, সীমানা, অবস্থান ( UIViewকেন্দ্রের) এবং গুণান্তর থেকে গণনা করা ।

সুতরাং মূলত স্তর / দৃশ্যের বিন্যাসগুলি কীভাবে এই তিনটি সম্পত্তি (এবং অ্যাঙ্করপয়েন্ট) দ্বারা স্থির হয় এবং এই তিনটি সংস্থার মধ্যে অন্য কোনও সম্পত্তি পরিবর্তিত হবে না, যেমন রূপান্তর পরিবর্তন সীমা পরিবর্তন করে না।


2

এই পোস্টে বিস্তারিত ব্যাখ্যা সহ খুব ভাল উত্তর আছে। আমি কেবল উল্লেখ করতে চাই যে ডাব্লুডাব্লুডিসি ২০১১ সালে ফ্রেম, বাউন্ডস, সেন্টার, ট্রান্সফর্ম, বাউন্ডসিন এর ভিডিওটির অর্থের জন্য ভিজ্যুয়াল উপস্থাপনার সাথে আরও একটি ব্যাখ্যা রয়েছে যা ভিডিও ইউআইকিট রেন্ডারিং @ 4: 22 থেকে শুরু হয়ে 20:10 অবধি শুরু হবে


0

উপরের উত্তরগুলি পড়ার পরে, এখানে আমার ব্যাখ্যাগুলি যুক্ত করুন।

ধরুন অনলাইন ব্রাউজিং, ওয়েব ব্রাউজার আপনার frameযা সিদ্ধান্ত নেয় কোথায় এবং কিভাবে বড় ওয়েবপেজ দেখানোর জন্য। ব্রাউজারের স্ক্রোলারটি হ'ল bounds.originওয়েবপৃষ্ঠার কোন অংশটি প্রদর্শিত হবে তা স্থির করে। bounds.originবোঝা শক্ত। শেখার সর্বোত্তম উপায় হ'ল সিঙ্গল ভিউ অ্যাপ্লিকেশন তৈরি করা, এই প্যারামিটারগুলিকে সংশোধন করার চেষ্টা করা হয়েছে এবং দেখুন কীভাবে সাবভিউগুলি পরিবর্তন হয়।

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(100.0f, 200.0f, 200.0f, 400.0f)];
[view1 setBackgroundColor:[UIColor redColor]];

UIView *view2 = [[UIView alloc] initWithFrame:CGRectInset(view1.bounds, 20.0f, 20.0f)];
[view2 setBackgroundColor:[UIColor yellowColor]];
[view1 addSubview:view2];

[[self view] addSubview:view1];

NSLog(@"Old view1 frame %@, bounds %@, center %@", NSStringFromCGRect(view1.frame), NSStringFromCGRect(view1.bounds), NSStringFromCGPoint(view1.center));
NSLog(@"Old view2 frame %@, bounds %@, center %@", NSStringFromCGRect(view2.frame), NSStringFromCGRect(view2.bounds), NSStringFromCGPoint(view2.center));

// Modify this part.
CGRect bounds = view1.bounds;
bounds.origin.x += 10.0f;
bounds.origin.y += 10.0f;

// incase you need width, height
//bounds.size.height += 20.0f;
//bounds.size.width += 20.0f;

view1.bounds = bounds;

NSLog(@"New view1 frame %@, bounds %@, center %@", NSStringFromCGRect(view1.frame), NSStringFromCGRect(view1.bounds), NSStringFromCGPoint(view1.center));
NSLog(@"New view2 frame %@, bounds %@, center %@", NSStringFromCGRect(view2.frame), NSStringFromCGRect(view2.bounds), NSStringFromCGPoint(view2.center));
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.