第三章 UI开发

如何编写程序界面

可以通过控件来编写界面，也可以通过XML来编写界面。

常用控件的使用方法

TextView文本

  1.     <TextView
  2.        android:id="@+id/textview"
  3.         android:layout_width="match_parent"
  4.         android:layout_height="wrap_content"
  5.         android:gravity="center"
  6.         android:textColor="#03A9F4"
  7.         android:textSize="24sp"
  8.         android:text="This is TextView"/>

属性：

  • android:id：给当前控件定义了一个唯一标识符。
  • android:layout_width：指定了控件的宽度。
  • android:layout_height指定了控件的高度。
    • match_parent：让当前控件的大小和父布局一样。
    • wrap_content：让当前控件的大小能够刚好包含住里面的内容。
    • 固定值：给控件指定一个固定的尺寸，单位一般用dp。
  • android:gravity：指定文字的对齐方式，可选值有top、bottom、start、end、center等。
  • android:textColor：指定文字颜色。
  • android:textSize：指定文字大小，单位使用sp。

Button按钮

Android系统默认会将按钮上的英文字母全部转换成大写。

  1.     <Button
  2.         android:id="@+id/button"
  3.         android:layout_width="match_parent"
  4.         android:layout_height="wrap_content"
  5.         tools:ignore="MissingConstraints"
  6.         android:text="Button"/>

在xml中添加android:textAllCaps=”false”这个属性，系统会保留你指定的原始文字内容。

接下来就是在MainActivity中为Button的点击事件注册一个监听器。

  1.     protected void onCreate(Bundle savedInstanceState) {
  2.         super.onCreate(savedInstanceState);
  3.         setContentView(R.layout.activity_main);
  4.         Button button = (Button) findViewById(R.id.button);
  5.         button.setOnClickListener(new View.OnClickListener() {
  6.             @Override
  7.             public void onClick(View v) {
  8.                 Toast.makeText(MainActivity.this,"You click the button",Toast.LENGTH_SHORT).show();
  9.             }
  10.         });
  11.     }

EditText对话框

允许用户在控件里输入和编辑内容，并可以在程序中对这些内容进行处理。

  1.     <EditText
  2.         android:id="@+id/editText"
  3.         android:layout_width="match_parent"
  4.         android:layout_height="wrap_content"
  5.         tools:ignore="MissingConstraints"
  6.         android:hint="默认提示文本"
  7.         android:maxLines="2"/>
  • android:hint:指定了一段提示性的文本。
  • android:maxLines：指定了EditText的最大行数，当输入的内容超过最大行数时，文本就会向上滚动，EditText不会再继续拉伸。

demo：获取文本并通过Toast输出

  1.     private EditText editText;
  2.     @Override
  3.     protected void onCreate(Bundle savedInstanceState) {
  4.         super.onCreate(savedInstanceState);
  5.         setContentView(R.layout.activity_main);
  7.         Button button = (Button) findViewById(R.id.button);
  8.         editText = (EditText) findViewById(R.id.editText);
  9.         button.setOnClickListener( this);
  10.     }
  12.     @Override
  13.     public void onClick(View v) {
  14.         switch (v.getId()){
  15.             case R.id.button:
  16.                 String inputText = editText.getText().toString();
  17.                 Toast.makeText(MainActivity.this,inputText,Toast.LENGTH_SHORT).show();;
  18.         }
  19.     }

ImageView图片

用于在界面上展示图片的一个控件。

  1.         <ImageView
  2.             android:id="@+id/image_view"
  3.             android:layout_width="wrap_content"
  4.             android:layout_height="wrap_content"
  5.             android:src="@drawable/img_1"/>

demo：点击按钮换图片

  1.  imageView = (ImageView) findViewById(R.id.image_view);
  1.  imageView.setImageResource(R.drawable.img_2);

ProgressBar进度条

在界面上显示一个进度条。

  1.         <ProgressBar
  2.             android:id="@+id/progress_bar"
  3.             android:layout_width="match_parent"
  4.             android:layout_height="wrap_content"/>

Android控件的可见属性

通过android:visibility进行指定，可以控制控件的可见与不可见。

三个可选值：

  • visible：可见。
  • invisible：不可见。
  • gone：不可见，不占用任何屏幕空间。

demo：进度条的显现和隐藏

  1.                if (progressBar.getVisibility()==View.GONE){
  2.                    progressBar.setVisibility(View.VISIBLE);
  3.                }else {
  4.                    progressBar.setVisibility(View.GONE);
  5.                }

demo：水平进度条的增加进度

  1.                 int progress = progressBar.getProgress();
  2.                 progress+=10;
  3.                 progressBar.setProgress(progress);

AlertDialog 弹出对话框

在当前界面弹出一个对话框，这个对话框是置顶于所有界面元素之上的，能够屏蔽掉其他空间的交互能力。

  2.                 AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
  3.                 dialog.setTitle("这是一个对话框");
  4.                 dialog.setMessage("一些重要的事情");
  5.                 dialog.setPositiveButton("确认", new DialogInterface.OnClickListener() {
  6.                     @Override
  7.                     public void onClick(DialogInterface dialog, int which) {
  8.                     }
  9.                 });
  10.                 dialog.setNegativeButton("退出", new DialogInterface.OnClickListener() {
  11.                     @Override
  12.                     public void onClick(DialogInterface dialog, int which) {
  13.                     }
  14.                 });
  15.                 dialog.show();

步骤：

  1. 通过AlertDialog.Builder创建一个实例。
  2. 设置标题。
  3. 设置内容。
  4. 调用dialog.setPositiveButton()设置确定按钮的点击事件。
  5. 调用dialog.setNegativeButton()设置取消按钮的点击事件。

ProgressDialog弹出对话框（带进度条）

在界面上弹出一个对话框，屏蔽掉其他控件的交互额能力，在对话框中显示一个进度条，一般用于表示当前操作比较耗时，让用户耐心等待。

  1.                 ProgressDialog progressDialog = new ProgressDialog(MainActivity.this);;
  2.                 progressDialog.setTitle("我又来了");
  3.                 progressDialog.setMessage("没错，又是我");
  4.                 progressDialog.setCancelable(true);
  5.                 progressDialog.show();

详解4种基本布局

线性布局

LinearLayout：线性布局。包含的控件在线性方向上依次排列。

注意：垂直布局时，height不能设置为match_parent；水平布局时，width不能设置为match_parent。

android:layout_gravity：

指定控件在布局中的堆齐方式。

android:layout_weight:

使用比例的方式指定控件的大小。

系统会先把LinearLayout下所有控件指定的layout_weight值相加，得到一个总值，然后每个控件所占比大小的比例就是用该控件的layout_weight值除以刚才算出的总值。

相对布局

RelativeLayout：相对布局，通过相对定位的方式让控件出现在布局的任何位置。

帧布局

FrameLayout：所有的控件默认摆放在布局的左上角。

百分比布局

直接指定控件在布局中所占的百分比。

创建自定义控件

控件和布局的继承结构图：
image-20210720194511905.png

引入布局

步骤：

  1. 新建一个布局xml文件。
  2. 在新建的xml文件中写控件。
  3. 在活动的布局文件中引入新建的布局文件。

创建自定义控件

步骤：

  1. 在java包中创建控件类。
  2. 在控件类中写自己想要的。
  3. 在主布局xml中引入控件类。

ListView

ListView允许用户通过手指上下滑动的方式将屏幕外的数据滚动到屏幕内，同时屏幕上原有的数据则会滚动出屏幕。

简单用法

步骤：

  1. 在布局文件中引入Listview布局。
  2. 将数据提前准备好。
  3. 将数据和Listview结合。

定制ListView界面

步骤：

  1. 新建一个适配器类。
  2. 给List View指定一个自定义的布局。
  3. 自定义一个适配器。
  4. 在活动中把适配器类和自定义的适配器结合起来。

提升ListView的运行效率

方法：

  1. 使用getView()方法中的convertView参数将之前加载好的布局进行缓存。
  2. 使用一个内部类来存控件的实例，这样不用让每次加载都要对控件的实例进行调用。

RecyclerView

基本用法

步骤：

  1. 在build.gradle中引入recyclerView的依赖 

    1. implementation 'android.recyclerview:recyclerview-1.0.0'

  2. 在布局文件中引入。

  3. 剩下步骤基本和List View一样。

横向和瀑布流布局

横向布局

步骤：

  1. 把布局改为垂直排列。
  2. 在活动中把布局的排列方向改为横向排列。 
    1. layoutManager.setOritation(LinearLayoutManager.HORIZONTAL)

瀑布流布局

调用StaggeredGridLayoutManager实例。

实践

制作Nine-Patch图片

Nine-Patch：被特殊处理过的png图片。可以指定哪些区域可以被拉伸，哪些区域不可以。