Làm cách nào tôi có thể thêm Nút hành động nổi mới của nhóm Viking giữa hai tiện ích / bố cục


287

Tôi đoán bạn đã thấy hướng dẫn thiết kế Android mới, với "Nút hành động nổi" mới hay còn gọi là "FAB"

Ví dụ nút màu hồng này:

nhập mô tả hình ảnh ở đây

Câu hỏi của tôi nghe có vẻ ngu ngốc, và tôi đã thử rất nhiều thứ, nhưng cách tốt nhất để đặt nút này ở giao điểm của hai bố cục là gì?

Trong ví dụ trên, nút này được đặt hoàn hảo giữa những gì chúng ta có thể tưởng tượng là ImageView và RelLayout.

Tôi đã thử rất nhiều điều chỉnh, nhưng tôi tin rằng có một cách thích hợp để làm điều đó.


Bạn có thể định vị các bố cục bên trong bố cục và định vị nút trên bố cục đó
Chrome Penguin Studios

1
Tôi nghĩ rằng thư viện này có thể giúp ích rất nhiều: github.com/ksoichiro/Android-ObservableScrollView
nhà phát triển Android

Làm thế nào để ẩn nó trong khi cuộn? Tôi đang đối mặt với một vấn đề, trong đó nếu tôi cuộn trang, fab vẫn ở trên đầu và không ẩn! Xin hãy giúp đỡ
Anish Kumar

Câu trả lời:


473

Thực hành tốt nhất:

  • Thêm compile 'com.android.support:design:25.0.1'vào tập tin lớp
  • Sử dụng CoordinatorLayoutnhư xem gốc.
  • Thêm layout_anchorvào FAB và đặt nó vào chế độ xem hàng đầu
  • Thêm layout_anchorGravityvào FAB và đặt thành:bottom|right|end

nhập mô tả hình ảnh ở đây

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/viewA"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.6"
            android:background="@android:color/holo_purple"
            android:orientation="horizontal"/>

        <LinearLayout
            android:id="@+id/viewB"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.4"
            android:background="@android:color/holo_orange_light"
            android:orientation="horizontal"/>

    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:clickable="true"
        android:src="@drawable/ic_done"
        app:layout_anchor="@id/viewA"
        app:layout_anchorGravity="bottom|right|end"/>

</android.support.design.widget.CoordinatorLayout>

3
@Aprendiz Tôi cũng muốn một trích dẫn nhưng tôi có thể thấy tại sao đây là một câu trả lời tốt hơn của HughJeffner. Tôi thấy nó đơn giản hơn, linh hoạt hơn, ít hack hơn. Bạn không mã hóa bất kỳ giá trị layout_height hoặc lề nào, có thể thay đổi theo thời gian hoặc được xác định động. Câu trả lời của Hugh có thể làm việc trong một số trường hợp đơn giản, và có lẽ có thể là một cách giải quyết đối với một số thư viện của bên thứ ba mà không hỗ trợ đầy đủ CoordinatorLayoutlayout_anchorlayout_anchorGravitytính năng, như một trong những ông đang sử dụng, futuresimples .
acrespo

1
Btw Futuresimples là một thư viện TUYỆT VỜI, và trong trường hợp ai đó đang tự hỏi có một ngã ba kết hợp CoordinatorLayoutphương pháp này với thư viện đó, hãy nhìn . Và cũng có một ngã ba cho các phiên bản cũ hơn.
acrespo

2
Tôi đã tìm kiếm chính xác NÀY. +1 cho đơn giản.
Emiliano De Santis

29
Tại sao không phải là tất cả những điều này trong tài liệu của Android?
Mostafa

3
sử dụng ứng dụng: layout_anchor gây ra cho tôi một vấn đề kết xuất (linearlayout layoutparams không thể được chuyển sang điều phối viên. :(
DAVIDBALAS1

91

Có vẻ như cách sạch nhất trong ví dụ này là:

  • Sử dụng RelativeLayout
  • Định vị 2 khung nhìn liền kề nhau bên dưới cái kia
  • Căn FAB với quyền / kết thúc gốc và thêm lề phải / kết thúc
  • Căn FAB xuống dưới cùng của chế độ xem tiêu đề và thêm lề âm , bằng một nửa kích thước của FAB bao gồm cả bóng

Ví dụ thích nghi từ việc thực hiện shamanland, sử dụng bất cứ FAB nào bạn muốn. Giả sử FAB cao 64dp bao gồm bóng:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <View
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="120dp"
    />

    <View
        android:id="@+id/body"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/header"
    />

    <fully.qualified.name.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignBottom="@id/header"
        android:layout_marginBottom="-32dp"
        android:layout_marginRight="20dp"
    />

</RelativeLayout>

Ví dụ về bố cục FAB


Bố cục này đã lừa tôi! Tôi đang sử dụng FABbởi Futuresimple - thật đơn giản để thêm và sử dụng, hãy tận hưởng!
La Mã

Giống như bạn đã nói "Định vị 2 khung nhìn liền kề nhau bên dưới" -> đây là vấn đề tôi gặp phải, tôi chỉ bỏ qua rằng "bố cục container" của tôi đã bị rối do không khớp dấu ngoặc: D Cảm ơn: P
Martin Pfeffer

Đây không phải là một giải pháp tốt. Lề âm dường như loại bỏ nửa dưới của mục tiêu chạm của nút. Các nhấp chuột không được đăng ký nếu tôi nhấn nửa dưới của fab.
Doronz

1
@Doronz Hmm, tôi dường như không có vấn đề đó. Là quan điểm của bạn theo đúng thứ tự, tức là FAB là lớp trên cùng?
Hugh Jeffner

23
android: layout_marginBottom = "- 32dp" giá trị mã hóa cứng với nút quấn_content là giải pháp tồi
Lester

51

Bạn có thể nhập dự án mẫu của Google trong Android Studio bằng cách nhấp vào Tệp> Nhập mẫu ...

Nhập mẫu

Mẫu này chứa Chế độ xem FloatingActionButton kế thừa từ FrameLayout.

Chỉnh sửa Với Thư viện thiết kế hỗ trợ mới, bạn có thể triển khai nó như trong ví dụ này: https://github.com/chrisbanes/cheesesapes


1
Bạn nên có Android-21 để chạy nó.
Yuliia Ashomok

Bạn nên sử dụng Thư viện thiết kế hỗ trợ nếu bạn muốn sử dụng FloatingActionButton. Xem cheesesapes của Google.
Roel

16

Với AppCompat 22, FAB được hỗ trợ cho các thiết bị cũ hơn.

Thêm thư viện hỗ trợ mới trong build.gradle (ứng dụng) của bạn:

compile 'com.android.support:design:22.2.0'

Sau đó, bạn có thể sử dụng nó trong xml của bạn:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:src="@android:drawable/ic_menu_more"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp" />

Để sử dụng elevationpressedTranslationZthuộc tính, không gian tên applà cần thiết, vì vậy hãy thêm không gian tên này vào bố cục của bạn: xmlns:app="http://schemas.android.com/apk/res-auto"


3
thêm thông tin về appkhông gian tên
Lukasz 'Severiaan' Grela 7/07/2015

14

Bây giờ nó là một phần của Thư viện Hỗ trợ Thiết kế chính thức.

Trong lớp của bạn:

compile 'com.android.support:design:22.2.0'

http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html


5
Câu trả lời của bạn hơi không rõ ràng và mơ hồ, bạn có thể giải thích thêm về phần nào của DSL và có thể trích dẫn thông tin liên quan từ trang đó.
SuperBiasedMan

Xin lỗi, tôi đã thấy rất nhiều tài liệu tham khảo đến các thư viện bên ngoài, vì vậy tôi muốn chỉ ra thư viện chính thức. Thư viện chỉ có thể tạo một nút, nhưng định vị là trên các nhà phát triển. Vì vậy, bài viết của tôi không liên quan lắm, xin lỗi.
Veronnie

12

Hãy thử thư viện này ( javadoc ở đây ), mức API tối thiểu là 7:

dependencies {
    compile 'com.shamanland:fab:0.0.8'
}

Nó cung cấp một widget có khả năng tùy chỉnh nó thông qua Theme, xml hoặc java-code.

ánh sáng giữa

Nó rất đơn giản để sử dụng. Có sẵn normalminithực hiện theo mẫu Hành động được quảng cáo .

<com.shamanland.fab.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_action_my"
    app:floatingActionButtonColor="@color/my_fab_color"
    app:floatingActionButtonSize="mini"
    />

Cố gắng biên dịch ứng dụng demo . Có một ví dụ đầy đủ: chủ đề sáng và tối, sử dụng với ListView, căn chỉnh giữa hai Chế độ xem .


3
Chỉ cần thêm vào câu trả lời này ^ Bạn cũng có thể sử dụng các thư viện backport có sẵn khác như: github.com/FaizMalkani/FloatingActionButtongithub.com/makovkastar/FloatingActionButton . Cả hai trong số đó dường như có nhiều hỗ trợ hơn. Nhưng chỉ cần làm theo chế độ xem Chi tiết từ nguồn được liệt kê trong câu trả lời này. Công trình tuyệt vời.
John Shelley

Có phải là thư viện chính thức?
Cocorico

không có thư viện chính thức đây là lib của tôi với các nguồn mở.
Oleksii K.

Nút hành động nổi này là một ví dụ xấu về cách thực hiện nó. Nó không tuân theo các nguyên tắc thiết kế vật liệu thực sự.
Michael

@Mike Milla, có gì sai với lib này? Những yêu cầu nào không được thỏa mãn?
Oleksii K.


6

Giữ cho nó đơn giản Thêm nút hành động nổi bằng TextView bằng cách tạo nền xml tròn. - Thêm biên dịch com.android.support:design:23.1.1vào tập tin gradle

  • Sử dụng Điều phối viênLayout làm chế độ xem gốc.
  • Trước khi kết thúc Điều phối viênLayout giới thiệu một TextView.
  • Bên trong Drawable vẽ một vòng tròn.

Vòng tròn Xml là

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid
        android:color="@color/colorPrimary"/>
    <size
        android:width="30dp"
        android:height="30dp"/>
</shape>

Bố cục xml là

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="5"
    >

    <RelativeLayout
        android:id="@+id/viewA"
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1.6"
        android:background="@drawable/contact_bg"
        android:gravity="center_horizontal|center_vertical"
        >
        </RelativeLayout>

    <LinearLayout
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="3.4"
        android:orientation="vertical"
        android:padding="16dp"
        android:weightSum="10"
        >

        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            >
            </LinearLayout>

        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:text="Name"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            <TextView
                android:id="@+id/name"
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="3"
                android:text="Ritesh Kumar Singh"
                android:singleLine="true"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            </LinearLayout>



        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:text="Phone"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            <TextView
                android:id="@+id/number"
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="3"
                android:text="8283001122"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:singleLine="true"
                android:padding="3dp"
                />

        </LinearLayout>



        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:text="Email"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="3"
                android:text="ritesh.singh@betasoftsystems.com"
                android:textSize="22dp"
                android:singleLine="true"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

        </LinearLayout>


        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:text="City"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="3"
                android:text="Panchkula"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:singleLine="true"
                android:padding="3dp"
                />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>


    <TextView
        android:id="@+id/floating"
        android:transitionName="@string/transition_name_circle"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="16dp"
        android:clickable="false"
        android:background="@drawable/circle"
        android:elevation="10dp"
        android:text="R"
        android:textSize="40dp"
        android:gravity="center"
        android:textColor="@android:color/black"
        app:layout_anchor="@id/viewA"
        app:layout_anchorGravity="bottom"/>

        </android.support.design.widget.CoordinatorLayout>

Nhấn vào đây để xem nó sẽ như thế nào


5

Thêm phần này vào tập tin lớp của bạn

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.0'
    compile 'com.android.support:design:23.0.1'
}

Điều này đối với Activity_main.xml của bạn

<android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <LinearLayout
                android:id="@+id/viewOne"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="0.6"
                android:background="@android:color/holo_blue_light"
                android:orientation="horizontal"/>

            <LinearLayout
                android:id="@+id/viewTwo"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="0.4"
                android:background="@android:color/holo_orange_light"
                android:orientation="horizontal"/>

        </LinearLayout>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/floatingButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:clickable="true"
            android:src="@drawable/ic_done"
            app:layout_anchor="@id/viewOne"
            app:layout_anchorGravity="bottom|right|end"
            app:backgroundTint="#FF0000"
            app:rippleColor="#FFF" />

    </android.support.design.widget.CoordinatorLayout>

Bạn có thể tìm thấy ví dụ đầy đủ với dự án studio android để tải xuống tại http://www.ahotbrew.com/android-floating-action-button/


1

đây là mã làm việc

tôi sử dụng appBarLayout để neo floatActionButton của tôi. hy vọng điều này có thể hữu ích.

MÃ XML.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_height="192dp"
        android:layout_width="match_parent">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:toolbarId="@+id/toolbar"
            app:titleEnabled="true"
            app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed"
            android:id="@+id/collapsingbar"
            app:contentScrim="?attr/colorPrimary">

            <android.support.v7.widget.Toolbar
                app:layout_collapseMode="pin"
                android:id="@+id/toolbarItemDetailsView"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"></android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context="com.example.rktech.myshoplist.Item_details_views">
            <RelativeLayout
                android:orientation="vertical"
                android:focusableInTouchMode="true"
                android:layout_width="match_parent"
                android:layout_height="match_parent">


                <!--Put Image here -->
                <ImageView
                    android:visibility="gone"
                    android:layout_marginTop="56dp"
                    android:layout_width="match_parent"
                    android:layout_height="230dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/third" />


                <ScrollView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_gravity="center"
                        android:orientation="vertical">

                        <android.support.v7.widget.CardView
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            app:cardCornerRadius="4dp"
                            app:cardElevation="4dp"
                            app:cardMaxElevation="6dp"
                            app:cardUseCompatPadding="true">

                            <RelativeLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:layout_margin="8dp"
                                android:padding="3dp">


                                <LinearLayout
                                    android:layout_width="match_parent"
                                    android:layout_height="match_parent"
                                    android:orientation="vertical">


                                    <TextView
                                        android:id="@+id/txtDetailItemTitle"
                                        style="@style/TextAppearance.AppCompat.Title"
                                        android:layout_width="match_parent"
                                        android:layout_height="wrap_content"
                                        android:layout_marginLeft="4dp"
                                        android:text="Title" />

                                    <LinearLayout
                                        android:layout_width="match_parent"
                                        android:layout_height="match_parent"
                                        android:layout_marginTop="8dp"
                                        android:orientation="horizontal">

                                        <TextView
                                            android:id="@+id/txtDetailItemSeller"
                                            style="@style/TextAppearance.AppCompat.Subhead"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:layout_marginLeft="4dp"
                                            android:layout_weight="1"
                                            android:text="Shope Name" />

                                        <TextView
                                            android:id="@+id/txtDetailItemDate"
                                            style="@style/TextAppearance.AppCompat.Subhead"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:layout_marginRight="4dp"
                                            android:gravity="right"
                                            android:text="Date" />


                                    </LinearLayout>

                                    <TextView
                                        android:id="@+id/txtDetailItemDescription"
                                        style="@style/TextAppearance.AppCompat.Medium"
                                        android:layout_width="match_parent"
                                        android:minLines="5"
                                        android:layout_height="wrap_content"
                                        android:layout_marginLeft="4dp"
                                        android:layout_marginTop="16dp"
                                        android:text="description" />

                                    <LinearLayout
                                        android:layout_width="match_parent"
                                        android:layout_height="wrap_content"
                                        android:layout_marginBottom="8dp"
                                        android:orientation="horizontal">

                                        <TextView
                                            android:id="@+id/txtDetailItemQty"
                                            style="@style/TextAppearance.AppCompat.Medium"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:layout_marginLeft="4dp"
                                            android:layout_weight="1"
                                            android:text="Qunatity" />

                                        <TextView
                                            android:id="@+id/txtDetailItemMessure"
                                            style="@style/TextAppearance.AppCompat.Medium"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:layout_marginRight="4dp"
                                            android:layout_weight="1"
                                            android:gravity="right"
                                            android:text="Messure in Gram" />
                                    </LinearLayout>


                                    <TextView
                                        android:id="@+id/txtDetailItemPrice"
                                        style="@style/TextAppearance.AppCompat.Headline"
                                        android:layout_width="match_parent"
                                        android:layout_height="wrap_content"
                                        android:layout_marginRight="4dp"
                                        android:layout_weight="1"
                                        android:gravity="right"
                                        android:text="Price" />
                                </LinearLayout>

                            </RelativeLayout>
                        </android.support.v7.widget.CardView>
                    </RelativeLayout>
                </ScrollView>
            </RelativeLayout>

        </android.support.constraint.ConstraintLayout>

    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        app:fabSize="normal"
        app:layout_anchorGravity="bottom|right|end"
        android:layout_marginEnd="@dimen/_6sdp"
        android:src="@drawable/ic_done_black_24dp"
        android:layout_height="wrap_content" />

</android.support.design.widget.CoordinatorLayout>

Bây giờ nếu bạn dán mã ở trên. bạn sẽ thấy kết quả sau trên thiết bị của bạn. Hình ảnh kết quả

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.