Android UI封装,组件封装

2020-03-21 12:02:58

Android通用UI封装----“我的”页面Item

问题

程序员最讨厌的事情是什么? 不是代码多到写不完,而是重复的代码要写无数遍。身为程序员的我们,肯定经常被这个问题所困扰。就比如Android APP中,“我的”页面中的每一个Item,就像下图这样的这样的,


“我的”页面常见布局

还有像这种资料录入页面的:

资料录入页面

像这种页面布局是极其常见的,几乎在每个APP中都有那么一两个这样的页面。这种页面让Android开发人员很是头疼,开发难度倒是不难,就是重复代码太多,没有挑战性。用一句不好听的话来说就是“代码又臭又长”。所以呢,我就对此做了一个封装,达到一行代码就是一行item。

使用效果

先来看一下使用效果,看看封装后,使用起来有多简单。

代码

对应的效果

上面的代码对有一定Android开发经验的你应该不难理解,起始就是new一个Item对象,设置其属性(具体下面解释),设置监听事件(具体下面解释),添加到LinnearLayout容器中。

封装步骤

1.布局

布局不难,也就是把通常写的item布局抽取出来。主要包括这么几个部分:上分割线、下分割线、左Icon、中间文字(偏左那个)、中间输入框、右边文字、右边Icon(默认右箭头)。
直接上代码,根据代码里的注释,很好理解。




  • 2020-03-03 09:46:42

    JS实现HTML标签转义及反转义

    简单说一下业务场景,前台用户通过input输入内容,在离开焦点时,将内容在div中显示。 这时遇到一个问题,如果用户输入了html标签,则在div显示中,标签被解析。 由于是纯前端操作,不涉及后端,因此需要通过js对输入内容进行转义。

  • 2020-03-03 09:51:38

    写一个可插入自定义标签的 Textarea 组件

    为了实现这个功能,我最先想的是改造一个 <textarea> 然后我想到了 contenteditable (链接指向 mozilla.org) 这一属性 这是一个 html5 的属性,可以让元素内容可编辑

  • 2020-03-03 20:18:21

    Vuepress如何做到在 Markdown 中使用 Vue 语法

    在 vuepress 刚出时,我就觉得这是个很值得追更的开源项目。果不其然,里面众多的前端编程技巧让我受益良多。 于是在周末这种日子里,人家追剧我追码。 今天,我就和大家分享下 vuepress 是如何做到在 Markdown 中使用 Vue 语法的。

  • 2020-03-03 21:35:57

    PWA:安装 Web 应用

    要完整介绍 PWA 是什么,需要扯一堆名词,毫无意义。 以改造公羊阅读的过程为例,简要的说明什么是 PWA。