Jump to content
Sign in to follow this  
samuraisxmali

მარტივი ანდროიდ აპლიკაცია - ნაწილი 2

Recommended Posts

პირველი ნაწილი

 

მარტივი ანდროიდ აპლიკაცია - ნაწილი 2

 

ვიზუალი

 

გადავიდეთ ვიზუალური მხარის რედაქტირებაზე. პირველ რიგი უნდა ვიცოდეთ, რომ კომპონენტები ერთმანეთთან და ლეიაუთებთან მიმართებაში ლაგდებიან, ამიტომ კომპონენტების სქრინზე დაგდებისას ყურადღება მიაქციეთ ჩემს ინსტრუქციებს, რომ შემდეგ არეული არ გამოგივიდეთ.

ჩვენ დაგვჭირდება 2 TextView და 1 Button.

 

პირველ რიგში მოკიდეთ ხელი TextView-ს, გადაიტანეთ ეკრანზე და ჯერ ხელი არ გაუშვათ. ის უნდა დააგდოთ ზედა მარცხენა კუთხეში. როდესაც საჭირო ადგილზე მიიტანთ ამ კომპონენტს, გაჩნდება ორი მწვანე სქელი ხაზი - ზევით და მარცხნივ. ახლა შეგიძლიათ გაუშვათ ხელი.

 

 

1.      შევცვალოთ ტექსტი. ამისთვის თვისებების ფანჯარაში მოძებნეთ text თვისება და ჩაწერეთ: „Karoche Gitxra Ra…”.

2.      შევცვალოთ ზომა. ამისთვის თვისებების ფანჯარაში ნახეთ textSize და ჩაუწერეთ მანდ 24sp. რა არის sp? ეს არის Scale Independent Pixels და ის უზრუნველყოფს ტექსტის კარგად გამოჩენას სხვადასხვა ზომის მოწყობილობებზე. გარდა ამია ის მხედველობაი იღებს თქვენს ტელეფონში დაყენებულ ფონტის ზომას და ამის მიხედვით გიჩვენებთ სათანადო ზომის ტექსტს.

3.      შევცვალოთ ტექსტის ფერი თეთრზე და ტექსტი გავხადოთ ნაწილობრივ გამჭვირვალე. ამისთვის, თვისებების ფანჯარაში მოძებნეთ textColor, დააწკაპუნეთ მის გვერდით ცარიელ ადგილზე და დააჭირეთ 3 წერტილს. გამოვა ასეთი ფანჯარა:  

 

2hq8nwg.jpgაქ

 

ვხედავთ, რომ მონაცემები მოცემულია ჰექსებშიც და RGB-შიც. ჰექსებში პირველი ორი მიუთითებს გამჭვირვალობის დონეს, ხოლო დანარჩენი 6 ფერის შერჩევისთვის გამოიყენება. ანალოგიურად, A-ს გვერდით 255 ნიშნავს სრულიად გაუმჭვირვალეს. მოდით ჰექსებში შევცვალოთ პირველი ორი და მაგათ მაგივრად დავწეროთ 80, შემდეგ OK და ტექსტი გახდება თეთრი და ნახევრად გამჭვირვალე.

 

 

ახლა მივხედოთ მეორე TextView-ს, რომელშიც თავად ფაქტი იქნება ჩაწერილი და კოდიდან შეიცვლება ხოლმე დინამიურად. მოკიდეთ ხელი TextView-ს, გადაიტანეთ ეკრანზე და ჯერ არ გაუშვათ. ეს კომპონენტი უნდა დავსვათ ცენტრში მარცხენა მხარეს, ამიტომ მიიტანეთ მარცხნივ და ჩამოიტანეთ შუამდე. მარცხენა მხარეს უნდა გაჩნდეს სქელი მწვანე ხაზი, ხოლო შუაში წყვეტილი ჰორიზონტალური ხაზი - ახლა შეგიძლიათ გაუშვათ ხელი.

 

1.      პირველ რიგში შევცვალოთ id. მონახეთ ის თვისებების ფანჯარაში და ჩაუწერეთ: factTextView.

2.      ახლა შევცვალოთ ტექსტი ისე როგორც წინა კომპონენტზე და ჩავწეროთ რაც გვინდა. მე ჩავწერ: „kaci izmoreba roca dilit igvidzebs, principshi qalic egrea...“.

3.      ბოლოს, შევცვალოთ ფერი და ზომა როგორც წინა კომონენტში ვქენით. ოონდ ამჯერად გამჭვირვალობა არ შევუცვალოთ.

 

თუ გადავალთ text ტაბზე, ვნახავთ რომ ჩვენს activity_fun_app.xml ფაილს დაემატა ორი TextView მონაცემი, რომელთა შეცვლა და მოდიფიკაცია ჩვენ აქედანაც შეგვიძლია.

 

25ro6k9.jpg

 

 

 

ბოლოს მივხედოთ ღილაკსაც. ის უნდა იჯდეს სულ ქვემოთ, ვერტიკალურად ცენტრში, ამიტომ მოკიდეთ ხელით Button კომპონენტს და დააგდეთ შესაბამის პოზიციაზე. არ დაგავიწყდეთ, რომ ქვემოთ უნდა გაჩნდეს სქელი მწვანე ხაზი, ხოლო შუაში წყვეტილი ვერტიკალური.

 

9kzdwh.jpg

 

1.      სურათზე წითლად მონიშნულ ღილაკს თუ დააჭერთ, ნახავთ, რომ ზომა შეიცვლება სიგანეში და მისი ზედა კომპონენტის (parent) სიგანის ტოლი გახდება, ხოლო, თვისებების ფანჯარაში layout:width შეიცვლება და გახდება match_parent. თავიდან იყო wrap_content, რაც ნიშნავს რომ ღილაკის ზომა იქნება მასში არსებული ტექსტის სიგრძის შესაბამისი. ჩვენ გვჭირდება მშობელი კომპონენტის სიგრის მქონე ღილაკი, ამიტომ დავტოვოთ შეცვლილი მნიშვნელობა - match_parent.

2.      შევცვალოთ id, ოღონდ ამჯერად მოდი მისი შეცვლა ვისწავლოთ xml ფაილიდან. ამისთვის გადავიდეთ text ტაბზე, მოვძებნოთ ჩვენი ღილაკის კოდი და მისი აიდის მნიშვნელობა: @+id/button. აქ დახრილი ხაზის წინ რაც წერია, ეგ სჭირდება პროგრამას იმის გასარჩევად, რომ ეს კონკრეტული ჩანაწერი არის აიდი მნიშვნელობა. ჩვენ ტექსტი პირდაპირ არ უნდა შევცვალოთ და ამის მაგივრად უნდა გამოვიყენოთ რეფაქტორინგი. რეფაქტორინგის დროს იცვლება მნიშვნელობა არამხოლოდ ერთ ადგილზე, ანუ იქ სადაც ვცვლით, არამედ ყველგან სადაც კი არსებობს ეს მნიშვნელობა. ეს ძალიან მოსახერხებელი ფუნქციაა. ამისთვის დააწკაპუნეთ ტექსტზე “button” შემდეგ მაუსის მარჯვენა კლიკი და Refactor > Rename. და შეცვალეთ ისე როგორც სურათზეა:

 

 

e1ymf.jpg

 

3.       ტექსტიც აქედანვე შევცვალოთ იგივე მეთოდით და New Button-ის მაგივრად ჩავწეროთ - „Shemdegi Chaxocva“.

4.      გადავიდეთ Design ტაბზე და ღილაკის უკანა ფონი შევცვალოთ თეთრზე. ამისთვის დააწკაპუნეთ ღილაკზე, თვისებების ფანჯარაში მონახეთ background, მაგის გასწვრივ 3 წერტილს დააირე და გამოსულ ფანჯარაში გადადით System ტაბზე. მანდ ჩამოდით ცოტა ქვემოთ და აირჩიეთ White.

5.      შევცვალოთ ღილაკის ტექსტის ფერი მწვანეზე რომ დაემთხვეს უკანა ფონს და ლამაზი იყოს. ამისთვის მის textColor თვისებაში ჩაწერეთ: #51b46d.

 

 

 

სულ პირველ სურათს თუ გადახედავთ, ნახავთ, რომ კომპონენტების დაშორება გვერდებიდან, ზევიდან და ქვევიდან სხვა ზომისაა და უფრო მეტია ვიდრე ჩვენ ახლა გვაქვს. ეს არის პადინგის  - Padding - დამსახურება. ამ წუთას ის დაყენებულია 16dp-ზე. dp არის density independent pixels და საჭიროა იმისთვის, რომ სხვადასხვა ზომის მოწყობილობებზე არ აირიოს ჩვენი კომპონენტები.

 

 

გადავიდეთ text ტაბზე და სულ ზემოთ ნახეთ პადინგის მნიშვნელობები - 16dp აწერია ოთხივეს. მაუსს თუ მიიტანთ ამ მნიშვნელობებზე გამოჩნდება საიდან ხდება რეალურად ამ მნიშვნელობების აღება. ეს არის values ფოლდერში მოთავსებული dimens.xml ფაილი. გახსენით ეს ფაილი. ის მოთავსებულია app > res > values > dimens.xml-ში.

 

3150odu.jpg

 

 

როგორც ხედავთ აქ წერია რეალურად მნიშვნელობები. მოდით ორივე მნიშვნელობა შევცვალოთ 50dp-ზე. ახლა თუ გადახვალთ activity_fun_app.xml-ზე და შემდეგ Design ტაბს გახსნით, ნახავთ რომ აპლიკაციამ ისეთი ფორმა მიიღო, როგორც სულ პირველ სურათზეა.

 

ამით ჩვენი ვიზუალური მხარე დასრულდა.

 

მინდა შევაჯამო რა ვისწავლეთ აქამდე:

გავეცანით კომპონენტებს, ვისწავლეთ მათი თვისებების შეცვლა, xml ფაილთან მუშაობა. ვისწავლეთ თემის შეცვლა, რეფაქტორინგი, სპ და დპ, ფერებისა და გამჭვირვალობის კონტროლი. ამასთან ზოგადად გავეცანით ანდროიდ სტუდიოს და შეგვექმნა წარმოდგენა პროექტში არსებული ფაილებიდან რა რას აკეთებს და სად რა არის: styles.xml, dimens.xml, activity_fun_app.xml.

 

 

 

მესამე ნაწილი

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×