今天我们学习如何自定义TextView组件,让它既能显示文本,又能显示图像,达到“图文并茂”的效果。这种图文混搭的方式常常被用来展现新闻、文章、彩信等内容。下面给出该情景的案例:
1案例技术要点
1.1创建attrs.xml文件用于设置自定义组件的属性、类型和样式。
1.2利用android.content.res.TypedArray类将自定义组件装载到程序,以供程序调用。TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.customTextView);
1.3布局文件引入自定义组件需要如下设置
自定义组件命名空间:xmlns:custom="http://schemas.android.com/apk/res/com.custom.textview"
自定义组件标签:
1.4构造一个HashMap数据结构,用于保存自定义组件的内容类型和值。
key:自定义组件的内容类型(image、text)
value:自定义组件的内容值(imageUrl,CharSequence)
1.5利用android.widget.LinearLayout.LayoutParams类用于设置组件的布局参数。这里需要根据显示内容的类型动态地设置组件的布局参数。
2案例代码陈列
2.1工程包目录
2.2AndroidManifest.xml
2.3strings.xml
自定义TextView实现图文并茂
2.4自定义TextView组件的属性类型样式文件:attrs.xml
2.5main.xml
2.6自定义组件类:CustomTextView.java
package com.custom.textview;import java.net.URL;import java.util.ArrayList;import java.util.HashMap;import android.content.Context;import android.content.res.TypedArray;import android.graphics.drawable.Drawable;import android.os.Handler;import android.os.Message;import android.os.SystemClock;import android.text.Html;import android.util.AttributeSet;import android.view.Gravity;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;public class CustomTextView extends LinearLayout { private Context context; private TypedArray typedArray; private LayoutParams params; public CustomTextView(Context context) { super(context); } public CustomTextView(Context context, AttributeSet attrs) { super(context, attrs); this.context = context; this.setOrientation(LinearLayout.VERTICAL); // 从attrs.xml中获取自定义属性 typedArray = context.obtainStyledAttributes(attrs, R.styleable.customTextView); } public void setText(ArrayList> data) { for (HashMap hashMap : data) { String type = hashMap.get("type"); String value = hashMap.get("value"); // 如果内容类型是图片 if (type.equals("image")) { // 设置图片显示宽高、集中 int imageWidth = typedArray.getDimensionPixelOffset(R.styleable.customTextView_image_width, 100); int imageHeight = typedArray.getDimensionPixelOffset(R.styleable.customTextView_image_height, 100); ImageView imageView = new ImageView(context); params = new LayoutParams(imageWidth, imageHeight); params.gravity = Gravity.CENTER_HORIZONTAL; imageView.setLayoutParams(params); // 显示默认图片 imageView.setImageResource(R.drawable.ic_launcher); // 将ImageView添加到CustomTextView中 addView(imageView); // 开启工作线程异步加载图片 new DownloadWork(value, imageView).start(); } else if (type.equals("text")) { int textColor = typedArray.getColor(R.styleable.customTextView_text_color, 0xFF0000FF); float textSize = typedArray.getDimension(R.styleable.customTextView_text_size, 16); TextView textView = new TextView(context); textView.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)); textView.setText(Html.fromHtml(value)); textView.setTextColor(textColor); textView.setTextSize(textSize); addView(textView); } } } private class DownloadWork extends Thread { private String imageUrl; private ImageView imageView; public DownloadWork(String imageUrl, ImageView imageView) { this.imageUrl = imageUrl; this.imageView = imageView; } @Override public void run() { URL url = null; Drawable drawable = null; int newImageWidth = 0; int newImageHeight = 0; try { url = new URL(imageUrl); drawable = Drawable.createFromStream(url.openStream(), "image"); // 对图片进行缩放 newImageWidth = drawable.getIntrinsicWidth() / 3; newImageHeight = drawable.getIntrinsicHeight() / 3; } catch (Exception e) { e.printStackTrace(); } SystemClock.sleep(2000); HashMap map = new HashMap (); map.put("imageView", imageView); map.put("drawable", drawable); Message msg = handler.obtainMessage(); msg.obj = map; msg.arg1 = newImageWidth; msg.arg2 = newImageHeight; handler.sendMessage(msg); } } private Handler handler = new Handler() { public void handleMessage(Message msg) { @SuppressWarnings("unchecked") HashMap map = (HashMap ) msg.obj; ImageView imageView = (ImageView) map.get("imageView"); LayoutParams params = new LayoutParams(msg.arg1, msg.arg2); params.gravity = Gravity.CENTER_HORIZONTAL; imageView.setLayoutParams(params); Drawable drawable = (Drawable) map.get("drawable"); imageView.setImageDrawable(drawable); } };}
2.7MainActivity.java
package com.custom.textview;import java.util.ArrayList;import java.util.HashMap;import android.app.Activity;import android.os.Bundle;public class MainActivity extends Activity { private final String text = "今年浙江卫视凭《中国好声音》一举做大" + ",其巨大的影响力直接波及到了各家卫视“跨年晚会”的战略部署。日前" + ",“跨年晚会”概念的鼻祖湖南卫视率先表示“退出跨年烧钱大战”。" + "但据湖南卫视内部人士透露,即使如此,今年的湖南跨年晚会也将会掂出“跨年季”这个概念" + ",“也就是从12月27日到12月31日,连续五天,我们将相继用《百变大咖秀》、《快乐大本营》" + "、《女人如歌》、《天天向上》的特别节目来连续打造这个”季“的概念,直到12月31日的那场晚会。”
"; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); // 采集显示内容数据 ArrayList> data = new ArrayList >(); HashMap part1 = new HashMap (); part1.put("type", "image"); part1.put("value", "http://www.linuxidc.com/upload/2012_12/121218101020341.png"); HashMap part2 = new HashMap (); part2.put("type", "text"); part2.put("value", text); HashMap part3 = new HashMap (); part3.put("type", "image"); part3.put("value", "http://www.linuxidc.com/upload/2012_12/121218101020341.png"); data.add(part1); data.add(part2); data.add(part3); CustomTextView customTextView = (CustomTextView) findViewById(R.id.textView); customTextView.setText(data); }}
3案例效果展示