Android 实现带头部文字输入框的自定义控件

前言

在app的输入框中,需要应用到很多带有前缀说明的输入框,运用原有的输入框和文本控件,一个带头部的输入框就会增加三个控件在layout文件中。当布局文件输入框较少的情况下,这样对后期维护影响不大,但在多个带头部的输入框下,布局文件代码量会很大,影响阅读以及后期维护。而封装过后的控件,在使用中仅仅需要几行代码可实现几十行的效果。

简介

  • 带头部文字的输入框
  • 可在xml定义头部文字样式
  • 可在xml定义输入框样式
  • 可在xml定义提示文字样式
  • 可在xml定义头部和输入框的间距和边距

效果图

使用方法

<com.momin.common.widget.EditInputView
    android:layout_width="match_parent"
    android:layout_height="50dp"
    app:inputMarginStart="10dp"
    app:headerText="姓名"
    app:hint="请输入联系人姓名"
    app:inputType="text"
    app:maxLength="30"/>

源码在这

有帮助请点个赞

attrs.xml 属性文档

<!--  公共属性  -->
<!--  前置文字内容  -->
<attr name="headerText" format="string"/>
<!--  前置文字大小  -->
<attr name="headerTextSize" format="dimension"/>
<!--  前置文字大小  -->
<attr name="headerTextStyle">
    <flag name="normal" value="0" />
    <flag name="bold" value="1" />
    <flag name="italic" value="2" />
</attr>
<!--  前置文字颜色  -->
<attr name="headerTextColor" format="reference|color"/>
<!--  前置文字左边间距  -->
<attr name="headerPaddingStart" format="dimension"/>
<!--  前置文字右边间距  -->
<attr name="headerPaddingEnd" format="dimension"/>
<!--  前置文字顶部间距  -->
<attr name="headerPaddingTop" format="dimension"/>
<!--  前置文字底部间距  -->
<attr name="headerPaddingBottom" format="dimension"/>
<!--  公共属性  -->

<!--  带前置文字的输入框  -->
<declare-styleable name="EditInputView">
    <!--  文字内容  -->
    <attr name="text" format="string"/>
    <!--  文字大小  -->
    <attr name="textSize" format="dimension"/>
    <!--  文字颜色  -->
    <attr name="textColor" format="reference|color"/>
    <!--  最大输入字符数  -->
    <attr name="maxLength" format="integer"/>
    <!--  输入限制  -->
    <attr name="android:enabled"/>
    <!--  输入类型  -->
    <attr name="android:inputType"/>
    <!--  输入开始边距  -->
    <attr name="inputMarginStart" format="dimension"/>
    <!--  输入结束边距  -->
    <attr name="inputMarginEnd" format="dimension"/>
    <!--  输入顶部边距  -->
    <attr name="inputMarginTop" format="dimension"/>
    <!--  输入底部边距  -->
    <attr name="inputMarginBottom" format="dimension"/>
    <!--  输入开始间距  -->
    <attr name="inputPaddingStart" format="dimension"/>
    <!--  输入结束间距  -->
    <attr name="inputPaddingEnd" format="dimension"/>
    <!--  输入顶部间距  -->
    <attr name="inputPaddingTop" format="dimension"/>
    <!--  输入底部间距  -->
    <attr name="inputPaddingBottom" format="dimension"/>
    <!--  输入底部间距  -->
    <attr name="android:gravity"/>
    <!--  提示文字  -->
    <attr name="hint" format="string"/>
    <!--  提示文字颜色  -->
    <attr name="hintColor" format="reference|color"/>
    <!--  前置文字内容  -->
    <attr name="headerText"/>
    <!--  前置文字大小  -->
    <attr name="headerTextSize"/>
    <!--  前置文字大小  -->
    <attr name="headerTextStyle"/>
    <!--  前置文字颜色  -->
    <attr name="headerTextColor"/>
    <!--  前置文字左边间距  -->
    <attr name="headerPaddingStart"/>
    <!--  前置文字右边间距  -->
    <attr name="headerPaddingEnd"/>
    <!--  前置文字顶部间距  -->
    <attr name="headerPaddingTop"/>
    <!--  前置文字底部间距  -->
    <attr name="headerPaddingBottom"/>
</declare-styleable>

common_edit_input_view.xml 布局文件

<?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">
    <!--  头部文字  -->
    <TextView
        android:id="@+id/tv_edit_head"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="start|center_vertical"/>
    <!--  输入框  -->
    <EditText
        android:id="@+id/et_edit_input"
        android:layout_toEndOf="@id/tv_edit_head"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:singleLine="true"
        android:background="@null"
        android:textColor="@color/c_2B303C"
        android:gravity="end|center_vertical"/>
</RelativeLayout>

EditInputView.java 控件类

package com.momin.common.widget;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Typeface;
import android.text.InputFilter;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.inputmethod.EditorInfo;
import android.widget.EditText;
import android.widget.RelativeLayout;
import android.widget.TextView;

import androidx.annotation.ColorRes;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.core.content.ContextCompat;

import com.momin.common.R;

/**
 * <p>Title: EditInputView</p>
 * <p>Description: 带头部输入框 </p>
 * <p>Copyright: </p>
 * <p>Company: </p>
 *
 * @author Momin
 * @version 1.0
 * @date 2021/3/10 18:00
 */

public class EditInputView extends RelativeLayout {

    TextView tvHead;
    EditText etInput;

    public EditInputView(Context context) {
        super(context);
        init(context, null);
    }

    public EditInputView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    /**
     * 初始化
     *
     * @param context   上下文
     * @param attrs     资源
     */
    private void init(Context context, AttributeSet attrs) {
        // 初始化对象
        initView(context);
        // 获取资源对象
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.EditInputView);
        // 初始化输入框
        initEdit(context, typedArray);

        // 初始化头部文字
        CharSequence headText = typedArray.getText(R.styleable.EditInputView_headerText);
        if (TextUtils.isEmpty(headText)) {
            // 头部为空时
            tvHead.setVisibility(GONE);
        } else {
            // 头部不为空时
            tvHead.setVisibility(VISIBLE);
            initHeaderText(context, typedArray, headText);
        }

        // 回收资源对象
        typedArray.recycle();
    }

    /**
     * 初始化视图
     *
     * @param context 上下文
     */
    private void initView(Context context) {
        LayoutInflater.from(context).inflate(R.layout.common_edit_input_view, this);
        tvHead = findViewById(R.id.tv_edit_head);
        etInput = findViewById(R.id.et_edit_input);
    }

    /**
     * 初始化输入框
     *
     * @param context       上下文
     * @param typedArray    资源对象
     */
    private void initEdit(Context context, TypedArray typedArray) {
        // 初始内容
        CharSequence editText = typedArray.getText(R.styleable.EditInputView_text);
        if (!TextUtils.isEmpty(editText)) {
            etInput.setText(editText);
        }
        // 字体大小
        setViewTextSize(etInput, R.styleable.EditInputView_textSize, typedArray);
        // 字体颜色
        setViewTextColor(context, etInput, R.styleable.EditInputView_textColor, typedArray);
        // 设置间距
        setEditPadding(typedArray);
        // 设置边距
        setEditMargin(typedArray);
        // 输入类型限制
        setLimitInputType(typedArray);
        // 输入长度限制
        setLimitInputLen(typedArray);
        // 输入限制:可输入性
        setInputBoolean(typedArray);
        // 输入字体排列位置
        setInputGravity(typedArray);

        initEditHint(context, typedArray);
    }

    /**
     * 设置字体大小
     *
     * @param view          被设置对象
     * @param attrId        属性Id
     * @param typedArray    资源对象
     */
    private void setViewTextSize(TextView view, int attrId, TypedArray typedArray) {
        float size = typedArray.getDimension(attrId, 14 * view.getPaint().density);
        view.getPaint().setTextSize(size);
    }

    /**
     * 设置字体风格
     *
     * @param view          被设置对象
     * @param attrId        属性Id
     * @param typedArray    资源对象
     */
    private void setViewTextStyle(TextView view, int attrId, TypedArray typedArray) {
        int style = typedArray.getInt(attrId, Typeface.NORMAL);
        view.setTypeface(Typeface.defaultFromStyle(style));
    }

    /**
     * 设置字体颜色
     *
     * @param context       上下文
     * @param view          被设置对象
     * @param attrId        属性Id
     * @param typedArray    资源对象
     */
    private void setViewTextColor(Context context, TextView view, int attrId, TypedArray typedArray) {
        int color = typedArray.getColor(attrId,
                ContextCompat.getColor(context, R.color.c_2B303C));
        view.setTextColor(color);
    }

    /**
     * 设置输入框间距
     *
     * @param typedArray 资源对象
     */
    private void setEditPadding(TypedArray typedArray) {
        // 开始间距
        int paddingStart = (int)typedArray.getDimension(R.styleable.EditInputView_inputPaddingStart, 0);
        // 结束间距
        int paddingEnd = (int)typedArray.getDimension(R.styleable.EditInputView_inputPaddingEnd, 0);
        // 顶部间距
        int paddingTop = (int)typedArray.getDimension(R.styleable.EditInputView_inputPaddingTop, 0);
        // 底部间距
        int paddingBottom = (int)typedArray.getDimension(R.styleable.EditInputView_inputPaddingBottom, 0);
        etInput.setPadding(paddingStart, paddingTop, paddingEnd, paddingBottom);
    }

    /**
     * 设置输入框边距
     *
     * @param typedArray 资源对象
     */
    private void setEditMargin(TypedArray typedArray) {
        // 开始边距
        int marginStart = (int)typedArray.getDimension(R.styleable.EditInputView_inputMarginStart, 0);
        // 结束边距
        int marginEnd = (int)typedArray.getDimension(R.styleable.EditInputView_inputMarginEnd, 0);
        // 顶部边距
        int marginTop = (int)typedArray.getDimension(R.styleable.EditInputView_inputMarginTop, 0);
        // 底部边距
        int marginBottom = (int)typedArray.getDimension(R.styleable.EditInputView_inputMarginBottom, 0);
        LayoutParams layoutParams = (LayoutParams)etInput.getLayoutParams();
        layoutParams.setMargins(marginStart, marginTop, marginEnd, marginBottom);
        etInput.setLayoutParams(layoutParams);
    }

    /**
     * 设置输入类型限制
     *
     * @param typedArray    资源对象
     */
    private void setLimitInputType(TypedArray typedArray) {
        etInput.setInputType(typedArray.getInt(R.styleable.EditInputView_android_inputType, EditorInfo.TYPE_NULL));
    }

    /**
     * 设置输入长度限制
     *
     * @param typedArray    资源对象
     */
    private void setLimitInputLen(TypedArray typedArray) {
        int len = typedArray.getInteger(R.styleable.EditInputView_maxLength, 0);
        if (len > 0) {
            setMaxLength(len);
        }
    }

    /**
     * 输入限制:可输入性
     *
     * @param typedArray    资源对象
     */
    private void setInputBoolean(TypedArray typedArray) {
        etInput.setEnabled(typedArray.getBoolean(R.styleable.EditInputView_android_enabled, true));
    }

    /**
     * 输入字体排列位置
     *
     * @param typedArray    资源对象
     */
    private void setInputGravity(TypedArray typedArray) {
        etInput.setGravity(typedArray.getInt(R.styleable.EditInputView_android_gravity,
                Gravity.END|Gravity.CENTER_VERTICAL));
    }

    /**
     * 初始化输入框提示文字
     *
     * @param context       上上下文
     * @param typedArray    资源对象
     */
    private void initEditHint(Context context, TypedArray typedArray) {
        CharSequence hintText = typedArray.getText(R.styleable.EditInputView_hint);
        if (!TextUtils.isEmpty(hintText)) {
            // 提示文字不为空
            // 提示内容
            etInput.setHint(hintText);
            // 提示文字颜色
            int color = typedArray.getColor(R.styleable.EditInputView_hintColor,
                    ContextCompat.getColor(context, R.color.c_D2D0DC));
            etInput.setHintTextColor(color);
        }
    }

    /**
     * 初始化头部文字
     *
     * @param context       上下文
     * @param typedArray    资源对象
     * @param text          头部文字
     */
    private void initHeaderText(Context context, TypedArray typedArray, CharSequence text) {
        // 头部字体风格
        setViewTextStyle(tvHead, R.styleable.EditInputView_headerTextStyle, typedArray);
        // 头部字体颜色
        setViewTextColor(context, tvHead, R.styleable.EditInputView_headerTextColor, typedArray);
        // 头部字体大小
        setViewTextSize(tvHead, R.styleable.EditInputView_headerTextSize, typedArray);
        // 头部开始间距
        int paddingStart = (int)typedArray.getDimension(R.styleable.EditInputView_headerPaddingStart, 0);
        // 头部结束间距
        int paddingEnd = (int)typedArray.getDimension(R.styleable.EditInputView_headerPaddingEnd, 0);
        // 头部顶部间距
        int paddingTop = (int)typedArray.getDimension(R.styleable.EditInputView_headerPaddingTop, 0);
        // 头部底部间距
        int paddingBottom = (int)typedArray.getDimension(R.styleable.EditInputView_headerPaddingBottom, 0);

        tvHead.setText(text);
        tvHead.setPadding(paddingStart, paddingTop, paddingEnd, paddingBottom);
    }

    /**
     * 设置头部内容
     *
     * @param text 被设置内容
     */
    public void setHeadText(CharSequence text) {
        if (tvHead != null) {
            tvHead.setText(text);
        }
    }

    /**
     * 获取内容
     *
     * @return 内容
     */
    public CharSequence getText() {
        if (etInput == null) {
            return null;
        } else {
            return etInput.getText();
        }
    }

    /**
     * 设置内容
     *
     * @param text 被设置内容
     */
    public void setText(CharSequence text) {
        if (etInput != null) {
            etInput.setText(text);
        }
    }

    /**
     * 设置内容颜色
     *
     * @param colorId 颜色资源Id
     */
    public void setTextColor(@ColorRes int colorId) {
        if (etInput != null) {
            etInput.setTextColor(ContextCompat.getColor(getContext(), colorId));
        }
    }

    /**
     * 设置最大输入限制
     *
     * @param len   限制值
     */
    public void setMaxLength(int len) {
        etInput.setFilters(new InputFilter[]{new InputFilter.LengthFilter(len)});
    }

    public TextView getHeadTextView() {
        return tvHead;
    }

    public EditText getInputEditView() {
        return etInput;
    }
}

以上就是Android 实现带头部文字输入框的自定义控件的详细内容,更多关于Android 文字输入框的自定义控件的资料请关注我们其它相关文章!

(0)

相关推荐

  • Android自定义控件实现通用验证码输入框(二)

    本文实例为大家分享了Android实现通用验证码输入框第2篇具体实现代码,供大家参考,具体内容如下 效果图 话不多说,我们还是先上效果图,可以先先看看是不是自己想要的 闲聊 这种验证码输入框使用组合控件就比较烦人了,所以这边直接使用自定View步奏实现 源码 自定义输入框属性(attrs.xml) <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable

  • Android 带清除功能的输入框控件实例详解

    Android 带清除功能的输入框控件实例详解 今天,看到一个很好的自定义输入框控件,于是记录一下. 效果很好: 一,自定义一个类,名为ClearEditText package com.example.clearedittext; import android.content.Context; import android.graphics.drawable.Drawable; import android.text.Editable; import android.text.TextWatc

  • Android自定义控件通用验证码输入框的实现

    需求 4位验证码输入框: 效果图: 1. 输入框一行可输入4位数字类型的验证码: 2. 4位数字之间有间隔(包括底线): 3. 输入框不允许有光标: 4. 底线根据输入位置显示高亮(蓝色): 6. 输入完成,回调结果,输入过程中,也进行回调: 分析 这种效果,很难直接在Edittext上处理: -- 输入框均分4等份,还要有间隔: -- 更难处理的是Edittext输入框禁止光标,那么,没有光标,我们如何调起虚拟键盘输入数据? -- 等... 与其在一个控件上折腾,这么难受,不如自定义一个控件,

  • Android自定义控件实现通用验证码输入框

    本文为大家分享了Android实现通用验证码输入框的具体代码,供大家参考,具体内容如下 效果图 话不多说先上效果图,可以先先看看是不是自己想要的 闲聊 闲来无事优化项目时,发现原来的验证码输入框,可扩展性不高,就拿来优化了一下,说说我开始的的思路吧,最开始是想用自定义View实现的,但是发现各种画矩,太烦人了,最后采用的组合控件的形式,Android有现成的控件,用来组合组合就能用,为什么不用呢. 源码 xml ITEM 布局文件(view_auth_code_input_item.xml) <

  • Android输入框控件ClearEditText实现清除功能

    本文给大家带来一个很实用的小控件ClearEditText,就是在Android系统的输入框右边加入一个小图标,点击小图标可以清除输入框里面的内容,IOS上面直接设置某个属性就可以实现这一功能,但是Android原生EditText不具备此功能,所以要想实现这一功能我们需要重写EditText,接下来就带大家来实现这一小小的功能 我们知道,我们可以为我们的输入框在上下左右设置图片,所以我们可以利用属性android:drawableRight设置我们的删除小图标,如图 我这里设置了左边和右边的图

  • Android带清除功能的输入框控件EditTextWithDel

    记录下一个很实用的小控件EditTextWithDel,就是在Android系统的输入框右边加入一个小图标,点击小图标可以清除输入框里面的内容,由于Android原生EditText不具备此功能,所以要想实现这一功能我们需要重写EditText. 效果图如下: 主要的思路就是为右边的图片设置监听,点击右边的图片清除输入框的内容并隐藏删除图标,因为我们不能直接给EditText设置点击事件,所以我们用记住我们按下的位置来模拟点击事件,用输入框的的onTouchEvent()方法来模拟. packa

  • Android 实现带头部文字输入框的自定义控件

    前言 在app的输入框中,需要应用到很多带有前缀说明的输入框,运用原有的输入框和文本控件,一个带头部的输入框就会增加三个控件在layout文件中.当布局文件输入框较少的情况下,这样对后期维护影响不大,但在多个带头部的输入框下,布局文件代码量会很大,影响阅读以及后期维护.而封装过后的控件,在使用中仅仅需要几行代码可实现几十行的效果. 简介 带头部文字的输入框 可在xml定义头部文字样式 可在xml定义输入框样式 可在xml定义提示文字样式 可在xml定义头部和输入框的间距和边距 效果图 使用方法

  • input 标签实现输入框带提示文字效果(两种方法)

    方法一:html5配合css3实现带提示文字的输入框(摆脱js): webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登录.搜索等位置很适合,感兴趣的你可以参考下本文或许可以帮助到你,Webkit作为载体开发系统,当然需要大量使用Html5与CSS3,不仅减少大量的JS还可以保证更流畅. 当选中对话框后,提示文字变浅色,输入后消失.这个现在通行的做法是在Input标签后面增加一个Label.使用JS控制. HTML5

  • Android TextView实现带链接文字事件监听的三种常用方式示例

    本文实例讲述了Android TextView实现带链接文字事件监听的三种常用方式.分享给大家供大家参考,具体如下: /** * TextView实现文字链接跳转功能 * @description: * @author ldm * @date 2016-4-21 下午4:34:05 */ public class TextViewLinkAct extends Activity { private TextView tv_3; private TextView tv_4; @Override p

  • Android自定义TextView实现文字倾斜效果

    前言 由于Android自带的TextView控件没有提供倾斜的(我暂时没有找到),我们可以自定义控件来实现,下面首先来看我们实现的效果图. TextView文字倾斜 其实实现很简单,下面我们来看实现步骤: 1.新建一个类 LeanTextView继承TextView public class LeanTextView extends TextView { public int getmDegrees() { return mDegrees; } public void setmDegrees(

  • Android自定义带水滴的进度条样式(带渐变色效果)

    一.直接看效果 二.直接上代码 1.自定义控件部分 package com.susan.project.myapplication; import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.grap

  • Android登陆界面实现清除输入框内容和震动效果

    本文为大家分享Android登陆界面实现清除输入框内容和震动效果的全部代码,具体内容如下: 效果图: 主要代码如下 自定义的一个EditText,用于实现有文字的时候显示可以清楚的按钮: import android.content.Context; import android.graphics.drawable.Drawable; import android.text.Editable; import android.text.TextWatcher; import android.uti

  • Android 实现带进度条的WebView的实例

    Android 实现带进度条的WebView的实例 1. WebView加载网页方法 //加载本地资源 loadUrl("file:///android_asset/example.html"); //加载网络资源 loadUrl("http://baidu.com"); 2. 带进度的Drawable文件view_progress_webview <?xml version="1.0" encoding="utf-8"

  • Android实现带数字的圆形进度条(自定义进度条)

    开发 设计搞了一个带圆形进度的进度条,在GitHub上逛了一圈,发现没有,自己撸吧. 先看界面效果: 主要思路是写一个继承ProgressBar的自定义View,不废话,直接上代码: package com.fun.progressbarwithnumber; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.g

  • Android TextView中部分文字高亮显示

    Android  TextView中部分文字高亮显示 /** * 关键字高亮显示 * * @param context 上下文 * @param text 需要显示的文字 * @param target 需要高亮的关键字 * @param color 高亮颜色 * @param start 头部增加高亮文字个数 * @param end 尾部增加高亮文字个数 * @return 处理完后的结果 */ public static SpannableString highlight(Context

  • Android自定义带增长动画和点击弹窗提示效果的柱状图DEMO

    项目中最近用到各种图表,本来打算用第三方的,例如MPAndroid,这是一个十分强大的图表库,应用起来十分方便,但是最终发现和设计不太一样,没办法,只能自己写了.今天将写好的柱状图的demo贴在这,该柱状图可根据数据的功能有一下几点: 1. 根据数据的多少,动态的绘制柱状图柱子的条数: 2. 柱状图每条柱子的绘制都有动态的动画效果: 3. 每条柱子有点击事件,点击时弹出提示框,显示相关信息,规定时间后,弹窗自动消失. 好了,先上演示图: 下边贴出相关代码: 自定义柱状图类: package co

随机推荐