如何在另一个视图的边框上居中视图？答案

【问题标题】：How to center view on border of another view?如何在另一个视图的边框上居中视图？
【发布时间】：2018-07-23 01:57:07
【问题描述】：

我环顾四周，没有找到答案。我正在为 Android 构建一个应用程序，但我找不到实现此目的的方法：iOS App Screenshot

我在 iOS 上很容易做到，但我在 Android 上遇到了问题。任何帮助，将不胜感激。谢谢！

这是我目前在我的 Android 应用程序上的内容：Android App Screenshot

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="8dp"
        android:layout_weight="1"
        android:background="@color/chronoBgColor"
        android:orientation="horizontal"
        tools:layout_editor_absoluteX="41dp"
        tools:layout_editor_absoluteY="247dp">

        <TextView
            android:id="@+id/shockTimerTextView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:fontFamily="sans-serif-heavy"
            android:gravity="center"
            android:text="00:00:00"
            android:textColor="@color/chronoFontColor"
            android:textSize="36sp"
            android:typeface="monospace" />

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <Button
                android:id="@+id/shockTimerButton"
                style="@style/Widget.AppCompat.Button.Borderless"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@color/shockColor"
                android:fontFamily="sans-serif-light"
                android:text="SHOCK"
                android:textColor="@android:color/white"
                android:textSize="24sp" />

            <TextView
                android:id="@+id/activityCountTextView"
                android:layout_width="16dp"
                android:layout_height="25dp"
                android:layout_gravity="center_vertical|right"
                android:background="@android:color/black"
                android:gravity="center"
                android:text="0"
                android:includeFontPadding="false"
                android:textColor="@android:color/white"
                android:textSize="24sp" />
        </FrameLayout>

    </LinearLayout>

【问题讨论】：

你可以使用负边距
谢谢！我试过了，结果我需要让 clipChildren 为 false

标签： android user-interface layout

【解决方案1】：

您可以尝试以下方法：

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="16dp"
        android:weightSum="2">

        <TextView
            android:id="@+id/shockTimerTextView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:fontFamily="sans-serif-heavy"
            tools:text="00:00:00"
            android:textColor="@android:color/darker_gray"
            android:textSize="36sp"
            android:typeface="monospace" />
        
        <Button
            android:id="@+id/shockTimerButton"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@color/colorAccent"
            android:fontFamily="sans-serif-light"
            tools:text="SHOCK"
            android:layout_gravity="center"
            android:textColor="@android:color/white" />

    </LinearLayout>

    <TextView
        android:id="@+id/activityCountTextView"
        android:layout_width="24dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|end"
        android:background="@android:color/black"
        android:gravity="center"
        android:layout_marginEnd="4dp"
        android:textColor="@android:color/white"
        android:textSize="24sp"
        tools:text="0" />
    
</FrameLayout>

这会产生：

【讨论】：

这太棒了！谢谢！我还使用了 android:clipChildren="false" 因为我正在嵌套 LinearLayouts。

【解决方案2】：

要获得这种外观，您可以将以下代码行添加到您的 shockTimerButton 视图中：

android:layout_marginEnd="8dp"

使用了 8dp，因为它是 activityCountTextView 视图宽度的一半。

所以最终的解决方案看起来像这样：

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="8dp"
android:layout_weight="1"
android:background="@color/chronoBgColor"
android:orientation="horizontal">

<TextView
    android:id="@+id/shockTimerTextView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:fontFamily="sans-serif-heavy"
    android:gravity="center"
    android:text="00:00:00"
    android:textColor="@color/chronoFontColor"
    android:textSize="36sp"
    android:typeface="monospace" />

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1">

    <Button
        android:id="@+id/shockTimerButton"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@color/shockColor"
        android:fontFamily="sans-serif-light"
        android:text="SHOCK"
        android:layout_marginEnd="8dp"
        android:textColor="@android:color/white"
        android:textSize="24sp"/>

    <TextView
        android:id="@+id/activityCountTextView"
        android:layout_width="16dp"
        android:layout_height="25dp"
        android:layout_gravity="center_vertical|right"
        android:background="@android:color/black"
        android:gravity="center"
        android:text="0"
        android:includeFontPadding="false"
        android:textColor="@android:color/white"
        android:textSize="24sp" />
</FrameLayout>

</LinearLayout>

【讨论】：