Xamarin.Android实现文本外红色圆形背景的技术咨询

1. 创建圆形背景的Drawable资源 #

在项目Resources/drawable目录下新建circle_background.xml文件，定义圆形背景样式：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <!-- 设置红色填充色 -->
    <solid android:color="#CF1B00" />
    <!-- 固定圆形宽高，避免拉伸变形 -->
    <size
        android:width="24dp"
        android:height="24dp" />
    <!-- 内边距让文字在圆形中居中 -->
    <padding
        android:left="6dp"
        android:right="6dp"
        android:top="2dp"
        android:bottom="2dp" />
</shape>

2. 修改TextView布局代码 #

调整目标TextView的布局参数，去掉会导致拉伸的layout_weight，替换背景为上述Drawable，修正位置和对齐方式：

<TextView   
    android:id="@+id/txtActiveVCount"
    style="@style/ETextView.Heading"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_marginLeft="-8dp" <!-- 负边距实现和左侧ImageView的重叠效果 -->
    android:text="1"
    android:textColor="#fff"
    android:background="@drawable/circle_background"
    android:gravity="center" <!-- 文字居中显示 -->
    android:textSize="14sp" />

同时修正TableRow的权重分配（去掉圆形TextView的权重后，重新计算weightSum）：

<TableRow
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:weightSum="1.8" > <!-- 0.5(ImageView) + 1.3(txtPName) = 1.8 -->

    <ImageView
        android:id="@+id/imgPPhoto"
        android:src="@drawable/p_circle"
        style="@style/EImageView.Icon"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:layout_marginLeft="0.0dp" 
        />

    <!-- 上面修改后的圆形背景TextView -->
    <TextView   
        android:id="@+id/txtActiveVCount"
        style="@style/ETextView.Heading"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_marginLeft="-8dp"
        android:text="1"
        android:textColor="#fff"
        android:background="@drawable/circle_background"
        android:gravity="center"
        android:textSize="14sp" />

    <TextView   
        android:id="@+id/txtPName"
        style="@style/ETextView.Heading"
        android:layout_height="wrap_content"
        android:layout_weight="1.3"
        android:layout_width="0dp"
        android:layout_marginLeft="12dp"
        android:layout_gravity="left|center" />
</TableRow>

3. 动态控制显示/隐藏 #

在C#代码中，通过TextView的Visibility属性即可实现动态控制：

// 获取TextView实例
var countTextView = FindViewById<TextView>(Resource.Id.txtActiveVCount);

// 显示控件
countTextView.Visibility = ViewStates.Visible;

// 隐藏控件且不占用布局空间
countTextView.Visibility = ViewStates.Gone;

// 隐藏控件但保留布局位置
countTextView.Visibility = ViewStates.Invisible;

核心说明 #

• Shape无需嵌套TextView，直接作为TextView的背景使用即可实现文字+圆形背景的效果。
• 禁止用layout_weight控制圆形TextView的宽高，否则会因拉伸变成椭圆，使用wrap_content或固定宽高才能保持圆形。
• 通过负边距可以让圆形背景重叠在左侧ImageView上，模拟徽章效果。

内容的提问来源于stack exchange，提问作者angleUr