android UI常用控件,第五章 Android 常见UI基础控件（一）

这里主要讲讲新的Android 基础的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 设置宽度，android：layout_height 设置高度。一般有两个属性 wrap_content 和 match_parent 两个属性。有时候会看到 fill_parent，效果相当于match_parent。

在实际开发过程中还有直接设置具体的数字这样的场景。例如：android : layout_width="500dp" , android : layout_height="500dp"。设置宽度和高度都为500dp。

有时候还可能会碰到 android : width 和android:height 这样的属性。但是这有时啥子东东哦。这位客官，你且搬好小板凳，带上瓜子，听我吹吹牛逼好了。因为我们知道包括自定义view在内的所有的view类都可以在指定的layout文件中布局，简单来说，就是所有的控件都可能在你的layout文件中加上去。但是，但是，但是，并不是所有的view都是具有android : height/ android :width 这两种属性。且即便有这两种属性也不用声明。这两个属性一般是用来控制view的精确大小的。如 60dp 等。在一般的例如TextView等属性可以找到这两个属性，但是一般都不会去使用。在给view 精确大小的时候我们会用到android:layout_width /android : layout_height 这两个属性。什么？你晕了，好吧，我告诉你，这两个东西没啥子用，你不怎么会用到？不用管，这下你懂了吧。啥？你还是没懂，好吧！我用大白话给你再讲一遍，你发现没有 android:width/android:height 和 android:layout_width/android:layout_height 从外观看有什么不一样么。是不是多了layout这个前缀啊。不错就是这个layout ,要知道你在实际开发过程中，无论如何你都是不可能只有一个单一的控件吧，还要有相对的父布局吧，这个layout你可以看成是它在父布局中的宽/高度。哪你没有这个“layout”属性，就是指你自己的自身属性。(吐血ing)

1.2 text ,textsize 和textColor

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

1.3 gravity 和layout _gravity

在控件中我们除了要设置它的宽高以外还得设置它的位置。gravity和layout_gravity 是设置控件居中的属性，按照第一节说的，两个控件对比是不是多了一个layout前缀.这个就是相对于它的父布局来说，该控件的位置。如果你设置了一个控件它的实际宽高会大于文本的自身宽高，这样你就可以使用gravity这个值，来使得文本居中。至于layout_gravity这个属性这个就是这里要再说一下布局(之后的博客中会写出来)。在线性布局中和相对布局中它的layout_gravity值会收到影响的。例如：

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="fill_parent"

>

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"

/>

父布局未设置居中

因为我之前讲过了，layout_gravity是相对于父布局来说的，gravity是父布局对子布局来说的。在LinearLayout线性布局中，你在TextView这个子控件中设置layout_gravity,发现他只是从偏左到横向居中，但是没有到最中心。为什么呢？我发四讲的都是对的。这里要讲一下他属性改变了，但是他的父布局是一个线性布局。设置了 android:orientation="vertical"方向是竖向排列的，这时候会涉及到父子属性的问题，然后你只要在LinearLayout添加一个 android:gravity="center"，让它的儿子居中就好了。

父布局设置居中

1.4 drawableLeft,drawableright,drawableTop,drawableButton

drawable F4属性是以文本为中心点，在上下左右四个方向设置图片。但是实际上你可能会想设置图片和文字之间的距离。假如你设置了一个控件具体的宽高，但是你发现图片和文字怎么离那么远啊 。这不是你的size啊。然后你看呀Android 给了你一个android:drawablePadding 属性，然后你设置了以后发现，怎么没动静，难道这是假的？大兄弟，这个属性确实是真的，如果宽高不固定的情况下，没什么问题，但是宽高固定或者都是match_parent的话，就有很大的问题了。图片会尽量往外靠的，所以这个时候你需要设置padding值。如果你想图文黏在一起的话，你只要将宽高设置为wrap_content ,这样它会默认宽高为0的

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 拓展

很多时候单一的文本并不能满足用户的需求，有时候你需要对文本样式做出改变。这时候咋个办？一段文本中我只是需要改变中间的几个字的颜色怎么办？需要设置某几个字的点击，斜体等各种各样乱七八糟的需求设计怎么办？这里需要你用到 SpinnerString。

这里给上一个demo地址:https://github.com/wangxin3119/spinnablestringdemo.git

spinnerable 的各种花式

1.5.1 什么是SpannableString

SpannableString其实和String没什么区别，都是字符串类型。TextView也可以直接设置SpannableString。区别的是SpannableString 可以通过 setSpan()定制各种类型，重要的是设置区间。setSpan(Object what, int start, int end, int flags)方法需要用户输入四个参数。what表示设置的格式是什么，可以是前景色、背景色也可以是可点击的文本等等，start表示需要设置格式的子字符串的起始下标，同理end表示终了下标，flags属性就有意思了，

共有四种属性：

Spanned.SPAN_INCLUSIVE_EXCLUSIVE 从起始下标到终了下标，包括起始下标

Spanned.SPAN_INCLUSIVE_INCLUSIVE 从起始下标到终了下标，同时包括起始下标和终了下标

Spanned.SPAN_EXCLUSIVE_EXCLUSIVE 从起始下标到终了下标，但都不包括起始下标和终了下标

Spanned.SPAN_EXCLUSIVE_INCLUSIVE 从起始下标到终了下标，包括终了下标

1.5.2 设置字体颜色 ForegroundColorSpan

SpannableString spannableString = new SpannableString("设置文字的颜色为蓝色");

ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color.parseColor("#0099EE"));

spannableString.setSpan(colorSpan, 8, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);

textView.setText(spannableString);

1.5.3 设置字体的背景 BackgroundColorSpan

SpannableString spannableString = new SpannableString("设置文字的背景色为蓝色");

BackgroundColorSpan colorSpan = new BackgroundColorSpan(Color.parseColor("#AC00FF30"));

spannableString.setSpan(colorSpan, 8, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);

textView.setText(spannableString);

1.5.4 设置文字相对大小 RelativeSizeSpan

SpannableString span02=new SpannableString(tv02);

//设置字体的相对大小

RelativeSizeSpan sizespane02=new RelativeSizeSpan(1.3f);

span02.setSpan(sizespane02,3,span02.length()-1,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

textView2.setText(span02);

1.5.5 设置文字的删除线 StrikethroughSpan

SpannableString spannableString = new SpannableString("为文字设置删除线");

StrikethroughSpan strikethroughSpan = new StrikethroughSpan();

spannableString.setSpan(strikethroughSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);

textView.setText(spannableString);

1.5.6 设置文字的下划线 UnderlineSpan

SpannableString spannableString = new SpannableString("为文字设置下划线");

UnderlineSpan underlineSpan = new UnderlineSpan();

spannableString.setSpan(underlineSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);

textView.setText(spannableString);

1.5.7 设置文字的上标和下标 ,数学公式那样的样式

SpannableString spannableString = new SpannableString("为文字设置上标");

SuperscriptSpan superscriptSpan = new SuperscriptSpan();

spannableString.setSpan(superscriptSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);

textView.setText(spannableString);

SpannableString spannableString = new SpannableString("为文字设置下标");

SubscriptSpan subscriptSpan = new SubscriptSpan();

spannableString.setSpan(subscriptSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);

textView.setText(spannableString);

1.5.8 设置文字的粗体，斜体风格

SpannableString spannableString = new SpannableString("为文字设置粗体、斜体风格");

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 设置部分文字的点击事件 ClickableSpan

SpannableString spannableString = new SpannableString("为文字设置点击事件");

MyClickableSpan clickableSpan = new MyClickableSpan("http://www.jianshu.com/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 设置文字的链接 URLSpan

SpannableString spannableString = new SpannableString("为文字设置超链接");

URLSpan urlspan = new URLSpan("http://www.jianshu.com/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就是按钮的意思，主要的功能就是设置点击事件。

1.android :layout_width/android : layout_height 设置宽高

2.android : background 设置背景(此外还可以自定义背景样式)

3.android :text 设置按钮的文本

4.android :textColor 设置文本的颜色

5.android :textSize 设置文本的字体大小

6.android :clickable 设置是否可点击。Button 这个属性是按钮是否可点击，默认可点击。

7.android :onClick 设置按钮的点击事件

8.android :drawableleft 设置icon 在text 的左边，还有右边，顶部，底部

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"

/>

//代码中 调用点击事件

private void my(View view){

}

Button 设置 点击事件，可以设置android:OnClick="my"，然后在代码中设置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

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/button_icon"

... />

和Button 没有特别的，只是多了一个src属性。

2.4 设置button的样式 点击和非点击的状态

//这里设置的是button自定义的样式 button_custom.xml

android:state_pressed="true" />

android:state_focused="true" />

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" />