美文网首页Android Techandroid开发
为TextView、Button控件上的文本添加图标

为TextView、Button控件上的文本添加图标

作者: 萌太浪 | 来源:发表于2016-03-31 14:19 被阅读1993次
    一丶前言

    最近做项目,需要在TextView的文本左边添加图标,临时用到,以前会的现在居然忘了,没法,只有记录下来,方便以后用到的时候,及时查询到。

    二丶静态实现

    如果只是想在TextView的文本的上下左右添加图片,在java代码中不会改变的话,可以直接在布局xml文件中写死,使用TextView的drawableLeft、drawableTop、drawableRight、drawableBottom属性就可以实现如下图的效果,使用drawablePadding属性就可以控制图片与文本之间的距离。

    静态添加实现效果图
    //实现的代码
    <TextView 
        android:id="@+id/tv_hobby_left" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:drawableLeft="@mipmap/ic_other_interest" 
        android:drawablePadding="12dp" 
        android:gravity="right|center_vertical" 
        android:paddingBottom="9dp" 
        android:paddingTop="9dp" 
        android:text="@string/other_info_interest" 
        android:textColor="@color/text_blak" 
        android:textSize="@dimen/text_size16" />
    
    
    三丶动态实现

    有时候,在xml中实现并不能满足项目的需求,比如,看用户资料,A看自己的资料时可以修改某些资料,并且在可以修改的地方有个图标提示用户这里可以修改,而A去看B的时候这个图标却是看不到,那么这是就可以在Activity中动态添加图标,进入Activity后,判断是不是A自己,如果是则添加,如果不是则不用添加,实现方法同下面,但是在实现的过程中,出现了一种情况,那就是我用setHint方法为TextView设置了文本,然后当我的文本变短后,为TextView添加上图标后,会离文本很远,这时,就需要先将hint设为空,tv.setHint(“”),然后再添加图标,文本和图标就会紧靠着了。在最近开发中我就遇到了上面的这种情况,还有下面的这种情况:

    图1

    这时可以看到在文本的右边有一个X,表示我点击文本,地址会被删除,那么删除后,这个x图标肯定不能存在,如下图:

    图2

    那这时该怎么去实现呢?很简单,只需要将这个TextView的右图标设为空,就可以咯。到这里,如上图显示的是“显示位置”,这是我们点击后,又会变成图1那样,这时又怎么做?既然能设为空,那么也就能重新添加上。

    //这是在xml布局中的TextView
    <TextView 
        android:id="@+id/tv_location" 
        android:layout_width="wrap_content" 
        android:layout_height="30dp" 
        android:gravity="center_vertical" 
        android:paddingLeft="10dp" 
        android:paddingRight="10dp" 
        android:singleLine="true" 
        android:text="@string/post_address" 
        android:textColor="@color/font_grey" 
        android:textSize="@dimen/text_size14" />
    
    //这里是实现在Activity中动态添加文本图标
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.tv_location:
            Drawable addr = ContextCompat.getDrawable(this, R.drawable.ic_address);
            Drawable addr_close = ContextCompat.getDrawable(this, R.drawable.ic_x);
            //调用setCompoundDrawables时,必须调用Drawable.setBounds()方法,否则图片不显示
            addr.setBounds(0, 0, addr.getMinimumWidth(), addr.getMinimumHeight());
            addr_close.setBounds(0, 0, addr_close.getMinimumWidth(), addr_close.getMinimumHeight());
                //这里判断location变量是否为空,来采取不同的处理方式
            if (StringUtil.isNull(location)) {
                //这里实现了图1,动态的在文本左边和右边添加了图标
                tv_location.setText(getString(R.string.post_loacating));
                tv_location.setCompoundDrawables(addr, null, addr_close, null);
                tv_location.setCompoundDrawablePadding(ContextUtil.dp2px(this, 5));
                baiduLoction();
            } else {
                //这里实现了图2,动态的在文本左边添加了图标并把右边的图标清空了
            tv_location.setText(getString(R.string.post_show_location));
                tv_location.setCompoundDrawables(addr, null, null, null);
                tv_location.setCompoundDrawablePadding(ContextUtil.dp2px(this, 5));
                location = null;
            }
        break;
        }
    }
    

    从上面的代码,我们可以看出,在文本的左上右下四个方向是可以同时设置图标的,静态实现的时候也是可以一起设置的。另外,在开发的过程,一种需求的实现方法是可以有多种方式,怎么选择就看个人的思维逻辑是怎么样的。

    这种实现在TextView、Button中都是很常用的,在Activity中除了用setCompoundDrawables这个方法实现,还有setCompoundDrawablesWithIntrinsicBounds这个方法同样能实现。

    但两者还是有区别:
    setCompoundDrawables画的drawable的宽高是按drawable.setBound()设置的宽高,所以才有The Drawables must already have had setBounds(Rect) called.意思是说使用之前必须使用Drawable.setBounds设置Drawable的长宽。
    而setCompoundDrawablesWithIntrinsicBounds是画的drawable的宽高是按drawable固定的宽高,即通过getIntrinsicWidth()与getIntrinsicHeight()获得,所以才有The Drawables’ bounds will be set to their intrinsic bounds.这句话之说!

    使用上的区别:
    调用setCompoundDrawables时,必须调用Drawable.setBounds()方法,否则图片不显示,而setCompoundDrawablesWithIntrinsicBounds则不需要。

    来自我的博客 -- 吾萌小筑

    相关文章

      网友评论

        本文标题:为TextView、Button控件上的文本添加图标

        本文链接:https://www.haomeiwen.com/subject/cwvelttx.html