2 -
User
Interface in Android - Layouts
Up to
this point, you have seen that the basic unit of an Android application is an
Activity. An Activity displays the user interface of your application,
which may contain widgets like buttons, labels, text boxes, etc. Typically, you
define your UI using an XML file (for example, the main.xml file located in the res/layout folder), which may look like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
</LinearLayout>
During runtime, you load the XML UI in the onCreate()
event handler in your Activity class, using the setContentView() method of the
Activity class:( Runtime'da onCreate() method'u
çağırılır, bu method içerisindeki setContentView() method'u çağırıldığında bu
activity'nin XML'de tanımlı user interface'i load edilir. )
@Override
public void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
While
it is always easier to build your UI using a XML file, there are times where
you need to build your UI dynamically during runtime (for example, when writing
games). Hence, it is also possible to create your UI entirely using code. ( User interface'i tasarlamak .xml dosyasıyla da
yapılabilir, java kodunda da yapılabilir.
)
Views and ViewGroups
An
Activity contains Views and ViewGroups. A View is a widget that has an
appearance on screen. Examples of widgets are buttons, labels, text boxes, etc.
A View derives from the base class android.view.View. (
Bir activity, View ve ViewGroup'lar içerir. View nedir? Ekranda gördüğümüz
butonlar, label'lar(read-only text'ler) ve text box'lar(edittext) birer widget'dir.
Bu view'lerin base class'ı android.view.View class'ıdır. )
One or
more Views can be grouped together into a ViewGroup. A ViewGroup (which is by
itself is a special type of View) provides the layout in which you can order
the appearance and sequence of views. Examples of Viewgroups are LinearLayout,
FrameLayout, etc. A ViewGroup derives from the base class android.view.ViewGroup.( Bir ViewGroup object, birden fazla View object
içerebilir. ViewGroup da bir çeşit View'dir. Bir ViewGroup'u kullanarak view'lerin
sırasını, ekranda nerede görüleceğini vs. organize edebiliriz. Bir Viewgroup, android.view.ViewGroup
class'ının object'idir. Android'in desteklediği ViewGrouplar şunlardır.
LinearLayoutAbsoluteLayoutTableLayoutRelativeLayoutFrameLayoutScrollView
LinearLayout
The
LinearLayout arranges views in a single column or single row.
Child views can either be arranged vertically or horizontally. To see how LinearLayout works, let’s modify the main.xml file in the project: (View'leri
alta alta veya yan yana koymak için LinearLayout kullanılır. )
<?xml version="1.0"
encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello" />
</LinearLayout>
In the
main.xml file, observe that
the root element is and it has an element contained within it. Each View
and ViewGroup has a set of common
attributes, some of which are shown in Table 1. (
main.xml dosyasındakiroot element, bir çeşit ViewGroup olan LinearLayout'dır.
Tüm View ve ViewGroup'lar aşağıdaki ortak attribute'lere sahiptirler. )|
Attribute
|
Description
|
layout_width |
Specifies the width of the View or ViewGroup ( Bir View veya ViewGroup'un genişliğini belirtir. )
|
layout_height |
Specifies the height of the View or ViewGroup ( Bir View veya ViewGroup'un yüksekliğini belirtir. )
|
layout_marginTop |
Specifies extra space on the top side of the View or ViewGroup( Bir View veya ViewGroup'un üzerinde belirli miktarda bir boş alan bırakmak için
kullanılır. En üstteki view element'in marginTop attribute'ünü 50px yaparsak,
ekran üstteki 50 px'lik kısmı boş kalır, 50 px'lik boşluktan sonra bu view
element gösterilir.)
|
layout_marginBottom |
Specifies extra space on the bottom side of the View or
ViewGroup( Bir View veya ViewGroup'un altında belirli miktarda bir
boş alan bırakmak için kullanılır. )
|
layout_marginLeft |
Specifies extra space on the left side of the View or
ViewGroup( Bir View veya ViewGroup'un solunda
belirli miktarda bir boş alan bırakmak için kullanılır. )
|
layout_marginRight |
Specifies extra space on the right side of the View or
ViewGroup( Bir View veya ViewGroup'un sağında
belirli miktarda bir boş alan bırakmak için kullanılır. )
|
layout_gravity |
Specifies how child Views are positioned.( View element'lerin mesela butonların, textView'lerin,
EditText'lerin en sağa, en sola, en üste, en alta veya ortaya hizalanması
için, View element'lerin layout_gravity attribute'ü kullanılır. )
|
layout_weight |
Specifies how much of the extra space in the layout to
be allocated to the View
|
layout_x |
Specifies the x-coordinate of the View or ViewGroup(Bir View veya ViewGroup'un ekranda bulunacağı yerin x
koordinatını belirler. )
|
layout_y |
Specifies the y-coordinate of the View or ViewGroup. (Bir View veya ViewGroup'un ekranda bulunacağı yerin y
koordinatını belirler. )
|
Table 1 Common
attributes of views and viewgroups
margin :
Sondaki örneğe bakalım. 10px margin, 10px border,
10px padding. Bizim view element'imizin border'ını 10 px yaptık. Bizim view
element'imizin üstteki view element'i ile arasında 10px'lik boşluk olmasını
istiyorsak, üst margin'i 10px olarak belirlemeliyiz. Yani margin, 2 view
element'inin border'ları arasındaki bırakmak istediğimiz boş alanı ifade eder.
Örneğin linearlayout view group'unu kullanıyoruz diyelim. orientation olarak
vertical seçtik diyelim. Bir buton koyduk diyelim. Butonun altına bir imageview
koyduk diyelim. imageview'in top_margin attribute'ünü 50 px olarak belirledik
diyelim. Bu durumda butonla imageview arasında 50px'lik bir boşluk bırakmış
oluruz. HTML'deki padding nedir onu da açıklayalım, Bir buton yaptık bu butonun
içerisinde de bir yazı gösteririz. Butonun sınırları ve butonun içerisindeki
yazı arasındaki boşluğu ifade eder padding.
layout_gravity :
Summary :
For horizontal Linear Layout,
we can use layout_gravity
attribute of a View(
for example a Button, TextView etc. ) in order to position the View element vertically.( Yatay linear layout'daki View'lerin dikey pozisyonunu belirlemek için
View element'lerin layout_gravity attribute'ünü kullanırız. Zaten
yataydaki 3 butondan birini sağa sola vs. hareket ettiremeyeğimizi düşünürsek,
tek hareket ettirebileceğimiz yönün dikey olduğunu anlarız. Burdan aklımızda
kalsın. )
For vertical Linear Layout,
we can use layout_gravity
attribute of a View(
for example a Button, TextView etc. ) in order to position the View element horizontally.( Vertical linear layout'daki View'lerin yatay pozisyonunu belirlemek
için View element'lerin layout_gravity attribute'ünü kullanırız. Zaten
dikey olarak dizilmiş 3 butondan birini aşağı yukarı vs. pozisyonlandırmanın
mantıksız olduğunu düşünürsek, tek hareket ettirebileceğimiz yönün yatay
olduğunu anlarız. Burdan aklımızda kalsın. )
For
a horizontal Linear Layout the following values
make sense:
·
top
·
center
·
bottom
That
is because the children of a horizontal Linear Layout are layed out horizontally one after
the other. Only thing can be controlled using the android:layout_gravity is how
a child view is positioned vertically.
In
the above example the top Linear Layout is a horizontal Linear Layout. Setting
the android:layout_gravity=top on thel_g=top Button has an effect
of positioning it at the top. Setting the android:layout_gravity=center on the l_g=centerButton
has an effect of positioning it at the vertical center. Setting the
android:layout_gravity=bottom on thel_g=bottom Button has an effect
of positioning it at the bottom. (
Horizontal linear layout kullanıyoruz diyelim. Ekranda yan yana 3 tane buton
koyduk diyelim. Bu yan yana koyulan butonları dikeyde top pozisyona mı dikeyde
center pozisyona mı dikeyde bottom pozisyona mı koyacağımızı belirlemek
için Button View'in(Button element'in) layout_gravity attribute'ünü
kullanırız. x x x -> x'ler bir butonu gösteriyor olsun. Herbir x'in dikey
pozisyonu belirlemek için Button View'in(Button
element'in) layout_gravity attribute'ünü kullanırız. )
For
a vertical Linear Layout the following values
make sense:
·
left
·
center
·
right
That
is because the children of a vertical Linear Layout are layed out vertically one below
the other. Only thing can be controlled using the android:layout_gravity is how
a child view is positioned horizontally.
In
the about example the bottom Linear Layout is a vertical Linear Layout. Setting
the android:layout_gravity=left on the l_g=left Button has an
effect of positioning it at the left. Setting the android:layout_gravity=center
on thel_g=center Button has an effect of positioning it at the
horizontal center. Setting the android:layout_gravity=right on the l_g=right
Button has an effect of positioning it at the right. ( Vertical linear layout kullanıyoruz
diyelim. Ekranda alt alta 3 tane buton koyduk diyelim. Bu alt alta konulan
butonları yatayda en sola mı ortaya mı en sağa mı koyacağımızı belirlemek
için Button View'in(Button element'in) layout_gravity attribute'ünü
kullanırız. x x x -> x'ler bir butonu gösteriyor olsun. Herbir x'in dikey
pozisyonu belirlemek için Button View'in(Button element'in) layout_gravity
attribute'ünü kullanırız. )
Örnek
:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
...
android:orientation="horizontal"
android:gravity="center" >
<Button
...
android:layout_gravity="top">
</Button>
<Button
...
android:layout_gravity="center">
</Button>
<Button ...
android:layout_gravity="bottom">
</Button>
</LinearLayout>
android:layout_gravity is the Outside gravity
of the View. That means, to specify the direction in which the View should
touch it's parent's border. In other words, it sets the gravity of the View or Layout in its
parent. (
Yukarıdaki kod örneğini düşünürsek, bir horizontal linear layout içerisinde
button view'ler olsun. Bu button view'lerin parent view'leri olan linear layout
içerisinde yukarı, aşağı veya center'a hizalanma pozisyonunu belirleriz. )
android:gravity is the Inside gravity
of that View. This means, in which direction it's contents should align. sets
the gravity of the content of the View it is used
on. In other words, it sets the gravity of the content of the View it is used
on. (
Yukarıdaki kod örneğini düşünürsek, bir horizontal veya vertical linear layout
içerisinde button view'ler olsun. Bu button view'lerin içlerinde bir text
vardır. Button view'lerin içerikleri olan text'leri sağa,sola,yukarı veya
ortaya hizalamak için gravity attribute'ünü kullanırız. )
Easy trick to
remember: Take "layout-gravity" as
"Lay-outside-gravity". ( layout-gravity'nin hangi çeşit gravity
olduğunu şuradan hatırlayalım. Lay outside gravity yani bir view'in parent'ı
içerisindeki pozisyonu, hizalanmasını belirler layout-gravity. gravity ise bir
view'in içeriğinin bu view'e göre pozisyonunu, hizalanmasını belirler, örneğini
textview'in gravity attribute'ünü kullanarak aslında şunu belirleriz,
textview'in içerisindeki text'in textview'e göre hizalanması. textview'in
layout_gravity attribute'ünü kullanarak ise textview'in parent view'i
içerisindeki pozisyonunu, hizalanmasını belirleriz, örneğin horizontal bir
linear layout içerisindeki textview'in, içerisinde bulunduğu linear layout'a
göre pozisyonunu belirleriz, üste mi alta mı ortaya mı hizalansın diye.
)
Note
that some of these attributes are only applicable when a View is in certain
specific
ViewGroup(s). For example, the layout_weight and layout_gravity attributes are
only applicable if a View is either in a LinearLayout or TableLayout. ( Bir view'in layout_weight ve
layout_gravity attribute'lerinin düzgün bir şekilde çalışabilmesi için, bu
view'in LinearLayout veya TableLayout içerisinde olması zorundadır. Örneğin,
LinearLayout veya TableLayout içerisindeki bir button'ın layout_weight ve
layout_gravity attribute'lerini kullanabiliriz ama bir relativeLayout'daki
button view'de layout_gravity ve layout_weight attribute'leri kullanılamaz.
Yani bazı attribute'ler sadece bazı view/viewgroup'larda düzgün çalışır. )
fill_parent : Bir view'in parent
view'inin yatay veya dikey tüm alanını kaplaması için kullanılır.
wrap_content : Bir view'in,
yatayda/dikeyde içeriği kadar alanı kaplaması için kullanılır.
Örnek :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.5"
android:background="#e3e2ad"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#bcee11"
android:textSize="24sp"
android:text="gravity=" />
<TextView
android:layout_width="200dp"
android:layout_height="40dp"
android:background="#bcf5b1"
android:layout_gravity="right"
android:gravity="left"
android:text="layout_gravity=right\n gravity =left " />
<TextView
android:layout_width="200dp"
android:layout_height="40dp"
android:background="#aacaff"
android:layout_gravity="right"
android:gravity="center_horizontal"
android:text="layout_gravity=right\n gravity =center_horizontal " />
<TextView
android:layout_width="200dp"
android:layout_height="80dp"
android:background="#bcf5b1"
android:layout_gravity="center"
android:gravity="bottom"
android:text="layout_gravity=right\n gravity =left " />
<TextView
android:layout_width="200dp"
android:layout_height="40dp"
android:background="#aacaff"
android:layout_gravity="left"
android:gravity="center"
android:text="center" />
</LinearLayout>
<LinearLayout >
</LinearLayout>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.5"
android:background="#e3e2ad"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#bcee11"
android:textSize="24sp"
android:text="gravity=" />
<TextView
android:layout_width="200dp"
android:layout_height="40dp"
android:background="#bcf5b1"
android:layout_gravity="right"
android:gravity="left"
android:text="layout_gravity=right\n gravity =left " />
<TextView
android:layout_width="200dp"
android:layout_height="40dp"
android:background="#aacaff"
android:layout_gravity="right"
android:gravity="center_horizontal"
android:text="layout_gravity=right\n gravity =center_horizontal " />
<TextView
android:layout_width="200dp"
android:layout_height="80dp"
android:background="#bcf5b1"
android:layout_gravity="center"
android:gravity="bottom"
android:text="layout_gravity=right\n gravity =left " />
<TextView
android:layout_width="200dp"
android:layout_height="40dp"
android:background="#aacaff"
android:layout_gravity="left"
android:gravity="center"
android:text="center" />
</LinearLayout>
<LinearLayout >
</LinearLayout>
</LinearLayout>
Hiç yorum yok:
Yorum Gönder