Android开发 - UI

虽然Android Studio提供了可视化编辑工具来让你通过拖拽的方式进行页面布局，但是这不利于真正了解界面背后的实现原理且适配性很差，当编写复杂界面的时候也会束手无策，因此推荐通过最基本的方式也就是编写XML代码来实现UI的布局

常用控件的使用

新建一个名为UIWidgetTest工程

TextView

修改activity_main.xml中的代码，创建一个TextView并且设置相关属性

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

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

</LinearLayout>

使用android:gravity来指定文字的对齐方式，可选值有top、bottom、left、right、center等，可以使用“|”来同时指定多个值，这里指定的center，效果等同于center_vertical | center_horizonal，表示文字在垂直和水平方向都居中对齐。通过android:textSize属性可以设置文字的大小，Android中字体大小使用sp作为单位，android:textColor属性指定文字颜色。

Button

添加Button控件，并且设置相关属性：

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

当你设置Button的文字内容是“Button”的时候，运行结果会显示“BUTTON”，这是因为系统会对Button中的所有英文字母自动进行大写转换，这并不是我们需要的，因此设置属性android:textAllCaps为false来禁用这一默认特性，这样就可以正常显示出我们希望的文字内容“Button”。

点击按钮时注册监听事件

@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) {
                // 此处添加逻辑
                Toast.makeText(MainActivity.this, "Button Clicked", Toast.LENGTH_SHORT).show();
            }
        });
    }

如果不喜欢使用匿名类的方式注册监听，也可以使用实现接口的方式来进行注册，代码修改为:

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:
                // 在此处添加逻辑
                Toast.makeText(MainActivity.this, "Button Clicked", Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
        }
    }
}

这两种方式均可以实现对按钮点击事件的监听，至于使用哪一种看个人喜好

EditText

EditText是程序用于和用户进行交互的重要空间，允许在控件里输入和编辑内容，并可以在程序中对这些内容进行处理。

添加TextView空间：

 <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属性用来设置提示性文字，由于随着输入内容的增多，EditText会被不断拉长，这时由于EditText的高度指定的是wrap_content，因此它总能包住往里面的内容，但是输入过长的话，界面就比较难看，因此可以使用android:maxLines属性用来设置最大行数

结合使用EditText和Button完成通过按钮来获取EditText中输入的内容。在MainActivity中修改代码如下：

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private EditText editText;

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

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button:
                // 在此处添加逻辑
                String inputText = editText.getText().toString();
                Toast.makeText(MainActivity.this, inputText, Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
        }
    }
}

调用EditText的getText()方法获取输入的内容，再调用toString()方法转换成字符串，最后用Toast将输入的内容显示出来。

ImageView

ImageView控件用于展示图片，图片通常都是放在“drawable”开头的目录下的，目前有一个空的drawable目录，不过由于这个目录没有指定具体的分辨率，所以一般不使用它来放置图片。在res目录下新建一个drawable-xhdpi目录，将准备好的图片复制到这个目录下。

接下来添加ImageView控件：

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

使用android:src属性给ImageView指定了一张图片。由于图片的宽和高都未知，所以制定宽和高都是“wrap_content”，这样就不管图片的尺寸是多少都可以完整的展现出来。

还可以通过代码动态的更改ImageView中的图片，修改MainActivity中的代码如下：

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private EditText editText;
    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button button = (Button)findViewById(R.id.button);
        button.setOnClickListener(this);
        editText = (EditText)findViewById(R.id.edit_text);
        imageView = (ImageView)findViewById(R.id.image_view);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button:
                // 在此处添加逻辑
                imageView.setImageResource(R.drawable.bootscrapt);
                break;
            default:
                break;
        }
    }
}

在按钮点击事件里，调用ImageView的setImageResource()方法将显示的图片改成“bootscrapt”，这样点击按钮后就可以实现图片切换的功能。

ProgressBar

ProgressBar用于在界面上显示一个进度条，表示程序正在加载一些数据。

添加ProgressBar控件：

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

不设置style属性的话会看到屏幕中有一个圆形进度条在旋转。所有Android控件都有一个是否可见的属性，这个属性是通过android:visibility进行指定，可选值有3个：visible、invisible和gone。visible表示控件可见，这个值是默认值，不指定可见属性的时候，控件都是可见的。invisible表示控件不可见，但是仍占据着原来的位置和大小，可以理解为控件变成了透明的状态了。gone则表示控件不仅不可见，而且不占用任何屏幕空间。可以通过代码设置控件的可见性，使用setVisibility()方法，可以传入View.VISIBLE、View.INVISIBLE和View.GONE这3种值。

接下来实现点击按钮让进度条消失，再点击进度条出现，在显示和隐藏之间来回切换的功能：

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private EditText editText;
    private ImageView imageView;
    private ProgressBar progressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button button = (Button)findViewById(R.id.button);
        button.setOnClickListener(this);
        editText = (EditText)findViewById(R.id.edit_text);
        imageView = (ImageView)findViewById(R.id.image_view);
        progressBar = (ProgressBar)findViewById(R.id.progress_bar);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button:
                // 在此处添加逻辑
                if (progressBar.getVisibility() == View.GONE) {
                    progressBar.setVisibility(View.VISIBLE);
                } else {
                    progressBar.setVisibility(View.GONE);
                }
                break;
            default:
                break;
        }
    }
}

通过getVisibility()方法来判断ProgressBar是否可见，若可见则隐藏，若隐藏则可见

还可以给ProgressBar指定不同的样式，刚刚是圆形进度条，通过style属性将它指定城水平进度条：style="?android:attr/progressBarStyleHorizontal"，之后还可以通过android:max属性给进度条设置一个最大值，然后再代码中动态改变进度条的进度，代码如下：

@Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button:
                // 在此处添加逻辑
                int progress = progressBar.getProgress();
                progress = progress + 10;
                progressBar.setProgress(progress);
                break;
            default:
                break;
        }
    }

这样就实现了每点击一次按钮，进度条获取当前进度，然后再现有的进度之上加10作为更新后的进度。

AlertDialog

AlertDialog可以在当前的界面弹出一个对话框，这个对话框置顶于所有界面元素之上，能够屏蔽掉其他控件的交互能力，因此AlertDialog一般都是用于提示一些非常重要的内容或者警告信息。比如为了防止用户误删除重要内容，再删除之前弹出一个确认对话框等。

@Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button:
                // 在此处添加逻辑
                AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
                dialog.setTitle("This is a Dialog");
                dialog.setMessage("Something important.");
                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();
                break;
            default:
                break;
        }
    }

首先通过AlertDialog.Builder创建了一个AlertDialog的实例，然后可以为这个对话框设置标题、内容、可否取消等属性，接下来调用setPositiveButton()方法为对话框设置确定按钮的点击事件，调用setNegativeButton()方法为对话框设置取消按钮的点击事件，最后调用show()方法将对话框显示出来。

效果图.png

ProgressDialog

ProgressDialog和AlertDialog有点类似，都可以在界面上弹出一个对话框，能够屏蔽掉其他控件的交互能力，不同的是，ProgressDialog会在对话框中显示一个进度条，一般用于表示当前操作比较耗时，让用户耐心等待。看一下它的用法：

@Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button:
                // 在此处添加逻辑
                ProgressDialog progressDialog = new ProgressDialog(MainActivity.this);
                progressDialog.setTitle("This is ProgressDialog");
                progressDialog.setMessage("Loading...");
                progressDialog.setCancelable(true);
                progressDialog.show();
                break;
            default:
                break;
        }
    }

这里先构建出一个ProgressDialog对象，然后同样可以设置标题、内容、可否取消等属性，最后调用show()方法将ProgressDialog显示出来。

需要注意的是，如果在setCancelable()中传入了false，表示ProgressDialog是不能通过Back键取消的，这时需要在代码中做好控制，但数据加载完成后，需要调用ProgressDialog的dismiss()方法来关闭对话框，否则ProgressDialog将会一直存在。

效果图.png

添加AlertDialog控件：