【移动安全技术】_第四站_登陆框UI设计

任务

  编写一个Activity，界面要求和操作响应如下：

提示：“请输入用户名”更改为“个人学号“，“请输入密码”更改为”个人姓名“。
操作：点击登录，弹出输入的用户名；点击注销，弹出输入的口令。

前言

  Android Studio和Eclipse都提供可视化编辑器，允许使用拖放控件的方式编写布局，并能在视图上直接修改控件的属性。但屏幕适配性不佳，且很难编写复杂页面。
  所以我们使用最基本的方式编写页面，即编写XML代码。

  接下来挑选几种常用的控件，详细介绍它们的使用方法。

控件的属性

控件属性	说明
标识符id	用于定位
高度 layout_width	2个主要可选项：match_parent与父布局大小一致
宽度 layout_height	wrap_content由控件内容决定当前控件大小
layout_margin	与周围控件的距离
padding	控件与父控件的距离
文本text	-
提示hint	常用于在输入框内显示提示信息
对齐方式gravity	在编辑器可以查看
大小textSize	安卓使用sp作为字体大小单位
颜色textColor	例如#00ff00

常见控件

TextView文本

  显而易见。

Button按钮

  默认text属性的字母是大写，即textAllCaps=True，可设置为False来允许大小写。

EditText编辑框

  提供一个交互输入框。

---

4种基本布局

  布局是用来放置控件的容器，可以按照一定规律调整内部控件的位置。布局内部可以放置控件和放置布局，多层布局可以帮助我们实现精美页面。

  新建项目UiLayout项目，让Android Studio自动创建活动，使用默认活动名和布局名。

LinearLayout线性布局

  注意排列方式分别与内部控件宽高、布局对齐方式的冲突。

控件属性	说明
排列方向orientation	默认horizontal
layout_width/height
对齐方式layout_gravity
控件大小layout_weight

---

实验过程

  实现目的登陆框，需要四行。其中有一行两个按钮需要并列。注意按钮值的颜色。
第一步，定义两个按钮、一个文本、两个输入框。

实验代码

	1.字符串文件strings.xml：

    Four_Ui
    网络准入认证系统
    1820030116
    朱轲鑫
    登录
    注销
    用户名
    密码



	2.布局文件activity_main.xml：
	

        

        


    

    


        

    

    

        



        

    

    

        

        
    

	3.主活动代码MainActivity.java：
	import androidx.appcompat.app.AppCompatActivity;

	import android.os.Bundle;
	import android.text.InputType;
	import android.view.View;
	import android.widget.Button;
	import android.widget.EditText;
	import android.widget.TextView;
	import android.widget.Toast;

	public class MainActivity extends AppCompatActivity {

    @Override
	protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        final EditText et1 = (EditText) findViewById(R.id.input_username);
        final EditText et2 = (EditText) findViewById(R.id.input_username);



        Button mybutton_1 = (Button) findViewById(R.id.login_in);

        mybutton_1.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v){
                // 点击按钮弹出文本
                Toast.makeText(MainActivity.this, et1.getText().toString(), Toast.LENGTH_SHORT).show();

            }
        }
        );

        Button mybutton_2 = (Button) findViewById(R.id.login_out);

        mybutton_2.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v){
                // 点击按钮弹出文本
                Toast.makeText(MainActivity.this, et2.getText().toString(), Toast.LENGTH_SHORT).show();
            }
        }
        );
    }
}

	4.color.xml文件内容：


    #008577
    #00574B
    #D81B60
    #ff00ff
    #ff0000

实验效果图

  1.首页：

  2.输入：

  3.点击登录：

  4.点击注销：

---

批评与自我批评

  注意效率！！

---

参考

  《第一行代码 Android 第2版》，郭霖著

  《Android实现EditText文本的输入，通过点击按钮，获取输入的内容》
https://blog.csdn.net/qq_36339249/article/details/66974213?utm_term=android%E8%8E%B7%E5%8F%96%E8%BE%93%E5%85%A5%E6%A1%86%E5%86%85%E5%AE%B9%E4%BB%A3%E7%A0%81&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_allsobaiduweb~default-2-66974213&spm=3001.4430