博客

View简介

Android应用的绝大部分UI组件都放在android.widget包及其子包、android.view包及其子包中，android应用的所有UI组件都继承了View类，View的子类很繁杂。

这是网上的一张图片，表示了View及其子类的继承关系，红色的代表常用的控件。

TextView及其子类

TextView

从上图可以看出TextView最直接继承了View，还是EditText、Button这两个常用UI控件的父类。TextView最主要的作用就是在界面上显示文本，类似于Swing编程中的JLabel。



从官网API文档可以看出TextView的继承关系

这里是常用的属性方法

android：text 设置文本的内容 
android：textColor 设置文本的颜色 
android：textSize 设置文本的字体大小（一般使用sp） 
android：height 设置文本的高度（一般使用dp） 
android：width 设置文本的宽度（一般使用dp） 
android：inputType 设置文本的类型，默认为普通文本，可选text、Password等类型（通常在EditText中使用）
android：hint 设置默认显示字体（输入提示，类似于HTML中的placeholder属性）
android：textStyle设置字形，斜体，粗体等，多个属性用“ | ”隔开 
android：singleLine 设置文本是否单行显示
android：gravity 设置文本框的内容相对于文本框的位置（可以使用多个属性 中间用 “ | ”分割） 
android：maxLength：限制文本 的长度，超出部分将会不显示 
android：ellipsize 设置当文字过长的时候该控件如何显示。 （EditText不支持marquee）
android：ems 设置该组件的宽度，以em为单位
android：drawableLeft 用于在文本框左侧绘制图片 
android：drawableRight 用于在文本框右侧绘制图片 
android：drawableTop 用于在文本框顶部绘制图片 
android：drawableBottom 用于在文本框底部绘制图片 

在android studio中写实例

在布局文件中加入TextView控件，写一个基本的TextView


activity_main.xml




效果截图



这里的背景使用的自定义的资源文件

tv_border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:width="2dp" android:color="#f00" />
    <corners android:radius="5dp"/>
    <solid android:color="#b4000000" />
</shape>

关于shape的详解


在android studio中，在res文件夹点右键，新建一个资源文件



然后输入相关信息创建即可，注意文件名不能有大写字母

下面是网上资料关于shape的详细描述

<?xml version="1.0" encoding="utf-8"?>
<!--
    shape drawable xml文件中定义的一个几何图形，定义在res/drawable/目录下，文件名为filename
    在代码中通过R.drawable.filename进行访问，在xml文件中通过@[package:]drawable/filename进行访问。
 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    <!-- shape=["rectangle" | "oval" | "line" | "ring"]-->
    <!--矩形（rectangle）、椭圆形(oval)、线性形状(line)、环形(ring),默认矩形。-->
    <!--下面是shape的子节点
    1.圆角
            android:radius   整型 下面属性没有指定时的默认半径
            android:topLeftRadius     整型 左上角半径
            android:topRightRadius    整型 右上角半径
            android:bottomLeftRadius   整型 左下角半径
            android:bottomRightRadius  整型 右下角半径
     -->
    <corners
            android:radius="8dp"
            android:topLeftRadius="5dp"
            android:topRightRadius="15dp"
            android:bottomLeftRadius="20dp"
            android:bottomRightRadius="25dp"
            />

    <!--
    2.渐变色
      android:startColor  颜色值  起始颜色
      android:endColor    颜色值 结束颜色
      android:centerColor 整型 渐变中间颜色，即开始颜色与结束颜色之间的颜色
      android:angle       
      整型  渐变角度(PS：当angle=0时，渐变色是从左向右。 然后逆时针方向转，当angle=90时为从下往上。angle必须为45的整数倍)
      android:type        
      ["linear" | "radial" | "sweep"] 渐变类型(取值：linear、radial、sweep)
linear 线性渐变，这是默认设置,radial 放射性渐变，以开始色为中心。sweep 扫描线式的渐变。
     android:useLevel       
     ["true" | "false"]如果要使用LevelListDrawable对象，就要设置为true。设置为true无渐变。false有渐变色
     android:gradientRadius 
     整型 渐变色半径.当android:type="radial" 时才使用。单独使用 android:type="radial"会报错。
     android:centerX    整型  渐变中心X点坐标的相对位置
     android:centerY    整型  渐变中心Y点坐标的相对位置
   -->
    <gradient
            android:startColor="#FFFF0000"
            android:endColor="#80FF00FF"
            android:angle="45"
            />

    <!--
   3.内边距，即内容与边的距离
        android:left      整型 左内边距
        android:top      整型 上内边距
        android:right     整型 右内边距
        android:bottom     整型 下内边距
      -->
    <padding
            android:left="10dp"
            android:top="10dp"
            android:right="10dp"
            android:bottom="10dp"
            />

    <!--
    4.size 图形尺寸
        android:width      整型 宽度
        android:height     整型 高度
    -->
    <size
            android:width="180dp"
            android:height="100dp"
            />
    <!--

    5.内部填充
        android:color  颜色值 填充颜色
    -->
    <!-- 存在填充色的时候看不出渐变的效果，渐变色被覆盖 -->
    <solid android:color="#ff65b3ff" />

    <!--
    6.描边
        android:width      整型  描边的宽度
        android:color    颜色值 描边的颜色
        android:dashWidth  整型   表示描边的样式是虚线的宽度， 值为0时，表示为实线。值大于0则为虚线。
       android:dashGap   整型  表示描边为虚线时，虚线之间的间隔 即“ - - - - ”
    -->
    <stroke
            android:width="6dp"
            android:color="#dcdcdc"
            />
</shape>

这样就可以自定义漂亮的样式了。

EditText

EditText与TextView非常类似，与TextView共用了绝大部分XML属性和方法，而它们的区别在于EditText可以接受用户输入，所以它有个非常重要的属性

inputType

,常用于登录注册以及需要用户输入的地方。

<?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="16sp"/>
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请填写登录账号"
            android:selectAllOnFocus="true"/>
           <!-- android:hint 输入提示，类似于HTML中的placeholder -->
    </TableRow>
    <TableRow>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="密码:"
            android:textSize="16sp"/>
        <!-- android:inputType="numberPassword"表明只能接受数字密码 -->
        <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="16sp"/>
        <!-- inputType="number"表明是数值输入框 -->
        <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="16sp"/>
        <!-- inputType="date"表明是日期输入框 -->
        <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="16sp"/>
        <!-- inputType="phone"表明是输入电话号码的输入框 -->
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请填写您的电话号码"
            android:selectAllOnFocus="true"
            android:inputType="phone"/>
    </TableRow>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="注册"/>
</TableLayout>

效果截图：

Button

Button继承了TextView，从字面上理解就是一个供用户点击的按钮，单击按钮会触发onClick事件。按钮，可以设置阴影，配置阴影方式与TextView相同，也可以设置背景，不规则的背景产生不规则形状的按钮，所以也可以用前面的方法修改按钮的样式。

还可以使用selector来自定义按钮

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 指定按钮按下时的图片 -->
    <item android:state_pressed="true"
    android:drawable="@drawable/red"
    />
    <!-- 指定按钮松开时的图片 -->
    <item android:state_pressed="false"
    android:drawable="@drawable/purple"
    />
</selector>

这里只是简单使用一下，关于android资源文件的应用还有很多内容。

Button有个最重要的功能就是触发监听事件


实现监听事件的几种方式

1 . 通过匿名内部类的方式

//获取xml中的控件
Button btn1 = (Button)findViewById(R.id.button);
//绑定点击事件
btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

            }
        });

2 . 直接new一个OnClickListener

public class MainActivity extends AppCompatActivity{

    View.OnClickListener listener = new View.OnClickListener() {
        @Override
        public void onClick(View view) {

        }
    }
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button btn1 = (Button)findViewById(R.id.button);
        btn1.setOnClickListener(listener);
    }
}

3 . 实现接口的方式来实现

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button btn1 = (Button)findViewById(R.id.button);
        btn1.setOnClickListener(this);
    }
    @Override
    public void onClick(View view) {
    }
}

4 .使用独立类的方式实现

首先要自定义一个外部类，实现OnClickListener接口,并重写onClick方法，在onClick方法中可以定义这个外部类想实现的处理逻辑，那么调用这个外部类实现监听事件时，都可以用super来调用这个类中的处理逻辑。这也是使用外部类实现监听事件的优势所在：可以将不同监听事件中大量重复的处理逻辑定义在这个类中，然后使用这个外部类实现监听事件时都可以使用super关键字来直接调用，而不用重复定义，减少重复代码，提高代码质量。

然后为要实现监听的对象绑定监听器，然后在setOnClickListener()方法中使用我们自定义的外部类来实现监听事件。

5 .直接绑定到标签

在布局中要发送事件源中定义一个：

android：onClick=”clickHandler”

然后在该布局对应的Activity定义一个 void clickHandler（void source）方法

RadioButton&CheckBox

单选框(RadioButton)和复选框(CheckBox)都继承了Button类，与普通Button不同的是，它们多了个android:checked属性，用来指定是否是选中状态。

实例：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.admin.test3.Test2Activity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="10dp"
        android:layout_marginStart="10dp">

        <TextView
            android:id="@+id/tv1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:text="选择学历:"
            android:textSize="18sp" />

        <RadioGroup
            android:id="@+id/rg1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp">

            <RadioButton
                android:id="@+id/r1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="小学及以下" />

            <RadioButton
                android:id="@+id/r2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="中学" />

            <RadioButton
                android:id="@+id/r3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="本科" />

            <RadioButton
                android:id="@+id/r4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="硕士及以上" />

        </RadioGroup>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginStart="10dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="选择爱好:"
            android:textSize="18sp"
            android:layout_marginRight="10dp"/>
        <CheckBox
            android:id="@+id/c1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="音乐"/>
        <CheckBox
            android:id="@+id/c2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="运动"/>
        <CheckBox
            android:id="@+id/c3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="文学"/>
        <CheckBox
            android:id="@+id/c4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="旅游"/>

    </LinearLayout>
    <TextView
        android:id="@+id/info"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:textSize="20sp"/>
</LinearLayout>

效果截图：



需要注意的是单选按钮需要放在RadioButton里面。

如果在XML布局文件中默认勾选了某个单选按钮，则必须为该组单选按钮的每个按钮指定android:id属性值，否则这组单选按钮不能正常工作。

关于它们的监听事件

RadioButton

//先获取RadioGroup组件
rg = (RadioGroup) findViewById(R.id.rg1);
//然后为其绑定监听事件
rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            //使用onCheckedChanged方法监听状态改变事件
            //参数i就是触发事件的按钮id
            public void onCheckedChanged(RadioGroup radioGroup, @IdRes int i) {
                switch (i){
                    case R.id.r1:
                        info.setText("你的学历是小学及以下,你的爱好有：");
                        break;
                    case R.id.r2:
                        info.setText("你的学历是中学,你的爱好有：");
                        break;
                    case R.id.r3:
                        info.setText("你的学历是本科,你的爱好有：");
                        break;
                    case R.id.r4:
                        info.setText("你的学历是硕士及以上,你的爱好有：");
                        break;
                }
            }
        });

CheckBox

    @Override
    public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
         //如果被选中
        if(b){
           ...
        }else{
           ...
            }
        }

    }

需要注意的是RadioGroup监听用的是RadioGroup.OnCheckedChangeListener，CheckBox用的是CompoundButton.OnCheckedChangeListener。

ToggleButton和Switch

状态开关按钮(ToggleButton)和开关(Switch)也是由Button派生出来的，因它们的本质也是按钮，从功能上来看，与复选框非常类似，它们都可以提供两种状态。

实例：

    <ToggleButton
        android:id="@+id/toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <Switch
        android:id="@+id/switch1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="开关"
        android:textOff="关"
        android:textOn="开" />

然后给它们绑定监听事件

toggle.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                if(b){
                    Toast.makeText(Test3Activity.this,"ToggleButton开",Toast.LENGTH_SHORT).show();
                }else{
                    Toast.makeText(Test3Activity.this,"ToggleButton关",Toast.LENGTH_SHORT).show();
                }
            }
        });

switcher.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                if(b){
                    Toast.makeText(Test3Activity.this,"switch开",Toast.LENGTH_SHORT).show();
                }else{
                    Toast.makeText(Test3Activity.this,"switch关",Toast.LENGTH_SHORT).show();
                }
            }
        });

效果图：

ImageView及其子类

ImageView继承自View组件，它的主要功能是用于显示图片，任何Drawable对象都可以使用ImageVieew来显示。

ImageView还派生了ImageButton、ZoomButton等组件。

android:adjustViewBounds：设置ImageView是否调整自己的边界来保持所显示图片的长宽比。
android:maxHeight：设置ImageView的最大高度。
android:maxWidth：设置ImageView的最大宽度。
android:scaleType：设置所显示的图片如何缩放或移动以适应ImageView的大小。
android:src：设置ImageView所显示的Drawable对象的ID。
　　对于android:scaleType属性，因为关于图像在ImageView中的显示效果，所以有如下属性值可以选择：
    matrix：使用matrix方式进行缩放。
    fitXY：横向、纵向独立缩放，以适应该ImageView,图片长宽比可能会改变。
    fitStart:保持纵横比缩放图片，直到该图片能完全适应于该ImageView，图片较长的边长与ImageView相应的边长相等，并且将图片放在ImageView的左上角。
    fitCenter：保持纵横比缩放图片，缩放完成后将图片放在ImageView的中央。
    fitEnd：保持纵横比缩放图片，缩放完成后将图片放在ImageView的右下角。
    center：把图片放在ImageView的中央，但是不进行任何缩放。
    centerCrop：保持纵横比缩放图片，以使图片能完全覆盖ImageView。
    centerInside：保持纵横比缩放图片，以使得ImageView能完全显示该图片。

为了控制ImageView显示的图片，ImageView提供了如下方法：
setImageBitmap(Bitmap bm):使用Bitmap位图设置该ImageView显示的图片。
setImageDrawable(Drawable drawable):使用Drawable对象设置该ImageView显示的图片。
setImageResource(int resId):使用图片资源的ID设置该ImageView显示的图片。
setImageURI(Uri uri):使用图片的URI设置该ImageView显示的图片。

<ImageView android:id="@+id/img"   
    android:src="@drawable/logo"  
    android:scaleType="centerInside"  
    android:layout_width="60dip"  
    android:layout_height="60dip"  
    android:layout_centerVertical="true"/>  

ImageView派生了两个子类：


ImageButton:图片按钮。

QuickContactBadge：显示关联到特定联系人的图片。

Button和ImageButton：




它们共有的特性：

都可以作为一个按钮产生点击事件

不同点：

Button有text的属性，ImageButton没有

ImageButton有src属性，Button没有

src和background的区别：

imageButton 是带图标的Button控件，有src的属性，也就是设置他的图标，也有一个所有控件公有的属性background， 这个也可以设置它的“图标”。

其实，src才是设置图标，而background只是设置背景。

src属性和background是可以同时存在的

如果控件的大小是100*100 图片资源是80*80的话，那么用src，图片就会居中显示，如果使用background那么图片就会被拉伸充满控件。

重要的是，background是底层的图片资源，src是覆盖在background上面的资源，他们可以叠加使用，实现选中的效果。在ActivityGroup用到。

src和background可以同时存在 image button

src添加后不会变形，而bg会变形

QuickContactBadge：


QuickContactBadge继承了ImageView，因此它的本质也是图片按钮，也可以通过src属性指定它显示的图片。它的额外功能是可以关联到手机中指定联系人。

实例：

添加控件，并把一幅图片挂上去。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.admin.test3.Test5Activity">
    <TextView
        android:id="@+id/tv1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="给我打电话"/>
    <QuickContactBadge
        android:id="@+id/q1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="false"
        android:scaleType="center"
        android:src="@drawable/img1"/>
</LinearLayout>

还得在Activity的OnCreate方法中加一行代码把控件与电话号码挂起来

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test5);
        QuickContactBadge badge = (QuickContactBadge)findViewById(R.id.q1);
        badge.assignContactFromPhone("123456789",false);
    }

这样，当单击图片时，就会进入联系人中去拨号了。