知识点目录

• 3.1 如何编写程序界面

• 3.2 常用控件的使用方法
  * 3.2.1 TextView
  * 3.2.2 Button
  * 3.2.3 EditText
  * 3.2.4 ImageView
  * 3.2.5 ProgressBar
  * 3.2.6 AlertDialog
  * 3.2.7 ProgressDialog

• 3.3 详解4中基本布局
  * 3.3.1 线性布局
  * 3.3.2 相对布局
  * 3.3.3 帧布局
  * 3.3.4 百分比布局

• 3.4 创建自定义控件
  * 3.4.1 引入布局
  * 3.4.2 创建自定义控件

• 3.5 ListView
  * 3.5.1 ListView的简单用法
  * 3.5.2 定制ListView的界面
  * 3.5.3 提升ListView的运行效率
  * 3.5.4 ListView的点击事件

• 3.6 RecyclerView
  * 3.6.1 RecyclerVeiw的基本用法
  * 3.6.2 实现横向滚动和瀑布流布局
  * 3.6.3 RecyclerView的点击事件

• 3.7 编写界面的最佳实践
  * 3.7.1 制作Nine-Patch图片
  * 3.7.2 编写精美的聊天界面

知识点回顾

3.1 如何编写程序界面

Android开发中编写界面的方法主要有如下两种：

• 可视化编辑器

  优点：允许拖放控件来编写布局，同时可以在视图上修改控件的属性

  缺点：不利于了解界面背后的原理，屏幕适配性不好

• XML代码

  这是用的最多的方式。不仅能够实现高度复杂的控件，还能分析和修改当前现有界面。

3.2 常用控件的使用方法

Android中提供了大量的UI控件，下面我们学习几种比较常用的控件。

3.2.1 TextView

主要作用：

在界面上显示一段文本信息。

使用方法：

<TextView
    android:id="@+id/text_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:textSize="24sp"
    android:textColor="#00ff00"
    android:text="This is TextView" />

属性说明：

• android:id 给当前控件定义一个唯一标识符。

• android:layout_width和android:layout_height指定控件的宽度和高度，Android中所有的控件都有这两个属性，值有match_parent、fill_parent和wrap_content。其中：match_parent和fill_parent意义相同，表示让当前控件的大小和父布局的大小一样；wrap_content表示让当前控件的大小能够刚好包含住里面的内容。

• android:gravity 指定文字的对齐方式，可选值有top、bottom、left、right、center等。可以用“|”来同时指定多个值。

• android:textSize 指定文字的大小。Android中字体大小使用sp作为单位。

• android:textColor 指定文字颜色。

• android:text 指定TextView中显示的文本内容。

这里简单的解释了TextView中的几个属性，其它属性等用到的时候自行查阅。

3.2.2 Button

主要作用：

显示一个按钮，与用户进行交互。

Button可配置的属性和TextView差不多。

使用方法：

<Button
    android:id="@+id/button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Button"
    android:textAllCaps="false"/>

属性说明：

其它属性跟上面说的TextView一样，这里说一个特殊的。

• android:textAllCaps 如果不加这个属性，那么上面设置的文字Button最终显示的却是“BUTTON”，这是因为系统会对Button中的所有英文字母自动进行大写转换，如果不想要这个效果，可以将android:textAllCaps设置为false。

Button注册监听器

• 方式一（匿名类）：

    public class MainActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            Button button = (Button) findViewById(R.id.button);
            button.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    // 在此处添加逻辑
                }
            });	
        }
    }
  

• 方式二（实现接口）：

    public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            Button button = (Button) findViewById(R.id.button);
            button.setOnClickListener(this);
        }
    
        @Override
        public void onClick(View v) {
            switch (v.getId()) {
                case R.id.button:
                    // 在此处添加逻辑
                    break;
                default:
                    break;
            }
        }
    }
  

3.2.3 EditText

主要作用：

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

使用方法：

<EditText
    android:id="@+id/edit_text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Type something here"
    android:maxLines="2"/>

属性说明：

• android:hint 指定一段提示性文本，用户输入后，文本自动消失。

• android:maxLines 指定EditText的最大行数，当输入的内容超过行数后，文本就会向上滚动。

获取输入框文本：

EditText editText = (EditText) findViewById(R.id.edit_text);
String inputText = editText.getText().toString();

3.2.4 ImageView

主要作用：

用于在界面上展示图片。图片根据分辨率的不同放在不同的drawable或mipmap目录下。

使用方法：

<ImageView
    android:id="@+id/image_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@mipmap/ic_launcher"/>

属性说明：

• android:src 给ImageView指定一张图片。

代码中指定图片：

ImageView imageView = (ImageView) findViewById(R.id.image_view);
imageView.setImageResource(R.mipmap.ic_launcher_round);

3.2.5 ProgressBar

主要作用：

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

使用方法：

<ProgressBar
    android:id="@+id/progress_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
	android:visibility="visible"
    style="?android:attr/progressBarStyleHorizontal"
    android:max="100"/>

属性说明：

• android:visibility 控制控件是否可见。 visible表示控件可见，默认值。invisible表示控件不可见，但仍占据原来的位置，相当于控件透明。gone表示控件不可见，且不占据原来的位置。

• style 指定控件的形状。

• android:max 给进度条设置一个最大值。

代码中控制控件是否可见

ProgressBar progressBar = (ProgressBar) findViewById(R.id.progress_bar);
if (progressBar.getVisibility() == View.GONE) {
    progressBar.setVisibility(View.VISIBLE);
} else {
    progressBar.setVisibility(View.GONE);
}

3.2.6 AlertDialog

主要作用：

用于提示一些非常重要的内容或者警告信息。比如为了防止用户误删重要内容，在删除前弹出一个确认对话框。

使用方法：

    AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
    dialog.setTitle("This is Dialog");
    dialog.setMessage("Something improtant");
    dialog.setCancelable(false);
    dialog.setPositiveButton("OK", new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int which) {
            
        }
    });
    dialog.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int which) {
            
        }
    });
	dialog.show();

使用说明：

• AlertDialog.Builder创建一个AlertDialog实例

• setTitle 设置标题

• setMessage 设置内容

• setCancelable 是否用Back键关闭对话框

• setPositiveButton() 设置确认按钮的点击事件

• setNegativeButton() 设置取消按钮的点击事件

• show() 将dialog显示出来

3.2.7 ProgressDialog

主要作用：

跟AlertDialog类似，都能够屏蔽掉其他控件的交互能力。只是ProgressDialog会在对话框中显示一个进度条，一般用于表示当前操作比较耗时，让用户耐心地等待。

使用方法：

    ProgressDialog progressDialog = new ProgressDialog(MainActivity.this);
    progressDialog.setTitle("This is ProgressDialog");
    progressDialog.setMessage("Loding...");
    progressDialog.setCancelable(true);
    progressDialog.show();

使用说明：

• new ProgressDialog 创建一个ProgressDialog对象

• setTitle 设置标题

• setMessage 设置内容

• setCancela