Android柳叶刀之Button之图文并茂
传送门 ☞ 轮子的专栏 ☞ 转载请注明 ☞ http://blog.csdn.net/leverage_1229
柳叶刀
使刀的正是那蓝衫女郎阿珂,她见澄观缩手,柳叶刀疾翻,向他腰间横扫。便在这时,绿衫女郎也已从松林中窜出,挥刀向韦小宝砍去。
今天我们学习如何利用Android平台“柳叶刀”Button实现图文混搭的风格,下面给出该情景的案例:
1案例技术要点
(1)android.text.SpannableString:提供一个总体文本是不可变的,但是支持局部对象(它所标记的)可以附加或分离。
(2)android.text.style.ImageSpan:为SpannableString附加Bitmap对象。
(3)SpannableString类setSpan(...):设置Bitmap、显示文本内容和显示样式。
(4)Spanned.SPAN_EXCLUSIVE_EXCLUSIVE:表示在当前文本前端和后端新增字符均不采用当前显示效果。
(5)Spanned.SPAN_INCLUSIVE_INCLUSIVE:表示在当前文本前端和后端新增字符均采用当前显示效果。
2案例代码陈列
2.1AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.android.button" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="15" /> <application android:icon="@drawable/ic_launcher" android:label="@string/app_name" > <activity android:name=".ButtonMainActivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>
2.2strings.xml
<resources> <string name="app_name">Button实现图文混搭风格</string> <string name="button1">按钮一</string> <string name="button2">按钮二</string> <string name="button3">按钮三</string> <string name="button4">按钮四</string> </resources>
2.3main.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 xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableTop="@drawable/star" android:text="@string/button1"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableTop="@drawable/star" android:drawablePadding="20dp" android:text="@string/button2"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableTop="@drawable/star" android:drawableLeft="@drawable/star" android:text="@string/button3"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableRight="@drawable/star" android:drawablePadding="20dp" android:text="@string/button4"/> </LinearLayout> <Button android:id="@+id/button" android:layout_marginTop="10dp" android:layout_width="200dp" android:layout_height="200dp"/> </LinearLayout>
2.4ButtonMainActivity.java
package com.android.button; import android.app.Activity; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.os.Bundle; import android.text.SpannableString; import android.text.Spanned; import android.text.style.DynamicDrawableSpan; import android.text.style.ImageSpan; import android.widget.Button; /** * Button案例二:图文混搭的按钮 * @author lynnli1229 */ public class ButtonMainActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Button button = (Button) findViewById(R.id.button); SpannableString ssLeft = new SpannableString("left"); Bitmap bitmapLeft = BitmapFactory.decodeResource(getResources(), R.drawable.image_left); ImageSpan isLeft = new ImageSpan(bitmapLeft, DynamicDrawableSpan.ALIGN_BOTTOM); //setSpan方法第四个参数是flag:标示在Span范围内的文本前后输入新字符时是否应用该效果 //Spanned.SPAN_EXCLUSIVE_EXCLUSIVE表示在文本前后输入新字符时均不应用该效果 ssLeft.setSpan(isLeft, 0, 4, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); SpannableString ssRight = new SpannableString("right"); Bitmap bitmapRight = BitmapFactory.decodeResource(getResources(), R.drawable.image_right); ImageSpan isRight = new ImageSpan(bitmapRight, DynamicDrawableSpan.ALIGN_BOTTOM); ssRight.setSpan(isRight, 0, 5, Spanned.SPAN_INCLUSIVE_INCLUSIVE); button.append(ssLeft); button.append("我的按钮"); button.append(ssRight); } }
友情提示:提供三张图片存放于drawable-hdpi文件夹下。