`

Android UI 设计之 TextView EditText 组件属性方法最详细解析

 
阅读更多

.

作者:万境绝尘

转载请注明出处:http://blog.csdn.net/shulianghan/article/details/18964835

.



TextView 相关类的继承结构 :

-- 常用的组件 : TextView 直接继承View类, 同时是 EditText 和 Button 两组组件类的父类;





一. TextView详解


1. TextView文本链接相关XML属性方法


(1) 设置单个连接


文本转链接 : 将指定格式的文本转换成可单击的超链接形式;

-- XML属性 : android:autoLink, 该属性有属性值 : none, web, email, phone, map, all;

-- 方法 : setAutoLinkMask(int);

eg :

    <TextView android:id="@+id/tv_auto_link_phone"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:autoLink="phone"
        android:text="18511896990 可单击的电话链接"/>
    
    <TextView android:id="@+id/tv_auto_link_web"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:autoLink="web"
        android:text="baidu.com 可单击的网页链接"/>

效果图 :



(3) 同时设置多个种类的链接


如果一个文本中有多个种类的链接, android:autoLink属性使用"|"分隔, 例如 phone|email|web 等;

如果同时设置所有类型连接转换, 使用 "all" 属性即可;


示例 :

    <!-- 如果一个TextView中有多个种类的链接, autoLink属性使用 " | "分隔即可 -->
	<TextView 
	    android:layout_height="wrap_content"
	    android:layout_width="wrap_content"
	    android:text="电话 : 18511896990 , 邮件 : 904279436@qq.com , 网址 : baidu.com"
	    android:autoLink="web|email|phone"/>

效果图 :



2. 绘制图像相关XML属性


绘图设置 : XML属性可以指定在TextView文本的 左, 右, 上, 下, 开始, 结尾 处设置图片, 还可以设置文本 与图片之间的间距;

--在文本框四周绘制图片XML属性 :

在文本框左边绘制指定图像 :android:drawableLeft;

在文本框右边绘制指定图像 :android:drawableRight;

在文本框上边绘制指定图像 :android:drawableTop;

在文本框下边绘制指定图像 : android:drawableBottom;

--设置图片方法 : setCompoundDrawablesWithIntrinsicBounds(drawable,drawable,drawable,drawable);


设置图片与文本间距 : 相当于图片距离文字的距离, 注意要带上单位, 建议单位是dip;

-- XML属性 :android:drawablePadding;


实例 :

    <!-- 该TextView的四周都有图片, 四个图片距离文字有50dip的距离 -->
    <TextView android:id="@+id/tv_adrawable_left_right"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:drawableLeft="@android:drawable/sym_action_call"
        android:drawableRight="@android:drawable/sym_action_call"
        android:drawableTop="@android:drawable/sym_action_call"
        android:drawableBottom="@android:drawable/sym_action_call"
        android:drawablePadding="50dip"
        android:text="左右上下有图片"/>

显示效果图 :



3. 显示省略


单行设置 : 显示省略的时候, 必须设置文本行数为单行, 才能看出效果, android:singleLine 可以设置是否单行显示;


省略设置 : 当显示文本超过了TextView长度后处理文本内容的方法;

-- XML属性 :android.ellipsize;

-- XML属性值 :

none :不做任何处理;

start : 文本开始处截断, 显示省略号;

middle : 文本中间截断, 显示省略号;

end : 文本结尾处截断, 显示省略号;

marquee : 使用marquee滚动动画显示文本;

-- 设置方法 : setEllipsize();


示例 :

    <!-- 设置android:singleLine属性单行, 并设置在结尾处截断 -->
	<TextView 
	    android:layout_height="wrap_content"
	    android:layout_width="wrap_content"
	    android:text="电话 : 18511896990 , 邮件 : 904279436@qq.com , 网址 : baidu.com"
	    android:singleLine="true"
	    android:ellipsize="end"
	    />

效果图 :



4. 设置颜色 大小 阴影

设置文本颜色 :

-- XML属性 :android:textColor, 值是颜色代码, 也可以是资源文件中的颜色;

-- 方法 : setTextColor().


设置文本大小 :

-- XML属性 : android:textSize, 值是float值, 注意带上单位pt;

-- 方法 : setTextSize(float);


设置阴影 :

-- XML属性 :

设置阴影颜色 : android:shadowColor;

设置阴影水平方向偏移 : android:shadowDx;

设置阴影垂直方向偏移 : android:shadowDy;

设置阴影模糊程度 : android:shadowRadius;

-- 方法 : setShadowLayer(float, float, float, int);


示例 :

	<TextView 
	    android:layout_height="wrap_content"
	    android:layout_width="wrap_content"
	    android:text="电话 : 18511896990 , 邮件 : 904279436@qq.com , 网址 : baidu.com"
	    android:textColor="#f00"
	    android:textSize="15pt"
	    android:shadowColor="#00f"
	    android:shadowDx="10"
	    android:shadowDy="8"
	    android:shadowRadius="3"
	    />


效果图 :



5. 显示的文本为密码


设置文本框是一个密码框 : 如果要设置显示的文本是密码的话, 那么显示出来的就是 "." , 不能显示具体的内容;

-- XML属性 :android:password, 如果是密码的话, 设置为true;

-- 方法 :setTransformationMethod(TransformationMethod);


示例 :

	<TextView 
	    android:layout_height="wrap_content"
	    android:layout_width="wrap_content"
	    android:text="电话 : 18511896990 , 邮件 : 904279436@qq.com , 网址 : baidu.com"
	    android:password="true"
	    />


效果图 :



6. 可勾选的文本


CheckedTextView介绍: TextView 派生出一个 CheckedTextView , CheckedTextView 增加了一个checked 状态, 可以通过调用setChecked(boolean)方法设置checked状态, 使用isChecked()方法获取checked状态, 还可以通过setCheckMarkDrawable()方法 设置它的勾选图标;

--XML属性 :android:checkMark, 属性值是一个drawable图片;单选可以设置成"?android:attr/listChoiceIndicatorSingle" 属性,多选可以设置成"?android:attr/listChoiceIndicatorMultiple" 属性;


示例 :

	<CheckedTextView 
	    android:layout_height="wrap_content"
	    android:layout_width="wrap_content"
	    android:text="你是猴子请来的救兵吗"
	    android:checkMark="@drawable/ok"
	    />


效果图 :




7. 设置TextView文本边框 背景渐变


使用背景 : TextView 是没有边框的, 如果要加上边框, 可以通过设置TextView的背景添加边框;

自定义背景: 使用XML文件定义一个drawable图像, 可以为该Drawable指定背景颜色,边框颜色,边框宽度,以及边框角度,颜色渐变等效果;

.

代码示例 :

布局文件代码 :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:orientation="vertical">

	<TextView 
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="喜当爹"
	    android:textSize="24dp"
	    android:background="@drawable/background_frame"/>
    
	<TextView 
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="背景颜色,边框颜色,边框宽度,以及边框角度,颜色渐变等效果"
	    android:textSize="24dp"
	    android:background="@drawable/background_frame2"/>

</LinearLayout>

资源文件代码 :

background_frame.xml :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    
    <!-- 设置背景为透明色 -->
    <solid android:color="#0000" />
    
    <!-- 设置边框的厚度为4像素, 设置边框颜色 -->
    <stroke android:width="10px"
        android:color="#01DF01"/>

</shape>


background_frame2.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">
    <!-- 
    	android:shape="rectangle" 指定该图形的类型为矩形
     -->
     
     <!-- 设置该矩形的四个角的角度弧度 -->
     <corners 
         android:topLeftRadius="20px"
         android:topRightRadius="5px"
         android:bottomRightRadius="20px"
         android:bottomLeftRadius="5px"/>
     
     <!-- 设置边框的宽度和颜色 -->
     <stroke 
         android:width="10px"
         android:color="#F0F"/>
     
     <!-- 设置背景颜色渐变 从 红色  -> 绿色 -> 蓝色, 渐变的类型为sweep渐变 -->
     <gradient 
         android:startColor="#f00"
         android:centerColor="#0f0"
         android:endColor="#00f"
         android:type="sweep"/>
    

</shape>

效果图 :



8. 分析Android:layout_width 与 android:width 与 android:minWidth区别及共存策略

.

策略 :

-- 当android:layout_width为fill_parent的时候, android:width 与 android:minWidth 设置不起作用;

-- 当android:layout_width为warp_content的时候,android:width 与 android:minWidth 单独设置的时候都起作用, 两者一起设置android:width起作用;

--当android:layout_width为具体数值的时候,android:width 与 android:minWidth 都不起作用;


得出结论 :

三者优先级顺序 :

android:layout_width > android:width > android:minWidth ;


源码 :

<?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="match_parent"
    android:orientation="vertical" >
    
    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:background="#DF8326"
        android:text="宽度填充全部"/>
    <TextView android:layout_width="wrap_content" android:layout_height="10px"/>
    
    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:width="100dp"
        android:background="#DF8326"
        android:text="width不起作用"/>
    <TextView android:layout_width="wrap_content" android:layout_height="10px"/>
    
    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:minWidth="50dp"
        android:background="#DF8326"
        android:text="minWidth不起作用"/>
    <TextView android:layout_width="wrap_content" android:layout_height="10px"/>
    
    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:width="50dp"
        android:minWidth="50dp"
        android:background="#DF8326"
        android:text="都不起作用"/>
    <TextView android:layout_width="wrap_content" android:layout_height="40px"/>
    
    
    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:background="#DF8326"
        android:text="宽度包裹全部"/>
    <TextView android:layout_width="wrap_content" android:layout_height="10px"/>
    
    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:width="150dp"
        android:background="#DF8326"
        android:text="width起作用"/>
    <TextView android:layout_width="wrap_content" android:layout_height="10px"/>
    
    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:minWidth="120dp"
        android:background="#DF8326"
        android:text="minWidth起作用"/>
    <TextView android:layout_width="wrap_content" android:layout_height="10px"/>

    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:width="150dp"
        android:minWidth="120dp"
        android:background="#DF8326"
        android:text="都有的时候width起作用"/>
    <TextView android:layout_width="wrap_content" android:layout_height="40px"/>
    
    
    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="200dp"
        android:background="#DF8326"
        android:text="layout_width为200dp"/>
    <TextView android:layout_width="wrap_content" android:layout_height="10px"/>
    
    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="200dp"
        android:width="150dp"
        android:background="#DF8326"
        android:text="layout_width为200dp, width150dp"/>
    <TextView android:layout_width="wrap_content" android:layout_height="10px"/>
    
    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="200dp"
        android:minWidth="120dp"
        android:background="#DF8326"
        android:text="layout_width为200dp,minWidth100dp"/>
    <TextView android:layout_width="wrap_content" android:layout_height="10px"/>
    
    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="200dp"
        android:width="150dp"
        android:minWidth="120dp"
        android:background="#DF8326"
        android:text="都有的时候都不起作用"/>
    <TextView android:layout_width="wrap_content" android:layout_height="10px"/>
    
</LinearLayout>

效果图 :



9. 显示HTML效果页面


使用Html.fromHtml("")方法, 参数是html界面内容, 可以使用html标签设置文本效果;

例如可以使用Html.fromHtml("<font size='20' color='red'>变大, 红色</font>");

案例 :

        textView.setText(Html.fromHtml("<font color='red'><big>变大, 红色 </big></font>" +
        		" 正常  " +
        		"<font color='green'><small>  变小, 绿色</small></font> "));

效果 :




总结 在Android中显示HTML页面的方法 :

-- 浏览器访问 :

        Uri uri = Uri.parse("http://blog.csdn.net/shulianghan");
        Intent intent = new Intent(Intent.ACTION_VIEW, uri);
        startActivity(intent);

-- 使用TextView显示 : 

        TextView tv_1 = (TextView)findViewById(R.id.tv_1);
        tv_1.setText(Html.fromHtml("<font size='20' color='#ff0000'>显示网页信息</font>"));


-- 使用WebView组件显示 : 

        WebView webview = (WebView) findViewById(R.id.wv);
        webview.getSettings().setJavaScriptEnabled(true);
        webview.loadUrl("http://blog.csdn.net/shulianghan");

10. Spannable设置TextView特效


a. 创建Spannable对象 : 使用newSpannableString("")创建该对象, 传入想要添加效果的字符串;

b. 为指定范围的字符串添加效果 :span.setSpan(new AbsoluteSizeSpan(58), 1, 5, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE), 为下标从 1 ~ 5的字符串添加 字体大小为58像素的效果;

c. 将Spannable对象设置给TextView :textView.setText(span);


实例 :

源码 :

        TextView textView = (TextView) findViewById(R.id.tv_1);
        Spannable span = new SpannableString("使用Spannable设置字体效果");  
        span.setSpan(new AbsoluteSizeSpan(58), 1, 5, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);  
        span.setSpan(new ForegroundColorSpan(Color.RED), 1, 5, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);  
        span.setSpan(new BackgroundColorSpan(Color.YELLOW), 1, 5, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);  
        textView.setText(span);

效果图 :



.

作者:万境绝尘

转载请注明出处:http://blog.csdn.net/shulianghan/article/details/18964835

.


二. EditText属性详解


共享属性 : EditText 与 TextView共享大部分XML属性, 但是EditText可以接受用户输入;

类型定义属性 : EditText最重要的属性是android:inputType, 该属性用来定义输入的数据类型;

自动完成功能输入组件 :AutoCompletetextView, 该组件是带自动完成功能的组件, 通常与Adapter一起使用;

全屏输入法 :ExtractEditText, EditText的底层服务类, 负责提供全屏输入法;


案例 :

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:stretchColumns="1">
    
    <!-- 
    	android:stretchColumns 属性表示 第一列允许被拉伸, 注意索引从0开始
    	android:hint 属性表示Edittext没有输入之前显示的内容
    	android:selectAllOnFocus 如果文本框的内容可选择, 当该EditText获取焦点时是否全部选中内容
     -->
    
    <TableRow >
        <TextView 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" 
            android:text="用户名 : "
            android:textSize="16sp"
            />
        <EditText 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:hint="请填写登陆账号"
            android:selectAllOnFocus="true"/>    
    </TableRow>
    
    <!-- 
    	android:inputType = "numberPassword" 属性设置该输入框输入密码, 输入进去的值都显示 点号
     -->
    <TableRow >
        <TextView 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="密码 : "
            android:textSize="16sp"/>
        <EditText 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"/>
    </TableRow>
    
    <!-- 
    	android:inputType = "number" 属性设置数字
     -->
    <TableRow >
        <TextView 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="年龄 : "
            android:textSize="16sp"/>
        <EditText 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:inputType="number"/>
    </TableRow>
    
    <!-- 
    	android:inputType = "data" 属性设置日期
     -->
    <TableRow >
        <TextView 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="生日 : "
            android:textSize="16sp"/>
        <EditText 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:inputType="date"/>
    </TableRow>
    
    <!-- 
    	android:inputType = ""phone"" 属性设置电话
     -->
    <TableRow >
        <TextView 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="电话 : "
            android:textSize="16sp"/>
        <EditText 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:hint="请输入电话号码"
            android:selectAllOnFocus="true"
            android:inputType="phone"/>
    </TableRow>

</TableLayout>

效果图 :




.

作者:万境绝尘

转载请注明出处:http://blog.csdn.net/shulianghan/article/details/18964835

.


分享到：
| GitHub 优秀的 Android 开源项目 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    android ui组件大全

    以下是对“android ui组件大全”这个主题的详细解析： 标题：“android ui组件大全” 这个标题表明这是一个集合了Android平台各种UI控件的资源库或教程，旨在帮助开发者全面了解和实践Android UI开发。它可能包含...

    Android中使用TextView、EditText完成的新闻详情浏览教学案例的要求说明.pdf

    在Android应用开发中，TextView和EditText是两个非常基础且重要的组件。它们被广泛用于展示文本信息和接收用户输入。在这个教学案例中，我们将探讨如何利用这两个组件来创建一个新闻详情浏览的应用程序。 首先，...

    Android软件开发之TextView详解源码

    在Android软件开发中，TextView是UI设计中不可或缺的组件，它用于显示文本信息。TextView的源码解析对于深入了解其工作原理、优化性能以及自定义扩展都至关重要。本文将深入探讨TextView的核心功能，内部机制，以及...

    EditText TextView android 中实现动态表情源码

    以上就是关于“EditText TextView android 中实现动态表情源码”的详细解析，包括了GIF支持库的添加、在TextView中显示GIF的方法以及在EditText中实现动态表情的挑战和解决方案。希望这个知识点能帮助你更好地理解和...

    EditText和Textview的部分文字响应

    在Android开发中，`EditText`和`TextView`是两个非常重要的UI组件，它们主要用于显示和输入文本。在某些场景下，我们可能需要实现部分文字的响应功能，即点击或触摸文本的某一部分后触发特定的操作。这个功能在交互...

    android UI设计实操练习题(安卓作业1)

    3. **控件和组件**：Android UI包含各种控件，如Button（按钮）、TextView（文本视图）、EditText（编辑框）、ImageView（图像视图）、Spinner（下拉列表）等。了解每个控件的功能和用法是UI设计的基础。 4. **颜色...

    安卓Android源码——textView1.rar

    在安卓开发中，TextView是应用界面中最基础且重要的组件之一，它用于显示文本内容，可以是静态文本，也可以是动态加载的数据。对于Android源码的深入理解，掌握TextView的工作原理和内部机制对于优化UI性能、解决...

    Android学习笔记四：基本视图组件：TextView

    在Android开发中，基本视图组件是构建用户界面的基础元素，TextView作为其中之一，扮演着至关重要的角色。TextView用于展示文本信息，它不仅能够显示简单的静态文本，还可以支持动态文本更新、格式化显示以及多种...

    android EditText 详解

    在Android开发中，`EditText`是用户界面（UI）组件之一，它允许用户输入文本。这个组件在许多应用场景中都非常重要，例如登录表单、注册页面、搜索栏等。本篇将深入解析`EditText`的各个方面，包括基本用法、属性...

    安卓Android源码——(EditText文本编辑).zip

    `EditText`是Android中的一个视图组件，继承自`TextView`，用于接收用户输入的文字。在布局XML文件中，我们可以通过`&lt;EditText&gt;`标签来创建一个文本输入框。例如： ```xml &lt;EditText android:id="@+id/et_input...

    Android2.2—TextView API中文文档

    在Android开发中，`TextView`作为最常用的视图组件之一，用于展示文本信息。本文将深入解析`TextView` API，尤其是针对Android2.2版本的特性，帮助开发者更全面地理解和运用这一重要的UI元素。 #### XML属性详解 #...

    android_UI布局设计.pdf

    在Android应用开发中，UI设计是至关重要的，因为它直接影响到用户体验和应用的可操作性。本文将探讨Android UI布局设计的基础知识，包括布局类型、视图（View）和视图组（ViewGroup）的概念，以及如何创建简单的...

    android:基础UI编程3(中文)

    根据给定的文件信息，以下是对“Android:基础UI编程3(中文)”这一主题的知识点详细解析： ### Android UI 编程基础 #### 一、理解Android UI编程 Android UI编程是开发移动应用时不可或缺的一部分，它涉及到创建...

    老罗android视频常用UI编程（源码1-33集全）

    《Android常用UI编程——老罗视频源码解析》 在Android应用开发中，用户界面（UI）设计至关重要，它直接影响到用户体验和应用的吸引力。"老罗android视频常用UI编程"是一系列深入讲解Android UI编程的教程，包含了...

    android QQui模拟

    这包括各种视图组件，如ImageView（用于显示图标）、TextView（用于文字展示）、EditText（用于输入文本）和Button（用于交互操作）等。此外，还要考虑响应式设计，确保界面在不同尺寸和方向的设备上都能正常显示。 ...

    Android奇艺高清UI界面源代码.zip

    在“奇艺高清UI”中，开发者可能采用了多种视图组件，如ImageView用于显示高清图片，TextView用于展示文字信息，还有Button、EditText等交互元素，这些组件通过XML布局文件定义，并在Java代码中进行逻辑控制。...

    Android高级应用源码-自动清空edittext.zip

    在Android开发中，EditText是用户输入文本的基本...这些内容都是Android UI开发中常见的实践，对于提升用户体验和优化交互设计具有重要意义。通过学习和实践，开发者可以进一步提高其在Android应用开发中的专业技能。

    作业习题_Android系统应用开发(Android程序设计基础版).doc

    这部分涵盖了Android UI库中的基本控件，如Button、EditText、TextView等，以及如何在布局文件中使用它们。 第12章 高级UI组件 本章介绍更复杂的UI组件，如Spinner、Adapter、GridView等，以及自定义View的创建方法...

    Android简单扫码APP设计——从欢迎、登陆到主功能界面

    Android提供了丰富的UI组件如TextView、EditText、Button等，以及Material Design设计指南，可以帮助开发者构建现代、一致的界面。布局管理器如LinearLayout、RelativeLayout、ConstraintLayout等用于组织元素，实现...

Magicbox
Global site tag (gtag.js) - Google Analytics