Android进阶教程之ViewGroup自定义布局

 更新时间:2019年06月23日 09:15:02   作者:水中鱼之1999  
这篇文章主要给大家介绍了关于Android进阶教程之ViewGroup自定义布局的相关资料,文中通过示例代码介绍的非常详细,对各位Android开发者们具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

前言

在我们的实际应用中, 经常需要用到自定义控件,比如自定义圆形头像,自定义计步器等等。但有时我们不仅需要自定义控件,举个例子,FloatingActionButton 大家都很常用,所以大家也很经常会有一种需求,点击某个 FloatingActionButton 弹出更多 FloatingActionButton ,这个需求的一般思路是写 n 个 button 然后再一个个的去设置动画效果。但这实在是太麻烦了,所以网上有个 FloatingActionButtonMenu 这个开源库,这就是利用到了自定义布局 「ViewGroup」,现在就让我给他家介绍下,如何自定义布局 「layout」。

难点

相比于自定义 View ,自定义 ViewGroup 的难点在于,子控件位置的确定和布局大小的确定。不像 单个 View 子要花粉好模式,测量好宽度就搞定了,ViewGroup 的长宽根据子 View 的数量和单个的大小变化而变化。这就是最大的坎,所以该如何确定 ViewGroup 的大小呢?

步骤

这里 我为大家设计一个 类似 LinearLayout 线性布局的 ViewGroup 作为范例。

首先,如果是一个 LinearLayout 那么当设置 wrap_content 时,他就会以子空间中最宽的那个为它的宽度。同时在高度方面会是所有子控件高度的总和。所以我们先写两个方法,分别用于测量 ViewGroup 的宽度和高度。

 private int getMaxWidth(){
  int count = getChildCount();
  int maxWidth = 0;
  for (int i = 0 ; i < count ; i ++){
   int currentWidth = getChildAt(i).getMeasuredWidth();
   if (maxWidth < currentWidth){
    maxWidth = currentWidth;
   }
  }
  return maxWidth;
 }
 
 private int getTotalHeight(){
  int count = getChildCount();
  int totalHeight = 0;
  for (int i = 0 ; i < count ; i++){
   totalHeight += getChildAt(i).getMeasuredHeight();
  }
  return totalHeight;
 }

对于 ViewGroup 而言我们可以粗略的分为两种模式:固定长宽模式(match_parent),自适应模式(wrap_content),根据这两种模式,就可以对 ViewGroup 的绘制进行划分。这里关于 measureChildren 这个方法,他是用于将所有的子 View 进行测量,这会触发每个子 View 的 onMeasure 函数,但是大家要注意要与 measureChild 区分,measureChild 是对单个 view 进行测量

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 
  measureChildren(widthMeasureSpec, heightMeasureSpec);
 
  int widthMode = MeasureSpec.getMode(widthMeasureSpec);
  int width  = MeasureSpec.getSize(widthMeasureSpec);
  int heightMode= MeasureSpec.getMode(heightMeasureSpec);
  int height = MeasureSpec.getSize(heightMeasureSpec);
 
  if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST){
   int groupWidth = getMaxWidth();
   int groupHeight= getTotalHeight();
 
   setMeasuredDimension(groupWidth, groupHeight);
  }else if (widthMode == MeasureSpec.AT_MOST){
   setMeasuredDimension(getMaxWidth(), height);
  }else if (heightMode == MeasureSpec.AT_MOST){
   setMeasuredDimension(width, getTotalHeight());
  }
 }

重写 onLayout

整完上面这些东西,我们的布局大小七十九已经出来了,然我们在活动的布局文件里面加上它,并添加上几个子 View 然后运行一下,先看看效果:

 <com.entry.android_view_user_defined_first.views.MyLinearLayout
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@color/colorAccent">
 
  <Button
   android:layout_width="100dp"
   android:layout_height="50dp"
   android:text="qwe"/>
 
  <Button
   android:layout_width="250dp"
   android:layout_height="150dp"
   android:text="qwe"/>
 
  <Button
   android:layout_width="200dp"
   android:layout_height="75dp"
   android:text="qwe"/>
 
 </com.entry.android_view_user_defined_first.views.MyLinearLayout>

运行效果如下:


我们看见布局出来了,大小好像也没啥问题,但是子 View 呢??! 这么没看见子 View 在看看代码,系统之前然我们重写的 onLayout() 还是空着的呀!!也就是说,子 View 的大小和位置根本就还没有进行过设定!让我们来重写下 onLayout() 方法。

 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {
  int count = getChildCount();
  int currentHeight = 0;
  for (int i = 0 ; i < count ; i++){
   View view = getChildAt(i);
   int height = view.getMeasuredHeight();
   int width = view.getMeasuredWidth();
   view.layout(l, currentHeight, l + width, currentHeight + height);
   currentHeight += height;
  }
 }

再运行一下看看:


成功了有木有!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。

相关文章

  • Android开发手册Chip监听及ChipGroup监听

    Android开发手册Chip监听及ChipGroup监听

    这篇文章主要为大家介绍了Android开发手册Chip监听及ChipGroup监听,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • Android编程实现在底端显示选项卡的方法

    Android编程实现在底端显示选项卡的方法

    这篇文章主要介绍了Android编程实现在底端显示选项卡的方法,涉及Android界面线性布局、相对布局及选项卡设置相关操作技巧,需要的朋友可以参考下
    2017-02-02
  • Flutter 异步编程之单线程下异步模型图文示例详解

    Flutter 异步编程之单线程下异步模型图文示例详解

    这篇文章主要为大家介绍了Flutter 异步编程之单线程下异步模型图文示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Android编程视频播放API之MediaPlayer用法示例

    Android编程视频播放API之MediaPlayer用法示例

    这篇文章主要介绍了Android编程视频播放API之MediaPlayer用法,结合实例形式分析了基于Android API实现视频播放功能的多媒体文件读取、判断、事件响应及流媒体播放等相关实现技巧,需要的朋友可以参考下
    2017-08-08
  • Android中ArrayList和数组相互转换

    Android中ArrayList和数组相互转换

    在我们日常开发中难免会要将ArrayList和数组相互转换,那么如何才能相互转换呢?下面跟着小编一起通过这篇文章学习学习。
    2016-08-08
  • Android 三种动画详解及简单实例

    Android 三种动画详解及简单实例

    这篇文章主要介绍了Android 三种动画详解及简单实例的相关资料,需要的朋友可以参考下
    2017-04-04
  • Android 实现左滑出现删除选项

    Android 实现左滑出现删除选项

    滑动删除的部分主要包含两个部分, 一个是内容区域(用于放置正常显示的view),另一个是操作区域(用于放置删除按钮)。下面通过本文给大家介绍Android 实现左滑出现删除选项,需要的朋友可以参考下
    2017-06-06
  • Android 自定义view实现TopBar效果

    Android 自定义view实现TopBar效果

    这篇文章主要为大家详细介绍了Android 自定义view实现TopBar效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • Kotlin中双冒号::使用方法

    Kotlin中双冒号::使用方法

    这篇文章主要给大家介绍了关于Kotlin中双冒号::使用的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Kotlin具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09
  • Kotlin实现在类里面创建main函数

    Kotlin实现在类里面创建main函数

    这篇文章主要介绍了Kotlin实现在类里面创建main函数,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-03-03

最新评论