如何更好的通过Inflate layout的方式来实现自定义view

最新推荐文章于 2022-08-08 14:51:02 发布
最新推荐文章于 2022-08-08 14:51:02 发布
阅读量2.9k 收藏 1
点赞数
分类专栏： android

英文原文 http://trickyandroid.com/protip-inflating-layout-for-your-custom-view/  

今天要讲的是在通过组合的方式实现自定义view（custom compound view）的时候容易遇到的一些问题。

custom compound view：一种通过组合原有安卓控件或者布局而实现的自定义view的方法，与常规的自定义view方法相比，一般来说不需要实现onDraw方法，选择这种方式的场景一般是 有一种布局经常被使用，并且这个布局里面有的元素有一些逻辑需要处理，我们希望将他们封装起来使用，其实这种方式的重点不在于view的自定义这个概念，而是在于封装。-译者注


我们选取一个自定义的组合视图作为例子，尝试了解是如何创建的。


就如你所看到的，我们这里有一个相当典型的view - 一个简单的卡片似的控件。因为在这个卡片中我们有一些逻辑要处理，我决定创建一个自定义的view。这是网上经常看到的一种方法：继承自一个现有的布局控件然后在初始化期间inflate一个自定义的布局：


Card.java

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

card.xml

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

好了，当我们想要使用刚刚新建的自定义view的时候，我们只须将这个view像一般的控件那样添加到主布局中：

activity_main.xml

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

看起来很简单，但是别慌，让我们看看view的层次结构：


如你所见，在包含卡片内容本身的RelativeLayout之外还有一层RelativeLayout（打问号的那个）。这是因为我们的Card类就是一个RelativeLayout（继承自RelativeLayout），当我们再inflate一个内容的时候，我们只是将内容添加到了这个RelativeLayout中。

当然，假如我们不对父RelativeLayout做任何事情，这并不是什么大问题。但是当我们的布局更复杂或者自定义view的数量增大的时候，你就会注意到性能方面的问题了。这是因为UI引擎要遍历，测量，摆放所有这些布局非常吃力。


简单说来就是 - 布局越深，越难遍历。因此，尽量使布局扁平化。


让我们看看该如何让布局更扁平化：

Merge

在本例中，减少布局数量的一种可取的方法就是让卡片本身的内容直接依附在父view中（即Card类）

card.xml:

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

下面是我们所得到的效果：

好极了！我们消除了冗余的RelativeLayout，但是也让最顶层原本有的那些属性也没了 - 白色背景和padding。这是因为<marge>标签可以融合其内容，但是不包括自身，因此顶层的属性都丢失了。

有三种办法可以将它们添加回来：

1)在代码中添加:

Card.java:

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

2) 在主布局中添加card的时候添加:

activity_main.xml

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

3)定义一个stylable 属性将这些值通过style提供给控件。感谢 @vovkab 为我指出该方法 :

我不喜欢这种方法，因为代码相互依赖的地方变多了，这个类复杂点还好说，如果类本身很简单，又有如此多的关联，不爽  - 译者注。

attr.xml

1
2
3
4
5
6
<?xml version= "1.0"  encoding= "utf-8" ?>
<resources>
     <declare-styleable name= "Card" >
         <attr name= "cardStyle"  format= "reference" />
     </declare-styleable>
</resources>

style.xml

1
2
3
4
5
6
7
8
9
10
11
12
     <!-- Base application theme. -->
     <style name= "AppTheme"  parent= "android:Theme.Holo.Light.DarkActionBar" >
         <item name= "android:windowBackground" >@color/main_background</item>
         <item name= "cardStyle" >@style/CardStyle</item>
     </style>
 
     <style name= "CardStyle"  parent= "android:Widget.Holo.Light" >
         <item name= "android:padding" >@dimen/card_padding</item>
         <item name= "android:background" >@color/card_background</item>
     </style>
 
</resources>

Card.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public class Card extends RelativeLayout {
     private TextView header;
     private TextView description;
     private ImageView thumbnail;
     private ImageView icon;
 
     public Card(Context context) {
         super (context,  null , R.attr.cardStyle);
         init();
     }
 
     public Card(Context context, AttributeSet attrs) {
         super (context, attrs, R.attr.cardStyle);
         init();
     }
     ..........

注意在view的构造函数中指定的是我们的stylable。   

Include

另一种减少布局数量的方法是使用<include>标签。因为Card.java是一个RelativeLayout，我们可以让他作为内容的跟布局，然后使用include将它包含在main activity的布局中：

card.xml:    

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

Card.java:

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

这种情况下，我们不需要主动inflate内容 - 因为它本身就在那里（activity的setContentView会做这个事情）。因此不再需呀init()了，所有view的初始化都在onFinishInflate()回调方法中了。

 

现在的问题是如何将这个自定义view添加到主布局中。使用<include>：

  其实我觉得这段应该和上面的那段顺序颠倒下- 译者注。

activity_main.xml

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

 

我个人偏爱的是使用merge + stylable的方法，因为<include>让你失去了对view的控制权。

有些人问我为什么不直接使用<include>，而使用自定义view，这是因为这个view中我还有其他的逻辑。ps 做过的都知道咋回事了，我遇到的一种场景就是，不想使用Fragment，但是又要像Fragment那样是一个整体 -  译者注。

Official Android docs 
Layout optimization tricks by Romain Guy


u010746364
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android中自定义一个View的方法详解
01-05
本文实例讲述了Android...当我们需要继承一个布局比较复杂的ViewGroup（比较多的是LinearLayout、RelativeLayout）时，通常会用xml来写布局，然后在自定义的View类中inflate这个定义了layout的xml文件。 首先新建一个名
Android 采用Layout Inflater创建一个View对象
weixin_33827965的博客
06-14 288
接着上文《Android ListViewview入门》，本文使用android的Inflater来实现 在layouyt文件夹中新建一个list_item.xml的文件，添加如下代码： &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://s...
转自沉默的范大叔，自定义控件
weixin_30439067的博客
11-24 148
原文地址：http://www.jianshu.com/p/744550c02cf1 自定义控件中除了绘制流程涉及到的测量布局绘制的api, 还有一些api使用的也比较频繁，这里叔做了一下总结，也请同学们补充或纠正，让叔也涨涨姿势。 inflate inflate方法常常用来解析一个xml布局文件，在自定义组合式控件中常常使用，使用的姿势包括： View.inflate(con...
自定义控件(View) (B)
T的专栏
11-28 418
自定义view，核心是学会使用系统提供的工具集，把view “画”出来。 1、继承view就可以拿到工具集，常用的工具有画布Canvas和画笔Paint 2、把你想要的东西画出来 ，onDraw。 3、了解View框架,这样可以更好地使用自定义view。 View框架的工作流程为：测量每个View大小（measure）-->把每个View放置到相应的位置（layout）--&.........
Android 自定义View（inflate()模式）
齐码闯天涯
12-18 2万+
1.创建LayoutInflater实例 有两种方式 1. LayoutInflater layoutInflater= LayoutInflater.from(MainActivity.this); LayoutInflater layoutInflater= (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVIC...
View绘制体系（二）——View的inflate详解
boyeleven的博客
09-21 3694
View绘制体系（二）——View的inflate详解 前言 上一篇博客讲到setContentView最后会调用mLayoutInflater.inflate来创建了自定义xml中的布局视图，添加到mContentParent中，这里我们就来学习下inflate的具体实现以及它的基本使用方法。 inflate的基本使用 首先我们需要明确的是，inflate方法是讲xml文件反射成一个View...
Android编程实现Toast自定义布局简单示例
01-20
本文实例讲述了Android编程实现Toast自定义布局的方法。分享给大家供大家参考，...View view=inflater.inflate(R.layout.toast_info, null); 然后找到里面的控件，以单纯的textview为例 TextView txt=(TextView) vie
Android编程实现在自定义对话框中获取EditText中数据的方法
01-04
本文实例讲述了Android编程实现在自定义对话框中获取EditText中数据的方法。...final View DialogView = a .inflate ( R.layout.loand, null); 这是关键的代码 //创建对话框 AlertDialog dlg = new AlertDia
Android编程实现长按弹出选项框View进行操作的方法
01-20
本文实例讲述了Android编程实现长按弹出选项... View mPopView = LayoutInflater.from(this).inflate(R.layout.popup, null); final PopupWindow mPopWindow = new PopupWindow(mPopView, ViewGroup.LayoutParams.WRA
android自定义滚轴选择器
01-05
本文实例为大家分享了android自定义滚轴选择器的具体代码，供大家参考，具体内容如下 效果图： 点击选择餐具弹出底部弹窗 private Dialog dialog; private View inflate; PickValueView pickString; case R.id....
Android自定义View开篇之（LayoutInflater.inflate()详解）
vv_bug
09-20 8101
学习自定义View一段时间了，从开始的一窍不通到现在终于能写出点东西了，前面也写过几篇关于自定义view的博客，但是感觉这东西吧，一天不敲又忘记了，所以准备写一篇自定义View系列的博客，这也算是我这段时间学习自定义View总结的开篇，接下来还会有一系列的文章，支持我的朋友可以悄悄的点个赞，一起fighting！！！ 既然是总结性的东西我们就要研究透一点，我们从源码看，不啰嗦了，开车了……首先获取
Android 入门宝典 - inflate 生成视图 & 动态加载视图
qq_43323826的博客
08-27 550
public View inflate(XmlPullParser parser, @Nullable ViewGroup root) { return inflate(parser, root, root != null); } @param attachToRoot Whether the inflated hierarchy should be attached to the root ...
inflater将一个Layout布局转化为View
程序员
05-08 450
将一个Layout布局转化为View有两种方法，其实本质都一样 （1）View.inflate(mContext, R.layout.carepeople_item, null); （2）LayoutInflater mInflater;  mInflater = LayoutInflater.from(mContext);  convertView = mInflater.inflate
Android--inflater 3种方式将xml中转为view
Navan
04-24 464
采用布局填充器把xml文件转换成view对象 3种方式将xml中转为view 一、3种方式将xml中转为view 方式一：LayoutInflater inflater = (LayoutInflater) MainActivity.this.getSystemService(Context.LAYOUT_INFLATER_SERVICE); 最原始的方式 // 方式
Android---自定义View（一）
本人随手记录，内容只是个人看懂程度，对内容有任何疑问请勿打扰
10-09 153
效果图： 自定义view： public class ViewDemo extends LinearLayout { private TextView btn_add,btn_sub; private EditText edi_number; private int MainNumber; private OnClickNumberChangeListener listener=null; /** * 在java代码里new的时候会用到 *
Android自定义view原理及自定义View示例
haoxuhong的博客
06-04 3199
自定义View一共分为6步第一步public SpreadView(Context context) { super(context); } public SpreadView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); } public SpreadView(Context c...
如何正确使用Android自定义View
temp7695的博客
08-08 715
但是上面的实现，会多出一个无用的层级来， 因为layout里最外层的标签是LinearLayout，解析完毕后，会加到CustomView本身的这个Linearlayout上来，其中一个LinearLayout是没有必要的。这里看到如果是自定义view， 及带包名的xx.xx.xx格式的标签名， 会直接调用，createView，否则即为系统view， 会调用onCreateView，实际上调用到PhoneLayout的onCreateView方法，在加上系统包名的前缀后再调回createView方法。..
自定义View 出现android.view.InflateException的几种情况总结
热门推荐
dongkui_的博客
04-09 2万+
引言：这是本人的第一篇CSDN，总结不全的地方请指出，及时改正，直接进入正题。1、个人遇到的第一种情况：(借鉴手势解锁时发现的)点击打开链接在自定义的View中使用了高版本的SDK中的方法，是在在低版本SDK中运行时出现android.view.InflateException。例如：正确修改：2、自定View在布局中出现错误的书写，例如：1)、路径不全、大小不正确2)、名称的拼写错误、大小写错误...
自定义view时遇到的android.view.InflateException: Binary XML file问题
jxgtalent的专栏
01-12 1535
自定义一个view控件，在写完编译成功在手机上运行时老是提示android.view.InflateException: Binary XML file的异常 查看了一遍构造函数书写也是正确，纠结了，于是重新查看了sdk的view构造方法，终于发现了问题所在。从下图可知 public View (Context context) Added in API level 1
请讲上面的文字用代码的方式实现
最新发布
06-11
好的，下面是一个简单的Android通讯录的代码实现，供你参考： 1. 在activity_main.xml布局文件中添加ListView和FloatingActionButton控件： ``` android:id="@+id/contact_list" android:layout_width="match_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值