【移动安全技术】_第四站_登陆框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:
<resources>
    <string name="app_name">Four_Ui</string>
    <string name="xitong">网络准入认证系统</string>
    <string name="username">1820030116</string>
    <string name="passwd">朱轲鑫</string>
    <string name="in">登录</string>
    <string name="out">注销</string>
    <string name="input1">用户名</string>
    <string name="input2">密码</string>
</resources>


	2.布局文件activity_main.xml:
	<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/textView4"


            android:text="@string/input1"
            android:layout_width="70dp"
            android:layout_height="52dp"
            android:textSize="20dp"

            android:layout_marginTop="285dp"
            android:layout_marginLeft="20dp"


            tools:text="@string/input1" />

        <EditText
            android:id="@+id/input_username"


            android:layout_width="300dp"
            android:layout_height="52dp"


            android:hint="@string/username"
            android:layout_marginTop="280dp"
            android:inputType="text" />


    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <TextView
            android:id="@+id/title"
            android:layout_width="260dp"
            android:layout_height="50dp"

            android:text="@string/xitong"
            android:layout_marginTop="200dp"

            android:layout_gravity="center"
            android:textSize="30sp"
            android:textColor="#000000"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/in_pass"


            android:text="@string/input2"
            android:layout_width="70dp"
            android:layout_height="52dp"
            android:textSize="20dp"

            android:layout_marginTop="402dp"
            android:layout_marginLeft="20dp"


            tools:text="@string/input2" />



        <EditText
            android:id="@+id/password"
            android:layout_width="280dp"
            android:layout_height="52dp"


            android:ems="10"
            android:hint="@string/passwd"
            android:gravity="center_vertical"
            android:layout_marginTop="400dp"
            android:textSize="17sp"
            android:inputType="textPassword" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        tools:layout_editor_absoluteX="411dp">

        <Button
            android:id="@+id/login_in"
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:layout_marginTop="480dp"
            android:layout_marginLeft="80dp"
            android:background="@color/blue"
            android:text="@string/in" />

        <Button
            android:id="@+id/login_out"
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:layout_marginLeft="50dp"
            android:layout_marginTop="480dp"
            android:background="@color/red"
            android:text="@string/out" />
    </LinearLayout>

	3.主活动代码MainActivity.java:
	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();
            }
        }
        );
    }
}


实验效果图

  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-2allsobaiduweb~default-2-66974213&spm=3001.4430

猜你喜欢

转载自blog.csdn.net/soldi_er/article/details/115318663