Question

我想构建一个代表一个人的按钮，在右边我想要一个大图标，这是他的照片在底部我想要小的图标，代表网站作为Facebook或推特左右

我希望按钮看起来像这样的图像：imagelink

目前我的代码看起来大致如下：

  Button button = new Button(getApplicationContext());
  button.setText(friend.getName());
  button.setCompoundDrawablesWithIntrinsicBounds(
          getResources().getDrawable(R.drawable.image),
          null,
          null,
          getResources().getDrawable(R.drawable.facebook));

有人知道这是否可行以及如何做到这一点？

Answer 1

您可以创建自己的“按钮”布局，例如：

<强> fancy_button.xml ：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:focusable="true" android:focusableInTouchMode="false"
    android:clickable="true" android:padding="5dp"
    android:background="@drawable/button_background_selector">
    <ImageView android:id="@+id/personimage" 
        android:layout_width="80dp" android:layout_height="fill_parent"
        android:layout_centerVertical="true" android:scaleType="fitCenter"
        android:paddingRight="5dp" />
    <TextView android:id="@+id/personname" android:duplicateParentState="true"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:singleLine="true" android:layout_toRightOf="@id/personimage"  
        android:layout_alignParentRight="true" android:layout_centerVertical="true" 
        android:textColor="@drawable/button_text_selector" />
    <ImageView android:id="@+id/thumb1" android:scaleType="fitCenter" 
        android:layout_width="25dp" android:layout_height="25dp"
        android:layout_toRightOf="@id/personimage" 
        android:layout_alignParentBottom="true" />
    <ImageView android:id="@+id/thumb2" android:scaleType="fitCenter" 
        android:layout_width="25dp" android:layout_height="25dp"
        android:layout_toRightOf="@id/thumb1" 
        android:layout_alignParentBottom="true" />
    <ImageView android:id="@+id/thumb3" android:scaleType="fitCenter" 
        android:layout_width="25dp" android:layout_height="25dp"
        android:layout_toRightOf="@id/thumb2" 
        android:layout_alignParentBottom="true"  />
</RelativeLayout>

还有必要的

状态drawables（背景和文本颜色的选择器）和
图层绘图（正常，聚焦，按下）

<强> RES /抽拉/ button_text_selector ：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="@color/fb_text_pressed" />
    <item android:state_focused="true" android:color="@color/fb_text_focused" />
    <item android:color="@color/fb_text" />
</selector>

<强> RES /抽拉/ button_background_selector ：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" 
        android:drawable="@drawable/button_selected" />
    <item android:state_focused="true" 
        android:drawable="@drawable/button_focused" />
    <item android:drawable="@drawable/button_normal" />
</selector>

<强> RES /抽拉/ button_normal.xml ：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="2dp" android:bottom="2dp">
        <shape android:shape="rectangle">
            <gradient android:angle="-90"
                android:startColor="@color/fb_border_start" 
                android:centerColor="@color/fb_border_center"
                android:endColor="@color/fb_border_end" />
            <corners android:bottomRightRadius="10dp"
                android:bottomLeftRadius="10dp" android:topLeftRadius="10dp"
                android:topRightRadius="10dp" />
        </shape>
    </item>
    <item android:top="4dp" android:left="2dp" android:right="2dp"
        android:bottom="4dp">
        <shape android:shape="rectangle">
            <gradient android:angle="90"
                android:startColor="@color/fb_normal_start" 
                android:centerColor="@color/fb_normal_center"
                android:endColor="@color/fb_normal_end" />
            <corners android:bottomRightRadius="8dp"
                android:bottomLeftRadius="8dp" android:topLeftRadius="8dp"
                android:topRightRadius="8dp" />
        </shape>
    </item>
</layer-list>

<强> RES /抽拉/ button_focused.xml ：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="2dp" android:bottom="2dp">
        <shape android:shape="rectangle">
            <gradient android:angle="-90"
                android:startColor="@color/fb_border_start" 
                android:centerColor="@color/fb_border_center"
                android:endColor="@color/fb_border_end" />
            <corners android:bottomRightRadius="10dp"
                android:bottomLeftRadius="10dp" android:topLeftRadius="10dp"
                android:topRightRadius="10dp" />
        </shape>
    </item>
    <item android:top="4dp" android:left="2dp" android:right="2dp"
        android:bottom="4dp">
        <shape android:shape="rectangle">
            <gradient android:angle="90"
                android:startColor="@color/fb_focused_start" 
                android:centerColor="@color/fb_focused_center"
                android:endColor="@color/fb_focused_end" />
            <corners android:bottomRightRadius="8dp"
                android:bottomLeftRadius="8dp" android:topLeftRadius="8dp"
                android:topRightRadius="8dp" />
        </shape>
    </item>
</layer-list>

<强> RES /抽拉/ button_selected.xml ：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="2dp" android:bottom="2dp">
        <shape android:shape="rectangle">
            <gradient android:angle="-90"
                android:startColor="@color/fb_border_start" 
                android:centerColor="@color/fb_border_center"
                android:endColor="@color/fb_border_end" />
            <corners android:bottomRightRadius="10dp"
                android:bottomLeftRadius="10dp" android:topLeftRadius="10dp"
                android:topRightRadius="10dp" />
        </shape>
    </item>
    <item android:top="4dp" android:left="2dp" android:right="2dp"
        android:bottom="4dp">
        <shape android:shape="rectangle">
            <gradient android:angle="90"
                android:startColor="@color/fb_selected_start" 
                android:centerColor="@color/fb_selected_center"
                android:endColor="@color/fb_selected_end" />
            <corners android:bottomRightRadius="8dp"
                android:bottomLeftRadius="8dp" android:topLeftRadius="8dp"
                android:topRightRadius="8dp" />
        </shape>
    </item>
</layer-list>

您可以在 res / values / colors.xml 中指定正确的颜色值：

<color name="fb_border_start">#AAAAAA</color>
<color name="fb_border_center">#888888</color>
<color name="fb_border_end">#666666</color>

<color name="fb_normal_start">#088F8F8F</color>
<color name="fb_normal_center">#08656565</color>
<color name="fb_normal_end">#083F3F3F</color>

<color name="fb_focused_start">#8F8F8F</color>
<color name="fb_focused_center">#656565</color>
<color name="fb_focused_end">#3F3F3F</color>

<color name="fb_selected_start">#EAEAEA</color>
<color name="fb_selected_center">#9F9F9F</color>
<color name="fb_selected_end">#696969</color>

<color name="fb_text">#FF6600</color>
<color name="fb_text_focused">#F8F8F8</color>
<color name="fb_text_pressed">#00AAEE</color>

现在您只需要为此FancyButton视图设置一个属性集，当然还有FancyButton.java类来扩展此布局：

<强> RES /值/ attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="FancyButton">
        <attr name="text" format="string|reference" />
        <attr name="icon" format="reference" />
        <attr name="thumb1" format="reference" />
        <attr name="thumb2" format="reference" />
        <attr name="thumb3" format="reference" />
    </declare-styleable>
</resources>

<强> FancyButton.java

package com.yourpackage.sample;

public class FancyButton extends RelativeLayout
{
    private String label;
    private int icon;
    private int thumb1, thumb2, thumb3;

    /**
     * @param context
     */
    public FancyButton(Context context)
    {
        super(context);
        initAttributes(context, null);
    }

    /**
     * @param context
     * @param attrs
     */
    public FancyButton(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        initAttributes(context, attrs);
    }

    /**
     * @param context
     * @param attrs
     * @param defStyle
     */
    public FancyButton(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
        initAttributes(context, attrs);
    }

    private void initAttributes(Context context, AttributeSet attrs)
    {
        LayoutInflater.from(context).inflate(R.layout.fancy_button, this, true);
        TypedArray a = 
            context.obtainStyledAttributes(attrs, R.styleable.FancyButton);

        final int N = a.getIndexCount();
        for (int i = 0; i < N; ++i)
        {
            int attr = a.getIndex(i);
            switch (attr)
            {
                case R.styleable.FancyButton_text:
                    setLabel(a.getString(attr));
                    break;
                case R.styleable.FancyButton_icon:
                    setIcon(a.getResourceId(attr, 0));
                    break;
                case R.styleable.FancyButton_thumb1:
                    setThumb1(a.getResourceId(attr, 0));
                    break;
                case R.styleable.FancyButton_thumb2:
                    setThumb2(a.getResourceId(attr, 0));
                    break;
                case R.styleable.FancyButton_thumb3:
                    setThumb3(a.getResourceId(attr, 0));
                    break;
            }
        }
        a.recycle();
    }

    public String getLabel()
    {
        return this.label;
    }

    public void setLabel(final String label)
    {
        this.label = label;
        ((TextView)findViewById(R.id.personname)).setText(this.label);
    }

    /**
     * @return the icon
     */
    public int getIcon()
    {
        return icon;
    }

    /**
     * @param icon the icon to set
     */
    public void setIcon(int icon)
    {
        this.icon = icon;
        ((ImageView)findViewById(R.id.personimage)).setImageResource(this.icon);
    }

    /**
     * @return the thumb1
     */
    public int getThumb1()
    {
        return thumb1;
    }

    /**
     * @param thumb1 the thumb1 to set
     */
    public void setThumb1(int thumb1)
    {
        this.thumb1 = thumb1;
        ((ImageView)findViewById(R.id.thumb1)).setImageResource(this.thumb1);
    }

    /**
     * @return the thumb2
     */
    public int getThumb2()
    {
        return thumb2;
    }

    /**
     * @param thumb2 the thumb2 to set
     */
    public void setThumb2(int thumb2)
    {
        this.thumb2 = thumb2;
        ((ImageView)findViewById(R.id.thumb2)).setImageResource(this.thumb2);
    }

    /**
     * @return the thumb3
     */
    public int getThumb3()
    {
        return thumb3;
    }

    /**
     * @param thumb3 the thumb3 to set
     */
    public void setThumb3(int thumb3)
    {
        this.thumb3 = thumb3;
        ((ImageView)findViewById(R.id.thumb3)).setImageResource(this.thumb3);
    }
}

这样你就可以得到如下按钮：

fancy buttons activity

显示上述三个按钮的活动布局为：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res/com.yourpackage.sample"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:orientation="vertical">
    <com.yourpackage.sample.FancyButton android:id="@+id/fbtn1"
        android:layout_width="200dp" android:layout_height="90dp"
        custom:text="Normal state" custom:icon="@drawable/network_error"
        custom:thumb1="@drawable/connected" custom:thumb2="@drawable/disconnected"
        custom:thumb3="@drawable/network" />
    <com.yourpackage.sample.FancyButton android:id="@+id/fbtn2"
        android:layout_width="200dp" android:layout_height="90dp"
        custom:text="Focused state" custom:icon="@drawable/connected"
        custom:thumb1="@drawable/network" custom:thumb2="@drawable/network_error"
        custom:thumb3="@drawable/disconnected" />
    <com.yourpackage.sample.FancyButton android:id="@+id/fbtn3"
        android:layout_width="200dp" android:layout_height="90dp"
        custom:text="Pressed state" custom:icon="@drawable/disconnected"
        custom:thumb1="@drawable/network_error" custom:thumb2="@drawable/connected"
        custom:thumb3="@drawable/network" />
</LinearLayout>

Answer 2

您需要从布局创建自己的小部件（如@dbrettschneider所述）。例如：

class YourView extends LinearLayout implements OnClickListener {
// constructor
public YourView(Context context) {
    super(context);
    // layout.you_view - is your xml layout
    LayoutInflater.from(context).inflate(R.layout.you_view, this, true);
    .....
    // init your view elemnts - imageView, TextView, etc.       
    setOnClickListener(this);
}
    @Override
    public void onClick(View v) {
        // implements your actions
    }
}

Answer 3

我会将文本和图像放在布局中，并在布局上设置单击侦听器。然后你有了复杂的按钮。

Android：将图标和文本组合成完整按钮

3 个答案: