第五章 Android 常見UI基礎(chǔ)控件（一）

這里主要講講新的Android 基礎(chǔ)的UI控件，此外還拓展下新的控件。所有的控件都是View的子類。常見的UI控件主要有：TextView,Button,EditText,ImageView,ImageButton,ProgressBar,AlertDialog,ProgressDialog,RadioGroup,RadioButton,Spinner,Switch,RatingBar.

1.TextView

TextView 常見的使用頻率高的屬性：
1.android:layout_width="wrap_content"
2. android:layout_height="wrap_content"
3. android:text="TextView1"
4. android:textSize="20sp"
5. android:textColor="#f00"
6. android:gravity="center"
7. android:layout_gravity="center"
8. android:drawableLeft="@mipmap/ic_launcher"
9. android:drawableTop="@mipmap/ic_launcher"
10.android:drawableBottom="@mipmap/ic_launcher"
11. android:drawableRight="@mipmap/ic_launcher"
12. android:drawablePadding="5dp"

1.1 width 和height

android :layout_width 設(shè)置寬度，android：layout_height 設(shè)置高度。一般有兩個屬性 wrap_content 和 match_parent 兩個屬性。有時候會看到 fill_parent，效果相當(dāng)于match_parent。
?? 在實(shí)際開發(fā)過程中還有直接設(shè)置具體的數(shù)字這樣的場景。例如：android : layout_width="500dp" , android : layout_height="500dp"。設(shè)置寬度和高度都為500dp。
??有時候還可能會碰到 android : width 和android:height 這樣的屬性。但是這有時啥子?xùn)|東哦。這位客官，你且搬好小板凳，帶上瓜子，聽我吹吹牛逼好了。因?yàn)槲覀冎腊ㄗ远xview在內(nèi)的所有的view類都可以在指定的layout文件中布局，簡單來說，就是所有的控件都可能在你的layout文件中加上去。但是，但是，但是，并不是所有的view都是具有android : height/ android :width 這兩種屬性。且即便有這兩種屬性也不用聲明。這兩個屬性一般是用來控制view的精確大小的。如 60dp 等。在一般的例如TextView等屬性可以找到這兩個屬性，但是一般都不會去使用。在給view 精確大小的時候我們會用到android:layout_width /android : layout_height 這兩個屬性。什么？你暈了，好吧，我告訴你，這兩個東西沒啥子用，你不怎么會用到？不用管，這下你懂了吧。啥？你還是沒懂，好吧！我用大白話給你再講一遍，你發(fā)現(xiàn)沒有 android:width/android:height 和 android:layout_width/android:layout_height 從外觀看有什么不一樣么。是不是多了layout這個前綴啊。不錯就是這個layout ,要知道你在實(shí)際開發(fā)過程中，無論如何你都是不可能只有一個單一的控件吧，還要有相對的父布局吧，這個layout你可以看成是它在父布局中的寬/高度。哪你沒有這個“l(fā)ayout”屬性，就是指你自己的自身屬性。（吐血ing）

1.2 text ,textsize 和textColor

&emsp TextView控件你木有text文本信息就啥都沒有，textsize是文本的大小，textColor 是文本的顏色，引用的格式是 android:textColor="@color/red"。

1.3 gravity 和layout _gravity

在控件中我們除了要設(shè)置它的寬高以外還得設(shè)置它的位置。gravity和layout_gravity 是設(shè)置控件居中的屬性，按照第一節(jié)說的，兩個控件對比是不是多了一個layout前綴.這個就是相對于它的父布局來說，該控件的位置。如果你設(shè)置了一個控件它的實(shí)際寬高會大于文本的自身寬高，這樣你就可以使用gravity這個值，來使得文本居中。至于layout_gravity這個屬性這個就是這里要再說一下布局（之后的博客中會寫出來）。在線性布局中和相對布局中它的layout_gravity值會收到影響的。例如：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
  >
    <TextView
        android:id="@+id/textview1"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:background="#0f0"
        android:text="TextView1"
        android:textSize="20sp"
        android:textColor="#f00"
        android:gravity="center"
        android:layout_gravity="center"
        />
</LinearLayout>
父布局未設(shè)置居中

因?yàn)槲抑爸v過了，layout_gravity是相對于父布局來說的，gravity是父布局對子布局來說的。在LinearLayout線性布局中，你在TextView這個子控件中設(shè)置layout_gravity,發(fā)現(xiàn)他只是從偏左到橫向居中，但是沒有到最中心。為什么呢？我發(fā)四講的都是對的。這里要講一下他屬性改變了，但是他的父布局是一個線性布局。設(shè)置了 android:orientation="vertical"方向是豎向排列的，這時候會涉及到父子屬性的問題，然后你只要在LinearLayout添加一個 android:gravity="center"，讓它的兒子居中就好了。


父布局設(shè)置居中
1.4 drawableLeft,drawableright,drawableTop,drawableButton

drawable F4屬性是以文本為中心點(diǎn)，在上下左右四個方向設(shè)置圖片。但是實(shí)際上你可能會想設(shè)置圖片和文字之間的距離。假如你設(shè)置了一個控件具體的寬高，但是你發(fā)現(xiàn)圖片和文字怎么離那么遠(yuǎn)啊 。這不是你的size啊。然后你看呀Android 給了你一個android:drawablePadding 屬性，然后你設(shè)置了以后發(fā)現(xiàn)，怎么沒動靜，難道這是假的？大兄弟，這個屬性確實(shí)是真的，如果寬高不固定的情況下，沒什么問題，但是寬高固定或者都是match_parent的話，就有很大的問題了。圖片會盡量往外靠的，所以這個時候你需要設(shè)置padding值。如果你想圖文黏在一起的話，你只要將寬高設(shè)置為wrap_content ,這樣它會默認(rèn)寬高為0的

 <TextView
        android:id="@+id/textview1"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:text="TextView1"
        android:background="#0f0"
        android:textSize="20sp"
        android:textColor="#f00"
        android:gravity="center"
        android:layout_gravity="center"
        android:drawableLeft="@mipmap/ic_launcher"
        android:drawableTop="@mipmap/ic_launcher"
        android:drawableBottom="@mipmap/ic_launcher"
        android:drawableRight="@mipmap/ic_launcher"
        android:padding="40dp"
        />
圖文混排
1.5 拓展

很多時候單一的文本并不能滿足用戶的需求，有時候你需要對文本樣式做出改變。這時候咋個辦？一段文本中我只是需要改變中間的幾個字的顏色怎么辦？需要設(shè)置某幾個字的點(diǎn)擊，斜體等各種各樣亂七八糟的需求設(shè)計怎么辦？這里需要你用到 SpinnerString。
這里給上一個demo地址:https://github.com/wangxin3119/spinnablestringdemo.git

spinnerable 的各種花式
1.5.1 什么是SpannableString

SpannableString其實(shí)和String沒什么區(qū)別，都是字符串類型。TextView也可以直接設(shè)置SpannableString。區(qū)別的是SpannableString 可以通過 setSpan（）定制各種類型，重要的是設(shè)置區(qū)間。setSpan(Object what, int start, int end, int flags)方法需要用戶輸入四個參數(shù)。what表示設(shè)置的格式是什么，可以是前景色、背景色也可以是可點(diǎn)擊的文本等等，start表示需要設(shè)置格式的子字符串的起始下標(biāo)，同理end表示終了下標(biāo)，flags屬性就有意思了，
共有四種屬性：
Spanned.SPAN_INCLUSIVE_EXCLUSIVE 從起始下標(biāo)到終了下標(biāo)，包括起始下標(biāo)
Spanned.SPAN_INCLUSIVE_INCLUSIVE 從起始下標(biāo)到終了下標(biāo)，同時包括起始下標(biāo)和終了下標(biāo)
Spanned.SPAN_EXCLUSIVE_EXCLUSIVE 從起始下標(biāo)到終了下標(biāo)，但都不包括起始下標(biāo)和終了下標(biāo)
Spanned.SPAN_EXCLUSIVE_INCLUSIVE 從起始下標(biāo)到終了下標(biāo)，包括終了下標(biāo)

1.5.2 設(shè)置字體顏色 ForegroundColorSpan
SpannableString spannableString = new SpannableString("設(shè)置文字的顏色為藍(lán)色");
ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color.parseColor("#0099EE"));
spannableString.setSpan(colorSpan, 8, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE); 
textView.setText(spannableString);
1.5.3 設(shè)置字體的背景 BackgroundColorSpan
SpannableString spannableString = new SpannableString("設(shè)置文字的背景色為藍(lán)色");
BackgroundColorSpan colorSpan = new BackgroundColorSpan(Color.parseColor("#AC00FF30"));
spannableString.setSpan(colorSpan, 8, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setText(spannableString);
1.5.4 設(shè)置文字相對大小 RelativeSizeSpan
        SpannableString span02=new SpannableString(tv02);
       //設(shè)置字體的相對大小
        RelativeSizeSpan sizespane02=new RelativeSizeSpan(1.3f);
 span02.setSpan(sizespane02,3,span02.length()-1,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        textView2.setText(span02);
1.5.5 設(shè)置文字的刪除線 StrikethroughSpan
SpannableString spannableString = new SpannableString("為文字設(shè)置刪除線");
StrikethroughSpan strikethroughSpan = new StrikethroughSpan();
spannableString.setSpan(strikethroughSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setText(spannableString);
1.5.6 設(shè)置文字的下劃線 UnderlineSpan
SpannableString spannableString = new SpannableString("為文字設(shè)置下劃線");
UnderlineSpan underlineSpan = new UnderlineSpan();
spannableString.setSpan(underlineSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setText(spannableString);
1.5.7 設(shè)置文字的上標(biāo)和下標(biāo) ,數(shù)學(xué)公式那樣的樣式
SpannableString spannableString = new SpannableString("為文字設(shè)置上標(biāo)");
SuperscriptSpan superscriptSpan = new SuperscriptSpan();
spannableString.setSpan(superscriptSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setText(spannableString);

SpannableString spannableString = new SpannableString("為文字設(shè)置下標(biāo)");
SubscriptSpan subscriptSpan = new SubscriptSpan();
spannableString.setSpan(subscriptSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setText(spannableString);
1.5.8 設(shè)置文字的粗體，斜體風(fēng)格
SpannableString spannableString = new SpannableString("為文字設(shè)置粗體、斜體風(fēng)格");
StyleSpan styleSpan_B  = new StyleSpan(Typeface.BOLD);
StyleSpan styleSpan_I  = new StyleSpan(Typeface.ITALIC);
spannableString.setSpan(styleSpan_B, 5, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
spannableString.setSpan(styleSpan_I, 8, 10, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setHighlightColor(Color.parseColor("#36969696"));
textView.setText(spannableString);
1.5.9 為文字加上表情符號
SpannableString spannableString = new SpannableString("在文本中添加表情（表情）");
Drawable drawable = getResources().getDrawable(R.mipmap.a9c);
drawable.setBounds(0, 0, 42, 42);
ImageSpan imageSpan = new ImageSpan(drawable);
spannableString.setSpan(imageSpan, 6, 8, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setText(spannableString);
1.5.10 設(shè)置部分文字的點(diǎn)擊事件 ClickableSpan
SpannableString spannableString = new SpannableString("為文字設(shè)置點(diǎn)擊事件");
MyClickableSpan clickableSpan = new MyClickableSpan("http://www.itdecent.cn/users/dbae9ac95c78");
spannableString.setSpan(clickableSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setMovementMethod(LinkMovementMethod.getInstance());
textView.setHighlightColor(Color.parseColor("#36969696")); 
textView.setText(spannableString);

/***************************************************************/

class MyClickableSpan extends ClickableSpan {

    private String content;

    public MyClickableSpan(String content) {
        this.content = content;
    }

    @Override
    public void updateDrawState(TextPaint ds) {
        ds.setUnderlineText(false);
    }

    @Override
    public void onClick(View widget) {
        Intent intent = new Intent(MainActivity.this, OtherActivity.class);
        Bundle bundle = new Bundle();
        bundle.putString("content", content);
        intent.putExtra("bundle", bundle);
        startActivity(intent);
    }
}
1.5.11 設(shè)置文字的鏈接 URLSpan
SpannableString spannableString = new SpannableString("為文字設(shè)置超鏈接");
URLSpan  urlspan = new URLSpan("http://www.itdecent.cn/u/fa19fba4ef18");
spannableString.setSpan(urlSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setMovementMethod(LinkMovementMethod.getInstance());
textView.setHighlightColor(Color.parseColor("#36969696"));
textView.setText(spannableString);
1.5.12 SpannableStringBuilder

StringBuilder 通過append()來拼接，SpannableStringBuilder，也可以通過append()的方法來拼接

2.Button

2.1 Button的基本屬性

很多屬性都是可以通用的。Button就是按鈕的意思，主要的功能就是設(shè)置點(diǎn)擊事件。
1.android :layout_width/android : layout_height 設(shè)置寬高
2.android : background 設(shè)置背景（此外還可以自定義背景樣式）
3.android :text 設(shè)置按鈕的文本
4.android :textColor 設(shè)置文本的顏色
5.android :textSize 設(shè)置文本的字體大小
6.android :clickable 設(shè)置是否可點(diǎn)擊。Button 這個屬性是按鈕是否可點(diǎn)擊，默認(rèn)可點(diǎn)擊。
7.android :onClick 設(shè)置按鈕的點(diǎn)擊事件
8.android :drawableleft 設(shè)置icon 在text 的左邊，還有右邊，頂部，底部

  <Button
        android:id="@+id/button"
        android:layout_width="100dp"
        android:layout_height="50dp" 
        android:background="#00f"
        android:text="按鈕"
        android:textColor="#ad4412"
        android:textSize="25sp"
        android:clickable="true"
        android:onClick="my"
        android:drawableLeft="@drawable/button_icon"
        />

//代碼中 調(diào)用點(diǎn)擊事件
private void my(View  view){

}

Button 設(shè)置 點(diǎn)擊事件，可以設(shè)置android:OnClick="my"，然后在代碼中設(shè)置my()這個方法。

2.2 使用Button

Button button =(Button)findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
        // Do something in response to button click
    }
}

2.3 ImageButton

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/button_icon"
    ... />

和Button 沒有特別的，只是多了一個src屬性。

2.4 設(shè)置button的樣式 點(diǎn)擊和非點(diǎn)擊的狀態(tài)

//這里設(shè)置的是button自定義的樣式  button_custom.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_pressed"
          android:state_pressed="true" />
    <item android:drawable="@drawable/button_focused"
          android:state_focused="true" />
    <item android:drawable="@drawable/button_default" />
</selector>

<Button
    android:id="@+id/button_send"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_send"
    android:onClick="sendMessage"
    android:background="@drawable/button_custom"  />
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容