图标与文字里 - 如何在布局定义？ [英] Icon with text inside - how to define in layout?

问题描述

我想有一个的TextView （显示计数）悬停在动作条中的图标。我所做的就是有一个 RelativeLayout的，设置背景给它，然后将其的TextView 在布局和用螺丝缘直到它适合，但作为文本长度变化被立即断开。
设置在的TextView 背景不是很大是因为我不能在相对于图标的定位文本。

下面是我的XML：

 ＆LT;？XML版本=1.0编码=UTF-8＆GT？; ＆LT;的RelativeLayout的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
    机器人：layout_width =match_parent
    机器人：layout_height =match_parent
    机器人：方向=垂直
    机器人：layout_gravity =fill_horizo​​ntal＆GT;    ＆LT; RelativeLayout的
        机器人：layout_width =WRAP_CONTENT
        机器人：layout_height =WRAP_CONTENT
        机器人：layout_alignParentRight =真
        机器人：layout_centerVertical =真
        机器人：背景=@绘制/购物车＆GT;    ＆LT;的TextView
        机器人：ID =@ + ID / textView1
        机器人：layout_width =WRAP_CONTENT
        机器人：layout_height =WRAP_CONTENT
        机器人：文字=0
        机器人：layout_marginTop =5DP机器人：layout_marginLeft =43dp
        机器人：textAppearance =机器人：ATTR / textAppearanceMedium/＆GT;＆LT; / RelativeLayout的＆GT; ＆LT; / RelativeLayout的＆GT;
 

和这里是一个截屏向你展示我的意思：

有一个无压力的方式，也许是一个图书馆，让我树立了的TextView 超过可绘制这样的TextView始终围绕/定位？

解决方案

  

在TextView中设置的背景是不是很大可能是因为我不能相对于图标放置文本。

其实你可以将文本相对于你的图标的位置。你需要单独的车图标和数字徽章图标为单独的图像，并布置它们分别。我不得不这样做我自己不太久以前，我有一个 RelativeLayout的，与的ImageView 的做到了购物车图标和的TextView 与9补丁徽章的数字作为背景。

关键是要调整你的电话号码的TextView 到离开和底您的购物车图标的ImageView ，然后使用离开和底利润率将你的电话号码徽章推到上方并就在您的购物车图标即可。这样一来，一些徽章根据您的购物车图标始终固定。

此外，将重力你的的TextView 到中心，所以作为数字变宽，文本的相对位置大致相同。最后，使用填充在的TextView 来控制多少差距有多少的边缘与边缘之间你的徽章9补丁。

下面是我实现的一个片段（我节录一些这方面）：

 ＆LT; RelativeLayout的
        机器人：ID =@ + ID / cartButton
        机器人：layout_width =WRAP_CONTENT
        机器人：layout_height =FILL_PARENT＆GT;        ＆LT; ImageView的
            机器人：ID =@ + ID / cartIconImageView
            机器人：layout_width =WRAP_CONTENT
            机器人：layout_height =WRAP_CONTENT
            机器人：layout_centerHorizo​​ntal =真
            机器人：SRC =@绘制/ ic_menu_cart/＆GT;        ＆LT;的TextView
            机器人：ID =@ + ID / cartBadge
            机器人：layout_width =WRAP_CONTENT
            机器人：layout_height =WRAP_CONTENT
            机器人：layout_alignBottom =@ + ID / cartIconImageView
            机器人：layout_alignLeft =@ + ID / cartIconImageView
            机器人：layout_marginBottom =10dp
            机器人：layout_marginLeft =9dp
            机器人：背景=@绘制/ state_list_cart_badge
            机器人：比重=中心
            机器人：includeFontPadding =假
            机器人：行=1
            机器人：paddingLeft =8DP
            机器人：paddingRight =8DP
            机器人：文字=7/＆GT;
    ＆LT; / RelativeLayout的＆GT;
 

这是什么样子：

I want to have a TextView (to show a count) hovering over an icon in the ActionBar. What I did was have a RelativeLayout, set a background to it, then put that TextView in that layout and screw with the margin until it fits, but that is broken as soon as the text length varies. Setting a background on the TextView isn't great either because I can't position the text in relation to the icon.

Here's my XML:

<?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"
    android:layout_gravity="fill_horizontal" >

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:background="@drawable/cart" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="0"
        android:layout_marginTop="5dp"      android:layout_marginLeft="43dp"
        android:textAppearance="?android:attr/textAppearanceMedium" />

</RelativeLayout> </RelativeLayout>

and here is a screenshot to show you what I mean:

Is there a stress-free way, a library perhaps, that lets me set a TextView over a Drawable so that the TextView is always centered/ positioned?

解决方案

Setting a background on the TextView isn't great either because I can't position the text in relation to the icon.

Actually you can position your text relative to your icon. You need to separate the cart icon and the number badge icon as separate images, and lay them out individually. I had to do this myself not too long ago, and I did it with a RelativeLayout, with an ImageView of the cart icon and a TextView for the numbers with a 9-patch "badge" as the background.

The trick is to align your number TextView to the left and bottom of your cart icon ImageView, and then use the left and bottom margins to push your number badge to the top and right of your cart icon. This way, the number badge is always anchored based on your cart icon.

Also, set the gravity of your TextView to center, so as the numbers grow wider, the relative position of the text is about the same. Lastly, use padding on your TextView to control how much gap there is between the edge of the number and the edge of your "badge" 9-patch.

Here's a snippet of my implementation (I've redacted some of this):

   <RelativeLayout
        android:id="@+id/cartButton"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent" >

        <ImageView
            android:id="@+id/cartIconImageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:src="@drawable/ic_menu_cart" />

        <TextView
            android:id="@+id/cartBadge"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/cartIconImageView"
            android:layout_alignLeft="@+id/cartIconImageView"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="9dp"
            android:background="@drawable/state_list_cart_badge"
            android:gravity="center"
            android:includeFontPadding="false"
            android:lines="1"
            android:paddingLeft="8dp"
            android:paddingRight="8dp"
            android:text="7" />
    </RelativeLayout>

And this is what it looks like:

这篇关于图标与文字里 - 如何在布局定义？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！