Android控件覆盖并实现简单标签

  有的时候，我们需要一个View覆盖在另外一个View上,并且需要这个View覆盖于另一个View特定的位置

  下面根据实现一个类似于其它App上的历史记录标签或者热点标签的Demo来讲解  

  示例:

   

  想实现上面这种效果，首先要分清button与其右上角的deleteView的位置关系，从图中可以看出，deleteView的中心是button的右上角

  所以，可以让deleteView的右边与button的右边相等(这样deleteView的右边就是由button的右边来限制)，然后deleteView距离右边-15dp

  deleteView的上边与button的上边相等，然后距离上边-15dp，好了，贴上代码

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent"
     tools:context=".MainActivity">


    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignTop="@+id/button"
        android:layout_marginTop="-15dp"
        android:layout_alignRight="@+id/button"
        android:layout_marginRight="-15dp"
        android:src="@drawable/buttonDelete"/>

    <Button
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_marginTop="30dp"
        android:layout_marginLeft="30dp"
        android:id="@+id/button"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:background="@android:color/holo_red_dark"
        android:text="标签" />


</RelativeLayout>

但是，这么做了之后你会看到一个奇怪的现象，就是button居然在deleteButton的上边！这真是让人抓狂

 之所以这样，我认为，是因为我们使用的 RelativeLayout 中包含的View是有层叠顺序的，意思是，布局文件中在上的在底层，在上的在上层，所以我猜测在java代码给RelativeLayout添加View也会是旧的在底层，新的在上层

 所以，正确的代码是这样的： 

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_marginTop="30dp"
        android:layout_marginLeft="30dp"
        android:id="@+id/button"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:background="@android:color/dim_foreground_disabled_holo_dark"
        android:text="标签" />


    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignTop="@+id/button"
        android:layout_marginTop="-15dp"
        android:layout_alignRight="@+id/button"
        android:layout_marginRight="-15dp"
        android:src="@drawable/buttonDelete"/>


</RelativeLayout>

 把button的颜色换成浅灰色，就成了文章初的那个图片的效果了