带有文字和边框图像外的按钮

时间:2013-08-11 20:37:15

标签: android image button

我想创建一个Button,其中一段图标不在其中,如下所示:

enter image description here

但是,使用这个xml布局:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:layout_gravity="right"
    android:descendantFocusability="afterDescendants"
    android:gravity="right"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/label"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:gravity="right"
        android:textSize="40sp" 
        android:focusableInTouchMode="false"
        android:clickable="false"
        android:focusable="false"  />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@drawable/btn_background" >

        <Button
            android:id="@+id/delete_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:background="@drawable/delete_btn"
            android:drawableRight="@drawable/delete"
            android:text="delete" />

        <Button
            android:id="@+id/button3"
            android:background="@drawable/delete_btn"
            android:drawableLeft="@drawable/share"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:text="share" />

        <Button
            android:id="@+id/like_btn"
            android:background="@drawable/delete_btn"
            android:drawableRight="@drawable/like"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginRight="15dp"
            android:layout_toLeftOf="@+id/delete_btn"
            android:text="like" />

    </RelativeLayout>

</LinearLayout>

我得到这样的事情:

enter image description here

Button的图像是否可能越过边界?

由于

更新

delete_btn.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
  <stroke android:width="1dp" android:color="#F2F2F2" /> 
  <padding android:left="7dp" android:top="1dp" 
    android:right="7dp" android:bottom="1dp" /> 
  <corners android:radius="34dp" /> 
  <solid android:color="#F2F2F2"/> 
</shape>

2 个答案:

答案 0 :(得分:0)

你可以设计你的布局,如下所示:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_gravity="right"
android:descendantFocusability="afterDescendants"
android:gravity="right"
android:orientation="vertical" >

<TextView
    android:id="@+id/label"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="right"
    android:gravity="right"
    android:textSize="40sp"
    android:focusableInTouchMode="false"
    android:clickable="false"
    android:focusable="false"  />

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="40sp"
    android:layout_gravity="center">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="5sp"
        android:layout_marginBottom="5sp"
        android:background="@drawable/delete_btn" />

    <Button
        android:id="@+id/delete_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="@android:color/transparent"
        android:drawableRight="@drawable/delete"
        android:text="delete" />

    <Button
        android:id="@+id/button3"
        android:background="@android:color/transparent"
        android:drawableLeft="@drawable/share"
        android:layout_marginTop="-5sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="share" />

    <Button
        android:id="@+id/like_btn"
        android:background="@android:color/transparent"
        android:drawableRight="@drawable/like"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginRight="15dp"
        android:layout_toLeftOf="@+id/delete_btn"
        android:text="like" />

</RelativeLayout>

答案 1 :(得分:0)

请尝试这种方式。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        android:background="@android:color/darker_gray" >

        <ImageView
            android:id="@+id/iv1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />

         <ImageView
            android:id="@+id/iv2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />

         <ImageView
            android:id="@+id/iv3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />
    </LinearLayout>

</LinearLayout>

您可以自定义 your way