Android学习笔记⑤——UI组件的学习TextView相关

TextView是一个强大的视图组件，直接继承了View，同时也派生出了很多子类，TextView其作用说白了就是在布局中显示文本，有点像Swing编程中的JLabel标签，但是他比JLabel强大的多!

上面这个图解就是TextView派生出的一些类(图来自 疯狂Android讲义),TextView有许多的xml属性，下面就在例子中举一些我觉得常用的，其他属性如果要用到的话，到时候在查阅资料！

常规TextView属性

最常见的属性是 更改字体的大小、颜色、类型、样式，下面就分别举例了更改字母的大小、设置了 单行显示、 设置了超链接、设置了字体的大小与阴影以及不常用的密码框(一般在EditText组件里实现)

 <?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="match_parent">

     <TextView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="我被更改了大小"
         android:textSize="20pt"/>
     <TextView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="all letters are capitalized.所有字母都大写 "
         android:textAllCaps="true"
         />
     <TextView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="这一串文字被设置了ellipsize='middle'属性，设置了从中间处截断，并显示省略号"
         android:maxLines="1"
         android:ellipsize="middle"
         />
     <TextView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="邮箱设置了链接email xxx@gmail.com "
         android:autoLink="email"/>

     <TextView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="设置了阴影"
         android:shadowColor="#f00"
         android:shadowDx="10.0"
         android:shadowDy="8.0"
         android:shadowRadius="3.0"
         android:textColor="#00f"
         android:textSize="20pt"
        />
     <TextView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="测试了密码框"
         android:password="true"
         />
     <CheckedTextView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="可以勾选的文字"
         android:checkMark="@drawable/ok"
         />
 </LinearLayout>

运行的截图如下：

          

上面的截图1可以看出(第三行) 在android:ellipsize="middle" 这个属性中好像没有实现他的效果，我把他改成"end" 在结尾处显示省略号 他是可以的如上面的2图所示，我之后又把属性设置成“statrt”报错了。。。

java.lang.ArrayIndexOutOfBoundsException: length=61; index=-1  数组越界。。。好奇怪，之后我把 android:maxLines="1" 这个属性改成了 android:singleLine="true" 就可以了，如上面的3图，同时“middle”也可以实现了。。之所以我把android:singleLine 换成 android:maxLines 是因为我在编辑的时候 ，IDE推荐我这样做的。。。,他说这个过时了，，但是这次结果可以发现，情人还是老的好啊！！

至于如果选择了 singleLine这个属性如何解决这个问题先留着，好吃的留在最后么。。。

带边框、渐变的TextView

默认的情况下TextView是不带边框的，如果非得要给他来个边框也是可以的，这个时候就需要自定义背景Drawable,Drawable是安卓的应用资源之一，其他的还有好多等到时候学到了再详细学习。下面就是给出边框的设置，主要是background属性的设置！

布局内的代码：

 <?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="match_parent">

     <TextView
         android:layout_width="match_parent"
         android:layout_height="100px"
         android:text="指定了当前的边框为红色"
         android:textSize="10pt"
         android:background="@drawable/bg_border"
         />

     <TextView
         android:layout_width="match_parent"
         android:layout_height="100px"
         android:text="指定了当前的边框背景为渐变色"
         android:textSize="10pt"
         android:background="@drawable/bg_border2"
         />

     <TextView
         android:layout_width="match_parent"
         android:layout_height="100px"
         android:text="指定了当前的边框背景图片"
         android:textSize="10pt"
         android:background="@drawable/ok"
         />
 </LinearLayout>

Drawable的代码：

bg_border

 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android">
     <!-- 设置了背景色为透明 -->
     <solid android:color="#0000" />
     <!-- 设置了边框为红色，且为4个像素的粗细 -->
     <stroke android:color="#f00" android:width="4px" />
 </shape>

bg_border2

 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
    <!-- 设置圆角的程度-->
     <corners
         android:bottomLeftRadius="20px"
         android:bottomRightRadius="5px"
         android:topLeftRadius="20px"
         android:topRightRadius="5px" />
     <!-- 设置边框的颜色与粗细-->
     <stroke
         android:width="4px"
         android:color="#f0f" />
     <!-- 设置渐变色以及类型-->
     <gradient
         android:centerColor="#0f0"
         android:endColor="#00f"
         android:startColor="#f00"
         android:type="linear" />
 </shape>

运行的截图如下图所示：

EditText 的相关学习

EditText也是非常常见的组件之一，对于一般我们用到的来说，也就是改变其样式使其美观，以及在接收一些输入的信息的时候能有一些限制，比如大写、日期、还有密码框以及输入的时候给予一些提示，下面就学习这些常用属性。

布局界面的代码：

 <?xml version="1.0" encoding="utf-8"?>
 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:stretchColumns="1">

     <TableRow>
         <TextView
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:text="用户名："
             android:textSize="10pt" />

         <EditText
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:hint="填写用户名"
             android:selectAllOnFocus="true" />
     </TableRow>

     <TableRow>
         <TextView
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:text="密    码："
             android:textSize="10pt" />

         <EditText
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:inputType="numberPassword" />
     </TableRow>

     <TableRow>
         <TextView
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:text="年    龄："
             android:textSize="10pt" />

         <EditText
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:inputType="number" />
     </TableRow>

     <TableRow>
         <TextView
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:text="生    日："
             android:textSize="10pt" />
         <EditText
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:inputType="date" />
     </TableRow>

     <TableRow>
         <TextView
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:text="电    话："
             android:textSize="10pt" />

         <EditText
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:inputType="phone" />
     </TableRow>

 </TableLayout>

运行的截图：

    

根据上面的运行截图来看，第一行是给出了提示，第二行是限定了密码为数组且隐藏了，第三行是年龄限定了输入为数字，第四行为日期限定输入了为日期，但是这个框子跟我想象中的不一样，按照我想象中的应该是点一下输入框，然后跳出来一个日期选择框供于选择的么，于是查看了下有个组件叫做DatePicker 结合EditText 可实现这个功能。这个等到时候学到了再看吧！

 Button (按钮)

按钮也是常用的组件之一了，一般来说对于按钮，我认为就是能让其变得各种颜色、各种形状就差不多了，毕竟在Ui布局中除了美观，其他也不要求啥的。。。

 <?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="match_parent">
     <Button
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="一般按钮(无修饰)"
         />
     <Button
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="改变了颜色和背景"
         android:textColor="#f00"
         android:background="#ff0"
         />
     <Button
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="阴影按钮(其实就是文字阴影)"
         android:shadowRadius="1"
         android:shadowColor="#0ff"
         android:shadowDy="5"
         android:shadowDx="5"
         />
     <Button
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:background="@drawable/bg"
         android:text="图片+文字按钮"
         />
     <Button
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="用Drawable自定义画背景"
         android:background="@drawable/button_select"
         />
 </LinearLayout>

Drawable代码：

 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_pressed="true" android:drawable="@color/red"></item>
     <item android:state_pressed="false" android:drawable="@color/green"></item>
 </selector>

运行之后的截图为：

当然除了上面一些之外，还有一个是利用9Patch来作为背景，其原理也是以图片为背景，只不过这样的图片能够适应按钮的缩放，不至于因为按钮的缩放而让图片变形！.9.png图片的制作方法是双击位于SDK安装路径下的tools目录下的 draw9patch.bat文件就会跳出一个框框，然后通过主菜单的File->Open 9 Patch 即可打开。当然打开的要死png格式的，如果不是ps或者其他工具转换下，更暴力的就是用QQ提供的截图截出来的就是png格式，只不过这样会让图片的像素变得很模糊。

   

如上图的红框子框出来的部分就是不会被缩放而其他部分被缩放，测试图如上面的右图(好像不明显。。气泡的那个还好。。。看书上人家弄得挺好的啊，，自己弄就这德行了，，，，凑合着吧 ，知道这个功能。。。)，代码就不贴了。

RadioButton(单选框)和CheckBox(复选框)

这两个组件主要配合一些点击事件来工作，在UI界面的设置没啥多说的，除非你要更改他原生的形状，比如圆圈我要改成其他的图形。。。(这个还没学习，但是我预感以后肯定会用到。。。。)

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

     <TableRow>

         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_gravity="center"
             android:text="性别：" />

         <RadioGroup
             android:id="@+id/rg"
             android:orientation="horizontal">

             <RadioButton
                 android:id="@+id/male"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="男" />

             <RadioButton
                 android:id="@+id/female"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="女" />
         </RadioGroup>
     </TableRow>

     <TableRow>

         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="喜欢的颜色：" />

         <LinearLayout
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:orientation="vertical">

             <CheckBox
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="红色" />

             <CheckBox
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="黄色" />

             <CheckBox
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="绿色" />
         </LinearLayout>
     </TableRow>

     <TextView
         android:id="@+id/show"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="" />
 </TableLayout>

java代码

 package com.doliao.helloworld;

 import android.os.Bundle;
 import android.support.v7.app.AppCompatActivity;
 import android.widget.RadioGroup;
 import android.widget.TextView;

 public class MainActivity extends AppCompatActivity {

     TextView tx;
     RadioGroup rg;

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_button3);
         rg = (RadioGroup) findViewById(R.id.rg);
         tx = (TextView) findViewById(R.id.show);

         rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
             @Override
             public void onCheckedChanged(RadioGroup group, int checkedId) {
                 String str = checkedId == R.id.male ? "你选择的男人" : "你选择的女人";
                 tx.setText(str);
             }
         });
     }

 }

运行的结果：

下面还有ToggleButton(状态开关按钮)和switch(开关)的功能方法，他们跟复选框我觉得是相似的，也没怎么看，觉得用到的的不多，还有AnalogClock和TextClock 时钟组件和计时器  Chronometer，这些我觉得平时用到的不多我就没有详细的学习，毕竟脑容量有限，，，学习一些常用的，不常用的等要用的时候在百度吧。。。(也不知道这是坏习惯还是好习惯  :(   )

以上暂且就是TextView的学习笔记，有错误在所难免，欢迎指正！