zoukankan      html  css  js  c++  java
  • Android UI编程之自定义控件初步(下)——CustomEditText

    概述:

        基于对上一篇博客《Android UI编程之自定义控件初步(上)——ImageButton》的学习,我们对自定义控件也有了一个初步的认识。那现在我们可以再试着对EditText进行一些自定义的学习。以下有两种方式的自定义UI编程分享给大家。由于在上一篇博客中,有对自定义控件的一些详细地说明,在本篇博客中,如果你还有一些没搞懂的地方,可以参见上一篇博客《Android UI编程之自定义控件初步(上)——ImageButton》进行学习。


    示例:带删除按钮的输入框

    效果图展示:

     


    基本雏形搭建:

        大家可以从上面的效果图上看到两个东西:左侧的EditText和右侧的图片(这里是一个Button)。我们在EditText中的输入为空的时候,不显示右侧的清除按钮。一旦EditText中输入了内容的时候,右侧的清除按钮就会显示出来。


    外观设计和功能添加:

    1.外观设计

    在我们选好了骨架之后,剩下的就是穿衣服了。现在我们来看看怎么给它穿衣服。以下是示例代码:

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >
    
        <EditText
            android:id="@+id/input_edittext"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="5dp"
            android:background="@null"
            android:layout_toLeftOf="@+id/clear_button"
            android:ems="10" >
    
        </EditText>
    
        <Button
            android:id="@+id/clear_button"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_centerVertical="true"
            android:background="@drawable/clear_button"
            android:layout_marginRight="10dp"
            android:layout_alignParentRight="true"
            android:visibility="invisible" />
    
    </RelativeLayout>

    2.功能添加

    功能的添加是要在Java代码中去实现的,因为Java代码可以动态去调节功能,而在xml代码中却写不出动态调节功能的效果。Java代码中实现各功能如下:

    监听文本框功能:

    public void addTextChangedListener() {
            mInput.addTextChangedListener(new TextWatcher() {
                
                @Override
                public void onTextChanged(CharSequence s, int start, int before, int count) {
                    int len = mInput.getText().toString().length();
                    if (len > 0) {
                        mClear.setVisibility(View.VISIBLE);
                    } else {
                        mClear.setVisibility(View.INVISIBLE);
                    }
                }
                
                @Override
                public void beforeTextChanged(CharSequence s, int start, int count,
                        int after) {
                }
                
                @Override
                public void afterTextChanged(Editable s) {
                }
            });
        }


    清除文本功能:

    private void setClearEvent() {
            mClear.setOnClickListener(new OnClickListener() {
                
                @Override
                public void onClick(View v) {
                    mInput.setText("");
                }
            });
        }


    使用分析:

    1.xml代码中的使用

    代码如下:

    <com.demo.customview.clearedittext.widgets.ClearEditText
            android:id="@+id/activity_main_clear_edittext"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp" />

    2.Java代码中的使用

    ClearEditText clearEditText = (ClearEditText) findViewById(R.id.activity_main_clear_edittext);
    clearEditText.setHint("输入文本进行测试");
    clearEditText.addTextChangedListener();


    示例:在EditText插入表情

    效果图展示:



    自定义类实现:

    这边就不去长篇累牍介绍了。因为内容很单。Java实现代码如下:

    public class SmiliesEditText extends EditText {
    
        public SmiliesEditText(Context context) {
            super(context);
        }
    
        public SmiliesEditText(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
        }
    
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }
    
        public void insertIcon(int id) {
            // SpannableString连续的字符串,长度不可变,同时可以附加一些object;可变的话使用SpannableStringBuilder,参考sdk文档
            SpannableString ss = new SpannableString(getText().toString() + "[smile]");
            // 得到要显示图片的资源
            Drawable d = getResources().getDrawable(id);
            // 设置高度
            d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
            // 跨度底部应与周围文本的基线对齐
            ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);
            // 附加图片
            ss.setSpan(span, getText().length(),
                    getText().length() + "[smile]".length(),
                    Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
    
            setText(ss);
        }
    }

    使用分析:

    1.xml代码中的使用

    <com.demo.customview.clearedittext.widgets.SmiliesEditText
            android:id="@+id/activity_main_similies_edittext"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/activity_main_clear_edittext"
            android:singleLine="true"
            android:text="Hello smile"
            android:hint="你可以输入表情哦"
            android:textSize="14sp"
            android:layout_marginTop="20dp" />

    2.Java代码中的使用

    SmiliesEditText et=(SmiliesEditText)findViewById(R.id.activity_main_similies_edittext);
            et.insertIcon(R.drawable.smile);
            System.out.println(et.getText().toString());


    源代码下载:

    http://download.csdn.net/detail/u013761665/8410583

  • 相关阅读:
    div弹出层
    经典SQL语句
    sql连接及操作
    给flash加上连接
    在c#中图片原比例缩放
    悬浮提示筐
    拖动板块
    IFrame自适应高度
    SQL语句中的日期计算
    注意Request.Cookies["UserID"]的用法
  • 原文地址:https://www.cnblogs.com/fengju/p/6336117.html
Copyright © 2011-2022 走看看