Android开发入门教程

Android开发学习 -- Day5 UI开发（一）

2018-03-20  本文已影响19人  h080294

在之前的学习中，我们只使用了最简单的布局，接下来就要学习更多关于UI开发方面的知识了。

一、如何编写程序界面

Android中有多种编写程序界面的方式可供选择。Android Studio提供了相应的可视化编辑器，允许我们使用拖放控件的方式来编写布局，并能在视图上直接修改控件属性。不过，作为初学者直接使用这种方式的话，会不利于真正地去了解界面背后的实现原理。同时，这种方式制作出的界面通常不具有良好的适配性。因此，我们在学习的过程中，直接使用xml编写布局代码。

二、常用控件的使用方法

Android里提供了大量的UI控件，合理的使用它们便可以轻松的编写出相当不错的界面。我们还在之前的项目上继续添加新功能，当然理想的情况是新建一个工程，我比较懒，直接使用之前的项目。

1、TextView

TextView可以说是Android中最简单的一个控件，它主要用户在界面上显示一段文本信息。例如：回想第一个demo中的“Hello World”。下面我们就看一看TextView的更多用法。

新建一个Activity，修改布局文件：

<LinearLayout 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:orientation="vertical"
    tools:context="com.johnhao.listviewdemo.Activity.FourthActivity">

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

</LinearLayout>

下面详细了解一下各个属性的涵义

🀆 LinearLayout：最外面是LinearLayout，这是一种布局方式我们后面再去学习它

🀆 android:id：给当前的控件定义了一个唯一标识符

🀆 android:layout_width和android:layout_height：指定了控件的宽度和高度。Android中所有的控件都具有这两个属性，可选值一般有两种：match_parent、wrap_content、（fill_parent -- 官方不推荐使用）。match_parent表示让当前控件的大小和父布局大小一样。wrap_content表示让当前控件的大小能够刚好包住里面的内容，也就是由控件内容决定控件的大小。所以上面的代码就表示这个TextView的宽度和父布局一样，高度足够包含里面的内容

🀆 android:gravity：指定了文字的对齐方式，可选值有top、bottom、left、right、center等。这里我们用center，表示让文字居中展示

🀆 android:textColor：指定文字的颜色

🀆 android:text：指定TextView中的文本内容，为了演示需要所以这里直接hardcode了，正确的做法应该是从string.xml中引用@string/string_text

🀆 android:layout_marginTop：指定该属性所在控件距上部最近控件的最小值，这里通过设置10dp，让控件离顶部有10dp的距离

🀆 android:textSize：指定文字的大小

运行一下程序，看看我们创建的TextView控件。当然，还有很多其他的属性，这里就不再一一介绍，需要用什么属性可以通过查阅文档学习。

TextView

2、Button

Button是程序用于和用户进行交互的一个重要控件，它配置的属性和TextView差不太多，下面我们添加一个Button：

     ...
    <Button
        android:id="@+id/btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="This is a button"
        android:textAllCaps="false"/>

</LinearLayout>

这里应用了一个属性android:textAllCaps，如果不设置这个，那么系统会自动将所有的英文字母进行大写转换，也就是你将看到“THIS IS A BUTTON”，如果不想要这种效果，设置为false就可以禁用系统这一默认特性。

接下来我们可以在Activity中注册一个Button点击事件的监听器：

public class FourthActivity extends BaseActivity {

    private TextView tv;
    private Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fourth);
        setTitle("UI空间布局练习");
        tv = (TextView) findViewById(R.id.text_view);
        button = findViewById(R.id.btn);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(FourthActivity.this, "You click the Button", Toast.LENGTH_SHORT).show();
            }
        });

    }
}

这样，每当我们点击按钮式，就会执行监听器中onClick()方法，这里我们加了一个Toast提示。如果不喜欢使用匿名类的方式来注册监听器，也可以使用实现接口的方式来进行注册：

public class FourthActivity extends BaseActivity implements View.OnClickListener{

    private TextView tv;
    private Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fourth);
        setTitle("UI空间布局练习");
        tv = (TextView) findViewById(R.id.text_view);
        button = findViewById(R.id.btn);
        button.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.btn:
                Toast.makeText(this, "You click the Button", Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
        }
    }
}

3、EditText

EditText是程序用于和用户交互的另一个重要的控件，它允许用户在控件里输入和编辑内容，并可以在程序中对这些内容进行处理。EditText的应用场景非常普遍，在进行发信息、搜索等操作时，都不得不使用EditText。

我们继续在原有的项目上进行修改，添加如下代码：

...
    <EditText
        android:id="@+id/editTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入一写字符"
        android:maxLines="2"/>

</LinearLayout>

android:hint：用于在输入框里显示一些提示性的文字，当输入内容后，这些提示性文字就会消失。
android:maxLines：因为我们设置的高度是wrap_content，当输入内容特别多的时候，就会把控件撑起来，显得特别难看。使用android:maxLines可以限制文本最多展示两行，当超过两行时，就会向上滚动，而EditText本身不再被拉伸。

我们还可以结合使用EditText和Button来完成一些功能，例如通过点击Button获取到EditText中的输入内容，代码如下：

public class FourthActivity extends BaseActivity implements View.OnClickListener{

    private TextView tv;
    private Button button;
    private EditText editText;
    private Button btn_geteditText;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fourth);
        setTitle("UI空间布局练习");
        tv = (TextView) findViewById(R.id.text_view);
        button =(Button) findViewById(R.id.btn);
        editText = (EditText) findViewById(R.id.editTextView);
        btn_geteditText = (Button) findViewById(R.id.btn_getEditText);

        button.setOnClickListener(this);
        btn_geteditText.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.btn:
                Toast.makeText(this, "You click the Button", Toast.LENGTH_SHORT).show();
                break;
            case R.id.btn_getEditText:
                String str = editText.getText().toString();
                Toast.makeText(FourthActivity.this, "Text is: " + str, Toast.LENGTH_SHORT).show();
                break;        
            default:
                break;
        }
    }
}

首先通过findViewById()方法得到EditText的实例，然后在点击事件里调用EditText的getText()方法获取到输入的内容，接着调用toString()方法转换成字符串，最后通过老办法用Toast将内容展示出来。

重新运行下程序，在EditText中输入一段内容，然后点击getEditText按钮：

4、ImageView

ImageView是用于在界面上展示图片的一个控件，它可以让我们的程序界面变的更加丰富多彩。图片资源一般是放在以“drawable”开头的目录下。目前项目中有一个空的drawable目录，不过由于没drawable有指定分辨率，所以一般不用它存放图片。这里我们在res目录下新建一个drawable-hdpi目录，将准备好的图片放进去。

接下来继续修改xml文件，添加ImageView控件：

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

</LinearLayout>

这里我们使用android:src属性给ImageView制定了一张图片。由于图片的宽高可能未知，因此设置为wrap_content。

此外，我们还可以在程序中动态的更改ImageView中的图案，修改Activity的代码：

public class FourthActivity extends BaseActivity implements View.OnClickListener{

    private TextView tv;
    private Button button;
    private EditText editText;
    private Button btn_geteditText;
    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fourth);
        setTitle("UI控件布局练习");
        tv = (TextView) findViewById(R.id.text_view);
        button = findViewById(R.id.btn);
        editText = (EditText) findViewById(R.id.editTextView);
        btn_geteditText = (Button) findViewById(R.id.btn_getEditText);
        imageView = findViewById(R.id.imageView);

        button.setOnClickListener(this);
        btn_geteditText.setOnClickListener(this);
        imageView.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.btn:
                Toast.makeText(this, "You click the Button", Toast.LENGTH_SHORT).show();
                break;
            case R.id.btn_getEditText:
                String str = editText.getText().toString();
                Toast.makeText(FourthActivity.this, "Text is: " + str, Toast.LENGTH_SHORT).show();
                break;
            case R.id.imageView:
                imageView.setImageResource(R.drawable.banana_pic);
                break;
            default:
                break;
        }
    }
}

我们给ImageView设置了一个点击事件，然后在里面通过调用ImageView的setImageResource()方法将图片改成了banana_pic，之前我们在xml中配置的是apple_pic。

5、ProgressBar

ProgressBar用于在界面上显示一个进度条，表示我们的程序正在加载一些数据。它的用法也非常简单，修改xml中的代码，添加ProgressBar控件：

    ...
    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

重新运行程序，就能在中间看到一个转菊花，但是我们不能总让它一直转，比如数据加载完毕之后，它得消失啊。这时就需要用到一个新的知识点：Android控件的可见属性。所有的Android控件都居于这个属性，可以通过android:visibility进行指定，可选值有3种：visible、invisible和gone。
🀆 visible：表示控件可见
🀆 invisible：表示控件不可见，然仍占据着原来的位置和大小。可以理解为控件变成透明的了。
🀆 gone：表示控件不仅不可见，而且不占据任何屏幕空间。

我们可以通过代码来设置控件的可见性，使用的是setVisibility()方法，可以传入View.VISIBLE、View.INVISIBLE、View.GONE这三个值。

public class FourthActivity extends BaseActivity implements View.OnClickListener{
    ...
    private ProgressBar progressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ...
        progressBar = (ProgressBar)findViewById(R.id.progressBar);
        btn_show.setOnClickListener(this);
        btn_hide.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            ...
            case R.id.btn_show_progressbar:
                if (progressBar.getVisibility() == View.GONE){
                    progressBar.setVisibility(View.VISIBLE);
                }
                break;
            case R.id.btn_hide_progressbar:
                if (progressBar.getVisibility() == View.VISIBLE){
                    progressBar.setVisibility(View.GONE);
                }
                break;
            ...
    }
}

在点击事件中，通过getVisibility()判断元素是否可见，然后对应展示或者隐藏ProgressBar。另外，我们还能给ProgressBar指定不同的样式，刚才是菊花，通过style属性可以将它设置成水平进度条。

我们再来修改一下代码：

    ...
    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"
        style="?android:attr/progressBarStyleHorizontal"
        android:max="100"/>

</LinearLayout>

    ...
    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.progressBar:
                int progress = progressBar.getProgress();
                progress = progress + 10;
                progressBar.setProgress(progress);
                break;
    ...

xml中通过android:max给设置一个最大值，然后在ProgressBar的点击事件中动态的增加进度条的值。重新运行下程序：

progressBar.gif

6、AlertDialog

AlertDialog可以在当前的界面弹出一个对话框，这个对话框是置于所有界面元素之上的，能够屏蔽掉其他控件的交互能力。因此，AlertDialog一般用于提示一些非常重要的内容或者警告信息。

我们继续修改项目的代码：

public void onClick(View view) {
    switch (view.getId()){
        case R.id.btn_alret:
        AlertDialog.Builder dialog = new AlertDialog.Builder(FourthActivity.this);
        dialog.setTitle("警告");
        dialog.setMessage("Alert dialog Demo");
        dialog.setCancelable(false);
        dialog.setPositiveButton("确定", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {
                Toast.makeText(FourthActivity.this, "居然敢点确定", Toast.LENGTH_SHORT).show();
            }
        });
        dialog.setNegativeButton("取消", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {
                Toast.makeText(FourthActivity.this, "居然敢点取消", Toast.LENGTH_SHORT).show();
            }
        });
        dialog.show();
        break;
...

首先通过AlertDialog.Builder创建一个AlertDialog实例，然后为对话框设置标题、内容、可否取消等，接下来调用setPositiveButton()方法设置对话框的确定按钮的点击事件，调用setNegativeButton()方法设置对话框的取消按钮的点击事件，最后调用show()方法将对话框展示出来。这里还是简单让它们弹Toast提示。

重新运行程序，效果如下：

7、ProgressDialog

ProgressDialog和AlertDialog有点类似，都可以在界面上显示一个对话框，并且都能屏蔽掉其他控件的交互能力。不同的是，ProgressDialog会在对话框展示一个进度条，一般表示正在进行耗时操作，需要用户耐心等待。用法也和AlertDialog类似，代码如下：

public void onClick(View view) {
    switch (view.getId()){
        case R.id.btn_progress:
            ProgressDialog progressDialog = new ProgressDialog(FourthActivity.this);
            progressDialog.setTitle("ProgressDialog Demo");
            progressDialog.setMessage("Loading");
            progressDialog.setCancelable(true);
            progressDialog.show();
            break;

通过ProgressDialog创建一个ProgressDialog实例，然后设置对话框的标题、内容和能够取消等，最后调用show()方法将对话框展示出来。这里需要注意的一点就是，如果设置了对话框不可取消setCancelable(false)，那么就表示它不能通过按back键取消。所以需要在代码中做控制，党完成耗时操作后，必须调用ProgressDialog的dismiss()方法来将对话框取消，否则ProgressDialog将会一直存在。

关于Android常用的控件就先学习到这里，今天练习使用了7种最常用的控件的用法。

关注获取更多内容
上一篇下一篇

猜你喜欢

热点阅读