第五章 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值会收到影响的。例如:

<?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>
父布局未设置居中

因为我之前讲过了,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的

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

很多时候单一的文本并不能满足用户的需求,有时候你需要对文本样式做出改变。这时候咋个办?一段文本中我只是需要改变中间的几个字的颜色怎么办?需要设置某几个字的点击,斜体等各种各样乱七八糟的需求设计怎么办?这里需要你用到 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 的左边,还有右边,顶部,底部

  <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"
        />
//代码中 调用点击事件
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

<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

<?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"  />
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,117评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,963评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,897评论 0 240
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,805评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,208评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,535评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,797评论 2 311
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,493评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,215评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,477评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,988评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,325评论 2 252
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,971评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,807评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,544评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,455评论 2 266

推荐阅读更多精彩内容