Android开发学习笔记-03 基础控件的使用(TextView、Button、EditText、ImageView、SeekBar)

单位

引用菜鸟教程的介绍：

• dp(dip): device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关，一般我们为了支持WVGA、HVGA和QVGA 推荐使用这个，不依赖像素。
• px: pixels(像素). 不同设备显示效果相同，一般我们HVGA代表320x480像素，这个用的比较多。 pt: point，是一个标准的长度单位，1pt＝1/72英寸，用于印刷业，非常简单易用；
• sp: scaled pixels(放大像素). 主要用于字体显示best for textsize。

一、TextView文本框

TextView即文本视图，可用于展示一些文字或简单的图案。

常用属性&操作：

• 文字大小、颜色
• 显示超范围
• 文字 + 图片
• 删除线、下划线
• 转动效果

实例：

1. 最基础的使用

设置内容、大小、颜色

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:text="NameisBoy"
    android:textColor="#000000"
    android:textSize="25sp"/>

wrap_content是根据内容大小设置控件的大小，text的值即为显示内容

2. 显示内容超出大小

当显示的内容超出宽度时，就会显示省略号：...

<TextView
    android:layout_width="170dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:maxLines="1"
    android:ellipsize="end"
    android:text="正在学习Android开发"
    android:textColor="#000000"
    android:textSize="20sp"/>

这里限制最大行数为1，否则内容超出宽度时会换行显示。

3. 文字+图案显示

drawableXXX，XXX为图案的方向，有上下左右等等。

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:drawableTop="@drawable/icon"
    android:text="Android图标"
    android:textColor="#000000"
    android:textSize="20sp"/>

4. 删除线

删除线和下划线都是特殊的设置，需要在java代码中设置，如：

布局代码：

<TextView
    android:id="@+id/tv4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:text="删除线"
    android:textColor="#000000"
    android:textSize="20sp"/>

Java代码：

public class TextViewActivity extends AppCompatActivity {
    
    
    private TextView mTv4;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_view);
        //删除线
        mTv4 = findViewById(R.id.tv4);
        mTv4.getPaint().setFlags(Paint.STRIKE_THRU_TEXT_FLAG);
        mTv4.getPaint().setAntiAlias(true);//消除锯齿
    }
}

通过调用setFlags方法设置，STRIKE_THRU_TEXT_FLAG代表的就是删除线，设置后内容可能会出现锯齿，通过设置setAntiAlias可以消除锯齿。

5. 下划线

与删除线是类似的，只不过下划线是使用UNDERLINE_TEXT_FLAG。

public class TextViewActivity extends AppCompatActivity {
    
    
    private TextView mTv5;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_view);
        //删除线
        mTv5 = findViewById(R.id.tv5);
        mTv5.getPaint().setFlags(Paint.UNDERLINE_TEXT_FLAG);
        mTv5.getPaint().setAntiAlias(true);//消除锯齿
    }
}    

6. 滚动显示

与生活中的广告滚动显示一样，内容不断循环滚动显示。
重点是设置5个属性：singleLine、ellipsize、marqueeRepeatLimit(循环次数)、focusable(获取焦点)、focusableInTouchMode

<TextView
    android:id="@+id/tv6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:text="这是一串滚动的文字这是一串滚动的文字"
    android:textColor="#0000ff"
    android:textSize="20sp"
    android:singleLine="true"
    android:ellipsize="marquee"
    android:marqueeRepeatLimit="marquee_forever"
    android:focusable="true"
    android:focusableInTouchMode="true"/>

singleLine是已经弃用的属性，但必须设置，用其他的属性设置单行显示代替singleLine无效。

设置后如果还不能滚动，需要在Activity的Java代码中设置选中setSelected，如：

   TextView tv = (TextView) findViewById(R.id.textView);  
   tv.setSelected(true);  

实例效果：
以上每个实例对应每一行：

二、Button按钮

常用属性&操作：

• 大小、颜色
• 自定义背景形状
• 自定义按压效果
• 点击事件

Button是继承自TextView控件的，所以很多属性都是一样的操作，重点关注不相同的属性与操作。

1. 基础使用

<Button
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:text="按钮1"
    android:textSize="20sp"
    android:layout_gravity="center"/>

2. 自定义背景形状

• 新建一个shape类型xml资源文件：

• 编写xml代码：

• 设置按钮背景：
  将background属性设置为刚刚创建的资源文件。

<Button
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:text="按钮2"
    android:background="@drawable/gb_btn2"
    android:textSize="20sp"
    android:layout_gravity="center"
    android:layout_marginTop="10dp"/>

预览效果：

3. 自定义按压形状

同样是通过xml资源文件进行创建，不过根元素选择selector:

xml代码：

设置background属性：

<Button
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:text="按钮3"
    android:textSize="20sp"
    android:background="@drawable/bg_btn3"
    android:layout_gravity="center"
    android:layout_marginTop="10dp"/>

按压效果：

4.点击事件

按钮的点击事件处理都涉及Java代码，常用的有2种处理方式：

• 使用onClick属性
• 使用OnClickListener实例

4.1 使用onClick属性

这种方法首先要设置按钮的onClick属性，如：

<Button
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:text="按钮2"
    android:background="@drawable/gb_btn2"
    android:textSize="20sp"
    android:layout_gravity="center"
    android:onClick="Btn2_Onclick"
    android:layout_marginTop="10dp"/>

然后在Activity中实现绑定的回调函数：

效果：

4.2 使用OnClickListener实例

首先需要在布局中给按钮设置id：

<Button
    android:id="@+id/Btn_3"
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:text="按钮3"
    android:textSize="20sp"
    android:background="@drawable/bg_btn3"
    android:layout_gravity="center"
    android:layout_marginTop="10dp"/>

然后在Activity中编写如下代码：

Button mBtn3 = findViewById(R.id.Btn_3);
mBtn3.setOnClickListener(new View.OnClickListener() {
    
    
    @Override
    public void onClick(View v) {
    
    
        Toast.makeText(BtnTest.this,"按钮3被点击了",Toast.LENGTH_SHORT).show();
    }
});

效果：

不只是Button控件可以设置点击事件，其他的一些控件也是可以设置的，具体的可以百度。

三、EditText文本编辑框

EditText是文本编辑框，常用来输入信息，如输入账号密码等。

常用属性&操作：

• 文本大小、内容、颜色…
• 图片和文本混合显示
• 提示信息，即未输入时显示的内容
• 输入文本类型，使用场景：输入密码时设置不可见
• Activity中获取输入的文本信息

1. 基础使用

<EditText
    android:id="@+id/et_username"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:text="账号"
    android:textSize="24sp"/>

这里的text是实际显示的内容，不是提示信息

2. 显示提示信息

设置hint属性，它的值就是提示信息内容：

<EditText
    android:id="@+id/et_username"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:int="账号"
    android:textSize="24sp"/>

3. 显示图片和文本

使用drawableXXX属性显示图片，drawablePadding设置图片和文字间距：

<EditText
     android:id="@+id/et_username"
     android:layout_width="match_parent"
     android:layout_height="50dp"
     android:hint="账号"
     android:drawableLeft="@drawable/username"
     android:drawablePadding="5dp"
     android:textSize="24sp"/>

4. 输入文本类型

设置属性inputType，限制输入的文本类型，如当输入的是密码等非明文信息时，设置inputType为Password即可用*****显示。

<EditText
    android:id="@+id/et_password"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:hint="密码"   
    android:inputType="textPassword"
    android:textSize="24sp"
    android:drawableLeft="@drawable/pswd"
    android:drawablePadding="5dp"
    android:layout_below="@+id/et_username"
    android:layout_marginTop="20dp"/>

5.登录界面实例

EditText也是可以设置背景形状的，下面的例子就设置了圆角和描边。

布局代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:padding="20dp"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/et_username"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:hint="账号"
        android:background="@drawable/bg_et"
        android:drawableLeft="@drawable/username"
        android:drawablePadding="5dp"
        android:textSize="24sp"/>

    <EditText
        android:id="@+id/et_password"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:hint="密码"
        android:inputType="textPassword"
        android:textSize="24sp"
        android:drawableLeft="@drawable/pswd"
        android:drawablePadding="5dp"
        android:background="@drawable/bg_et"
        android:layout_below="@+id/et_username"
        android:layout_marginTop="20dp"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp"
        android:text="登录"
        android:layout_below="@id/et_password"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="150dp"/>

</RelativeLayout>

效果：

这里输入密码时，因为手机安全保护的问题，投屏显示不了。

5. 获取输入文本

类似于Button的点击事件处理方式，EditText的文本变化事件在Activity中通过TextWatcher实例来处理。

如，获取UserName的Java代码：

EditText mEtUsername = findViewById(R.id.et_username);
mEtUsername.addTextChangedListener(new TextWatcher() {
    
    
    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {
    
    
        Log.d("Before-username",s.toString());
    }

    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {
    
    
        Log.d("username",s.toString());
    }

    @Override
    public void afterTextChanged(Editable s) {
    
    
        Log.d("After-username",s.toString());
    }
});

beforeTextChanged是处理文本改变前的函数，onTextChanged是当文本改变时的处理函数，afterTextChanged则是文本改变后的处理函数，通常使用onTextChanged处理文本改变事件。

使用Log将输入文本打印出来，在6:Logcat中6可以看到这几个函数的调用顺序：

四、ImageView图像视图

常用属性&操作：

• 图片内容、背景
• 图片缩放类型
• 加载网络图片

1. 图片内容设置

使用src属性设置ImageView的内容，background属性是设置背景图或背景色，注意区分。

<ImageView
    android:layout_width="300dp"
    android:layout_height="150dp"
    android:background="#FF9966"
    android:src="@drawable/img_test"/>

2. 图片缩放类型

使用scaleType属性设置图片的缩放类型，常用选项(摘自菜鸟教程)：

• fitXY:对图像的横向与纵向进行独立缩放,使得该图片完全适应ImageView,但是图片的横纵比可能会发生改变
• fitStart:保持纵横比缩放图片,知道较长的边与Image的编程相等,缩放完成后将图片放在ImageView的左上角
• fitCenter:同上,缩放后放于中间;
• fitEnd:同上,缩放后放于右下角;
• center:保持原图的大小，显示在ImageView的中心。当原图的size大于ImageView的size，超过部分裁剪处理。
• centerCrop:保持横纵比缩放图片,知道完全覆盖ImageView,可能会出现图片的显示不完全
• centerInside:保持横纵比缩放图片,直到ImageView能够完全地显示图片
• matrix:默认值，不改变原图的大小，从ImageView的左上角开始绘制原图， 原图超过ImageView的部分作裁剪处理

简单对比一下区别：

3. 加载网络图片

当使用的图片在网络上不在本地时，我们就需要进行对图片进行加载处理。通常使用第三方的开源库来加载网络图片。

这里使用Glide开源库加载网络图片，github仓库上也有源代码和使用方法。

使用步骤：

• 修改gradle
  
• 使用glide库加载图片
  上一步修改gradle并同步完成后，就可以使用它来加载网络图片。

参考官方的使用方法：

// For a simple view:
@Override public void onCreate(Bundle savedInstanceState) {
    
    
  ...
  ImageView imageView = (ImageView) findViewById(R.id.my_image_view);

  Glide.with(this).load("http://goo.gl/gEgYUd").into(imageView);
}

// For a simple image list:
@Override public View getView(int position, View recycled, ViewGroup container) {
    
    
  final ImageView myImageView;
  if (recycled == null) {
    
    
    myImageView = (ImageView) inflater.inflate(R.layout.my_image_view, container, false);
  } else {
    
    
    myImageView = (ImageView) recycled;
  }

  String url = myUrls.get(position);

  Glide
    .with(myFragment)
    .load(url)
    .centerCrop()
    .placeholder(R.drawable.loading_spinner)
    .into(myImageView);

  return myImageView;
}

只需要修改load里面图片的url链接即可，如：

ImageView imageView = (ImageView) findViewById(R.id.iv_1);
Glide.with(this).load("https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png").into(imageView);

• 打开网络权限
  图片是在网络上的，所以必须打开网络权限。在AndroidManifest.xml文件中加入：

<uses-permission android:name="android.permission.INTERNET"/>

• 效果
  

五、SeekBar拖动条

SeekBar拖动条，常用属性&操作：

• 拖动范围、高度、长度
• 滑块样式(形状、颜色、图片等)
• 拖动条的颜色
• 拖动事件处理

1. 常用属性&操作

1. 拖动范围通过min和max属性设置，progress是当前值，设置后滑块会处在当前值的位置。minHeight和maxHeight设置拖动条的高度，长度(宽度)则用minWidth和maxWidth设置；
2. 滑块样式可以使用图片或者xml资源文件，使用thumb属性设置；
3. 拖动条的颜色同样可以使用图片或xml文件，使用progressDrawable设置；

直接放一个实例：

<SeekBar
    android:id="@+id/sb_1"
    android:layout_marginTop="100dp"
    android:layout_width="300dp"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:max="100"
    android:progress="50"
    android:maxHeight="8dp"
    android:thumb="@drawable/sb_thumb"
    android:progressDrawable="@drawable/bg_adjust_seek_bar"/>

效果：

2. 拖动事件处理

与按钮、文本编辑框类似，使用OnSeekBarChangeListener实例处理，常用格式：
有三个处理函数：

• onProgressChanged：进度发生改变时会触发
• onStartTrackingTouch：按住SeekBar时会触发
• onStopTrackingTouch：放开SeekBar时触发

final TextView mTv1 = findViewById(R.id.iv_1);
SeekBar mSb1 = findViewById(R.id.sb_1);
mSb1.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
    
    
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
    
    
        Toast.makeText(getApplicationContext(),String.format("当前值:%d",progress),Toast.LENGTH_SHORT).show();
        mTv1.setText("当前值: " + progress + " /100 ");
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
    
    
        Toast.makeText(getApplicationContext(),"按下SeekBar",Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
    
    
        Toast.makeText(getApplicationContext(),"释放SeekBar",Toast.LENGTH_SHORT).show();
    }
});

效果：