android基礎入門教程231textview文本框詳解

1、title: Android基礎入門categories: Android2.3.1 TextView(文本框)詳解基礎入門，Android基礎入門框)詳解2.3.1 TextView(文本本節(jié)引言：1.基礎屬性詳解：通過下面這個簡單的界面，我們來了解幾個最基本的屬性：學習完Android中的六大布局，從本節(jié)開始我們來一個個講解Android中的UI控件，本 節(jié)給大家?guī)淼腢I控件是：TextView(文本框)，用于顯示文本的一個控件，另外一點，我不是翻譯API文檔，一個個屬性的去扣，只學實際開發(fā)中常用的，有用的，大家遇到感覺到陌生的屬性可以對應的API！當然，每一節(jié)開始都會貼這一節(jié)對應API

2、 文檔的鏈接：TextView API 好了，在開始本節(jié)內容前，先要下幾個：dp(dip): device independent pixels(像素). 不同 有不同的顯示效果,這個和 硬件有關， 我們?yōu)榱酥С諻VGA、HVGA和QVGA 推薦使用這個，不依賴像素。px: pixels(像素). 不同 顯示效果相同， 我們HVGA代表320x480像素，這個用的比較多。pt: point，是一個標準的長度 ，1pt1/72英寸，用于印刷業(yè)，非常簡單易用；sp: scaled pixels(放大像素). 主要用于字體顯示best for textsize。布局代碼：.<RelativeL

3、ayout xmlns:android="xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:gravity="center"android:background="#8fffad">"2.3.4.5.6.7.8."9.0.2.3.4.5.6.7.8.9.

4、20.<TextViewandroid:id=" id/txtOne" android:layout_width="200dp" android:layout_height="200dp" android:gravity="center"android:text="TextView(顯示框)"android:textColor="#EA5246" android:textStyle="bold italic" android:background=&

5、quot;#000000"android:textSize=" 8sp" /></RelativeLayout>上面的TextView中有下述幾個屬性id：為TextView設置一個組件id，根據id，我們可以在Java代碼中通過findViewById()的獲取到該對象，然后進行相關屬性的設置，又或者使用RelativeLayout時，參考組件用的也是id！layout_width：組件的寬度，寫：wrap_content或者match_parent(fill_parent)，前者是控件顯示的內容多大，控件就多大，而后者會填滿該控件所在的父容器

6、；當然也可以設置成特定的大小，比如我這里為了顯示效果，設置成了200dp。layout_height：組件的寬度，內容同上。gravity：設置控件 的對 向，TextView中是文字，ImageView中是圖片等等。text：設置顯示的文本內容， 我們是把字符串寫到string.xml文件中，然后通過String/ 取得對應的字符串內容的，這里為了方便我直接就寫到""里，不建議這樣寫！textColor：設置字體顏色，同上，通過colors.xml資源來，別直接這樣寫！ textStyle：設置字體風格，三個可選值：normal(無效果)，bold(加粗)，italic(

7、斜體)textSize：字體大小，是用sp！background：控件的背景顏色，可以理解為填充整個控件的顏色，可以是圖片哦！2.實際開發(fā)例子：2.1 帶陰影的TextView涉及到的幾個屬性：效果圖：android:shadowColor:設置陰影顏色,需要與shadowRadius一起使用哦! android:shadowRadius:設置陰影的模糊程度,設為0.1就變成字體顏色了,建議使用3.0android:shadowDx:設置陰影在水平方向的偏移,就是水平方向陰影開始的橫坐標位置android:shadowDy:設置陰影在豎直方向的偏移,就是豎直方向陰影開始的縱坐標位置實現代碼：.

8、2.3.4.5.6.7.8.9.<TextViewandroid:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_center nParent="true" android:shadowColor="# 9 900"android:shadowDx=" 0.0"android:shadowDy=" 0.0" android:shadowRadius="

9、;3.0"android:text="帶陰影的TextView"0.android:textColor="#4A4Aandroid:textSize="30sp" />"2.2 帶邊框的TextView：簡單說下shapeDrawable資源文件的幾個節(jié)點以及屬性：實現效果圖：<solid android:color = ""> 這個是設置背景顏色的<stroke android:width = "xdp" android:color=""&

10、gt; 這個是設置邊框的粗細,以及邊框顏色的<padding androidLbottom = "xdp".> 這個是設置邊距的<corners android:topLeftRadius="10px".> 這個是設置圓角的<gradient> 這個是設置漸變色的,可選屬性有:startColor:起始顏色 endColor:結束顏色 centerColor:中間顏色angle:方向角度,等于0時,從左到右,然后逆時針方向轉,當angle = 90度時從下往上type:設置漸變的類型如果你想為TextView設置一個邊

11、框背景，普通矩形邊框或者圓角邊框！下面可能幫到你！另外TextView是很多其他控件的父類，比如Button，也可以設置這樣的邊框！ 實現原理很簡單，自行編寫一個ShapeDrawable的資源文件！然后TextView將blackgroung設置為這個drawable資源即可！代碼實現：Step 1:編寫矩形邊框的Drawable：.2.3.4.5.6.7.<?xml version=" .0" encoding="utf 8"?><shapexmlns:android="" ><!>設置一個黑色

12、邊框<stroke android:width="2px" android:color="#000000"/><!漸變><gradient8.9.0.2.3.4.5.6.7.8.android:angle="270"android:endColor="#C0C0C0" android:startColor="# CD209" /><!設置一下邊距,讓空間大一點><paddingandroid:left="5dp" andr

13、oid:top="5dp" android:right="5dp" android:bottom="5dp"/></shape>Step 2:編寫圓角矩形邊框的Drawable：.2.3.4.5.6.7.8.9.0.2.3.4.5.6.7.8.9.20.2 .22.23.24.<?xml version=" .0" encoding="utf 8"?><shape xmlns:android=""><!設置透明背景色>&l

14、t;solid android:color="#87CEEB" /><!設置一個黑色邊框><strokeandroid:width="2px" android:color="#000000" /><!設置四個圓角的半徑><cornersandroid:bottomLeftRadius=" 0px" android:bottomRightRadius=" 0px" android:topLeftRadius=" 0px" andr

15、oid:topRightRadius=" 0px" /><!設置一下邊距,讓空間大一點><paddingandroid:bottom="5dp" android:left="5dp" android:right="5dp" android:top="5dp" /></shape>Step 3:將TextView的blackground屬性設置成上面這兩個Drawable：.<LinearLayoutxmlns:android=""

16、;2.3.4.5.6.7.8.9.0.2.3.4.5.6.7.8.9.20.2 .22.23.24.25.26.27.28.29.30.xmlns:tools="android:layout_width="match_parent" android:layout_height="match_parent""android:background="#android:gravity="center""android:orientation="vertical"tools:cont

17、ext=".MainActivity"><TextViewandroid:id=" id/txtOne" android:layout_width="200dp" android:layout_height="64dp" android:textSize=" 8sp" android:gravity="center" android:background="drawable/txt_rectborder"android:text="矩

18、形邊框的TextView" /><TextViewandroid:id=" id/txtTwo" android:layout_width="200dp" android:layout_height="64dp" android:layout_marginTop=" 0dp" android:textSize=" 8sp" android:gravity="center" android:background="drawable/txt_rad

19、iuborder"android:text="圓角邊框的TextView" /></LinearLayout>2.3 帶圖片(drawable)的TextView：在實際開發(fā)中，我們可能會遇到這種需求：如圖，要實現這種效果，可能你的想法是：一個ImageView用于顯示圖片 + 一個TextView用于顯示文字，然后把他們丟到一個LinearLayout中，接著依次創(chuàng)建四個這樣的小布局，再另外放到一個大的LinearLayout中，效果是可以實現，但是會有點繁基本用法：效果圖：(設置四個方向上的圖片)實現代碼：.<RelativeLayou

20、t xmlns:android="xmlns:tools=" android:layout_width="match_parent"android:layout_height="match_parent""2.3.4.5.6.7.8.9.0.2.3.4.5.6."tools:context="com.jay.example.test.MainActivity" ><TextViewandroid:layout_width="wrap_content" androi

21、d:layout_height="wrap_content" android:layout_center nParent="true" android:drawableTop="drawable/show " android:drawableLeft="drawable/show " android:drawableRight="drawable/show " android:drawableBottom="drawable/show " android:drawablePa

22、dding=" 0dp"android:text="張全蛋" />設置圖片的其實就是:drawable;可以設置四個方向的圖片: drawableTop(上),drawableButtom(下),drawableLeft(左),drawableRight(右) 另外,你也可以使用drawablePadding來設置圖片與文字間的間距！瑣呢？而且前面我們前面也說過，布局層次越少，性能越好！使用drawable就可以省掉上面的過程，直接設置四個TextView就可以完成我們的需求！7.8.</RelativeLayout>一些問題：可能你會

23、發(fā)現，我們這樣設置的drawable并不能自行設置大小，在XML是無法直接設置的；所以我們需要在Java代碼中來進行一個修改！示例代碼如下：.2.3.4.5.6.7.8.9.0.2.3.4.5.6.7.8.9.package com.jay.example.test;import import importimportandroid.app.Activity; android.graphics.drawable.Drawable; android.os.Bundle;android.widget.TextView;publicclass MainActivity extendivity pri

24、vate TextView txtZQD;Overrideprotected void onCreate(Bundle saved nstanceState) super.onCreate(saved nstanceState); setContentView(R.layout.activity_main);txtZQD = (TextView) findViewBy d(R.id.txtZQD); Drawable drawable = txtZQD.getCompoundDrawables();/ 數組下表03,依次是:左上右下drawable .setBounds( 00, 0, 200

25、, 200);txtZQD.setCompoundDrawables(drawable0, drawable , drawable2,20.2 .22.drawable3);運行效果圖：代碼分析：2.4 使用autoLink屬性識別鏈接類型當文字中出現了URL，我們點擊，號碼，地圖的時候，我們可以通過設置autoLink屬性；當文字中對應部分的文字，即可跳轉至某默認APP，比如一串號碼，點擊后跳轉至撥號界面！Drawable drawable = txtZQD.getCompoundDrawables( ); 獲得四個不同方向上的圖片資源,數組元素依次是:左上右下的圖片drawable1.se

26、tBounds(100, 0, 200, 200);接著獲得資源后,可以調用setBounds設置左上右下坐標點,比如這里設置了代表的是: 長是:從離文字最左邊開始100dp處到200dp處寬是:從文字上方0dp處往上延伸200dp!txtZQD.setCompoundDrawables(drawable0, drawable1, drawable2, drawable3);為TextView重新設置drawable數組!沒有圖片可以用null代替哦!PS：另外，從上面看出我們也可以直接在Java代碼中調用setCompoundDrawables 為TextView設置圖片！看下效果圖：all

27、就是全部都包含,自動識別協(xié)議頭在Java代碼中可以調用setAutoLinkMask(Linkify.ALL);這個時候可以不寫協(xié)議頭,autolink會自動識別，但是還要為這個TextView設置：setMovementMethod(LinkMovementMethod.getInstance(); 不然點擊了是沒效果的！2.5 TextView玩轉HTMLPS:當然，并不是支持所有的，常用的有下述這些：如果直接setText的話是沒作用的，我們需要調用Html.fromHtml()CharSequence接口，將字符串轉換為然后再進行設置，如果我們需要相應設置，需要為TextView進行設

28、置，調用下述：.setMovementMethod(LinkMovementMethod.get nstance()嗯，接著我們寫代碼來試試：1）測試文本與超鏈接.2.3.4.5.6.7.8.9.0.package .example.textviewdemo;import import import import importimportandroid.os.Bundle; android.support.v7.app.AppCompatActivity; android.text.Html; android.text.method.LinkMovementMethod; android.te

29、xt.util.Linkify;android.widget.TextView;publicclass MainActivity extends AppCompatActivity <font>：設置顏色和字體。<big>：設置字體大號<small>：設置字體小號<i><b>：斜體粗體<a>：連接<img>：圖片如題，除了顯示普通文本外，TextView還預定義了一些類似于HTML的，通過這些，我們可以使TextView顯示不同的字體顏色，大小，字體，甚至是顯示圖片，或者鏈接等！我們只要使用HTML中的一些，加

30、上android.text.HTML類的支持，即可完成上述功能！2.3.4.5.6.7.Overrideprotected void onCreate(Bundle saved nstanceState) super.onCreate(saved nstanceState); setContentView(R.layout.activity_main);TextView t= (TextView)findViewBy d(R.id.txtOne);String s = "<font color='blue'><b>一下，你就知道：</b&

31、gt;</font><br>"8.9.20.2 .22.s tt= "<a href = '.setText(Html.fromHtml(s );'></a>".setMovementMethod(LinkMovementMethod.getnstance();運行效果圖：恩呢，測試完畢2）測試src，：看下運行效果圖：接下來看下實現代碼，實現代碼看上去有點復雜，用到了反射(對了，別忘了在drawable目錄下放一個icon的圖片哦！)：.2.3.4.5.6.7.8.9.0.2.3.4.public

32、class MainActivity extends AppCompatActivity Overrideprotected void onCreate(Bundle saved nstanceState) super.onCreate(saved nstanceState);setContentView(R.layout.activity_main);TextView tString s= (TextView) findViewBy d(R.id.txtOne);= "圖片：<img src = 'icon'/><br>"t.set

33、Text(Html.fromHtml(s , new Html. mageGetter() Overridepublic Drawable getDrawable(String source) Drawable draw = null;tryield field = R.drawable.class.get ield(source);int resource d = nteger.parse nt(field.get(null).toString();5.6.draw = getResources().getDrawable(resource d);draw.setBounds(0, 0, d

34、raw.ge rinsicHeight(); catch (Exception e) e.printStackTrace();return draw;, null);rinsicWidth(), draw.ge7.8.9.20.2 .22.23.24.嘿嘿，你也可以試試，比如為圖片加上超鏈接，點擊圖片跳轉這樣2.6 SpannableString&SpannableStringBuilder定制文本SpannableString可供我們使用的API有下面這些：好吧，還是蠻多的，這里給出個最簡單的例子吧，其他的參數調用可自行1）最簡單例子：運行效果圖：谷歌BackgroundColorS

35、pan 背景色ClickableSpan點擊，有點擊ForegroundColorSpan 文本顏色（前景色）MaskFilterSpan 修飾效果，如模糊(BlurMaskFilter)、浮雕(EmbossMaskFilter)MetricAffectingSpan 父類，不用RasterizerSpan 光柵效果StrikethroughSpan 刪除線（中劃線） SuggestionSpan 相當于占位符UnderlineSpan 下劃線AbsoluteSizeSpan 絕對大?。ㄎ谋咀煮w）DynamicDrawableSpan 設置圖片，基于文本基線或底部對齊。ImageSpan 圖片

36、RelativeSizeSpan 相對大小（文本字體） ReplacementSpan 父類，不用ScaleXSpan 基于x軸縮放StyleSpan 字體樣式：粗體、斜體等SubscriptSpan 下標（數學公式會用到） SuperscriptSpan 上標（數學公式會用到）TextAppearanceSpan 文本外貌（字體、大小、樣式和顏色）TypefaceSpan 文本字體URLSpan 文本超鏈接除了上面的HTML可以定制我們TextView的樣式外，還可以使用SpannableString和SpannableStringBuilder來完成，兩者區(qū)別：前者的是不可變文本，而后者則

37、是針對可變文本，這里只講解前者，對后者有可自行查閱文本！實現代碼：.2.3.4.5.6.7.8.9.public class MainActivity extends AppCompatActivity Overrideprotected void onCreate(Bundle saved nstanceState) super.onCreate(saved nstanceState); setContentView(R.layout.activity_main);TextView t = (TextView) findViewBy d(R.id.txtOne);TextView t2 =

38、(TextView) findViewBy d(R.id.txtTwo);0.SpannableString span = new SpannableString("紅色打斜體刪除線綠色下劃線圖片:.");/ .設置背景色,setSpan時需要指定的.flag,Spanned.SPAN_EXCLUS VE_EXCLUS VE(前后都不)2.span.setSpan(new oregroundColorSpan(Color.RED), 0, 2, Spanned.SPAN_EXCLUS VE_EXCLUS VE);/2.用超鏈接標記文本span.setSpan(new URL

39、Span("tel:4 5555 2 2"), 2, 5, Spanned.SPAN_3.4.EXCLUSVE_EXCLUS VE);/3.用樣式標記文本（斜體）span.setSpan(new StyleSpan(Typeface.BOLD_5.6.TAL C), 5, 7, Spanned.SPAN_EXCLUS VE_EXCLUS VE);/4.用刪除線標記文本span.setSpan(new StrikethroughSpan(), 7,7.8.0, Spanned.SPAN_EXCLUSVE_EXCLUS VE);/5.用下劃線標記文本9.20.span.setS

40、pan(new E_EXCLUS VE);/6.用顏色標記span.setSpan(newed.SPAN_EXCLUS VE_EXCLUSUnderlineSpan(), 0, 6,Spanned.SPAN_EXCLUS V2 .22.oregroundColorSpan(Color.GREEN), 0, 3,SpannVE);23.24.25./7./獲取Drawable資源Drawable d = getResources().getDrawable(R.drawable.icon);d.setBounds(0, 0, d.gerinsicWidth(), d.gerinsicHeight

41、();26.27.28./8.創(chuàng)建 mageSpan,然后用 mageSpan來替換文本mageSpan imgspan = new mageSpan(d, mageSpan.AL GN_BASEL NE); span.setSpan(imgspan, 8, 9,Spannable.SPAN_ NCLUS VE_EXCLUS VE); t .setText(span);29.30.3 .2）實現部分可點擊的TextView相信玩過QQ空間和的朋友對下面的東東并不陌生吧，我們可以點擊對應的用戶然后進入查看用戶相關的是吧！下面我們就來寫個簡單的例子來實現下效果：.2.3.4.5.6.7.8.9.0

42、.2.3.4.public class MainActivity extends AppCompatActivity Overrideprotected void onCreate(Bundle saved nstanceState) super.onCreate(saved nstanceState); setContentView(R.layout.activity_main);TextView t = (TextView) findViewBy d(R.id.txtOne);StringBuilder sb = new StringBuilder();for (int i = 0; i

43、< 20; i ) sb.append("好友"i"，");String likeUsers = sb.substring(0, sb.last ndexOf("，").toString();t .setMovementMethod(LinkMovementMethod.get nstance();5.6.t .setText(addClickPart(likeUsers), TextView.BufferType.SPANNABLE);7.8.9.20.2 .22./定義一個點擊每個部分文字的處理private Spannab

44、leStringBuilder addClickPart(String str) /贊的圖標，這里沒有素材，就找個笑臉代替下mageSpan imgspan = new mageSpan(MainActivity.this, R.drawable.ic_widget_face);SpannableString spanStr = new SpannableString("p."); spanStr.setSpan(imgspan, 0, ,Spannable.SPAN_ NCLUS VE_EXCLUS VE);23.24.25.26.27./創(chuàng)建一個SpannableStr

45、ingBuilder對象，連接多個字符串SpannableStringBuilder ssb = new SpannableStringBuilder(spanStr);28.29.30.3 .32.33.34.35.36.37.38.39.40.4 .42.43.44.45.46.47.48.49.50.5 .52.53.ssb.append(str);String likeUsers = str.split("，");if(likeUsers.length > 0) for(int i = 0; i < likeUsers.length; i ) final String name = likeUsersi;final int start ssb.setSpan(newOverridepublic void= str.indexOf(name)spanStr.length();Cli