自定义Layouts（未完待续）

简介

如果你之前开发过android 的app，你可以很清楚的去使用平台上已经创建好的layout，比如RelativeLayout, LinearLayout, FrameLayout等等， 它们是创建UI必不可少的组件。

这些已经存在的layout 结合一些工具可以创建出复杂的ui ，但是在一些情况下设计仍需要你去自定义一些layout。

为什么要自定义layout，这里有两个原因, 第一：通过减少UI层级，减少layout（）的遍历次数，使你的UI更加高效， 第二：创建一些比较奇特的ui

在这里，我将会展示四种不同的方式去创建自定义的UI，并讨论他们的优缺点，他们分别是composite view, custom composite view, flat custom view, and async custom views.

代码放在了github上，这个app 实现了相同的ui ，各自用了不同的方法，加载图片的用的是 Picasso，ui 有点类似简化了twitter客户端，没有交互，纯粹只是个布局。

让我们先来看下一个非常普遍的自定义layout : composite view.（复合view）

Composite View

这通常是你开始的要点，Composite views可以很轻易的结果多种视图，使得这些UI可以再复用，非常容易去实现：

1. 继承layouts
2. 在构造方法中合并你的布局
3. 使用findViewById()初始化你内部的view
4. 添加你自己的 APIs去查询更新你的view的状态

TweetCompositeView 就是一个复合view，它继承了RelativeLayout，inflates tweet_composite_layout.xml，在adapter使用update()方法去更新它的状态，非常简单。这里我们分别看下TweetCompositeView 和adapter的代码

//继承了RelativeLayout
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);
        //在构造方法中引入外部的布局，注意，这里是parent是它自身 
        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);
        }
    }

    //所有不会滚动的视图都会覆写此方法并返回false
    @Override
    public boolean shouldDelayChildPressedState() {
        return false;
    }

    //自定义了更新内部view的方法
    @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);
        }
    }
}