自定義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);
        }
    }
}