[关闭]
@flyouting 2014-03-18T15:37:41.000000Z 字数 8882 阅读 3963

Protip. Inflating layout for your custom view

现在的 protip 将会成为当人们去创建复杂的自定义views时经常面对的一个问题.
让我们拿一个复杂的自定义view作为一个列子来试着指出它在创建过程中做了什么。

此处输入图片的描述

正如你所看到的，我这里有一个相当不错的View - 简单的卡片状的部件。由于在理论上我在这张卡片里将有一些逻辑，我决定为此创建自定义视图。

互联网上常见的方法 - 扩展内置的布局之一，并在初始化过程中inflate自定义布局：

Card.java

  1. package com.trickyandroid.customview.app.view;
  3. import android.content.Context;
  4. import android.util.AttributeSet;
  5. import android.widget.ImageView;
  6. import android.widget.RelativeLayout;
  7. import android.widget.TextView;
  9. import com.trickyandroid.customview.app.R;
  11. public class Card extends RelativeLayout {
  12.     private TextView header;
  13.     private TextView description;
  14.     private ImageView thumbnail;
  15.     private ImageView icon;
  17.     public Card(Context context) {
  18.         super(context);
  19.         init();
  20.     }
  22.     public Card(Context context, AttributeSet attrs) {
  23.         super(context, attrs);
  24.         init();
  25.     }
  27.     public Card(Context context, AttributeSet attrs, int defStyle) {
  28.         super(context, attrs, defStyle);
  29.         init();
  30.     }
  32.     private void init() {
  33.         inflate(getContext(), R.layout.card, this);
  34.         this.header = (TextView)findViewById(R.id.header);
  35.         this.description = (TextView)findViewById(R.id.description);
  36.         this.thumbnail = (ImageView)findViewById(R.id.thumbnail);
  37.         this.icon = (ImageView)findViewById(R.id.icon);
  38.     }
  39. }

Card.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  3. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="wrap_content"
  6.     android:padding="@dimen/card_padding"
  7.     android:background="@color/card_background">
  9.     <ImageView
  10.         android:id="@+id/thumbnail"
  11.         android:src="@drawable/thumbnail"
  12.         android:layout_width="72dip"
  13.         android:layout_height="72dip"
  14.         android:scaleType="centerCrop"/>
  16.     <TextView
  17.         android:id="@+id/title"
  18.         android:layout_width="wrap_content"
  19.         android:layout_height="wrap_content"
  20.         android:text="Card title"
  21.         android:layout_toRightOf="@+id/thumbnail"
  22.         android:layout_toLeftOf="@+id/icon"
  23.         android:textAppearance="@android:style/TextAppearance.Holo.Medium"
  24.         android:layout_marginLeft="?android:attr/listPreferredItemPaddingLeft"/>
  26.     <TextView
  27.         android:id="@+id/description"
  28.         android:layout_width="wrap_content"
  29.         android:layout_height="wrap_content"
  30.         android:text="Card description"
  31.         android:layout_toRightOf="@+id/thumbnail"
  32.         android:layout_below="@+id/title"
  33.         android:layout_toLeftOf="@+id/icon"
  34.         android:layout_marginLeft="?android:attr/listPreferredItemPaddingLeft"
  35.         android:textAppearance="@android:style/TextAppearance.Holo.Small"/>
  37.     <ImageView
  38.         android:id="@+id/icon"
  39.         android:layout_width="wrap_content"
  40.         android:layout_height="wrap_content"
  41.         android:src="@drawable/icon"
  42.         android:layout_alignParentRight="true"
  43.         android:layout_centerVertical="true"/>
  45. </RelativeLayout>

所以现在，当我们需要用到新创建的view时，唯一的事情就是在主布局中添加我们的view，就像其他默认view一样：

activity_main.xml

  1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:paddingLeft="@dimen/activity_horizontal_margin"
  6.     android:paddingRight="@dimen/activity_horizontal_margin"
  7.     android:paddingTop="@dimen/activity_vertical_margin"
  8.     android:paddingBottom="@dimen/activity_vertical_margin">
  10.     <com.trickyandroid.customview.app.view.Card
  11.         android:layout_width="wrap_content"
  12.         android:layout_height="wrap_content"/>
  14. </FrameLayout>

看起来很简单，很直接，不是么？但是，我们来看下视图层次。

此处输入图片的描述

我们看到，在我们真正的card内容之前有个一个额外的RelativeLayout，这是因为
Card类是RelativeLayout，当我们inflate实际的内容时，我们只是把这些内容加进了外层的这个RelativeLayout。

当然，这并不是什么大不了的事对于这种特殊的情况 - 我们不会在我们父布局RelativeLayout中做任何事情。但是，当我们有更复杂的布局和自定义视图的数量越来越大 - 你其实可以发现一些性能损失。这是因为有UI引擎很难短时间内遍历所有这些布局，测量它们和展示出来。

所以一般的规则是 - 越深的布局层次，越难遍历它。所以尽量扁平化布局

现在，让我们看看我们如何扁平化布局

Merge

card.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  3. <merge xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="wrap_content"
  6.     android:padding="@dimen/card_padding"
  7.     android:background="@color/card_background">
  9.     <ImageView
  10.         android:id="@+id/thumbnail"
  11.         android:src="@drawable/thumbnail"
  12.         android:layout_width="72dip"
  13.         android:layout_height="72dip"
  14.         android:scaleType="centerCrop"/>
  16.     <TextView
  17.         android:id="@+id/title"
  18.         android:layout_width="wrap_content"
  19.         android:layout_height="wrap_content"
  20.         android:text="Card title"
  21.         android:layout_toRightOf="@+id/thumbnail"
  22.         android:layout_toLeftOf="@+id/icon"
  23.         android:textAppearance="@android:style/TextAppearance.Holo.Medium"
  24.         android:layout_marginLeft="?android:attr/listPreferredItemPaddingLeft"/>
  26.     <TextView
  27.         android:id="@+id/description"
  28.         android:layout_width="wrap_content"
  29.         android:layout_height="wrap_content"
  30.         android:text="Card description"
  31.         android:layout_toRightOf="@+id/thumbnail"
  32.         android:layout_below="@+id/title"
  33.         android:layout_toLeftOf="@+id/icon"
  34.         android:layout_marginLeft="?android:attr/listPreferredItemPaddingLeft"
  35.         android:textAppearance="@android:style/TextAppearance.Holo.Small"/>
  37.     <ImageView
  38.         android:id="@+id/icon"
  39.         android:layout_width="wrap_content"
  40.         android:layout_height="wrap_content"
  41.         android:src="@drawable/icon"
  42.         android:layout_alignParentRight="true"
  43.         android:layout_centerVertical="true"/>
  45. </merge>

结果是：
此处输入图片的描述

很不错！我们消除了额外的RelativeLayout，但失去了我们的最外层卡片布局属性 - 白色背景和填充距离。这是因为<marge>标签合并其内容，但不是自己。所以你的最外层的属性都将丢失。
有两种简单的方法来添加他们回来：

1. 通过代码

Card.java

  1. .....
  2. private void init() {
  3.         inflate(getContext(), R.layout.card, this);
  4.  setBackgroundColor(getResources().getColor(R.color.card_background));
  6.         //Add missing top level attributes    
  7.         int padding = (int)getResources().getDimension(R.dimen.card_padding);
  8.         setPadding(padding, padding, padding, padding);
  10.         this.header = (TextView)findViewById(R.id.header);
  11.         this.description = (TextView)findViewById(R.id.description);
  12.         this.thumbnail = (ImageView)findViewById(R.id.thumbnail);
  13.         this.icon = (ImageView)findViewById(R.id.icon);
  14.     }

2. 加入主布局时特别设定

activity_main.xml

  1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:paddingLeft="@dimen/activity_horizontal_margin"
  6.     android:paddingRight="@dimen/activity_horizontal_margin"
  7.     android:paddingTop="@dimen/activity_vertical_margin"
  8.     android:paddingBottom="@dimen/activity_vertical_margin">
  10.     <com.trickyandroid.customview.app.view.Card
  11.         android:layout_width="wrap_content"
  12.         android:layout_height="wrap_content"
  13.         android:background="@color/card_background"
  14.         android:padding="@dimen/card_padding"/>
  16. </FrameLayout>

Include

另一种减少布局数目的方式是使用<include>标记。由于我的Card.java是RelativeLayout，我可以使其为我的内容的根视图。之后，我需要将其纳入我的主布局：
card.xml

  1. <com.trickyandroid.views.Card xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:layout_width="match_parent"
  3.     android:layout_height="wrap_content"
  4.     android:padding="@dimen/card_padding"
  5.     android:background="@color/card_background">
  7.     <ImageView
  8.         android:id="@+id/thumbnail"
  9.         android:src="@drawable/thumbnail"
  10.         android:layout_width="72dip"
  11.         android:layout_height="72dip"
  12.         android:scaleType="centerCrop"/>
  14.     <TextView
  15.         android:id="@+id/title"
  16.         android:layout_width="wrap_content"
  17.         android:layout_height="wrap_content"
  18.         android:text="Card title"
  19.         android:layout_toRightOf="@+id/thumbnail"
  20.         android:layout_toLeftOf="@+id/icon"
  21.         android:textAppearance="@android:style/TextAppearance.Holo.Medium"
  22.         android:layout_marginLeft="?android:attr/listPreferredItemPaddingLeft"/>
  24.     <TextView
  25.         android:id="@+id/description"
  26.         android:layout_width="wrap_content"
  27.         android:layout_height="wrap_content"
  28.         android:text="Card description"
  29.         android:layout_toRightOf="@+id/thumbnail"
  30.         android:layout_below="@+id/title"
  31.         android:layout_toLeftOf="@+id/icon"
  32.         android:layout_marginLeft="?android:attr/listPreferredItemPaddingLeft"
  33.         android:textAppearance="@android:style/TextAppearance.Holo.Small"/>
  35.     <ImageView
  36.         android:id="@+id/icon"
  37.         android:layout_width="wrap_content"
  38.         android:layout_height="wrap_content"
  39.         android:src="@drawable/icon"
  40.         android:layout_alignParentRight="true"
  41.         android:layout_centerVertical="true"/>
  43. </com.trickyandroid.views.Card>

Card.java:

  1. public class Card extends RelativeLayout {
  2.     private TextView header;
  3.     private TextView description;
  4.     private ImageView thumbnail;
  5.     private ImageView icon;
  7.     public Card(Context context) {
  8.         super(context);
  9.     }
  11.     public Card(Context context, AttributeSet attrs) {
  12.         super(context, attrs);
  13.     }
  15.     public Card(Context context, AttributeSet attrs, int defStyle) {
  16.         super(context, attrs, defStyle);
  17.     }
  19.     @Override
  20.     protected void onFinishInflate() {
  21.         super.onFinishInflate();
  22.         this.header = (TextView)findViewById(R.id.title);
  23.         this.description = (TextView)findViewById(R.id.description);
  24.         this.thumbnail = (ImageView)findViewById(R.id.thumbnail);
  25.         this.icon = (ImageView)findViewById(R.id.icon);
  26.     }
  27. }

在这种情况下，我并不需要手动inflate我的内容 - 它已经存在。通过XML指定。所以，我不需要我的init（）了，所有的view初始化阶段去onFinishInflate（）回调。

现在的问题是如何添加这个自定义视图到我的主要布局。我需要到<INCLUDE>它：
activity_main.xml

  1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:layout_width="match_parent"
  3.     android:layout_height="match_parent"
  4.     android:paddingBottom="@dimen/activity_vertical_margin"
  5.     android:paddingLeft="@dimen/activity_horizontal_margin"
  6.     android:paddingRight="@dimen/activity_horizontal_margin"
  7.     android:paddingTop="@dimen/activity_vertical_margin">
  9.     <include
  10.         layout="@layout/card"
  11.         android:layout_width="wrap_content"
  12.         android:layout_height="wrap_content" />
  14. </FrameLayout>

有些人可能会问，为什么我不能只使用<INCLUDE>方式把我的卡片的布局引入主布局，而不创建自定义视图，做这一切。这工作，如果你有UI组件只在您的自定义视图。在我来说，我认为我会有一些棘手的逻辑（图像下载/ DB访问，等等），我真的需要去自定义视图类。

翻译 @flyouting
2014 年 03月 17日
源地址：这里

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注