Tìm hiểu về Relative Layout

Tìm hiểu về Relative Layout

Rate this post

Relative layout là bố cục rất linh hoạt được sử dụng trong Android để thiết kế bố cục tùy chỉnh. Nó cho phép chúng tôi linh hoạt để định vị thành phần / View của mình dựa trên vị trí của thành phần tương đối hoặc anh em. Chỉ vì nó cho phép chúng ta định vị thành phần ở bất cứ đâu chúng ta muốn nên nó được coi là bố cục linh hoạt nhất. Vì lý do tương tự Relative layout là bố cục được sử dụng nhiều nhất sau Bố cục tuyến tính trong Android. Nó cho phép View con của nó có vị trí tương đối với nhau hoặc so với vùng chứa hoặc vùng chứa khác.

Trong Relative layout, bạn có thể sử dụng “trên, dưới, trái và phải” để sắp xếp vị trí của thành phần so với thành phần khác. Ví dụ, trong hình ảnh dưới đây, bạn có thể thấy nội dung được đặt liên quan đến Heading.

Ví dụ về Relative layout Trong Android Mặc dù Android có hệ thống kéo và thả để đưa một thành phần có liên quan đến Relative layout bên trong khác. Nhưng trên thực tế, trong nền, rất nhiều thuộc tính XML đang hoạt động để thực hiện nhiệm vụ này. Vì vậy, nhà phát triển Android có thể thiết kế giao diện người dùng bằng cách sử dụng kéo và thả hoặc sử dụng mã XML. Nhà phát triển chuyên nghiệp sử dụng cả hai để thiết kế giao diện người dùng.

Các bài viết liên quan:

Các thuộc tính của Relative layout:

Cho phép xem các thuộc tính khác nhau của Relative layout sẽ được sử dụng trong khi thiết kế Giao diện người dùng ứng dụng Android:

1.above

Định vị cạnh dưới cùng của View phía trên ID View neo đã cho và phải là một tham chiếu của tài nguyên khác ở dạng id. Ví dụ: android: layout_above = ”@ + id / textView”.

Ví dụ: giả sử một View có id textview2 là những gì chúng ta muốn đặt phía trên một View khác có id textview. Dưới đây là mã và hình ảnh bố cục.

<TextView

        android:layout_width=”wrap_content”

        android:layout_height=”wrap_content”

        android:textAppearance=”?android:attr/textAppearanceLarge”

        android:text=”Text2″

        android:id=”@+id/textView2″

        android:layout_above=”@+id/textView”

        android:layout_marginBottom=”100dp”

        android:layout_centerHorizontal=”true”/>

Tìm hiểu về Relative Layout

2. alignBottom

alignBottom được sử dụng để làm cho cạnh dưới cùng của View khớp với cạnh dưới cùng của ID View neo đã cho và nó phải là một tham chiếu đến một tài nguyên khác, ở dạng id. Ví dụ: android: layout_ alignBottom = ”@ + id / button1 ″

Trong ví dụ dưới đây, chúng tôi đã căn chỉnh một View với id textView2 Dưới cùng của một View khác với id textView. Dưới đây là hình ảnh được mã hóa và bố cục.

<!– textView2 alignBottom of textView –>

<TextView

    android:layout_width=”wrap_content”

    android:layout_height=”wrap_content”

    android:textAppearance=”?android:attr/textAppearanceLarge”

android:layout_centerHorizontal=”true”    

    android:id=”@+id/textView2″

    android:layout_alignBottom=”@+id/textView”

    android:text=”Text2 alignBottom of Text1″

    android:layout_marginBottom=”90dp”

/>

Tìm hiểu về Relative Layout

3.alignLeft: 

alignLeft được sử dụng để làm cho cạnh trái của View khớp với cạnh trái của ID View neo đã cho và phải là một tham chiếu đến một tài nguyên khác, ở dạng Ví dụ: android: layout_ alignLeft = ”@ + id / button1 ″ .

Dưới đây là mã và hình ảnh bố cục trong đó chúng tôi đã căn chỉnh một View với id textView2 bên trái của một View khác với id textView.

<!– textView2 alignLeft of textView –>

<TextView

    android:layout_width=”wrap_content”

    android:layout_height=”wrap_content”

    android:textAppearance=”?android:attr/textAppearanceLarge”

    android:id=”@+id/textView2″

    android:layout_alignLeft=”@+id/textView”

    android:text=”Text2 alignLeft of Text1″

    android:layout_below=”@+id/textView” 

    android:layout_marginTop=”20dp”/>

4. alignRight: 

alignRight được sử dụng để làm cho cạnh bên phải của View này khớp với cạnh bên phải của ID View neo đã cho và phải là một tham chiếu đến một tài nguyên khác, ở dạng như ví dụ này: android: layout_alignRight = ”@ + id / button1 ″

Dưới đây là mã và hình ảnh bố cục trong đó chúng tôi đã căn chỉnh một View với id textView2 bên phải của một View khác với id textView.

<TextView

    android:layout_width=”wrap_content”

    android:layout_height=”wrap_content”

    android:textAppearance=”?android:attr/textAppearanceLarge”

    android:id=”@+id/textView2″

    android:layout_alignRight=”@+id/textView”

    android:text=”Text2 alignRight of Text1″

    android:layout_below=”@+id/textView”

    android:layout_marginTop=”20dp”/>

5.alignStart: 

thuộc tính alignStart được sử dụng để làm cho cạnh bắt đầu của View này khớp với cạnh bắt đầu của ID View neo đã cho và phải là một tham chiếu đến một tài nguyên khác, ở dạng như ví dụ này: android: layout_alignStart = ”@ + id / button1 ″

Dưới đây là mã alignStart và hình ảnh bố cục trong đó chúng tôi đã căn chỉnh một View với id textView2 bắt đầu một View khác với id textView.

<!– Text2 alignStart–>

<TextView

    android:layout_width=”wrap_content”

    android:layout_height=”wrap_content”

    android:textAppearance=”?android:attr/textAppearanceLarge”

    android:id=”@+id/textView2″

    android:text=”Text2 align start of Text1″

    android:layout_alignStart=”@+id/textView”

 />

Căn chỉnh Bắt đầu trong Relative layout Ví dụ về Android

6. alignTop:

alignTop được sử dụng để làm cho cạnh trên cùng của View này khớp với cạnh trên cùng của ID View neo đã cho và phải là một tham chiếu đến một tài nguyên khác, ở dạng như ví dụ này: android: layout_alignTop = ”@ + id / button1 ″.

Dưới đây là mã alignTop và hình ảnh bố cục trong đó chúng tôi đã căn chỉnh một View với id textView Trên cùng của một hình ảnh khác với id imageView.

<!–text is align top on Image–>

<TextView

    android:layout_width=”wrap_content”

    android:layout_height=”wrap_content”

    android:textAppearance=”?android:attr/textAppearanceLarge”

    android:id=”@+id/textView”

    android:layout_alignTop=”@+id/imageView”

    android:text=”Text Here is AlignTop on Image”

     />

alignTop trong Android Relative Layout

7.alignParentBottom:

Nếu thuộc tính alignParentBottom là đúng, hãy làm cho cạnh dưới cùng của View này khớp với cạnh dưới cùng của chế độ chính. Giá trị của căn chỉnh đáy gốc là true hoặc false. Ví dụ: android: layout_alignParentBottom = ”true”

Lưu ý quan trọng: alignParentBottom và alignBottom là hai thuộc tính khác nhau. Trong alignBottom, chúng tôi cung cấp tham chiếu của một View khác ở dạng id mà View được căn chỉnh ở cuối View được tham chiếu nhưng trong alignParentBottom, cạnh dưới cùng của View khớp với cạnh dưới cùng của chế độ chính.

Dưới đây là mã alignParentBottom và hình ảnh bố cục trong đó textView được hiển thị đơn giản bằng cách sử dụng alignParentBottom.

<!– textView is alignParentBottom –>

<TextView

    android:layout_width=”wrap_content”

    android:layout_height=”wrap_content”

    android:textAppearance=”?android:attr/textAppearanceLarge”

    android:id=”@+id/textView”

    android:text=”Text Here is AlignParentBottom with bottom margin of 120dp”

    android:layout_alignParentBottom=”true”

    android:layout_alignParentLeft=”true”

    android:layout_alignParentStart=”true”

    android:layout_marginBottom=”120dp” />

8. alignParentEnd:

Nếu thuộc tính alignParentEnd là true, thì nó làm cho cạnh cuối của khung nhìn này khớp với cạnh cuối của chính. Giá trị của align gốc End là true hoặc false. Ví dụ: android: layout_alignParentEnd = ”true”.

Lưu ý quan trọng: Trong alignParentEnd cạnh dưới cùng của dạng xem khớp với cạnh dưới của cha mẹ.

Dưới đây là mã alignParentEnd và hình ảnh bố cục trong đó textView được hiển thị đơn giản trên Hình ảnh cuối cùng.

<!– Text displayed in the end of parent image–>

<TextView

    android:layout_width=”wrap_content”

    android:layout_height=”wrap_content”

    android:textAppearance=”?android:attr/textAppearanceLarge”

    android:id=”@+id/textView”

    android:text=”Text in Parent End”

    android:layout_alignBottom=”@+id/imageView”

    android:layout_alignParentEnd=”true”

 />

9. alignParentLeft: 

Nếu thuộc tính alignParentLeft là true, hãy làm cho cạnh trái của View này khớp với cạnh trái của thuộc tính chính. Giá trị của align cha left là true hoặc false. Ví dụ: android: layout_alignParentLeft = ”true”.

Lưu ý quan trọng: alignParentLeft và alignLeft là hai thuộc tính khác nhau. Trong alignLeft, chúng tôi cung cấp tham chiếu của một View khác ở dạng id mà View được căn chỉnh ở bên trái của View được tham chiếu nhưng trong alignParentLeft, cạnh trái của View khớp với cạnh trái của chế độ chính.

Dưới đây là mã ví dụ alignParentLeft và hình ảnh bố cục trong đó textView được hiển thị đơn giản trên Hình ảnh mẹ ở phía bên trái.

<!– align parent left in Android –>

<TextView

    android:layout_width=”wrap_content”

    android:layout_height=”wrap_content”

    android:textAppearance=”?android:attr/textAppearanceLarge”

    android:id=”@+id/textView”

    android:text=”Text in Parent Left” 

    android:layout_alignBottom=”@+id/imageView”

    android:layout_alignParentLeft=”true”

     />

10. alignParentRight

Nếu thuộc tính alignParentRight là true, thì nó làm cho cạnh phải của View này khớp với cạnh phải của thuộc tính chính. Giá trị của căn chỉnh quyền gốc là đúng hoặc sai. Ví dụ: android: layout_alignParentRight = ”true”.

Lưu ý quan trọng: alignParentRight và alignRight là hai thuộc tính khác nhau. Trong alignRight, chúng tôi cung cấp tham chiếu của một View khác ở dạng id mà View được căn chỉnh ở bên phải của View được tham chiếu nhưng trong alignParentRight, cạnh bên phải của View khớp với cạnh bên phải của chế độ chính.

Dưới đây là mã ví dụ alignParentRight và hình ảnh bố cục trong đó textView được hiển thị đơn giản trên Hình ảnh mẹ ở phía bên phải.

<!– alignRightParent Example –>

<TextView

    android:layout_width=”wrap_content”

    android:layout_height=”wrap_content”

    android:textAppearance=”?android:attr/textAppearanceLarge”

    android:id=”@+id/textView”

    android:text=”Text in Parent Right”

    android:layout_alignBottom=”@+id/imageView”

    android:layout_alignParentRight=”true”

  />

11.alignParentStart: 

Nếu alignParentStart là true, thì nó làm cho cạnh bắt đầu của View này khớp với cạnh bắt đầu của chính. Giá trị của lệnh bắt đầu từ phụ huynh là true hoặc false. Ví dụ: android: layout_alignParentStart = ”true”.

Lưu ý quan trọng: alignParentStart và alignStart là hai thuộc tính khác nhau, Trong alignStart, chúng tôi cung cấp tham chiếu của một dạng xem khác ở dạng id mà dạng xem được căn chỉnh ở đầu dạng xem được tham chiếu nhưng trong alignParentStart, cạnh bắt đầu của dạng xem khớp với cạnh bắt đầu của cha mẹ (RelativeLayout).

Dưới đây là mã ví dụ alignParentStart và hình ảnh bố trí trong đó textView được hiển thị đơn giản trên Hình ảnh mẹ ở phía bên phải.

<!– alignParentStart Example –>

<TextView

    android:layout_width=”wrap_content”

    android:layout_height=”wrap_content”

    android:textAppearance=”?android:attr/textAppearanceLarge”

    android:id=”@+id/textView”

    android:text=”Text in Parent Start”

    android:layout_alignTop=”@+id/imageView”

    android:layout_alignParentStart=”true”

     />

12.alignParentTop:

Nếu alignParentTop là true, thì nó làm cho cạnh trên của View này khớp với cạnh trên cùng của chính. Giá trị của align cha Top là true hoặc false. Ví dụ: android: layout_alignParenTop = ”true”.

Lưu ý quan trọng: alignParentTop và alignTop là hai thuộc tính khác nhau, Trong alignTop, chúng tôi cung cấp tham chiếu của một View khác ở dạng id mà View được căn chỉnh với đầu của View được tham chiếu nhưng trong alignParentTop, cạnh trên của View khớp với cạnh trên của cha mẹ (RelativeLayout).

Dưới đây là mã ví dụ của thuộc tính alignParentTop và cả hình ảnh bố cục.

<!– alignParentTop example –>

<TextView

    android:layout_width=”wrap_content”

    android:layout_height=”wrap_content”

    android:text=”Text1 align parent top”

    android:layout_alignParentTop=”true”

    android:layout_margin=”20dp”

    android:textSize=”20sp”

    android:textColor=”#000″/>

13.centerInParent

Nếu center in parent là true, hãy đặt View ở giữa màn hình theo chiều dọc và chiều ngang. Giá trị của center trong cha là true hoặc false. Ví dụ: android: layout_centerInParent = ”true”.

Dưới đây là mã ví dụ của thuộc tính centerInParent và cả hình ảnh bố cục.

<!– centerInParent example –>

<TextView

    android:layout_width=”wrap_content”

    android:layout_height=”wrap_content”

    android:text=”Text1 center in parent”

    android:layout_centerInParent=”true”

    android:textSize=”20sp”

    android:textColor=”#000″

/>

14.centerHorizontal

Nếu thuộc tính centerHorizontal là true, hãy làm cho View nằm ở giữa theo chiều ngang. Giá trị của centerHorizontal là true hoặc false. Ví dụ: android: layout_centerHorizontal = ”true”.

Dưới đây là mã ví dụ của thuộc tính centerHorizontal và cả hình ảnh bố cục.

<!– centerHorizontal example –>

<TextView

    android:layout_width=”wrap_content”

    android:layout_height=”wrap_content”

    android:text=”Text1 center Horizontal”

    android:layout_centerHorizontal=”true”

    android:textSize=”20sp”

    android:textColor=”#000″

/>

15.centerVertical:

 Nếu thuộc tính centerVertical là true, hãy đặt View ở giữa theo chiều dọc. Giá trị của căn chỉnh đáy gốc là true hoặc false. Ví dụ: android: layout_centerVertical = ”true”.

Dưới đây là mã ví dụ của thuộc tính centerVertical và cả hình ảnh bố cục.

<!– centerVertical example –>

<TextView

    android:layout_width=”wrap_content”

    android:layout_height=”wrap_content”

    android:text=”Text1 center vertical”

    android:layout_centerVertical=”true”

    android:textSize=”20sp”

    android:textColor=”#000″

/>

Ví dụ về Relative layout với mã và giải thích:

Ví dụ 1: Ở đây chúng tôi đang thiết kế một màn hình đăng nhập đơn giản trong Android Studio bằng cách sử dụng Relative layout. Dưới đây là kết quả cuối cùng:

Ví dụ Đăng nhập Đăng nhập Relative layout OutputBelow là mã của activity_main.xml để thiết kế giao diện người dùng với giải thích được bao gồm trong đó:

<?xml version=”1.0″ encoding=”utf-8″?>

<!–Relative Layout Is Used–>

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”

    android:layout_width=”match_parent”

    android:layout_height=”match_parent”>

    <!–Text View for Displaying SIGN IN Text At Top of UI–>

    <TextView

        android:layout_width=”wrap_content”

        android:layout_height=”wrap_content”

        android:textAppearance=”?android:attr/textAppearanceLarge”

        android:text=”SIGN IN”

        android:id=”@+id/textView3″

        android:layout_alignParentTop=”true”

        android:layout_centerHorizontal=”true” />

    <!–Text View for Displaying Username–>

    <TextView

        android:id=”@+id/userName”

        android:layout_width=”wrap_content”

        android:layout_height=”wrap_content”

        android:layout_marginLeft=”@dimen/activity_horizontal_margin”

        android:layout_marginTop=”110dp”

        android:text=”UserName:”

        android:textColor=”#000000″

        android:textSize=”20sp” />

    <!–Text View for Displaying Password–>

    <TextView

        android:id=”@+id/password”

        android:layout_width=”wrap_content”

        android:layout_height=”wrap_content”

        android:layout_below=”@+id/userName”

        android:layout_margin=”@dimen/activity_horizontal_margin”

        android:text=”Password:”

        android:textColor=”#000000″

        android:textSize=”20sp” />

    <!–Edit Text for Filling Username–>

    <EditText

        android:id=”@+id/edt_userName”

        android:layout_width=”fill_parent”

        android:layout_height=”40dp”

        android:layout_marginLeft=”@dimen/activity_horizontal_margin”

        android:layout_marginTop=”100dp”

        android:layout_toRightOf=”@+id/userName”

        android:hint=”User Name” />

    <!–Edit Text for Filling Password–>

    <EditText

        android:layout_width=”fill_parent”

        android:layout_height=”40dp”

        android:layout_below=”@+id/edt_userName”

        android:layout_centerVertical=”true”

        android:layout_toRightOf=”@+id/password”

        android:hint=”Password” />

    <!–Button for Clicking after filling details–>

    <Button

        android:id=”@+id/btnLogin”

        android:layout_width=”wrap_content”

        android:layout_height=”wrap_content”

        android:layout_below=”@+id/password”

        android:layout_centerHorizontal=”true”

        android:layout_marginTop=”20dp”

        android:background=”#03B424″

        android:text=”Login”

        android:textColor=”#ffffff”

        android:textStyle=”bold” />

</RelativeLayout>

Output:

Tìm hiểu về Relative Layout

Sự khác biệt giữa Linear và Relative Layout:

Relative Layout:

Mọi phần tử của Relativelayout tự sắp xếp với phần tử kia hoặc phần tử mẹ.

Sẽ rất hữu ích khi thêm các lượt xem bên cạnh các lượt xem khác, v.v.

Trong một Relative layout, bạn có thể cung cấp cho mỗi đứa con một Thuộc tính Bố cục chỉ định chính xác vị trí nó sẽ đi đến đâu so với cha mẹ hoặc họ hàng với những đứa trẻ khác.

Các View có thể được xếp chồng lên nhau.

LINEAR LAYOUT:

Trong một bố cục tuyến tính, giống như tên cho thấy, tất cả các phần tử được hiển thị theo kiểu tuyến tính theo chiều dọc hoặc chiều ngang.

Theo chiều ngang hoặc chiều dọc, hành vi này được đặt trong android: direction, là một thuộc tính của Bố cục tuyến tính của nút.

android: direction = ”ngang” hoặc android: orient = ”vertical”

Bố cục tuyến tính đặt mọi con, cái này đến con kia, vào một dòng, theo chiều ngang hoặc chiều dọc.

Quý khách có thể tham khảo hơn ở các dịch vụ do websitehcm.com cung cấp như: dịch vụ seo, dịch vụ viết content , dịch vụ chăm sóc website, dịch vụ thiết kế website 

Leave a Reply