【Android 应用开发】Android UI 设计之 TextView EditText 组件属性方法最详细解析
.
作者?:萬(wàn)境絕塵?
轉(zhuǎn)載請(qǐng)注明出處?:?http://blog.csdn.net/shulianghan/article/details/18964835
.
TextView 相關(guān)類的繼承結(jié)構(gòu) :?
-- 常用的組件 : TextView 直接繼承View類, 同時(shí)是 EditText 和 Button 兩組組件類的父類;?
一. TextView詳解
1. TextView文本鏈接相關(guān)XML屬性方法
(1) 設(shè)置單個(gè)連接
文本轉(zhuǎn)鏈接 : 將指定格式的文本轉(zhuǎn)換成可單擊的超鏈接形式;
-- 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 可單擊的網(wǎng)頁(yè)鏈接"/>
效果圖 :?
? ? ?
(3) 同時(shí)設(shè)置多個(gè)種類的鏈接
如果一個(gè)文本中有多個(gè)種類的鏈接, android:autoLink屬性使用"|"分隔, 例如 phone|email|web 等;
如果同時(shí)設(shè)置所有類型連接轉(zhuǎn)換, 使用 "all" 屬性即可;
示例 :?
<!-- 如果一個(gè)TextView中有多個(gè)種類的鏈接, autoLink屬性使用 " | "分隔即可 --><TextView android:layout_height="wrap_content"android:layout_width="wrap_content"android:text="電話 : 18511896990 , 郵件 : 904279436@qq.com , 網(wǎng)址 : baidu.com"android:autoLink="web|email|phone"/>
效果圖 :?
2. 繪制圖像相關(guān)XML屬性
繪圖設(shè)置 : XML屬性可以指定在TextView文本的 左, 右, 上, 下, 開(kāi)始, 結(jié)尾 處設(shè)置圖片, 還可以設(shè)置文本 與圖片之間的間距;
--?在文本框四周繪制圖片XML屬性 :?
在文本框左邊繪制指定圖像 :android:drawableLeft;
在文本框右邊繪制指定圖像 :android:drawableRight;
在文本框上邊繪制指定圖像 :android:drawableTop;
在文本框下邊繪制指定圖像 : android:drawableBottom;
--?設(shè)置圖片方法 : setCompoundDrawablesWithIntrinsicBounds(drawable,drawable,drawable,drawable);
設(shè)置圖片與文本間距 : 相當(dāng)于圖片距離文字的距離, 注意要帶上單位, 建議單位是dip;
-- XML屬性 :android:drawablePadding;
實(shí)例 :?
<!-- 該TextView的四周都有圖片, 四個(gè)圖片距離文字有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. 顯示省略
單行設(shè)置 : 顯示省略的時(shí)候, 必須設(shè)置文本行數(shù)為單行, 才能看出效果, ?android:singleLine 可以設(shè)置是否單行顯示;
省略設(shè)置 : 當(dāng)顯示文本超過(guò)了TextView長(zhǎng)度后處理文本內(nèi)容的方法;?
-- XML屬性 :android.ellipsize;?
-- XML屬性值 :?
none :不做任何處理;?
start : 文本開(kāi)始處截?cái)?/span>, 顯示省略號(hào);
middle : 文本中間截?cái)?/span>, 顯示省略號(hào);
end : 文本結(jié)尾處截?cái)?/span>, 顯示省略號(hào);
marquee : 使用marquee滾動(dòng)動(dòng)畫(huà)顯示文本;
-- 設(shè)置方法 : setEllipsize();
示例 :?
<!-- 設(shè)置android:singleLine屬性單行, 并設(shè)置在結(jié)尾處截?cái)?--><TextView android:layout_height="wrap_content"android:layout_width="wrap_content"android:text="電話 : 18511896990 , 郵件 : 904279436@qq.com , 網(wǎng)址 : baidu.com"android:singleLine="true"android:ellipsize="end"/>
效果圖 :?
4. 設(shè)置顏色 大小 陰影
?
設(shè)置文本顏色 :?
-- XML屬性 :android:textColor, 值是顏色代碼, 也可以是資源文件中的顏色;
-- 方法 : setTextColor().
設(shè)置文本大小 :?
-- XML屬性 : android:textSize, 值是float值, 注意帶上單位pt;
-- 方法 : setTextSize(float);
設(shè)置陰影 :?
-- XML屬性 :?
設(shè)置陰影顏色 : android:shadowColor;
設(shè)置陰影水平方向偏移 : android:shadowDx;
設(shè)置陰影垂直方向偏移 : android:shadowDy;
設(shè)置陰影模糊程度 : android:shadowRadius;
-- 方法 : setShadowLayer(float, float, float, int);
示例 :?
<TextView android:layout_height="wrap_content"android:layout_width="wrap_content"android:text="電話 : 18511896990 , 郵件 : 904279436@qq.com , 網(wǎng)址 : baidu.com"android:textColor="#f00"android:textSize="15pt"android:shadowColor="#00f"android:shadowDx="10"android:shadowDy="8"android:shadowRadius="3"/>
效果圖 :?
5. 顯示的文本為密碼
設(shè)置文本框是一個(gè)密碼框 : 如果要設(shè)置顯示的文本是密碼的話, 那么顯示出來(lái)的就是 "." , 不能顯示具體的內(nèi)容;
-- XML屬性 :android:password, 如果是密碼的話, 設(shè)置為true;
-- 方法 :setTransformationMethod(TransformationMethod);
示例 :?
<TextView android:layout_height="wrap_content"android:layout_width="wrap_content"android:text="電話 : 18511896990 , 郵件 : 904279436@qq.com , 網(wǎng)址 : baidu.com"android:password="true"/>
效果圖 :?
6. 可勾選的文本
CheckedTextView介紹?: TextView 派生出一個(gè) CheckedTextView , CheckedTextView 增加了一個(gè)checked 狀態(tài), 可以通過(guò)調(diào)用setChecked(boolean)?方法設(shè)置checked狀態(tài), 使用isChecked()方法獲取checked狀態(tài), 還可以通過(guò)setCheckMarkDrawable()方法 設(shè)置它的勾選圖標(biāo);
--XML屬性 :android:checkMark, 屬性值是一個(gè)drawable圖片;單選可以設(shè)置成?"?android:attr/listChoiceIndicatorSingle" 屬性,多選可以設(shè)置成?"?android:attr/listChoiceIndicatorMultiple" 屬性;
示例 :?
<CheckedTextView android:layout_height="wrap_content"android:layout_width="wrap_content"android:text="你是猴子請(qǐng)來(lái)的救兵嗎"android:checkMark="@drawable/ok"/>
效果圖 :?
7. 設(shè)置TextView文本邊框 背景漸變
使用背景 : TextView 是沒(méi)有邊框的, 如果要加上邊框, 可以通過(guò)設(shè)置TextView的背景添加邊框;
自定義背景: 使用XML文件定義一個(gè)drawable圖像, 可以為該Drawable指定背景顏色,邊框顏色,邊框?qū)挾?/span>,以及邊框角度,顏色漸變等效果;
.
代碼示例 :?
布局文件代碼 :?
<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="喜當(dāng)?shù)?#34;android:textSize="24dp"android:background="@drawable/background_frame"/><TextView android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="背景顏色,邊框顏色,邊框?qū)挾?以及邊框角度,顏色漸變等效果"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" ><!-- 設(shè)置背景為透明色 --><solid android:color="#0000" /><!-- 設(shè)置邊框的厚度為4像素, 設(shè)置邊框顏色 --><stroke android:width="10px"android:color="#01DF01"/></shape>
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"><!-- android:shape="rectangle" 指定該圖形的類型為矩形--><!-- 設(shè)置該矩形的四個(gè)角的角度弧度 --><corners android:topLeftRadius="20px"android:topRightRadius="5px"android:bottomRightRadius="20px"android:bottomLeftRadius="5px"/><!-- 設(shè)置邊框的寬度和顏色 --><stroke android:width="10px"android:color="#F0F"/><!-- 設(shè)置背景顏色漸變 從 紅色 -> 綠色 -> 藍(lán)色, 漸變的類型為sweep漸變 --><gradient android:startColor="#f00"android:centerColor="#0f0"android:endColor="#00f"android:type="sweep"/></shape>
效果圖 :?
8. 分析Android:layout_width 與 android:width 與 android:minWidth區(qū)別及共存策略
.
策略 :?
-- 當(dāng)android:layout_width為fill_parent的時(shí)候, android:width 與 android:minWidth 設(shè)置不起作用;
-- 當(dāng)android:layout_width為warp_content的時(shí)候,android:width 與 android:minWidth 單獨(dú)設(shè)置的時(shí)候都起作用, 兩者一起設(shè)置android:width起作用;
--當(dāng)android:layout_width為具體數(shù)值的時(shí)候,?android:width 與 android:minWidth 都不起作用;
得出結(jié)論 :?
三者優(yōu)先級(jí)順序 :?
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="都有的時(shí)候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="都有的時(shí)候都不起作用"/><TextView android:layout_width="wrap_content" android:layout_height="10px"/></LinearLayout>
效果圖 :?
9. 顯示HTML效果頁(yè)面
使用Html.fromHtml("")方法, 參數(shù)是html界面內(nèi)容, 可以使用html標(biāo)簽設(shè)置文本效果;
例如可以使用Html.fromHtml("<font size='20' color='red'>變大, 紅色</font>");
案例 :?
textView.setText(Html.fromHtml("<font color='red'><big>變大, 紅色 </big></font>" +" 正常 " +"<font color='green'><small> 變小, 綠色</small></font> "));
效果 :?
總結(jié) 在Android中顯示HTML頁(yè)面的方法 :
-- 瀏覽器訪問(wèn) :?
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'>顯示網(wǎng)頁(yè)信息</font>"));
WebView webview = (WebView) findViewById(R.id.wv);webview.getSettings().setJavaScriptEnabled(true);webview.loadUrl("http://blog.csdn.net/shulianghan");
10. Spannable設(shè)置TextView特效
a. 創(chuàng)建Spannable對(duì)象 : 使用new?SpannableString("")創(chuàng)建該對(duì)象, 傳入想要添加效果的字符串;
b. 為指定范圍的字符串添加效果 :?span.setSpan(new AbsoluteSizeSpan(58), 1, 5, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE), 為下標(biāo)從 1 ~ 5的字符串添加 字體大小為58像素的效果;
c. 將Spannable對(duì)象設(shè)置給TextView :?textView.setText(span);
實(shí)例 :?
源碼 :?
TextView textView = (TextView) findViewById(R.id.tv_1);Spannable span = new SpannableString("使用Spannable設(shè)置字體效果"); 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);
效果圖 :?
?
.
作者?:萬(wàn)境絕塵?
轉(zhuǎn)載請(qǐng)注明出處?:?http://blog.csdn.net/shulianghan/article/details/18964835
.
二. EditText屬性詳解
共享屬性 : EditText 與 TextView共享大部分XML屬性, 但是EditText可以接受用戶輸入;
類型定義屬性 : EditText最重要的屬性是android:inputType, 該屬性用來(lái)定義輸入的數(shù)據(jù)類型;?
自動(dòng)完成功能輸入組件 :AutoCompletetextView, 該組件是帶自動(dòng)完成功能的組件, 通常與Adapter一起使用;
全屏輸入法 :ExtractEditText, EditText的底層服務(wù)類, 負(fù)責(zé)提供全屏輸入法;
案例 :?
<?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開(kāi)始android:hint 屬性表示Edittext沒(méi)有輸入之前顯示的內(nèi)容android:selectAllOnFocus 如果文本框的內(nèi)容可選擇, 當(dāng)該EditText獲取焦點(diǎn)時(shí)是否全部選中內(nèi)容--><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="請(qǐng)?zhí)顚?xiě)登陸賬號(hào)"android:selectAllOnFocus="true"/> </TableRow><!-- android:inputType = "numberPassword" 屬性設(shè)置該輸入框輸入密碼, 輸入進(jìn)去的值都顯示 點(diǎn)號(hào)--><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" 屬性設(shè)置數(shù)字--><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" 屬性設(shè)置日期--><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"" 屬性設(shè)置電話--><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="請(qǐng)輸入電話號(hào)碼"android:selectAllOnFocus="true"android:inputType="phone"/></TableRow></TableLayout>
效果圖 :?
??
? ?
.
作者?:萬(wàn)境絕塵?
轉(zhuǎn)載請(qǐng)注明出處?:?http://blog.csdn.net/shulianghan/article/details/18964835
.
總結(jié)
以上是生活随笔為你收集整理的【Android 应用开发】Android UI 设计之 TextView EditText 组件属性方法最详细解析的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 【UML 建模】UML建模语言入门 --
- 下一篇： 【Android 应用开发】Androi