Android Studio 前端登录界面

Love The Way You Lie 2023-02-13 11:54 82阅读 0赞

用Android studio做一个登录前端界面

创建项目，命名自定义

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0NDU5NA_size_16_color_FFFFFF_t_70][]

Android studio和HTML5的布局方式差不多，只不过用的标签不一样，HTML里容器用的是div，在这里用的是LinearLayout

现在App通常都离不开手机登录，要做的就是手机登录的界面。

先布局一个手机的输入框

![20200529110918671.png][]

代码如图

Layout\_width表示宽的占据多少，layout\_height表示高占据多少

Orientation表示该容器内布局的方向

TextView相当于HTML的p标签

Gravity表示对齐方式

Textcolor表示字体颜色

EditText相当于HTML中的input文本框标签

验证码输入框同理

![20200529111015431.png][]

代码如图

<LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
    
                android:orientation="horizontal">
    
                <TextView
                    android:layout_width="70dp"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:textColor="@color/colorBlack"
                    android:text="验证码:"/>
    
                <EditText
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:hint="请输入验证码"/>
    
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorPrimaryDark"
                    android:text="获取验证码"/>
            </LinearLayout>

为了“获取验证码”那块不被挤下去，所以验证码输入框设置了0dp，然后再给它加上权重，让输入框自适应长度

登录按钮

![20200529111117175.png][]

代码

<Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="@color/colorPrimary"
                android:textColor="@color/colorWhite"
                android:textSize="20sp"
                android:text="登  录"/>

考虑到不同手机屏幕尺寸的大小，所以字体大小设置是用sp而不是用px了

然后是下面的一些操作按钮

![20200529111152137.png][]

代码如图

<LinearLayout
                android:layout_width="wrap_content"
                android:layout_gravity="center"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
    
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorPrimary"
                    android:text="密码登录"/>
    
                <view
                    android:layout_width="1dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="5dp"
                    android:layout_marginRight="5dp"
                    android:background="@color/colorPrimary"/>
    
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorPrimary"
                    android:text="注册新会员"/>
    
                <view
                    android:layout_width="1dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="5dp"
                    android:layout_marginRight="5dp"
                    android:background="@color/colorPrimary"/>
    
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorPrimary"
                    android:text="重置密码"/>
    
            </LinearLayout>

整体来说，布局方法和HTML差不多，也是容器嵌套着容器，像登录界面，一般用的也是线性布局，区别比较大的就是用的标签不同，大致理念还是差不多的

效果图

![20200529111314270.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0NDU5NA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200529110704495.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0NDU5NA==,size_16,color_FFFFFF,t_70
[20200529110918671.png]: https://img-blog.csdnimg.cn/20200529110918671.png
[20200529111015431.png]: https://img-blog.csdnimg.cn/20200529111015431.png
[20200529111117175.png]: https://img-blog.csdnimg.cn/20200529111117175.png
[20200529111152137.png]: https://img-blog.csdnimg.cn/20200529111152137.png
[20200529111314270.png]: https://img-blog.csdnimg.cn/20200529111314270.png