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控件：

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,033评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,725评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,473评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,846评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,848评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,691评论 1赞 282
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,053评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,700评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,856评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,430评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,034评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2赞 343

推荐阅读更多精彩内容