【Android学习】简单的登陆界面

简介

很多应用都有着登陆界面，那么我们接下来开始动手做一个属于自己的登陆界面

自定义标题栏

界面的第一个主要元素就是标题栏，android原本自带的标题栏并不是太美观，所以我们要设计自己的标题栏，这里我准备了title_bg作为标题栏背景图片
创建一个标题栏布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/title_bg">

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:text="课程查询系统"
        android:textColor="#fff"
        android:textSize="18sp"/>

</LinearLayout>

登陆界面的完工

标题栏布局我们已经编写完成了，接下来就是如何引用的问题，这里跟java的引用很相似，只需要一句include就能成功引用这个标题栏了
在之后的登陆布局页面里面引用并添加其他控件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    >
    <include layout="@layout/login_title"
        android:id="@+id/logintitle"></include>
    <TextView
        android:id="@+id/loginText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@id/logintitle"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:gravity="center"
        android:text="用户登录"
        android:textSize="18dp"/>

    <EditText
        android:id="@+id/userText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@id/loginText"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="60dp"
        android:layout_marginRight="60dp"
        android:hint="username"/>



    <EditText
        android:id="@+id/pwdText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@id/userText"
        android:layout_marginTop="50dp"
        android:layout_marginLeft="60dp"
        android:layout_marginRight="60dp"
        android:hint="username"/>

    <Button
        android:id="@+id/loginButtion"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@id/pwdText"
        android:layout_marginTop="50dp"
        android:layout_marginLeft="60dp"
        android:layout_marginRight="60dp"
        android:text="login"
        android:textAllCaps="false"/>
</RelativeLayout>

之后别忘记在活动中将系统自带的标题栏隐藏起来

ActionBar actionbar=getSupportActionBar();
        if(actionbar!=null){
            actionbar.hide();
        }

这三行就能实现
最后我们自己的登陆界面的效果

如何呢？效果还是不错的吧