Android下Button实现图文混排效果

Button实现图文混排效果,具体内容如下

一、简介

本文介绍两种图文混排方式

1、android:drawableTop="@drawable/star"实现文字上有图片

当然有上下左右等等

2、SpannableString的ImageSpan实现图文混排

二、代码实例

效果图:

一二三四是用的第一种方式

下面的用的第二种方式

代码:

fry.Activity02

package fry;

import com.example.buttonDemo1.R;

import android.app.Activity;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.text.Spannable;
import android.text.SpannableString;
import android.text.style.ImageSpan;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnFocusChangeListener;
import android.view.View.OnTouchListener;
import android.widget.Button;

public class Activity02 extends Activity {
  private Button btn_big;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity02);
    btn_big=(Button) findViewById(R.id.btn_big);

    //SpannableString的ImageSpan添加左边图片
    SpannableString spannableString1=new SpannableString("left");
    ImageSpan imageSpan=new ImageSpan(this, BitmapFactory.decodeResource(getResources(), R.drawable.image_left));
    spannableString1.setSpan(imageSpan, 0, 4, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

    //SpannableString的ImageSpan添加右边图片
    SpannableString spannableString2=new SpannableString("right");
    ImageSpan imageSpan2=new ImageSpan(this, BitmapFactory.decodeResource(getResources(), R.drawable.image_right));
    spannableString2.setSpan(imageSpan2, 0, 5, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

    btn_big.append(spannableString1);
    btn_big.append("我的按钮");
    btn_big.append(spannableString2);
  }
}

/buttonDemo1/res/layout/activity02.xml

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

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    >

    <!--android:drawableTop="@drawable/star"实现文字上有图片 -->
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="一"
      android:drawableTop="@drawable/star"
      />

    <!--android:drawablePadding="30dp实现文字和文字上的图片中间有30dp的空隙 -->
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="二"
      android:drawableTop="@drawable/star"
      android:drawablePadding="30dp"
      />

    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="三"
      android:drawableRight="@drawable/star"
      />

    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="四"
      android:drawableLeft="@drawable/star"
      />
  </LinearLayout>

  <Button
    android:id="@+id/btn_big"
    android:layout_width="180dp"
    android:layout_height="200dp"

    />

</LinearLayout>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android中使用TextView实现图文混排的方法

    向TextView或EditText中添加图像比直接添加文本复杂一点点,需要用到<img>标签. <img>只有一个src属性,该属性原则上应该指向一个图像地址或可以找到某个图像资源的唯一标识.但要注意的是,系统并不会直接根据src属性所指的值自动获取和显示图像,这一切都需要我们去做.说白了,src属性指的是什么只有开发者自己知道.开发者需要告诉系统src属性到底指的是什么,然后系统才会知道怎么做. 解析src属性值需要ImageGetter对象的getDrawable方法来完成.

  • Android下Button实现图文混排效果

    Button实现图文混排效果,具体内容如下 一.简介 本文介绍两种图文混排方式 1.android:drawableTop="@drawable/star"实现文字上有图片 当然有上下左右等等 2.SpannableString的ImageSpan实现图文混排 二.代码实例 效果图: 一二三四是用的第一种方式 下面的用的第二种方式 代码: fry.Activity02 package fry; import com.example.buttonDemo1.R; import andro

  • 详解Android SpannableString多行图文混排的应用实战

    TeXtView大家应该都不陌生,文本展示控件嘛! 就用TextView显示普普通通的文本,OK,很简单,Android入门的都会,没入门的在门缝外看两眼也都会,哈哈,开玩笑.那要是设计在开发需求中要求类似微信聊天表情一样在TextView中插入表情图片呢? 有的小伙伴就会说啦,"TextView添加图片我会啊,不就是drawableLeft,drawableRight嘛!" 嗯 ~ 也行,算是一种方法,可这有一个限制,首先,图片只能在TextView的两端,其次,两端都只能设置一张图

  • iOS利用NSAttributedString实现图文混排效果示例

    前言 NSAttributedString 可以非常方便的实现文字排版和图文混排功能,UILabel 和 UITextView 都能添加 NSAttributedString 属性字符串,通过这一点,可以实现带有属性的文字和文字内包含图片的文本内容展示.话不多说了,下面来一起看看详细的介绍吧. 效果如下: 示例代码如下: 1-初始化可变属性字符串 NSMutableAttributedString *attributedString = [[NSMutableAttributedString a

  • Android控件RecyclerView实现混排效果仿网易云音乐

    前言 最近在使用网易云音乐的时候,看到如下图的排版效果图,自己也想实现一个 这里采用网上用法最多的方式,而且是比较简单的方式实现的,想要做项目的同学也可以快速入手搞定首页界面,可以在最快的时间内模仿出来,且效果达到90%以上的相似 效果演示 至于图片的加载你们可以根据网上的Api获取相应的图片加载到对应的位置,这里只是采用本地图片来演示 实现分析 这里是采用RecyclerView的GridLayoutManager的一个SpanSize这么一个东西,从下图很容易知道其意思 项目结构 项目结构可

  • Android实现文字和图片混排(文字环绕图片)效果

    本文实例讲述了Android实现文字和图片混排(文字环绕图片)效果.分享给大家供大家参考,具体如下: 在平时我们做项目中,或许有要对一张图片或者某一个东西进行文字和图片说明,这时候要求排版美观,所以会出现文字和图片混排的情况,如图: 这种情况就是上下两个文字说明是连续在一起的,这就要求我们计算上面的文字说明怎么和下面的文字说明连贯结合在一起呢,这就要求我们进行计算了,下面给出代码,代码中也有详细的注释,原理也很简单. 因为算是比较简单,直接就在activity中去计算了: package com

  • IOS 图文混排(CoreText.framework)详解及实例

    IOS 图文混排(CoreText.framework)        本文主要介绍了IOS图文混排的资料,这里整理了在网上查找的内容,帮助理解,掌握这部分知识,以下就是整理的内容: 利用CORETEXT进行图文混排. 实现代码: void RunDelegateDeallocCallback( void* refCon ){ } CGFloat RunDelegateGetAscentCallback( void *refCon ){ NSString *imageName = (NSStri

  • Android中button点击后字体的变色效果

    button的点击效果无疑是非常简单的,以致于我懒到当UI告诉我说在点击的时候button字体的颜色也要随着背景改变的时候我毫不犹豫的告诉他让他切两个图过来,后来想想着实是不太靠谱,于是了解了一下如何添加button点击的字体颜色变化效果. 1.首先你要在你的color文件下加入几个你需要的色值,注意不同的是不是一般的color标签,而是drawable标签,就像这样: <drawable name="color_red">#fffa3d39</drawable>

  • Qt数据库应用之实现数据图文混排

    目录 一.前言 二.功能特点 三.体验地址 四.效果图 五.相关代码 一.前言 除了能够打印基本的文字信息数据到pdf和纸张,越来越多的应用需求还要求能够导出图片,并且要支持图文混排,相当于doc文档类似,当然也不会是太复杂的,类似于打印报表一样,有表格形式的文字描述,也有对应的图片插入其中,图文混排的应用场景还真不少比如医疗行业输出诊断结果往往都带了图片.于是针对这个需求特意开辟了新的类DataCreat专门生成报表的数据,将生成好的数据体直接传入给DataPrint类即可,如果有各种各样的不

  • CSS图文混排的几种方案

    百度新闻首页的方案: 复制代码 代码如下: <table> <tbody> <tr> <td class="topic-pic"><a href=""><img src=""></a></td> <td class="topic-txt">-</td> </tr> </tbody>&l

随机推荐