草庐IT

Android:将图标和文字组合成完整的按钮

coder 2023-12-10 原文

我想建立一个代表一个人的按钮, 在右边,我想要一个大图标,上面有他的照片 在底部,我想要代表网站如 facebook 或 twitter 等的小图标

我希望按钮看起来像这张图片:imagelink

目前我的代码大致如下所示:

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

有谁知道这是否可行以及如何实现?

最佳答案

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

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>

还有必要的

  • 状态可绘制对象(背景和文本颜色的选择器),以及
  • 图层可绘制对象(正常、聚焦、按下)

res/drawable/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/drawable/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/drawable/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/drawable/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/drawable/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 View 设置一个属性,当然还有用于扩充此布局的FancyButton.java 类:

res/values/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);
    }
}

这样你就可以得到像这样的按钮:

显示上面三个按钮的 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>

关于Android:将图标和文字组合成完整的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5818076/

有关Android:将图标和文字组合成完整的按钮的更多相关文章

  1. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章? - 2

    我意识到这可能是一个非常基本的问题,但我现在已经花了几天时间回过头来解决这个问题,但出于某种原因,Google就是没有帮助我。(我认为部分问题在于我是一个初学者,我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI,但我仍然停留在这个问题上.我找到了一些关于多态关系的信息,但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

  2. 安卓apk修改(Android反编译apk) - 2

    最近因为项目需要,需要将Android手机系统自带的某个系统软件反编译并更改里面某个资源,并重新打包,签名生成新的自定义的apk,下面我来介绍一下我的实现过程。APK修改,分为以下几步:反编译解包,修改,重打包,修改签名等步骤。安卓apk修改准备工作1.系统配置好JavaJDK环境变量2.需要root权限的手机(针对系统自带apk,其他软件免root)3.Auto-Sign签名工具4.apktool工具安卓apk修改开始反编译本文拿Android系统里面的Settings.apk做demo,具体如何将apk获取出来在此就不过多介绍了,直接进入主题:按键win+R输入cmd,打开命令窗口,并将路

  3. ruby-on-rails - Rails 单选按钮 - 模型中多列的一种选择 - 2

    我希望用户从一个模型的三个选项中选择一个。即我有一个模型视频,可以被评为正面/负面/未知目前我有三列bool值(pos/neg/unknown)。这是处理这种情况的最佳方式吗?为此,表单应该是什么样的?目前我有类似的东西但显然它允许多项选择,而我试图将它限制为只有一个..怎么办? 最佳答案 如果要使用字符串列,让我们说rating。然后在你的表单中:#...#...它只允许一个选择编辑完全相同但使用radio_button_tag: 关于ruby-on-rails-Rails单选按钮-模

  4. ruby - 最多 n 的组合 - 2

    给定一个数组a,什么是实现其组合直到第n的最佳方法?例如:a=%i[abc]n=2#Expected=>[[],[:a],[:b],[:c],[:a,b],[:b,:c],[:c,:a]] 最佳答案 做如下:a=%w[abc]n=30.upto(n).flat_map{|i|a.combination(i).to_a}#=>[[],["a"],["b"],["c"],["a","b"],#["a","c"],["b","c"],["a","b","c"]] 关于ruby-最多n的组合,我

  5. ruby - Rails 组合多个 activerecord 关系 - 2

    我想合并多个事件记录关系例如,apple_companies=Company.where("namelike?","%apple%")banana_companies=Company.where("namelike?","%banana%")我想结合这两个关系。不是合并,合并是apple_companies.merge(banana_companies)=>Company.where("namelike?andnamelike?","%apple%","%banana%")我要Company.where("名字像?还是名字像?","%apple%","%banana%")之后,我会写代

  6. ruby-on-rails - 如何从按钮或链接单击的 View 调用 Rails 方法 - 2

    基本上,我试图在用户单击链接(或按钮或某种类型的交互元素)时执行Rails方法。我试着把它放在View中:但这似乎没有用。它最终只是在用户甚至没有点击“添加”链接的情况下调用该函数。我也用link_to试过了,但也没用。我开始认为没有一种干净的方法可以做到这一点。无论如何,感谢您的帮助。附言。我在ApplicationController中定义了该方法,它是一个辅助方法。 最佳答案 View和Controller是相互独立的。为了使链接在Controller内执行函数调用,您需要对应用程序中的端点执行ajax调用。该路由应调用rub

  7. ruby-on-rails - 如何在 Rails 中添加禁用的提交按钮 - 2

    我在ruby​​表单中有一个提交按钮f.submitbtn_text,class:"btnbtn-onemgt12mgb12",id:"btn_id"我想在不使用任何javascript的情况下通过ruby​​禁用此按钮 最佳答案 添加disabled:true选项。f.submitbtn_text,class:"btnbtn-onemgt12mgb12",id:"btn_id",disabled:true 关于ruby-on-rails-如何在Rails中添加禁用的提交按钮,我们在St

  8. ruby-on-rails - 从 ActiveAdmin has_many 表单助手中删除 "Add new"按钮 - 2

    我在事件管理员编辑页面中有嵌套资源,但我只想允许管理员编辑现有资源的内容,而不是添加新的嵌套资源。我的代码看起来像这样:formdo|f|f.inputsdof.input:authorf.input:contentf.has_many:commentsdo|comment_form|comment_form.input:contentcomment_form.input:_destroy,as::boolean,required:false,label:'Remove'endendf.actionsend但它在输入下添加了“添加新评论”按钮。我怎样才能禁用它,并只为主窗体保留f.ac

  9. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下,分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  10. ruby - 如何在 ruby 中组合/排列? - 2

    我有一个熟悉的问题,看起来像是数学世界的排列/组合。如何通过ruby​​实现以下目标?badges="1-2-3"badge_cascade=[]badges.split("-").eachdo|b|badge_cascade["1","2","3"]ButIwantittobeis:=>["1","2","3","1-2","2-3","3-1","2-1","3-2","1-3","1-2-3","2-3-1","3-1-2"] 最佳答案 函数式方法:bs="1-2-3".split("-")strings=1.upto(bs.

随机推荐