Android 开发入门（2）

0x04 简单控件

（1）文本显示

a. 添加文本

设置文本内容主要有两种方式：

• XML：通过属性android:text设置

  • 在 layout 目录下新建 activity_text_view.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:id="@+id/tv_ha"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="你好，安卓" />
    
    </LinearLayout>
    

• Java：通过调用文本视图对象（TextView）的setText()方法设置

  • 在 java/(package) 下新建 TextViewActivity.java

    package com.example.myapplication;
    
    import android.os.Bundle;
    import android.widget.TextView;
    
    import androidx.annotation.Nullable;
    import androidx.appcompat.app.AppCompatActivity;
    
    public class TextViewActivity extends AppCompatActivity {
        @Override
        protected void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_text_view);
            TextView tv_ha = findViewById(R.id.tv_ha);
            tv_ha.setText("你好，世界");
        }
    }
    

特别的，可以将需要添加的文本内容统一设置在 res/values/string.xml 中，在 XML 中通过text="@string/***"获取，在 Java 中通过setText(R.string.***)获取

b. 字体大小

设置文本大小主要有两种方式：

• XML：通过属性android:textSize设置

  需要设置的单位：

  • px：手机屏幕最小显示单位，与设备显示屏有关
  • dp：与屏幕尺寸有关
  • sp：专门用于设置字体大小，在系统设置中可以调整字体大小

  <TextView android:textSize="20px"></TextView>
  

• Java：通过调用setTextSize()方法设置

  tv_ha.setTextSize("20");
  

  此时单位由官方设置为 sp

c. 字体颜色

• XML

  • 文本文字颜色：通过属性android:textColor设置，格式为 RGB(A) 的十六进制数

    <TextView android:textColor="#00ff00ff"></TextView>
    // or
    <TextView android:textColor="#00ff00"></TextView>
    

  • 文本背景颜色：通过属性android:background设置

    <TextView android:background="@color/green"></TextView>
    

• Java

  • 文本文字颜色：通过调用setTextColor()方法设置，可从 Color 类中选色或使用十六进制数

    tv_ha.setTextColor(Color.GREEN);
    // or
    tv_ha.setTextColor(0xFF00FF00);	// 前两位为透明度
    // or
    tv_ha.setTextColor(0x00FF00);	// 不包含透明度
    

  • 文本背景颜色：通过调用setBackgroundColor()方法设置

    tv_ha.setBackgroundColor(Color.GREEN)	// 从 Java 的 Color 类选色
    tv_ha.setBackgroundColor(R.color.green)	// 从 XML 的 color 类中选色
    

（2）视图基础

a. 宽高

• XML：通过属性android:layout_width/android:layout_height设置宽/高

  共三种取值：

  • match_parent：与父视图一致
  • wrap_content：与内容自适应
  • 以dp为单位的数值

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="300dp"></LinearLayout>
  

• Java：在 XML 中设置其宽高为wrap_content的前提下，

  1. 调用控件对象的getLayoutParams()方法，获取该控件的布局参数
  2. 修改宽（width）高（height）属性的参数
  3. 调用控件对象的setLayoutParams()方法，设置修改后的布局参数

  // ...
  import android.view.ViewGroup;
  
  public class TextViewActivity extends AppCompatActivity {
      @Override
      protected void onCreate(@Nullable Bundle savedInstanceState) {
          // ...
          ViewGroup.LayoutParams params = tv_ha.getLayoutParams();
          params.width = 20;		// 单位为 px
          params.height = 40;
          tv_ha.setLayoutParams(params);
      }
  }
  

  对于宽高单位从 dp 向 px 的转换，可以通过以下方法实现：

  // (package)目录下添加 utils 软件包，新建 dp2px.java 文件，内容如下：
  package com.example.myapplication.utils;
  
  import android.content.Context;
  
  public class dp2px {
  public static int d2p(Context context, float dpValue) {
    float scale = context.getResources().getDisplayMetrics().density;
    return (int)(dpValue * scale + 0.5f);	// 0.5f 用于四舍五入
  }
  }
  

  // 在对应 (Activity).java 文件中引用上述代码
  // ...
  import com.example.myapplication.utils.dp2px;
  public class TextViewActivity extends AppCompatActivity {
  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    // ...
    params.width = dp2px.d2p(this, 300);
    // ...
  }
  }
  

b. 边距

• XML

  • 通过属性android:layout_margin设置外边距
  • 通过属性android:padding设置内边距

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_margin="300dp"
      android:padding="60dp">
  </LinearLayout>
  

c. 对齐

• XML

  • 通过属性android:layout_gravity设置外对齐
  • 通过属性android:gravity设置内对齐

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_gravity="left"
      android:gravity="top|right">
  </LinearLayout>
  

（3）常用布局

a. 线性布局 LinearLayout

• 通过属性android:orientation设置排列方向：水平(horizontal)/垂直(vertical)
• 通过属性android:layout_weight设置布局权重
  • android:layout_width="0dp"：此时权重为宽度比例
  • android:layout_height="0dp"：此时权重为高度比例

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:background="#ff0000"
            android:textColor="#ffffff"
            android:text="横向第一项" />
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:gravity="center"
            android:background="#ff0000"
            android:textColor="#ffffff"
            android:text="横向第二项" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_gravity="center"
            android:background="#00ff00"
            android:textColor="#ffffff"
            android:text="竖向第一项" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_gravity="center"
            android:background="#00ff00"
            android:textColor="#ffffff"
            android:text="竖向第二项" />
    </LinearLayout>

</LinearLayout>

b. 相对布局 RelativeLayout

• 相对布局的下级视图位置由其他视图决定，用于确定下级视图位置的参照物分为
  1. 与该视图自身平级的视图
  2. 该视图的上级视图
• 若未设置，则默认为左上角

相对位置取值	相对位置说明
android:above="@id/xxxxx"	当前视图在指定视图的上边
android:toLeftOf="@id/xxxxx"	当前视图在指定视图的左边
android:toRightOf="@id/xxxxx"	当前视图在指定视图的右边
android:below="@id/xxxxx"	当前视图在指定视图的下边
android:alignTop="@id/xxxxx"	当前视图在指定视图的上对齐
android:alignLeft="@id/xxxxx"	当前视图在指定视图的左对齐
android:alignRight="@id/xxxxx"	当前视图在指定视图的右对齐
android:alignBottom="@id/xxxxx"	当前视图在指定视图的下对齐
android:layout_centerInParent="true"	当前视图在上级视图的中间
android:layout_centerHorizontal="true"	当前视图在上级视图的水平居中
android:layout_centerVertical="true"	当前视图在上级视图的垂直居中
android:alignParentTop="true"	当前视图在上级视图的上对齐
android:alignParentLeft="true"	当前视图在上级视图的左对齐
android:alignParentRight="true"	当前视图在上级视图的右对齐
android:alignParentBottom="true"	当前视图在上级视图的下对齐

c. 网格布局 GridLayout

• 支持多行多列的表格排列
• 默认从左往右、从上往下排列，含有以下属性
  1. columnCount属性：指定网格列数
  2. rowCount属性 ：指定网格行数
• 可以通过设置权重属性layout_columnWeight或layout_rowWeight进行行列填充调整

d. 滚动视图 ScrollView

• 垂直滚动视图：ScrollView

  <ScrollView
          android:layout_width="match_parent"
          android:layout_height="wrap_content">
  </ScrollView>
  

• 水平滚动视图：HorizontalScrollView

  <HorizontalScrollView
          android:layout_width="wrap_content"
          android:layout_height="match_parent">
  </HorizontalScrollView>
  

（4）按钮触控

a. 控件 Button

控件 Button 由 TextView 派生而来，有一定的区别

• 有默认的按钮背景

• 内部文本默认居中对齐

• 默认将小写字母转为大写

• textAllCaps属性：指定是否将英文字母转为大小写，true/false

  • 保持原状：android:textAllCaps="false"

• onClick属性：接管用户点击动作，可设置触发的方法

  • XML

    <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="获取时间"
            android:textColor="@color/black"
            android:textSize="20sp"
            android:textAllCaps="false"
            android:onClick="aClickEvent" />
    <TextView
            android:id="@+id/tv_res"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColor="@color/black"
            android:textSize="20sp" />
    

  • Java

    • utils/getDateString.java

      package com.example.myapplication.utils;
      
      import java.text.SimpleDateFormat;
      import java.util.Date;
      
      public class getDateString {
          public static String getNowTime() {
              SimpleDateFormat sdf = new SimpleDateFormat("HH:mm:ss");
              return sdf.format(new Date());
          }
      }
      

    • MainActivity.java

      package com.example.myapplication;
      
      import androidx.appcompat.app.AppCompatActivity;
      
      import android.os.Bundle;
      import android.view.View;
      import android.widget.Button;
      import android.widget.TextView;
      
      import com.example.myapplication.utils.getDateString;
      
      public class MainActivity extends AppCompatActivity {
      
          private TextView tv_res;
      
          @Override
          protected void onCreate(Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
              setContentView(R.layout.activity_main);
              tv_res = findViewById(R.id.tv_res);
          }
      
          public void aClickEvent(View view) {
              String str = String.format("%s：现在时间%s", ((Button)view).getText(), getDateString.getNowTime());
              tv_res.setText(str);
          }
      }
      

b. 点击事件和长按事件

XML：

<Button
        android:id="@+id/btn_time"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="获取时间"
        android:textColor="@color/black"
        android:textSize="20sp"
        android:textAllCaps="false" />
<TextView
        android:id="@+id/tv_res"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textColor="@color/black"
        android:textSize="20sp" />

监听器：用于监听控件的动作行为，只有控件发生了指定的动作，监听器才会触发并执行

• 点击监听器：setOnClickLintener()方法设置，当按钮被按住的时间少于 500 毫秒时会触发

  public class MainActivity extends AppCompatActivity {
  
      private TextView tv_res;
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);
          tv_res = findViewById(R.id.tv_res);
          findViewById(R.id.aClickEvent).setOnClickListener(new AOnClickEvent(tv_res));
      }
  
      static class AOnClickEvent implements View.OnClickListener {
  
          private final TextView tv_res;
  
          // 构造函数
          public AOnClickEvent(TextView tv_res) {
              this.tv_res = tv_res;
          }
  
          @Override
          public void onClick(View view) {
              // 通过判断 id 确认执行项目，实现简单函数复用
              if (view.getId() == R.id.btn_time) {
                  String str = String.format("%s：现在时间%s", ((Button)view).getText(), getDateString.getNowTime());
              	tv_res.setText(str);
              }
          }
      }
  }
  

• 长按监听器：setOnLongClickLintener()方法，当按钮被按住的时间超过 500 毫秒时会触发

  findViewById(R.id.aClickEvent).setOnLongClickListener(new View.OnLongClickListener() {
  	@Override
  	public boolean onLongClick(View view) {
  		String str = String.format("%s：现在时间%s", ((Button)view).getText(), getDateString.getNowTime());
  		tv_res.setText(str);
  		return true;
  		}
  	});
  }
  

对于上述写法涉及了匿名内部类的概念，可以用 lambda 写法替换，如：

findViewById(R.id.aClickEvent).setOnLongClickListener(view -> {
	String str = String.format("%s：现在时间%s", ((Button)view).getText(), getDateString.getNowTime());
	tv_res.setText(str);
	return true;
});

c. 禁用和恢复按钮

• 在实际情况中，按钮通常有两种类型：

  • 不可用按钮：不允许点击，点击时无事件触发，文字灰色
  • 可用按钮：允许点击，点击时触发事件，文字颜色正常

• 是否允许点击由enable属性控制，其值为true时允许点击，值为false时不允许

• XML：android:enable="true"

• Java：findViewById(R.id.xxxxx).setEnable(true)

（5）图像显示

a. 图像视图 ImageView

图像视图通常位于 res/drawable*** 目录

XML 中的缩放类型	Java ScaleType 类的缩放类型	说明
fitXY	FIT_XY	图片填充
fitStart	FIT_START	保持宽高比，位于视图上方/左侧
fitCenter	FIT_CENTER	保持宽高比，位于视图中间
fitEnd	FIT_END	保持宽高比，位于视图下方/右侧
center	CENTER	保持图片原尺寸，并使其位于视图中间
centerCrop	CENTER_CROP	拉伸图片使其充满视图，并位于视图中间
centerInside	CENTER_INSIDE	保持宽高比，缩小图片使其位于视图中间

• XML：通过android:src="@drawable/pictureName"属性设置

  <ImageView
          android:id="@+id/iv"
          android:layout_width="match_parent"
          android:layout_height="220dp"
          android:src="@drawable/ic_launcher_background"
          android:scaleType="fitCenter" />
  

• Java：通过调用setImageResource(R.drawable.pictureName)方法设置

  // ...
  import android.widget.ImageView;
  // ...
  ImageView iv = findViewById(R.id.iv);
  iv.setImageResource(R.drawable.ic_launcher_background);
  iv.setScaleType(ImageView.ScaleType.FIT_CENTER);
  

b. 图像按钮 ImageButton

控件 ImageButton 由 ImageView 派生而来，有一定的区别

• 与 Button 相比，ImageButton
  • 只能显示图片
  • 可按比例缩放
  • 可分别在前景和背景显示图片，从而事项两张图片的叠加效果
    • 适合表达特殊字体或公式等
• 与 ImageView 相比，ImageButton
  • 有默认的按钮背景
  • 默认缩放类型为 center

c. 图像与文本结合

• 利用 LinearLayout 对 ImageView 和 TextView 组合布局
• 利用 Button 的android:drawableXxx属性设置文本周围的图标
  • android:drawableTop：指定文字上方的图片
  • android:drawableLeft：指定文字左侧的图片
  • android:drawableRight：指定文字右侧的图片
  • android:drawableBottom：指定文字下方的图片
  • android:drawablePadding：指定文字与图片的间距

---

点我进入下一节

---