如何在android中实现FrameLayout功能

Question

嗨，我是Android的新手，在我的应用程序中我正在使用FrameLayout

我的问题是我想设计我的屏幕，如下图1

但根据我的代码，我得到的是我的下图2，请帮助我如何做到这一点

代码： -

<?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="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginTop="250dp"
        android:orientation="horizontal"
        android:weightSum="3">

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:background="@color/splash"
                android:padding="5dp">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_launcher" />

            </FrameLayout>

            <TextView
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:layout_gravity="top|right"
                android:layout_marginRight="-20dp"
                android:layout_marginTop="-10dp"
                android:background="@android:color/holo_orange_dark"
                android:gravity="center"
                android:text="1"
                android:textColor="@android:color/white" />

        </FrameLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="30dp">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:background="@color/splash"
                android:padding="5dp">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_launcher" />
            </FrameLayout>

            <TextView
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:layout_gravity="top|right"
                android:layout_marginRight="-20dp"
                android:layout_marginTop="-10dp"
                android:background="@android:color/holo_orange_dark"
                android:gravity="center"
                android:text="2"
                android:textColor="@android:color/white" />

        </FrameLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="30dp">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:background="@color/splash"
                android:padding="5dp">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_launcher" />

            </FrameLayout>

            <TextView
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:layout_gravity="top|right"
                android:layout_marginRight="-20dp"
                android:layout_marginTop="-10dp"
                android:background="@android:color/holo_orange_dark"
                android:gravity="center"
                android:text="3"
                android:textColor="@android:color/white" />

        </FrameLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="30dp">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:background="@color/splash"
                android:padding="5dp">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_launcher" />

            </FrameLayout>

            <TextView
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:layout_gravity="top|right"
                android:layout_marginRight="-20dp"
                android:layout_marginTop="-10dp"
                android:background="@android:color/holo_orange_dark"
                android:gravity="center"
                android:text="4"
                android:textColor="@android:color/white" />

        </FrameLayout>

    </LinearLayout>

</LinearLayout>

image1的： -

IMAGE2： -

Answer 1

所以不要撒谎，当我开始在Android中使用XML时，我讨厌它。这就像把拼图放在一起，甚至不知道拼图是什么。无论如何，你开始掌握它，并提出一些有趣的想法。有很多方法可以处理你的观点，这样的事情应该有效。

制作一个名为view_notification_icon.xml的布局，如下所示：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap-content"
    android:layout_height="wrap-content"
    android:layout_margin="10dp" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="18dp"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/tv_count"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:background="@android:color/holo_orange_dark"
        android:gravity="center"
        android:text="3"
        android:textColor="@android:color/white" />

</RelativeLayout>

如果图像源需要缩放，您可以根据需要在ImageView上使用min / max height，scaleType和adjustViewBounds属性

然后你可以像这样提供主容器布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <include layout="@layout/view_notification_icon" id="@+id/icon_1" />

    <include layout="@layout/view_notification_icon" id="@+id/icon_2" />

    <include layout="@layout/view_notification_icon" id="@+id/icon_3" />

    <include layout="@layout/view_notification_icon" id="@+id/icon_4" />
</LinearLayout>

然后在java中你可以像这样访问/修改图标文本

private void modifyNotificationValue(int containerID, int count){
    View container = findViewById(containerID);
    ((TextView) container.findViewById(R.id.tv_count)).setText(String.valueOf(count));
}

注意

显然，这可以提高效率（在onCreate中获取视图，因此您不会过度使用findViewById）;我也没有对此进行测试，因此可能需要进行一些调整，但它应该会帮助你开始。