Android Studio 前端登录界面

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

创建项目，命名自定义

 

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

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:orientation="vertical">
    <!--android:orientation=指定线性布局的方向-->
</LinearLayout>

 

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

先布局一个手机的输入框

 

代码如图

 <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

            android:orientation="horizontal">

            <!--TextView 文本 html的p标签-->
            <TextView
                android:layout_width="70dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textColor="@color/colorBlack"
                android:text="手机号:"/>

            <!--EditText 文本输入框 类似HTML input-->
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="请输入手机号"/>
        </LinearLayout>

 

Layout_width表示宽的占据多少，layout_height表示高占据多少

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

TextView相当于HTML的p标签

Gravity表示对齐方式

Textcolor表示字体颜色

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

 

验证码输入框同理

 

代码如图

<!--验证码-->
        <!--可以分配内部控件的权重-->
        <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，然后再给它加上权重，让输入框自适应长度

 

登录按钮

 

代码

 <!--登录按钮-->
        <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了

 

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

 

代码如图

    <!--下面的操作按钮-->       
     <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差不多，也是容器嵌套着容器，像登录界面，一般用的也是线性布局，区别比较大的就是用的标签不同，大致理念还是差不多的

效果图