????? ?? ??? / TextView(文本框)詳解

TextView(文本框)詳解

本節(jié)引言：

學(xué)習(xí)完Android中的六大布局，從本節(jié)開(kāi)始我們來(lái)一個(gè)個(gè)講解Android中的UI控件，本節(jié)給大家?guī)?lái)的UI控件是：TextView(文本框)，用于顯示文本的一個(gè)控件，另外聲明一點(diǎn)，我不是翻譯API文檔，不會(huì)一個(gè)個(gè)屬性的去扣，只學(xué)實(shí)際開(kāi)發(fā)中常用的，有用的，大家遇到感覺(jué)到陌生的屬性可以查詢對(duì)應(yīng)的API！當(dāng)然，每一節(jié)開(kāi)始都會(huì)貼這一節(jié)對(duì)應(yīng)API文檔的鏈接：TextView API 好了，在開(kāi)始本節(jié)內(nèi)容前，先要介紹下幾個(gè)單位：
dp(dip): device independent pixels(設(shè)備獨(dú)立像素). 不同設(shè)備有不同的顯示效果,這個(gè)和設(shè)備硬件有關(guān)，一般我們?yōu)榱酥С諻VGA、HVGA和QVGA 推薦使用這個(gè)，不依賴像素。px: pixels(像素). 不同設(shè)備顯示效果相同，一般我們HVGA代表320x480像素，這個(gè)用的比較多。pt: point，是一個(gè)標(biāo)準(zhǔn)的長(zhǎng)度單位，1pt＝1/72英寸，用于印刷業(yè)，非常簡(jiǎn)單易用；sp: scaled pixels(放大像素). 主要用于字體顯示best for textsize。

1.基礎(chǔ)屬性詳解：

通過(guò)下面這個(gè)簡(jiǎn)單的界面，我們來(lái)了解幾個(gè)最基本的屬性：

布局代碼：

上面的TextView中有下述幾個(gè)屬性:

id：為TextView設(shè)置一個(gè)組件id，根據(jù)id，我們可以在Java代碼中通過(guò)findViewById()的方法獲取到該對(duì)象，然后進(jìn)行相關(guān)屬性的設(shè)置，又或者使用RelativeLayout時(shí)，參考組件用的也是id！
layout_width：組件的寬度，一般寫：**wrap_content**或者**match_parent(fill_parent)**，前者是控件顯示的內(nèi)容多大，控件就多大，而后者會(huì)填滿該控件所在的父容器；當(dāng)然也可以設(shè)置成特定的大小，比如我這里為了顯示效果，設(shè)置成了200dp。
layout_height：組件的寬度，內(nèi)容同上。
gravity：設(shè)置控件中內(nèi)容的對(duì)齊方向，TextView中是文字，ImageView中是圖片等等。
text：設(shè)置顯示的文本內(nèi)容，一般我們是把字符串寫到string.xml文件中，然后通過(guò)@String/xxx取得對(duì)應(yīng)的字符串內(nèi)容的，這里為了方便我直接就寫到""里，不建議這樣寫！?。?/p>
textColor：設(shè)置字體顏色，同上，通過(guò)colors.xml資源來(lái)引用，別直接這樣寫！
textStyle：設(shè)置字體風(fēng)格，三個(gè)可選值：**normal**(無(wú)效果)，**bold**(加粗)，**italic**(斜體)
textSize：字體大小，單位一般是用sp！
background：控件的背景顏色，可以理解為填充整個(gè)控件的顏色，可以是圖片哦！

2.實(shí)際開(kāi)發(fā)例子

2.1 帶陰影的TextView

涉及到的幾個(gè)屬性：

android:shadowColor:設(shè)置陰影顏色,需要與shadowRadius一起使用哦!
android:shadowRadius:設(shè)置陰影的模糊程度,設(shè)為0.1就變成字體顏色了,建議使用3.0
android:shadowDx:設(shè)置陰影在水平方向的偏移,就是水平方向陰影開(kāi)始的橫坐標(biāo)位置
android:shadowDy:設(shè)置陰影在豎直方向的偏移,就是豎直方向陰影開(kāi)始的縱坐標(biāo)位置

效果圖：

實(shí)現(xiàn)代碼：

2.2 帶邊框的TextView：

如果你想為TextView設(shè)置一個(gè)邊框背景，普通矩形邊框或者圓角邊框！下面可能幫到你！另外TextView是很多其他控件的父類，比如Button，也可以設(shè)置這樣的邊框！實(shí)現(xiàn)原理很簡(jiǎn)單，自行編寫一個(gè)ShapeDrawable的資源文件！然后TextView將blackgroung 設(shè)置為這個(gè)drawable資源即可！

簡(jiǎn)單說(shuō)下shapeDrawable資源文件的幾個(gè)節(jié)點(diǎn)以及屬性：

<solid android:color = "xxx"> 這個(gè)是設(shè)置背景顏色的
<stroke android:width = "xdp" android:color="xxx"> 這個(gè)是設(shè)置邊框的粗細(xì),以及邊框顏色的
<padding androidLbottom = "xdp"...> 這個(gè)是設(shè)置邊距的
<corners android:topLeftRadius="10px"...> 這個(gè)是設(shè)置圓角的
<gradient> 這個(gè)是設(shè)置漸變色的,可選屬性有:startColor:起始顏色 endColor:結(jié)束顏色 centerColor:中間顏色angle:方向角度,等于0時(shí),從左到右,然后逆時(shí)針?lè)较蜣D(zhuǎn),當(dāng)angle = 90度時(shí)從下往上type:設(shè)置漸變的類型

實(shí)現(xiàn)效果圖：

代碼實(shí)現(xiàn)：

Step 1:編寫矩形邊框的Drawable：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

 
 <stroke android:width="2px" android:color="../style/images/android-tutorial-textview.html"/>
 
 <gradient
 android:angle="270"
 android:endColor="#C0C0C0"
 android:startColor="#FCD209" />
 
 <padding
 android:left="5dp"
 android:top="5dp"
 android:right="5dp"
 android:bottom="5dp"/>

</shape>

Step 2:編寫圓角矩形邊框的Drawable：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

 
 <solid android:color="#87CEEB" />

 
 <stroke
 android:width="2px"
 android:color="../style/images/android-tutorial-textview.html" />
 
 <corners
 android:bottomLeftRadius="10px"
 android:bottomRightRadius="10px"
 android:topLeftRadius="10px"
 android:topRightRadius="10px" />
 
 <padding
 android:bottom="5dp"
 android:left="5dp"
 android:right="5dp"
 android:top="5dp" />

</shape>

Step 3:將TextView的blackground屬性設(shè)置成上面這兩個(gè)Drawable：

2.3 帶圖片(drawableXxx)的TextView：

在實(shí)際開(kāi)發(fā)中，我們可能會(huì)遇到這種需求：

如圖，要實(shí)現(xiàn)這種效果，可能你的想法是：一個(gè)ImageView用于顯示圖片 + 一個(gè)TextView用于顯示文字，然后把他們丟到一個(gè)LinearLayout中，接著依次創(chuàng)建四個(gè)這樣的小布局，再另外放到一個(gè)大的LinearLayout中，效果是可以實(shí)現(xiàn)，但是會(huì)不會(huì)有點(diǎn)繁瑣呢？而且前面我們前面也說(shuō)過(guò)，布局層次越少，性能越好！使用drawableXxx就可以省掉上面的過(guò)程，直接設(shè)置四個(gè)TextView就可以完成我們的需求！

基本用法：

設(shè)置圖片的核心其實(shí)就是:drawableXxx;可以設(shè)置四個(gè)方向的圖片:drawableTop(上),drawableButtom(下),drawableLeft(左),drawableRight(右) 另外,你也可以使用drawablePadding來(lái)設(shè)置圖片與文字間的間距！

效果圖：(設(shè)置四個(gè)方向上的圖片)

實(shí)現(xiàn)代碼：

一些問(wèn)題：可能你會(huì)發(fā)現(xiàn)，我們這樣設(shè)置的drawable并不能自行設(shè)置大小，在XML是無(wú)法直接設(shè)置的；所以我們需要在Java代碼中來(lái)進(jìn)行一個(gè)修改！

示例代碼如下：

package com.jay.example.test;

import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.widget.TextView;

public class MainActivity extends Activity {
    private TextView txtZQD;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        txtZQD = (TextView) findViewById(R.id.txtZQD);
        Drawable[] drawable = txtZQD.getCompoundDrawables();
        // 數(shù)組下表0~3,依次是:左上右下
        drawable[1].setBounds(100, 0, 200, 200);
        txtZQD.setCompoundDrawables(drawable[0], drawable[1], drawable[2],
                drawable[3]);
    }
}

運(yùn)行效果圖：

代碼分析：

①Drawable[] drawable = txtZQD.getCompoundDrawables( ); 獲得四個(gè)不同方向上的圖片資源,數(shù)組元素依次是:左上右下的圖片
②drawable[1].setBounds(100, 0, 200, 200); 接著獲得資源后,可以調(diào)用setBounds設(shè)置左上右下坐標(biāo)點(diǎn),比如這里設(shè)置了代表的是: 長(zhǎng)是:從離文字最左邊開(kāi)始100dp處到200dp處寬是:從文字上方0dp處往上延伸200dp!
③txtZQD.setCompoundDrawables(drawable[0], drawable[1], drawable[2], drawable[3]);為TextView重新設(shè)置drawable數(shù)組!沒(méi)有圖片可以用null代替哦! PS：另外，從上面看出我們也可以直接在Java代碼中調(diào)用setCompoundDrawables為 TextView設(shè)置圖片！

2.4 使用autoLink屬性識(shí)別鏈接類型

當(dāng)文字中出現(xiàn)了URL，E-Mail，電話號(hào)碼，地圖的時(shí)候，我們可以通過(guò)設(shè)置autoLink屬性；當(dāng)我們點(diǎn)擊文字中對(duì)應(yīng)部分的文字，即可跳轉(zhuǎn)至某默認(rèn)APP，比如一串號(hào)碼，點(diǎn)擊后跳轉(zhuǎn)至撥號(hào)界面！

看下效果圖：

all就是全部都包含,自動(dòng)識(shí)別協(xié)議頭~ 在Java代碼中可以調(diào)用setAutoLinkMask(Linkify.ALL); 這個(gè)時(shí)候可以不寫協(xié)議頭,autolink會(huì)自動(dòng)識(shí)別，但是還要為這個(gè)TextView設(shè)置： setMovementMethod(LinkMovementMethod.getInstance()); 不然點(diǎn)擊了是沒(méi)效果的！

2.5 TextView玩轉(zhuǎn)HTML

如題，除了顯示普通文本外，TextView還預(yù)定義了一些類似于HTML的標(biāo)簽，通過(guò)這些標(biāo)簽，我們可以使 TextView顯示不同的字體顏色，大小，字體，甚至是顯示圖片，或者鏈接等！我們只要使用HTML中的一些標(biāo)簽，加上android.text.HTML類的支持，即可完成上述功能！

PS:當(dāng)然，并不是支持所有的標(biāo)簽，常用的有下述這些：

<font>：設(shè)置顏色和字體。
<big>：設(shè)置字體大號(hào)
<small>：設(shè)置字體小號(hào)
：斜體粗體
<a>：連接網(wǎng)址
<img>：圖片

如果直接setText的話是沒(méi)作用的，我們需要調(diào)用Html.fromHtml()方法將字符串轉(zhuǎn)換為CharSequence接口，然后再進(jìn)行設(shè)置，如果我們需要相應(yīng)設(shè)置，需要為TextView進(jìn)行設(shè)置，調(diào)用下述方法：Java setMovementMethod(LinkMovementMethod.getInstance())

嗯，接著我們寫代碼來(lái)試試：

1）測(cè)試文本與超鏈接標(biāo)簽

package jay.com.example.textviewdemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.Html;
import android.text.method.LinkMovementMethod;
import android.text.util.Linkify;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 TextView t1 = (TextView)findViewById(R.id.txtOne);
 String s1 = "百度一下，你就知道~： ";
 s1 += "<a href = 'http://www.baidu.com'>百度</a>";
 t1.setText(Html.fromHtml(s1));
 t1.setMovementMethod(LinkMovementMethod.getInstance());
 }
}

運(yùn)行效果圖：

恩呢，測(cè)試完畢~

2）測(cè)試src標(biāo)簽，插入圖片：

看下運(yùn)行效果圖：

接下來(lái)看下實(shí)現(xiàn)代碼，實(shí)現(xiàn)代碼看上去有點(diǎn)復(fù)雜，用到了反射(對(duì)了，別忘了在drawable目錄下放一個(gè)icon的圖片哦！)：

嘿嘿，你也可以自己試試，比如為圖片加上超鏈接，點(diǎn)擊圖片跳轉(zhuǎn)這樣~

2.6 SpannableString&SpannableStringBuilder定制文本

除了上面的HTML可以定制我們TextView的樣式外，還可以使用SpannableString和SpannableStringBuilder來(lái)完成，兩者區(qū)別：前者針對(duì)的是不可變文本，而后者則是針對(duì)可變文本，這里只講解前者，對(duì)后者有興趣可自行查閱文本！

SpannableString可供我們使用的API有下面這些：

BackgroundColorSpan 背景色
ClickableSpan 文本可點(diǎn)擊，有點(diǎn)擊事件
ForegroundColorSpan 文本顏色（前景色）
MaskFilterSpan 修飾效果，如模糊(BlurMaskFilter)、浮雕(EmbossMaskFilter)
MetricAffectingSpan 父類，一般不用
RasterizerSpan 光柵效果
StrikethroughSpan 刪除線（中劃線）
SuggestionSpan 相當(dāng)于占位符
UnderlineSpan 下劃線
AbsoluteSizeSpan 絕對(duì)大小（文本字體）
DynamicDrawableSpan 設(shè)置圖片，基于文本基線或底部對(duì)齊。
ImageSpan 圖片
RelativeSizeSpan 相對(duì)大?。ㄎ谋咀煮w）
ReplacementSpan 父類，一般不用
ScaleXSpan 基于x軸縮放
StyleSpan 字體樣式：粗體、斜體等
SubscriptSpan 下標(biāo)（數(shù)學(xué)公式會(huì)用到）
SuperscriptSpan 上標(biāo)（數(shù)學(xué)公式會(huì)用到）
TextAppearanceSpan 文本外貌（包括字體、大小、樣式和顏色）
TypefaceSpan 文本字體
URLSpan 文本超鏈接

好吧，還是蠻多的，這里給出個(gè)最簡(jiǎn)單的例子吧，其他的參數(shù)調(diào)用可自行百度谷歌~1）最簡(jiǎn)單例子：運(yùn)行效果圖：

實(shí)現(xiàn)代碼：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TextView t1 = (TextView) findViewById(R.id.txtOne);
        TextView t2 = (TextView) findViewById(R.id.txtTwo);

        SpannableString span = new SpannableString("紅色打電話斜體刪除線綠色下劃線圖片:.");
        //1.設(shè)置背景色,setSpan時(shí)需要指定的flag,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE(前后都不包括)
        span.setSpan(new ForegroundColorSpan(Color.RED), 0, 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        //2.用超鏈接標(biāo)記文本
        span.setSpan(new URLSpan("tel:4155551212"), 2, 5, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        //3.用樣式標(biāo)記文本（斜體）
        span.setSpan(new StyleSpan(Typeface.BOLD_ITALIC), 5, 7, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        //4.用刪除線標(biāo)記文本
        span.setSpan(new StrikethroughSpan(), 7, 10, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        //5.用下劃線標(biāo)記文本
        span.setSpan(new UnderlineSpan(), 10, 16, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        //6.用顏色標(biāo)記
        span.setSpan(new ForegroundColorSpan(Color.GREEN), 10, 13,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        //7.//獲取Drawable資源
        Drawable d = getResources().getDrawable(R.drawable.icon);
        d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
        //8.創(chuàng)建ImageSpan,然后用ImageSpan來(lái)替換文本
        ImageSpan imgspan = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);
        span.setSpan(imgspan, 18, 19, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
        t1.setText(span);
    }
}

2）實(shí)現(xiàn)部分可點(diǎn)擊的TextView相信玩過(guò)QQ空間和微信朋友圈的朋友對(duì)下面的東東并不陌生吧，我們可以點(diǎn)擊對(duì)應(yīng)的用戶然后進(jìn)入查看用戶相關(guān)的信息是吧！

下面我們就來(lái)寫個(gè)簡(jiǎn)單的例子來(lái)實(shí)現(xiàn)下效果：

public class MainActivity extends AppCompatActivity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 TextView t1 = (TextView) findViewById(R.id.txtOne);

 StringBuilder sb = new StringBuilder();
 for (int i = 0; i < 20; i++) {
 sb.append("好友" + i + "，");
 }

 String likeUsers = sb.substring(0, sb.lastIndexOf("，")).toString();
 t1.setMovementMethod(LinkMovementMethod.getInstance());
 t1.setText(addClickPart(likeUsers), TextView.BufferType.SPANNABLE);
 }

 //定義一個(gè)點(diǎn)擊每個(gè)部分文字的處理方法
 private SpannableStringBuilder addClickPart(String str) {
 //贊的圖標(biāo)，這里沒(méi)有素材，就找個(gè)笑臉代替下~
 ImageSpan imgspan = new ImageSpan(MainActivity.this, R.drawable.ic_widget_face);
 SpannableString spanStr = new SpannableString("p.");
 spanStr.setSpan(imgspan, 0, 1, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);

 //創(chuàng)建一個(gè)SpannableStringBuilder對(duì)象，連接多個(gè)字符串
 SpannableStringBuilder ssb = new SpannableStringBuilder(spanStr);
 ssb.append(str);
 String[] likeUsers = str.split("，");
 if (likeUsers.length > 0) {
 for (int i = 0; i < likeUsers.length; i++) {
 final String name = likeUsers[i];
 final int start = str.indexOf(name) + spanStr.length();
 ssb.setSpan(new ClickableSpan() {
 @Override
 public void onClick(View widget) {
 Toast.makeText(MainActivity.this, name,
 Toast.LENGTH_SHORT).show();
 }

 @Override
 public void updateDrawState(TextPaint ds) {
 super.updateDrawState(ds);
 //刪除下劃線，設(shè)置字體顏色為藍(lán)色
 ds.setColor(Color.BLUE);
 ds.setUnderlineText(false);
 }
 },start,start + name.length(),0);
 }
 }
 return ssb.append("等" + likeUsers.length + "個(gè)人覺(jué)得很贊");
 }
}

運(yùn)行效果圖：

核心其實(shí)就是：ClickableSpan的設(shè)置而已~你可以自己搗鼓著寫下QQ空間評(píng)論的那個(gè)自己寫一個(gè)~

2.7 實(shí)現(xiàn)跑馬燈效果的TextView

簡(jiǎn)單說(shuō)下什么是跑馬燈，就是類似于web一樣，有一行字一直循環(huán)滾滾動(dòng)這樣，好吧還是看看實(shí)現(xiàn)效果圖，一看就懂的了~

實(shí)現(xiàn)效果圖：

代碼實(shí)現(xiàn)：

2.8 設(shè)置TextView字間距和行間距

就像我們平時(shí)編寫文檔的時(shí)候，我們需要排版，設(shè)置下行或者字之間的間距是吧： Android中的TextView也可以進(jìn)行這樣的設(shè)置：

字間距：

android:textScaleX：調(diào)節(jié)字間距的，默認(rèn)值1.0f，值是float
Java中setScaleX(2.0f);

行間距：Android系統(tǒng)中TextView默認(rèn)顯示中文時(shí)會(huì)比較緊湊，為了讓每行保持的行間距

android:lineSpacingExtra：設(shè)置行間距，如"3dp"android:lineSpacingMultiplier：設(shè)置行間距的倍數(shù)，如"1.2"

Java代碼中可以通過(guò):setLineSpacing方法來(lái)設(shè)置

2.9 自動(dòng)換行

自動(dòng)換行通過(guò) android:singleLine 設(shè)置，默認(rèn)為 false。

如需要自動(dòng)換行，可以用：

android:singleLine = "false"

如果要在一行顯示完，不換行，可以用：

android:singleLine = "true"

除此之外，可以也設(shè)置多行顯示不完，添加個(gè)maxLines的屬性即可！

3.本節(jié)小結(jié)：

本節(jié)對(duì)Android中的TextView控件進(jìn)行了詳細(xì)的解析，提供了開(kāi)發(fā)中常見(jiàn)的一些問(wèn)題的解決方法，相信會(huì)為你的實(shí)際開(kāi)發(fā)帶來(lái)大大的便利，另外，筆者能力有限，寫出來(lái)的東西可能有些紕漏，歡迎指出，不勝感激~另外，轉(zhuǎn)載請(qǐng)注明出處：coder-pig！謝謝~

← AbsoluteLayout(絕對(duì)布局)

EditText(輸入框)詳解 →

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

?1?

2?

? ?? ?

4?

5?

6?

?7?

8?

9?

10?

TextView(文本框)詳解

本節(jié)引言：

1.基礎(chǔ)屬性詳解：

2.實(shí)際開(kāi)發(fā)例子

2.1 帶陰影的TextView

2.2 帶邊框的TextView：

2.3 帶圖片(drawableXxx)的TextView：

2.4 使用autoLink屬性識(shí)別鏈接類型

2.5 TextView玩轉(zhuǎn)HTML

2.6 SpannableString&SpannableStringBuilder定制文本

2.7 實(shí)現(xiàn)跑馬燈效果的TextView

2.8 設(shè)置TextView字間距和行間距

2.9 自動(dòng)換行

3.本節(jié)小結(jié)：

???? ??