Android UI开发

阅读量：3956 次

发布时间：2019-05-24

本文共 15078 字，大约阅读时间需要 50 分钟。

文章目录

一、布局的创建

每个应用程序都会默认包含一个主页面布局，自己也可以进行创建多个布局

二、布局的类型

在这里插入图片描述

1. LinearLayout（线性布局）

主要以水平和垂直方式来显示界面控件

重要属性：orientation控制控件排列方向

vertical 垂直的

horizontal水平的

注意：

水平排列时，控件属性layout_width只能设置为wrap_content(包裹内容让当前控件根据控件内容大小自动伸缩)

match_parent(填充父窗体由父容器大小决定控件大小)

2. RelativeLayout（相对布局）

通过相对定位的方式指定控件位置，以其他控件或父容器为参照物，摆放控件

px：像素

pt：磅数

dp：基于屏幕密度的单位

sp：伸缩像素

3. FrameLayout（帧布局）

为每个加入其中的控件创建一个空白区域。

4. TableLayout（表格布局）

以表格的形式排列控件，通过行与列将界面划分为多个单元格，每个单元格可以添加控件。

5. AbsoluteLayout（绝对布局）

通过指定x，y坐标来控制每一个控件的位置的

三、常用控件

在这里插入图片描述

1. TextView（文本框）

显示文本信息

常用属性

2. EditText（编辑框）

用户向程序输入数据的文本编辑控件。

常用属性

3. Button（按钮）

响应用户的一系列点击事件的按钮

(1). Button点击方式一：在布局中指定onClick属性

在layout布局文件里面的button组件里面添加属性onClick实现点击事件

在接下来的MainActivity.java文件中实现逻辑代码

public class MainActivity extends AppCompatActivity {
       private Button btn01;    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);        setContentView(R.layout.activity);        btn01 = findViewById(R.id.btn01);//通过实现onClick()方法，实现按钮的监听	public void click(View v){
   		btn01.setText("按钮被单击")	}

通过findViewById()方法实现初始化控件，然后为button添加click()方法触发点击事件，注意onClick的属性值（click）必须要和MainActivity.java中的定义的方法名保持一致。

(2). Button点击方式二：使用匿名内部类

在layout布局文件里面的button组件里面添加属性id实现点击事件

在接下来的MainActivity.java文件中实现逻辑代码

public class MainActivity extends AppCompatActivity {
       private Button btn01;    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);        setContentView(R.layout.activity);        //通过findViewById()方法初始化控件        btn01 = findViewById(R.id.btn01);//通过匿名内部类的方法实现按钮2的点击事件	btn01.setOnClickListener(new View.OnClickListener(){
   		@Override            public void onClick(View v) {
                   btn01.setText("按钮被点击")            }	});

(3). Button点击方式三：在当前Activity中实现OnClickLister接口

适用于：按钮较多的场景

其中layout中的布局文件同匿名内部类，只需要在组件上加一个id即可

在MainActivity.java文件中需要实现OnClickListener接口

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
       private Button btn01;    @Override    protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //通过findViewById()初始化控件        button = findViewById(R.id.btn01);		button.setOnClickListener(this); 		//这里的this代表是该MainActivity的引用，由于MainActivity实现了OnClickListener接口，所以这里this代表了OnClickListener的引用	}	//重写onClick()方法	public void onClick(View v) {
   		}}

4. RadioButton（单选按钮）

需要与RadioGroup配合使用，提供两个或多个互斥的选项集。

5. ImageView（视图控件）

继承View，功能在屏幕中显示图像

其中background是背景图片标识

其中src是前景图片标识

6. 控件属性的注意事项

Android中所有的控件都具有的属性，可选值有3种：match_parent、fill_parent、wrap_content

其中match_parent和fill_parent的意义相同，但官方更推荐match_parent.

match_parent表示让当前控件的大小和父布局的大小一样，也就是由父布局来决定当前控件的大小

wrap_content表示让当前的控件大小能够刚好包含里面的内容，也就是由控件内容决定当前控件的大小

四、数据展示控件

1. ListView控件

在Android开发中ListView是一个比较常用的控件，以列表形式展示具体数据内容，当数据过多时就会出现滚动条，并且能够根据数据的长度自适应屏幕显示。

ListView是一个列表视图，由很多Item组成，每个Item的布局都是相同的，这个Item布局会单独使用一个XML进行定义。

需要注意，ListView指定了id属性之后，才会看到界面的元素，如果ListView没有进行数据适配，那么程序运行后界面空白

2. 常用数据适配器

所谓的适配器就是数据与视图之间的桥梁，它就类似于一个转换器，将复杂的数据转换成用户可以接受的方式进行呈现。

Android中有多种适配器

五、常见对话框

显示当前程序提示信息以及相关说明。对话框一般以小窗口形式展示在Activity上，当对话框显示时，下层activity失去焦点。接受用户交互信息

1. 普通对话框（Dialog）

只显示提示信息，具有确定和取消按钮

常用方法

2. 单选对话框（AlertDialog）

只能选择一个选项

3. 多项对话框

通常需要勾选多个选项使用

4. 进度条对话框（ProgressDialog）

应用耗时操作时，为了和用户更好的交互

5. 消息对话框（Toast）

轻量级信息提醒机制，显示一段时间后消失，不打断当前操作

6. 自定义对话框

根据项目需求自己定义对话框样式

(1). 创建布局

(2). 创建自定义对话框

(3). 使用自定义对话框

六、样式和主题

1. 样式（style）

包含一种或多种控件的属性集合，可以指定控件高度、宽度、字体大小及颜色。在这里插入图片描述

2. 主题（theme）

应用到整个Activity和application的样式，不只是应用到单个视图

主题要在AndroidManifest.xml文件中引用

七、程序调试

1. 单元测试

2. LogCat的使用

是Android中命令行工具，获取程序从启动到关闭的日志信息

3. Debug的使用

八. 代码练手

1. 调整字体大小

在这里插入图片描述

layout布局文件

java代码

package com.pudding.homework01;import android.content.DialogInterface;import android.os.Bundle;import android.view.View;import android.widget.Button;import android.widget.TextView;import androidx.annotation.Nullable;import androidx.appcompat.app.AlertDialog;import androidx.appcompat.app.AppCompatActivity;public class ChangeActivity extends AppCompatActivity {
       private TextView showView;    private Button btn;    private int def = 0;    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);        setContentView(R.layout.activity_change_size);        showView = findViewById(R.id.show);    }    public void showDialgo(View view){
           new AlertDialog.Builder(this)                .setTitle("设置字体大小")                .setSingleChoiceItems(new String[]{
   "20sp", "30sp", "40sp"}, def, new DialogInterface.OnClickListener() {
                       @Override                    public void onClick(DialogInterface dialog, int which) {
                           if (which == 0){
                               showView.setTextSize(20);                        } else if(which == 1){
                               showView.setTextSize(30);                        } else {
                               showView.setTextSize(40);                        }                        def = which;                    }                })                .setPositiveButton("确定",null)                .show();    }}

2. 设置单选按钮，多选按钮

在这里插入图片描述

layout布局文件

java响应代码

package com.pudding.homework01;import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle;import android.widget.CheckBox;import android.widget.CompoundButton;import android.widget.RadioGroup;import android.widget.TextView;public class MainActivity extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener {
       private RadioGroup radioGroup;    private TextView genderView,hobbyView;    private CheckBox singing,running,drawing;    private String str = "";    @Override    protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        radioGroup = findViewById(R.id.rdg);        genderView = findViewById(R.id.showgender);        hobbyView= findViewById(R.id.showhobby);        singing = findViewById(R.id.singing);        running = findViewById(R.id.running);        drawing = findViewById(R.id.drawing);        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
               @Override            public void onCheckedChanged(RadioGroup group, int checkedId) {
                       if (checkedId == R.id.boy){
                           genderView.setText("您的性别是：男");                    } else {
                           genderView.setText("您的性别是：女");                    }                }        });        singing.setOnCheckedChangeListener(this);        running.setOnCheckedChangeListener(this);        drawing.setOnCheckedChangeListener(this);    }    @Override    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
           switch (buttonView.getId()){
               case R.id.singing:                if (isChecked){
                       str += "唱歌 ";                } else{
                       str = str.replace("唱歌","");                }                break;            case R.id.running:                if (isChecked){
                       str += "跑步 ";                } else{
                       str = str.replace("跑步", "");                }                break;            case R.id.drawing:                if (isChecked){
                       str += "画画 ";                } else{
                       str = str.replace("画画", "");                }                break;        }        hobbyView.setText(str);    }}

3. 设置对话框

在这里插入图片描述

layout布局文件

java代码相应文件

package com.pudding.experiment_2;import android.app.ProgressDialog;import android.content.DialogInterface;import android.app.AlertDialog.Builder;import android.content.DialogInterface;import android.os.Bundle;import android.view.View;import android.widget.Button;import android.widget.TextView;import android.widget.Toast;import android.app.AlertDialog;import androidx.annotation.Nullable;import androidx.appcompat.app.AppCompatActivity;import java.util.ArrayList;import java.util.List;public class MainActivity02 extends AppCompatActivity {
       private Button btn01,btn02,btn03;    private TextView tv01;    //实例化存储用户最终选择的集合    List
   
     choose = new ArrayList<>();    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);        setContentView(R.layout.activity_dialog);        btn01 = findViewById(R.id.btn01);        tv01 = findViewById(R.id.tv01);        btn02 = findViewById(R.id.btn02);        //有一个疑问？为什么使用什么监听都无法实现消息对话框的弹出显示        btn02.setOnClickListener(new View.OnClickListener() {
               @Override            public void onClick(View v) {
                   System.out.println("jhh");                Toast.makeText(MainActivity02.this,"消息对话框——欢迎",Toast.LENGTH_LONG).show();            }        });        btn03 = findViewById(R.id.btn03);        btn03.setOnClickListener(new View.OnClickListener() {
               @Override            public void onClick(View v) {
                   ProgressDialog prodialog;                prodialog = new ProgressDialog(MainActivity02.this);                prodialog.setTitle("进度条对话框");                prodialog.setIcon(R.mipmap.ic_launcher);                prodialog.setMessage("正在下载请等待...");                prodialog.setProgressStyle(ProgressDialog.STYLE_SPINNER);                prodialog.show();            }        });    }    public void show(View v){
           AlertDialog.Builder builder = new AlertDialog.Builder(this);        builder.setTitle("客官，请点菜！");        final String[] names={
   "水煮豆腐","萝卜牛腩","酱油鸡","胡椒牛肉面"};        choose.clear();//每次的点击事件前需要清空集合内的元素        //设置Dialog为多选框，且无默认选项（null）        builder.setMultiChoiceItems(names, null, new DialogInterface.OnMultiChoiceClickListener() {
               @Override            //设置点击事件：如果选中则添加进choose，如果取消或者未选择则移出choose            public void onClick(DialogInterface dialog, int which, boolean isChecked) {
                   if(isChecked){
                       choose.add(names[which]);                }else{
                       choose.remove(names[which]);                }            }        });        //设置正面按钮以及点击事件（显示choose内容）        builder.setPositiveButton("确定", new DialogInterface.OnClickListener() {
               @Override            public void onClick(DialogInterface dialog, int which) {
                   tv01.setText(choose.toString());            }        });        builder.show();//显示Dialog对话框    }//    public void show2(View v){![在这里插入图片描述](https://img-blog.csdnimg.cn/20210702205712542.gif#pic_center)//        System.out.println("aaa");//        Toast.makeText(MainActivity02.this, "hello", Toast.LENGTH_LONG).show();//    }}

4. 实现一个计算器

在这里插入图片描述

layout布局文件

Java代码文件

package com.pudding.experiment_2;import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.widget.Button;import android.widget.TextView;public class MainActivity extends AppCompatActivity implements View.OnClickListener {
       private Button clean, add, subtraction, multiplication, point, division,equal,num_0,num_1,num_2,num_3,num_4,num_5,num_6,num_7,num_8,num_9;    private TextView show;    private String content="";    @Override    protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        (clean = findViewById(R.id.clean)).setOnClickListener(this);        (add = findViewById(R.id.add)).setOnClickListener(this);        (subtraction = findViewById(R.id.subtraction)).setOnClickListener(this);        (multiplication = findViewById(R.id.multiplication)).setOnClickListener(this);        (point = findViewById(R.id.point)).setOnClickListener(this);        (division = findViewById(R.id.division)).setOnClickListener(this);        (equal = findViewById(R.id.equal)).setOnClickListener(this);        (num_0 = findViewById(R.id.num_0)).setOnClickListener(this);        (num_1 = findViewById(R.id.num_1)).setOnClickListener(this);        (num_2 = findViewById(R.id.num_2)).setOnClickListener(this);        (num_3 = findViewById(R.id.num_3)).setOnClickListener(this);        (num_4 = findViewById(R.id.num_4)).setOnClickListener(this);        (num_5 = findViewById(R.id.num_5)).setOnClickListener(this);        (num_6 = findViewById(R.id.num_6)).setOnClickListener(this);        (num_7 = findViewById(R.id.num_7)).setOnClickListener(this);        (num_8 = findViewById(R.id.num_8)).setOnClickListener(this);        (num_9 = findViewById(R.id.num_9)).setOnClickListener(this);        (show = findViewById(R.id.show)).setOnClickListener(this);    }    @Override    public void onClick(View v) {
           if (v.getId() == equal.getId()){
               if (content.indexOf("+") != -1){
                   String[] item = content.split("\\+");                if(item[0]!=null && item[1]!=null){
                       content = (Double.valueOf(item[0])+Double.valueOf(item[1])) + "";                }            }            if (content.indexOf("-") != -1){
                   String[] item = content.split("\\-");                if(item[0]!=null && item[1]!=null){
                       content = (Double.valueOf(item[0])-Double.valueOf(item[1])) + "";                }            }            if (content.indexOf("*") != -1){
                   String[] item = content.split("\\*");                if(item[0]!=null && item[1]!=null){
                       content = (Double.valueOf(item[0])*Double.valueOf(item[1])) + "";                }            }            if (content.indexOf("/") != -1){
                   String[] item = content.split("\\/");                if(item[0]!=null && item[1]!=null){
                       content = (Double.valueOf(item[0])/Double.valueOf(item[1])) + "";                }            }        } else if (v.getId() == clean.getId()) {
               content = "";        } else {
               content += ((Button)v).getText();        }        show.setText(content);    }}

转载地址：http://jhxzi.baihongyu.com/

你可能感兴趣的文章