【Android】自定义高复用布局

最新推荐文章于 2024-05-24 00:08:18 发布
最新推荐文章于 2024-05-24 00:08:18 发布
阅读量659 收藏 1
点赞数
分类专栏： Android 文章标签： Android 自定义布局 attrs style
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/UIChi/article/details/86493568
版权

先PO效果图

条状布局

卡片布局

以上两种基本是比较常用的布局类型，以第一个图为例进行说明。

先看xml代码，凸显一下效率~~

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/theme_white_color">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="@mipmap/ic_top_nor"/>

        <xxx.LineLinearLayout
            android:id="@+id/line1"
            app:line_image_right="@mipmap/ic_launcher"
            app:line_title_text="巴拉巴拉巴拉"
            style="@style/line_common"
            />

        <xxx.LineLinearLayout
            android:id="@+id/line2"
            app:line_image_right="@mipmap/ic_launcher"
            app:line_title_text="巴拉巴拉巴拉"
            app:line_image_left="@mipmap/ic_back"
            style="@style/line_common"
            app:line_linepview_size_h="0dp"
            />
    </LinearLayout>

</FrameLayout>

需要设置的三个参数：

  1. app:line_image_right
  2. app:line_title_text
  3. app:line_image_left

以及一个style：style="@style/line_common"

通过应用方式可以看出来，三个参数都是在attrs中设置的。
这种复用方式和<include layout="@layout/include_header_layout"/>的区别在于，前者可以在一个页面中多样式复用，而后者只能同样式复用（View.GONE等不计入为样式变更）。

实现

实现原理大概如下：
在这里插入图片描述

先定义一个布局原型,设置一下大概长什么样
比如第一个图 可以是这样：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/ll_line_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:gravity="center_vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/iv_line_left" />

        <TextView
            android:gravity="center_vertical"
            android:id="@+id/tv_line_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <ImageView
            android:gravity="center_vertical"
            android:id="@+id/iv_line_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <View
        android:id="@+id/v_line"
        android:layout_width="10dp"
        android:layout_height="10dp"/>

</LinearLayout>

里边有四个View：

  1. 靠左的图片
  2. 中间的文字
  3. 靠右的图片
  4. 下方的分割线

在attrs定义属性，大概包含了个控件的尺寸、内容、可设置的颜色、离上下左右的距离等，示例：

<!-- LineLinearLayout属性 -->
    <declare-styleable name="LineLinearLayout">
        <attr name="line_title_text" format="string" />     //标题文字内容
        <attr name="line_title_text_size" format="dimension" />  //标题文字尺寸
        <attr name="line_title_text_color" format="color" />   //标题文字颜色
        <attr name="line_title_text_h" format="dimension"/>  //标题文字高度

        <attr name="line_image_left" format="reference" />   //图片资源
        <attr name="line_image_left_width" format="dimension" /> //imageView的宽度
        <attr name="line_image_left_height" format="dimension" />  //imageView的高度

        <attr name="line_image_right" format="reference" />   //图片资源
        <attr name="line_image_right_width" format="dimension" /> //imageView的宽度
        <attr name="line_image_right_height" format="dimension" />  //imageView的高度

        <attr name="line_linepview_size_w" format="dimension"/> //分割线的宽
        <attr name="line_linepview_size_h" format="dimension"/> //分割线的高
        
        <attr name="line_color" format="color" /> //背景色
    </declare-styleable>

然后写个class，继承LinearLayout，示例：

/**
 * 描述：各页面条状布局···
 * 创建者：uichi
 * 创建时间：2019/1/14  16:26
 * 建议所有margin值都列出来
 */
public class LineLinearLayout extends LinearLayout {

    private ImageView leftImage;
    private ImageView rightImage;
    private TextView title;
    private View lineview;
    private LinearLayout linearLayout;

    //显示内容
    private String titleText;
    private int titleTextColor;
    private int titleTextSize;
    private int titleTextH;

    //左边图片
    private Drawable drawableLeft;
    private int  drawableLeftw;
    private int  drawableLefth;

    //右边图片
    private Drawable drawableRight;
    private int  drawableRightw;
    private int  drawableRighth;

    //底部分割线
    private int lineHight;
    private int lineWidth;
    private int lineColor;

    public LineLinearLayout(Context context) {
        super(context);
    }

    public LineLinearLayout(Context context,@Nullable AttributeSet attrs) {
        super(context, attrs);
        if (!isInEditMode()) {
            //解决可视化编辑器无法识别自定义控件的问题
            // 在构造函数中将Xml中定义的布局解析出来。
            LayoutInflater.from(context).inflate(R.layout.include_layout_linecard, this, true);
            leftImage = findViewById(R.id.iv_line_left);
            rightImage = findViewById(R.id.iv_line_right);
            title = findViewById(R.id.tv_line_title);
            linearLayout = findViewById(R.id.ll_line_layout);
            lineview = findViewById(R.id.v_line);
        }

        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.LineLinearLayout);
        titleText = a.getString(R.styleable.LineLinearLayout_line_title_text);
        titleTextColor = a.getColor(R.styleable.LineLinearLayout_line_title_text_color, Color.WHITE);
        titleTextSize = a.getDimensionPixelOffset(R.styleable.LineLinearLayout_line_title_text_size, 12);
        titleTextH = a.getDimensionPixelOffset(R.styleable.LineLinearLayout_line_title_text_h, 60);

        drawableLeftw = a.getDimensionPixelOffset(R.styleable.LineLinearLayout_line_image_left_width, 0);
        drawableLefth = a.getDimensionPixelOffset(R.styleable.LineLinearLayout_line_image_left_height, 0);
        drawableLeft = a.getDrawable(R.styleable.LineLinearLayout_line_image_left);

        drawableRightw = a.getDimensionPixelOffset(R.styleable.LineLinearLayout_line_image_right_width, 0);
        drawableRighth = a.getDimensionPixelOffset(R.styleable.LineLinearLayout_line_image_right_height, 0);
        drawableRight = a.getDrawable(R.styleable.LineLinearLayout_line_image_right);

        lineHight = a.getDimensionPixelOffset(R.styleable.LineLinearLayout_line_linepview_size_h, 0);
        lineWidth = a.getDimensionPixelOffset(R.styleable.LineLinearLayout_line_linepview_size_w, 0);

        lineColor = a.getColor(R.styleable.LineLinearLayout_line_color, 0xffffff);

        if (!isInEditMode()) {
            //将获取到的值设置到相应位置
            LayoutParams linealayoutParams = new LayoutParams(LayoutParams.MATCH_PARENT, titleTextH);
            linealayoutParams.setMargins(0, 0, 0, 0);
            linearLayout.setBackgroundColor(lineColor);
            linearLayout.setLayoutParams(linealayoutParams);

            title.setText(titleText);
            title.setTextSize(TypedValue.COMPLEX_UNIT_PX, titleTextSize);
            title.setTextColor(titleTextColor);

            LayoutParams layoutParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
            layoutParams.setMargins(0, 0, 0, 0);
            layoutParams.gravity = Gravity.CENTER;
            title.setLayoutParams(layoutParams);


            if(drawableLeft!=null){
                leftImage.setImageDrawable(drawableLeft);
                LayoutParams imageLeftLayoutParams = new LayoutParams(drawableLeftw, drawableLefth);
                imageLeftLayoutParams.gravity = Gravity.CENTER;
                imageLeftLayoutParams.setMargins(10, 0, 0, 0);
                leftImage.setLayoutParams(imageLeftLayoutParams);
            }else {
                LayoutParams imageLeftLayoutParams = new LayoutParams(0, 0);
                imageLeftLayoutParams.setMargins(0, 0, 0, 0);
                leftImage.setLayoutParams(imageLeftLayoutParams);
            }

            rightImage.setImageDrawable(drawableRight);

            LayoutParams imageRightLayoutParams = new LayoutParams(drawableRightw, drawableRighth);
            imageRightLayoutParams.gravity = Gravity.CENTER;
            imageRightLayoutParams.weight = 1;
            imageRightLayoutParams.setMargins(0, 0, 10, 0);
            rightImage.setLayoutParams(imageRightLayoutParams);

            LayoutParams imageLineLayoutParams = new LayoutParams(lineWidth, lineHight);
            //imageRightLayoutParams.gravity = Gravity.CENTER;
            lineview.setBackgroundColor(lineColor);
            lineview.setLayoutParams(imageLineLayoutParams);
        }
        a.recycle(); //这个别忘了
    }
}

大概的意思是：

  1. 先把View读出来
  2. new一个TypedArray对象，用于读取attrs
  3. 利用attrs中的值对各个布局重设宽、高、居中、内容、颜色等属性
    其中有一段：
		if(drawableLeft!=null){
              leftImage.setImageDrawable(drawableLeft);
              LayoutParams imageLeftLayoutParams = new LayoutParams(drawableLeftw, drawableLefth);
              imageLeftLayoutParams.gravity = Gravity.CENTER;
              imageLeftLayoutParams.weight = 1;
              imageLeftLayoutParams.setMargins(10, 0, 0, 0);
              leftImage.setLayoutParams(imageLeftLayoutParams);
          }else {
              LayoutParams imageLeftLayoutParams = new LayoutParams(0, 0);
              imageLeftLayoutParams.setMargins(0, 0, 0, 0);
              leftImage.setLayoutParams(imageLeftLayoutParams);
          }

drawableLeft在布局页面中有传入的话，就设置为(drawableLeftw, drawableLefth)，没有传入就不占空间了，设置为(0, 0)。
另外，从TypedArray中读取的数据，部分类型需要默认值，比如：

titleTextSize = a.getDimensionPixelOffset(R.styleable.LineLinearLayout_line_title_text_size, 12);

表示如果TextSize没有设置，那就默认为12。

接下来在xml布局文件中引用这个控件：

		<你的路径.LineLinearLayout
            android:id="@+id/line1"
            app:line_image_right="@mipmap/ic_launcher"
            app:line_title_text="巴拉巴拉巴拉"
            ······
            />

attrs中定义的属性基本都要赋值，但对同一个页面来说，基本的字号、背景色、尺寸等都是一致的，所以可以把attrs赋值写在style中。示例：

	<style name="line_common">
        <item name="line_image_left_height">20dp</item>
        <item name="line_image_left_width">20dp</item>
        <item name="line_color">@color/theme_white</item>
        <item name="line_title_text_size">20dp</item>
        <item name="line_title_text_color">@color/theme_blue_color</item>
        <item name="line_title_text_h">60dp</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="line_image_right_height">@dimen/margin_size50</item>
        <item name="line_image_right_width">60dp</item>
        <item name="line_linepview_size_w">10dp</item>
        <item name="line_linepview_size_h">2dp</item>
    </style>

然后在xml中引用，也可以在xml中重写，比如，第一图中，最后一行没有分割线，重写为：app:line_linepview_size_h="0dp"

		<你的路径.LineLinearLayout
            android:id="@+id/line2"
            app:line_image_right="@mipmap/ic_launcher"
            app:line_title_text="巴拉巴拉巴拉"
            app:line_image_left="@mipmap/ic_back"
            style="@style/line_common"
            app:line_linepview_size_h="0dp"
            />

使用的方式还是比较多的，图中的设计样式是前边一截没有分割线，后边一截有分割线，不需要去画分割线，可以反过来将需要分割线的地方空出来。
如果是两边没分割线，中间有分割线呢？
这个时候需要在attrs中再添加两个属性：layout_marginRight和layout_marginLeft，示例：

//原有的
		LayoutParams imageLineLayoutParams = new LayoutParams(lineWidth, lineHight);
            //imageRightLayoutParams.gravity = Gravity.CENTER;
            lineview.setBackgroundColor(lineColor);
            lineview.setLayoutParams(imageLineLayoutParams);

//新的
		LayoutParams imageLineLayoutParams = new LayoutParams(LayoutParams.MATCH_PARENT, lineHight);
			imageLineLayoutParams.setMargins(marginLeft, 0, marginRight, 0);// 左、上、右、下
            imageRightLayoutParams.gravity = Gravity.CENTER; 	//居中
            lineview.setBackgroundColor(lineColor);
            lineview.setLayoutParams(imageLineLayoutParams);

再在style中增加marginLeft、marginRight设置，xml中引用时，就已经变成了仅中间有分割线。
至此，就完事了。

三须鳗鱼
关注
专栏目录
Android 组合控件实现布局的复用的方法
01-04
看到很多项目会有实现自己的标题栏的做法，通常的界面是左边按钮或文字，加上中间的标题和右边的按钮或文字组成的。比较好的一种做法是使用include标签，复用同一个xml文件来实现布局的复用。但是这种方法是通过代码的方式来设置标题，左右按钮等其他的属性，会导致布局属性和Activity代码耦合性比较高。 因此，我们要通过自定义View，继承ViewGroup子类来实现这样的布局，降低布局文件和Activity代码耦合性。 首先，我们需要写出布局文件layout_custom_titlebar.xml。 <?xml version=1.0 encoding=utf-8?> <merge
Android自定义listview布局实现上拉加载下拉刷新功能
01-05
下面是我写的一种自定义的布局，复用性也比较的强。首先就是继承的listview的自定义view。  AutoListView.Java: package com.example.mic.testdemo.view; import android.annotation.TargetApi; import android....
android中listView如何复用多种布局
haogangshang的专栏
02-12 307
                          android中listView如何复用多种布局       我们都知道，当listView的item比较多的时候，会利用convertView对每个item进行缓存       但是这还不够，当我们的每个item布局中的控件比较多的时候，我们还会用ViewHolder对每个item布局中的view进行缓存，达到减少调用findViewB...
android 布局复用,android开发：layout复用
weixin_31110741的博客
05-26 422
android开发页面可能会有如下场景：「一个listview的item会有多种样式，但是有些是一成不变的，比如说聊天界面：我可以发送图片，文字，视频。但是我的头像，名字是不会变的。也就是说发送内容是变化的，发送者的信息是不变的。」那么如何让发送者信息是一个layout(并且复用)，而发送者内容是另一个layout(重新写)。如下解决：讲发送的信息作为一个layout，而内容方面留出一个view占...
android 重用布局,Android Developers:使用<include/>重用布局 - 好库文摘
weixin_33796891的博客
05-26 103
尽管Android 提供各种小部件来提供小的和可以重用的交互元素，你也可能需要更大的重用组件，它要求一个专门的布局。为了高效的重用整个布局，你能使用和标识在当前的布局中嵌入别的布局。重用布局特别的强大，因为它允许你创建可重用的复杂布局。例如，一个yes/no按钮面板，或者自定义带有描述字符串的滚动条。它也就是说，你的应用的任何跨多个布局的相同的元素能被提取，单独管理，然后被包含在每个布局中，所以当...
Android应用布局技巧：创建可复用的UI组件
编程资料大全
05-06 121
Android平台提供了广泛的UI可视组件---widget，把这些小的可视的构件组合到一起，就可以给用户提供复杂而有用的界面。但是，应用程序经常需要一些高级可视组件，要满足这样的需求，并要达到高效的目的，可以把一些标准的widget组合成一个新的可复用的组件。 例如，包含一个进度条和一个取消按钮的操作进度表示组件；包含两个按钮的面板（取消和确认操作）；带有一个图标、标题和说明的面板等等。通过编...
android自定义控件、自定义圆角布局Demo
05-21
本示例"android自定义控件、自定义圆角布局Demo"提供了一个基于`FrameLayout`的自定义布局，它允许开发者创建具有圆角效果的视图，这对于构建现代、美观的UI设计非常有用。下面将详细介绍这个Demo涉及的知识点及其...
Android自定义view实现代码复用
12-16
总结来说，Android自定义View的实现涉及多个方面，包括继承基类、重写绘图方法、定义和使用自定义属性、处理触摸事件等。通过这些技巧，开发者可以构建出强大且灵活的组件，为应用带来独特的视觉效果和交互体验。而...
详解Android自定义View--自定义柱状图
08-31
在XML布局文件中，通过`<declare-styleable>`标签定义自定义View所需的属性，例如柱状图的颜色、渐变颜色等。这使得在XML中可以方便地设置和修改这些属性。 ```xml <attr name="leftColor" format="color"></attr...
Android自定义View实例：深度剖析 水晶/水滴 波浪球 实现步骤详解
03-25
在Android开发中，自定义View是一项重要的技能，它允许开发者创造出独特且富有表现力的UI元素，提升用户体验。本文将深度剖析如何实现一个名为“水晶/水滴 波浪球”的自定义View，并通过详细步骤讲解，帮助你掌握...
使用include实现布局(layout)复用
03-06
假使我们遇到这么一种情况，我们需要开发一个app，这个app的基本所有的Activity都使用到了相同的布局，我们该如何设计？我们是给这些个Activity布局文件都统一加上一样的布局代码，但是维护起来很麻烦，修改不方便，有没有一种类似于编程语言的include语法呢？答案是有的，但是sdk的demo并没有说出使用方法，但这并不说明不好使用，其实很简单。下面的IncludeXmlTest工程给出了样式。
Android 多个页面复用一段布局文件
Suya的博客
12-23 4136
复用的布局文件在一些APP中 ,需要复用一些通用的布局文件 , 为了避免重复写布局文件 , 重复实例化控件 , 重复设置监听方法 . 可以把该部分代码抽取出来 , 单独封装, 利用接口回调 , 把整个代码封装起来 , 在activity 中只需要一行代码就可以实例化该部分代码 . common_bottom_layout.xml<?xml version="1.0" encoding="utf-8"
android项目复用
海纳百川，壁立千仞
12-25 849
Android项目复用有两种方法，一是将项目导出成jar包，供第三方调用；一是将项目设置成Library项目，供Android项目使用。 一、将项目导出成jar包 具体做法：在eclipse中，File->Export->Java->Jar File 优点：第三方无法更改jar文件。 缺点：资源文件无法打包进jar文件，所以必须把资源文件拷贝到新的项目下。 二、将项目设置
Android 复用自制的控件(2)
梦想无论怎样模糊，总潜伏在我们心底，使我们的心境永远得不到安宁.
08-30 1581
package com.inrayfitness.widget; import com.inrayfitness.R; import android.app.Activity; import android.content.Context; import android.content.Intent; import android.view.View; import android.view.
android 开发代码复用技术方法
最新发布
oYingJie1的博客
05-24 226
代码复用
android 组件重用,Android 组合控件实现布局的复用的方法
weixin_39683176的博客
05-25 236
看到很多项目会有实现自己的标题栏的做法，通常的界面是左边按钮或文字，加上中间的标题和右边的按钮或文字组成的。比较好的一种做法是使用include标签，复用同一个xml文件来实现布局的复用。但是这种方法是通过代码的方式来设置标题，左右按钮等其他的属性，会导致布局属性和Activity代码耦合性比较高。因此，我们要通过自定义View，继承ViewGroup子类来实现这样的布局，降低布局文件和Activ...
android控件复用,Android组件化你了解多少？
weixin_32998893的博客
05-31 250
前言组件化作为Android客户端技术的一个重要分支，近年来一直是业界积极探索和实践的方向。为什么要组件化近年来，为什么这么多团队要进行组件化实践呢？组件化究竟能给我们的工程、代码带来什么好处？我们认为组件化能够带来两个最大的好处：提高组件复用性可能有些人会觉得，提高复用性很简单，直接把需要复用的代码做成Android Module，打包AAR并上传代码仓库，那么这部分功能就能被方便地引入和使用。...
安卓APP实战（三）：Layout布局文件以及布局文件的复用
weixin_42540829的博客
12-28 1639
安卓主要布局方式有线性布局（LinearLayout）、相对布局（RelativeLayout）、帧布局（FrameLayout）、表格布局(TableLayout) 就是如何排列一系列的控件，展示在界面上。 常用的三种布局： 线性布局就是将各控件按照在layout文件中定义的顺序，按照横向或者纵向进行排列。 相对布局是将各控件按照一定的关系排列，比如在XX控件下方，在XX控件上方等，布局是最灵活...
Android Studio代码模块快捷复用
沉溺于移动互联网
05-25 311
打开Android Studio的Setting，输入live Templates，找到plain。点击右侧+号，添加 代码模板，例如上图所示。
Android 自定义View：组合控件实现布局复用
"Android 组合控件实现布局的复用的方法" 在Android开发中，布局复用是一项重要的优化技巧，可以提高代码的可维护性和减少重复工作。...在实际开发中，这种自定义组合控件的方法同样适用于其他复杂的可复用布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值