Android：在按钮的右上角对齐图像答案

【问题标题】：Android : Align image on top right hand corner of buttonAndroid：在按钮的右上角对齐图像
【发布时间】：2014-06-09 11:09:17
【问题描述】：

我有一个看起来像复选框的图像，我想在按钮的右上角对齐。已尝试相对布局，但无法达到预期效果。有什么建议可以达到预期的效果吗？

我尝试过使用 Framelayout，但复选框图像仍然隐藏

 <FrameLayout 
         android:layout_marginLeft="10dp"
        android:layout_marginTop="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">


        <ImageView 
            android:id="@+id/filter_check"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:background="@drawable/checkmark"
             android:layout_gravity="right"
            />

         <Button
            android:id="@+id/filter"
            style="@style/Widget.Button.White.BlueText.BlueStroke"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Filter" />


    </FrameLayout>

在 Farouk 建议使用 Button before image 之后。这是代码

<FrameLayout 
     android:layout_marginLeft="10dp"
    android:layout_marginTop="20dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <Button
        android:id="@+id/filter"
        style="@style/Widget.Button.White.BlueText.BlueStroke"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Filter" />

      <ImageView 
        android:id="@+id/filter_check"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:background="@drawable/checkmark"
         android:layout_gravity="top|right"
        />

</FrameLayout>

这是我在设计师身上看到的。

不确定如何上下移动复选框图像。

如果您需要解决方案，这里是：

<FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="80dp" >

        <Button
            android:id="@+id/filter"
            style="@style/Widget.Button.White.BlueText.BlueText.FrameImage"
            android:layout_margin="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Sort" />

        <ImageView
            android:id="@+id/widget_title_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top|right"
            android:src="@drawable/checkmark" />
    </FrameLayout>


  <style name="Widget.Button.White.BlueText.BlueText.FrameImage" parent="@android:style/Widget.Button">
        <item name="android:background">@drawable/white_button_blue_stroke_bg_selector</item>
        <item name="android:gravity">center</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:textAppearance">?android:attr/textAppearanceMedium</item>
    </style>

解决方案：

【问题讨论】：

使用 FrameLayout 怎么样？
按钮应该在 ImageView 之前。届时它将适用于 yoy。
@FaroukTouzi 这有帮助，但我无法正确对齐复选框图像。
请编辑您的回复并再次显示您的代码。
@FaroukTouzi 我改了，请看一下。

标签： android android-layout

【解决方案1】：

看起来像这样：

随心所欲地使用android:paddingTop="-10dp"。

这里是代码：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/widget_icon"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/filter"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="7dp"
            android:background="#0000FF"
            android:gravity="center"
            android:paddingBottom="25dp"
            android:paddingTop="25dp"
            android:text="Sort"
            android:textColor="#FFFFFF" />

        <ImageView
            android:id="@+id/widget_title_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top|right"
            android:adjustViewBounds="true"
            android:paddingTop="-10dp"
            android:scaleType="fitStart"
            android:src="@drawable/checkbtn" />

    </FrameLayout>

【讨论】：

我试过了，但是按钮上的 layout_margin="7dp" 并没有给我想要的按钮形状。当我删除按钮上的边距并尝试调整 Imageview 的 paddingTop 时，它会被剪裁。我认为这是预期的行为。将尝试使用填充和边距。
我可以通过调整边距和内边距使其工作。谢谢！
当我在设计器中看到时，我可以看到所需的关闭。但是当我运行应用程序时，它是不可见的。怎么样？

【解决方案2】：

检查一下，希望对您有所帮助。

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_widget"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="20dip"
    android:focusable="true" >

    <ImageView
        android:id="@+id/icon"
        android:layout_width="60dip"
        android:layout_height="60dip"
        android:layout_marginTop="8dp"
        android:background="@drawable/ic_launcher"
        android:scaleType="center" />


    <CheckBox
        android:id="@+id/checkBox1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="-10dip"
        android:layout_toRightOf="@+id/icon"
        android:gravity="center"
        android:text="" />

    </RelativeLayout>

编辑如果您想将复选框稍微移到 imageview，请将android:layout_marginLeft="-10dip" 增加到android:layout_marginLeft="-20dip"。只是玩它。 :)

【讨论】：

感谢您的帮助，但它的图像看起来像一个复选框。不是复选框。想要在 Android 中的常规按钮的右上角对齐图像。
将复选框替换为 ImageView。这是总体布局。如果它对您有帮助，请接受我的回答，以便其他面临同样问题的人轻松。

【解决方案3】：

如果有人想在可绘制对象上添加点（使用图层列表创建一个新的可绘制对象，右上角带有点）

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/any_drawable">
    </item>
    <item android:drawable="@drawable/active_dot"  android:gravity="right|top"/>
</layer-list>

active_dot.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" android:useLevel="true"
    android:dither="true">

    <size android:height="12dip" android:width="12dip"/>

    <solid android:color="#B01212"/>
</shape>

【讨论】：