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文件夹下。

3案例效果展示