Android编程重写ViewGroup实现卡片布局的方法

 更新时间:2016年02月17日 09:41:18   作者:xurong  
这篇文章主要介绍了Android编程重写ViewGroup实现卡片布局的方法,实例分析新建FlowLayout继承ViewGroup类及设置布局文件实现卡片布局效果的相关技巧,需要的朋友可以参考下

本文实例讲述了Android编程重写ViewGroup实现卡片布局的方法。分享给大家供大家参考,具体如下:

实现效果如图

实现思路

1. 重写onMeasure(int widthMeasureSpec, int heightMeasureSpec)设置每个子View的大小

2. 重写onLayout(boolean changed, int l, int t, int r, int b) 设置每个子View的位置

第一步:新建FlowLayout继承ViewGroup

package com.rong.activity;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
/**
 * 卡片布局
 * 
 * @author 徐荣
 *
 */
public class FlowLayout extends ViewGroup {
  public FlowLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
  }
  @Override
  protected void onLayout(boolean changed, int l, int t, int r, int b) {
    // 当前子View的数量
    int childSize = getChildCount();
    // 获取行宽
    int lineWidth = getMeasuredWidth();
    // 当前是第几行
    int lines = 1;
    // 当前累加的行宽
    int nowLineWidth = 0;
    for (int i = 0; i < childSize; i++) {
      View view = getChildAt(i);
      // 子View的宽度
      int childWidth = view.getMeasuredWidth();
      // 子View的高度
      int childHeight = view.getMeasuredHeight();
      // 如果当前的nowLineWidth+childWidth>= lineWidth 则换行
      if (nowLineWidth + childWidth >= lineWidth) {
        nowLineWidth = 0;
        lines = lines + 1;
      }
      // 设置子View的位置
      view.layout(nowLineWidth, childHeight * (lines - 1), nowLineWidth + childWidth, childHeight * lines);
      nowLineWidth = nowLineWidth + childWidth;
      // 如果nowLineWidth >= lineWidth 则换行
      if (nowLineWidth >= lineWidth) {
        nowLineWidth = 0;
        lines = lines + 1;
      }
    }
  }
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    // 设置自己View的大小
    setMeasuredDimension(widthMeasureSpec, heightMeasureSpec);
    for (int i = 0; i < getChildCount(); i++) {
      View view = getChildAt(i);
      // 设置每个子View的大小
      view.measure(view.getMeasuredWidth(), view.getMeasuredHeight());
    }
  }
}

第二步:新建布局文件

<?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="match_parent"
  android:background="@android:color/black"
  android:orientation="vertical" >
  <com.rong.activity.FlowLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff" >
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Apple" />
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Button" />
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Cup" />
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Double" />
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Ear" />
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Flower" />
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Game" />
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Hotdog" />
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="interseting" />
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="joker" />
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="king" />
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="mother" />
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="lost" />
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="noting" />
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="orange" />
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="poker" />
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="qustion" />
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="ring" />
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="string" />
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="type" />
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="unit" />
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="vertion" />
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="west" />
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="x" />
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="young" />
    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="zip" />
  </com.rong.activity.FlowLayout>
</RelativeLayout>

运行!

更多关于Android相关内容感兴趣的读者可查看本站专题:《Android开发入门与进阶教程》、《Android基本组件用法总结》、《Android视图View技巧总结》、《Android布局layout技巧总结》及《Android控件用法总结

希望本文所述对大家Android程序设计有所帮助。

相关文章

  • Android 打开相册选择单张图片实现代码

    Android 打开相册选择单张图片实现代码

    这篇文章主要介绍了Android 打开相册选择单张图片实现代码的相关资料,需要的朋友可以参考下
    2017-05-05
  • Android编程实现抽屉效果的方法示例

    Android编程实现抽屉效果的方法示例

    这篇文章主要介绍了Android编程实现抽屉效果的方法,结合具体实例形式分析了Android抽屉效果的布局、功能实现及相关注意事项,需要的朋友可以参考下
    2017-06-06
  • 功能强大的登录界面Android实现代码

    功能强大的登录界面Android实现代码

    这篇文章主要为大家分享了功能强大的登录界面Android实现代码,验证码制作方法,自带一键删除功能,用户名密码为空时抖动提示效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • Android实现定时自动静音小助手

    Android实现定时自动静音小助手

    这篇文章主要为大家详细介绍了Android实现定时自动静音小助手,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Android实现3种侧滑效果(仿qq侧滑、抽屉侧滑、普通侧滑)

    Android实现3种侧滑效果(仿qq侧滑、抽屉侧滑、普通侧滑)

    这篇文章主要为大家详细介绍了Android实现多种侧滑效果,包括仿qq侧滑,抽屉侧滑,普通侧滑三种效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • Android开发中使用WebView控件浏览网页的方法详解

    Android开发中使用WebView控件浏览网页的方法详解

    这篇文章主要介绍了Android开发中使用WebView控件浏览网页的方法,结合实例形式较为详细的总结分析了Android WebView控件的功能、布局、设置、常用方法及相关操作技巧,需要的朋友可以参考下
    2017-10-10
  • Android自定义抛出异常的方法详解

    Android自定义抛出异常的方法详解

    这篇文章主要给大家介绍了关于Android自定义抛出异常的相关资料,文中通过示例代码介绍的非常详细,对各位Android开发者们具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • Android自定义View 仿QQ侧滑菜单的实现代码

    Android自定义View 仿QQ侧滑菜单的实现代码

    这篇文章主要介绍了Android自定义View 仿QQ侧滑菜单的实现代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-08-08
  • Android 实现左滑出现删除选项

    Android 实现左滑出现删除选项

    滑动删除的部分主要包含两个部分, 一个是内容区域(用于放置正常显示的view),另一个是操作区域(用于放置删除按钮)。下面通过本文给大家介绍Android 实现左滑出现删除选项,需要的朋友可以参考下
    2017-06-06
  • 浅谈Android中使用异步线程更新UI视图的几种方法

    浅谈Android中使用异步线程更新UI视图的几种方法

    本篇文章主要介绍了浅谈Android中使用异步线程更新UI视图的几种方法,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08

最新评论