本文参考了：http://greenrobot.me/devpost/android-custom-layout/
Android SDK中提供了很多UI组件，如RelativeLayout， LinearLayout等，使用自定义控件有两大优点：
1、通过减少View的使用来增加UI的显示效率
2、构建SDK中没有的控件
原文总结了4种自定义View，分别是Composite View, Custom Composite View, Flat Custom View和Async Custom Views。示例代码在https://github.com/lucasr/android-layout-samples，可以直接运行。该工程依赖两个工程：Picasso 和Smoothie.Picasso
Picasso是一个异步图片加载库，Smoothie提供了异步加载ListView和GridView数据项的接口，使列表数据的加载更加顺滑。
本文只介绍Composite Vew 和 Custom Composite View的方法，这两种方式足够我们使用了，剩余两种方法需要自定义一套控制视图的框架，维护代价高，建议只用在app的核心且稳定的UI中，感兴趣的读者可自行研究。
Composite View
此方法是将多个View结合成一个可重用View的最简单方法，过程如下：
1、自定义控件，继承相应的控件。
2、在构造函数中填充一个merge布局
3、初始化自定义控件中的内部View
4、提供刷新View的接口
下面介绍了一个用法，该View的布局如下图所示：
首先是定义一个类文件TweetCompositeView.java
public class TweetCompositeView extends RelativeLayout implements TweetPresenter {
private final ImageView mProfileImage;
private final TextView mAuthorText;
private final TextView mMessageText;
private final ImageView mPostImage;
private final EnumMap<Action, ImageView> mActionIcons;
public TweetCompositeView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public TweetCompositeView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
LayoutInflater.from(context).inflate(R.layout.tweet_composite_view, this, true);
//初始化内部成员变量
mProfileImage = (ImageView) findViewById(R.id.profile_image);
mAuthorText = (TextView) findViewById(R.id.author_text);
mMessageText = (TextView) findViewById(R.id.message_text);
mPostImage = (ImageView) findViewById(R.id.post_image);
mActionIcons = new EnumMap(Action.class);
for (Action action : Action.values()) {
final ImageView icon;
switch (action) {
case REPLY:
icon = (ImageView) findViewById(R.id.reply_action);
break;
case RETWEET:
icon = (ImageView) findViewById(R.id.retweet_action);
break;
case FAVOURITE:
icon = (ImageView) findViewById(R.id.favourite_action);
break;
default:
throw new IllegalArgumentException("Unrecognized tweet action");
}
mActionIcons.put(action, icon);
}
}
@Override
public boolean shouldDelayChildPressedState() {
return false;
}
//提供更新UI的接口
@Override
public void update(Tweet tweet, EnumSet<UpdateFlags> flags) {
mAuthorText.setText(tweet.getAuthorName());
mMessageText.setText(tweet.getMessage());
final Context context = getContext();
ImageUtils.loadImage(context, mProfileImage, tweet.getProfileImageUrl(), flags);
final boolean hasPostImage = !TextUtils.isEmpty(tweet.getPostImageUrl());
mPostImage.setVisibility(hasPostImage ? View.VISIBLE : View.GONE);
if (hasPostImage) {
ImageUtils.loadImage(context, mPostImage, tweet.getPostImageUrl(), flags);
}
}
}该类继承自RelativeLayout，实现了TweetPresenter的接口以更新UI。构造函数中初始化内部的View
布局文件tweet_composite_view.xml中的merge tag减少了布局的层次
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/profile_image"
android:layout_width="@dimen/tweet_profile_image_size"
android:layout_height="@dimen/tweet_profile_image_size"
android:layout_marginRight="@dimen/tweet_content_margin"
android:scaleType="centerCrop"/>
<TextView
android:id="@+id/author_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/profile_image"
android:layout_alignTop="@id/profile_image"
android:textColor="@color/tweet_author_text_color"
android:textSize="@dimen/tweet_author_text_size"
android:singleLine="true"/>
<TextView
android:id="@+id/message_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/author_text"
android:layout_alignLeft="@id/author_text"
android:textColor="@color/tweet_message_text_color"
android:textSize="@dimen/tweet_message_text_size"/>
<ImageView
android:id="@+id/post_image"
android:layout_width="fill_parent"
android:layout_height="@dimen/tweet_post_image_height"
android:layout_below="@id/message_text"
android:layout_alignLeft="@id/message_text"
android:layout_marginTop="@dimen/tweet_content_margin"
android:scaleType="centerCrop"/>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/post_image"
android:layout_alignLeft="@id/message_text"
android:layout_marginTop="@dimen/tweet_content_margin"
android:orientation="horizontal">
<ImageView
android:id="@+id/reply_action"
android:layout_width="0dp"
android:layout_height="@dimen/tweet_icon_image_size"
android:layout_weight="1"
android:src="@drawable/tweet_reply"
android:scaleType="fitStart"/>
<ImageView
android:id="@+id/retweet_action"
android:layout_width="0dp"
android:layout_height="@dimen/tweet_icon_image_size"
android:layout_weight="1"
android:src="@drawable/tweet_retweet"
android:scaleType="fitStart"/>
<ImageView
android:id="@+id/favourite_action"
android:layout_width="0dp"
android:layout_height="@dimen/tweet_icon_image_size"
android:layout_weight="1"
android:src="@drawable/tweet_favourite"
android:scaleType="fitStart"/>
</LinearLayout>
</merge>这种方法自定义的View用法简单，维护也方便。但这种方式自定义的View的UI子View较多，对于复杂的View，将影响遍历效率。打开手机设置中的显示布局边界选项，效果图如下所示：
Android某些控件如RelativeLayout，LinearLayout等容器控件，需要多次遍历子View来确定自身的属性，如LinearLayout的weight属性。如果能针对自己的App自定义子View的计算和定位逻辑，则可以极大的优化UI的遍历。这种做法便是接下来介绍的Custom Composite View
Custom Composite View
相比Composite View的方法，一个Custom Composite View继承自一个ViewGroup，并实现了onMeasure和onLayout方法。下面的TweetLayoutView便是一个Custom Composite View.
TweetLayoutView.java
public class TweetLayoutView extends ViewGroup implements TweetPresenter {
private final ImageView mProfileImage;
private final TextView mAuthorText;
private final TextView mMessageText;
private final ImageView mPostImage;
private final EnumMap<Action, View> mActionIcons;
public TweetLayoutView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public TweetLayoutView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
LayoutInflater.from(context).inflate(R.layout.tweet_layout_view, this, true);
mProfileImage = (ImageView) findViewById(R.id.profile_image);
mAuthorText = (TextView) findViewById(R.id.author_text);
mMessageText = (TextView) findViewById(R.id.message_text);
mPostImage = (ImageView) findViewById(R.id.post_image);
mActionIcons = new EnumMap(Action.class);
for (Action action : Action.values()) {
final int viewId;
switch (action) {
case REPLY:
viewId = R.id.reply_action;
break;
case RETWEET:
viewId = R.id.retweet_action;
break;
case FAVOURITE:
viewId = R.id.favourite_action;
break;
default:
throw new IllegalArgumentException("Unrecognized tweet action");
}
mActionIcons.put(action, findViewById(viewId));
}
}
private void layoutView(View view, int left, int top, int width, int height) {
MarginLayoutParams margins = (MarginLayoutParams) view.getLayoutParams();
final int leftWithMargins = left + margins.leftMargin;
final int topWithMargins = top + margins.topMargin;
view.layout(leftWithMargins, topWithMargins,
leftWithMargins + width, topWithMargins + height);
}
private int getWidthWithMargins(View child) {
final MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
return child.getWidth() + lp.leftMargin + lp.rightMargin;
}
private int getHeightWithMargins(View child) {
final MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
return child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
}
private int getMeasuredWidthWithMargins(View child) {
final MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
return child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
}
private int getMeasuredHeightWithMargins(View child) {
final MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
return child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
}
@Override
public boolean shouldDelayChildPressedState() {
return false;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
final int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int widthUsed = 0;
int heightUsed = 0;
measureChildWithMargins(mProfileImage,
widthMeasureSpec, widthUsed,
heightMeasureSpec, heightUsed);
widthUsed += getMeasuredWidthWithMargins(mProfileImage);
measureChildWithMargins(mAuthorText,
widthMeasureSpec, widthUsed,
heightMeasureSpec, heightUsed);
heightUsed += getMeasuredHeightWithMargins(mAuthorText);
measureChildWithMargins(mMessageText,
widthMeasureSpec, widthUsed,
heightMeasureSpec, heightUsed);
heightUsed += getMeasuredHeightWithMargins(mMessageText);
if (mPostImage.getVisibility() != View.GONE) {
measureChildWithMargins(mPostImage,
widthMeasureSpec, widthUsed,
heightMeasureSpec, heightUsed);
heightUsed += getMeasuredHeightWithMargins(mPostImage);
}
int maxIconHeight = 0;
for (Action action : Action.values()) {
final View iconView = mActionIcons.get(action);
measureChildWithMargins(iconView,
widthMeasureSpec, widthUsed,
heightMeasureSpec, heightUsed);
final int height = getMeasuredHeightWithMargins(iconView);
if (height > maxIconHeight) {
maxIconHeight = height;
}
widthUsed += getMeasuredWidthWithMargins(iconView);
}
heightUsed += maxIconHeight;
int heightSize = heightUsed + getPaddingTop() + getPaddingBottom();
setMeasuredDimension(widthSize, heightSize);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
final int paddingLeft = getPaddingLeft();
final int paddingTop = getPaddingTop();
int currentTop = paddingTop;
layoutView(mProfileImage, paddingLeft, currentTop,
mProfileImage.getMeasuredWidth(),
mProfileImage.getMeasuredHeight());
final int contentLeft = getWidthWithMargins(mProfileImage) + paddingLeft;
final int contentWidth = r - l - contentLeft - getPaddingRight();
layoutView(mAuthorText, contentLeft, currentTop,
contentWidth, mAuthorText.getMeasuredHeight());
currentTop += getHeightWithMargins(mAuthorText);
layoutView(mMessageText, contentLeft, currentTop,
contentWidth, mMessageText.getMeasuredHeight());
currentTop += getHeightWithMargins(mMessageText);
if (mPostImage.getVisibility() != View.GONE) {
layoutView(mPostImage, contentLeft, currentTop,
contentWidth, mPostImage.getMeasuredHeight());
currentTop += getHeightWithMargins(mPostImage);
}
final int iconsWidth = contentWidth / mActionIcons.size();
int iconsLeft = contentLeft;
for (Action action : Action.values()) {
final View icon = mActionIcons.get(action);
layoutView(icon, iconsLeft, currentTop,
iconsWidth, icon.getMeasuredHeight());
iconsLeft += iconsWidth;
}
}
@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
return new MarginLayoutParams(getContext(), attrs);
}
@Override
protected LayoutParams generateDefaultLayoutParams() {
return new MarginLayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
}
@Override
public void update(Tweet tweet, EnumSet<UpdateFlags> flags) {
mAuthorText.setText(tweet.getAuthorName());
mMessageText.setText(tweet.getMessage());
final Context context = getContext();
ImageUtils.loadImage(context, mProfileImage, tweet.getProfileImageUrl(), flags);
final boolean hasPostImage = !TextUtils.isEmpty(tweet.getPostImageUrl());
mPostImage.setVisibility(hasPostImage ? View.VISIBLE : View.GONE);
if (hasPostImage) {
ImageUtils.loadImage(context, mPostImage, tweet.getPostImageUrl(), flags);
}
}
}这个类的布局文件仍然是tweet_composite_view.xml，构造函数中初始化内部的View,与Composite View的不同之处在于，它通过重载onMeasure和onLayout方法来确定内部View的尺寸和位置。基本思路是过程通过ViewGroup’s 的measureChildWithMargins() 方法和背后的 getChildMeasureSpec() 方法计算出了每个子视图的 MeasureSpec 。这个自定义View的效果图的布局层次如下图所示，和Composite View的层次一样，但这个View的遍历开销要少于前者。
如果想进一步优化关键部分的UI，如ListView和GridView，可以考虑把Custom Composite View合成单一的View统一管理，使得到的View的层次如下图所示：
要达到这个效果，需要参考Flat Custom View的自定义View方式，刚兴趣读者可参考源代码。