一、用到的组件:
LinearLaout、TableLayout、FrameLayout、RelativeLout
二、效果图展示:
三、步骤及过程:
1.首先新建一个Project,并在app -> res -> layout中新建一个xml文件,文件为RelativeLout类型,以qqface命名,如下图:
2.将选好的图片复制粘贴至app —> res --> drawable中 ;
3.在qqface.xml文件中编辑以下代码(使用时需要将注释删除):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent" android:layout_height="match_parent"
android:background = "#E6E6E6"
android:orientation="vertical">
//设置图片
<ImageView
android:id="@+id/iv" //图片id
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_centerHorizontal="true" //居中
android:layout_marginTop="40dp" //图片大小
app:srcCompat="@drawable/head" /> //图片位置
//关于账号控件的设置
<LinearLayout
android:id="@+id/uer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/iv"
android:layout_centerVertical="true"
android:layout_marginTop="15dp"
android:layout_marginLeft="10dp"
android:layout_marginBottom="5dp"
android:layout_marginRight="10dp"
android:background="#ffffff"
android:orientation="horizontal">
<TextView
android:id="@+id/qq_nume"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="账号:"
android:textSize="25sp"
android:textColor="#000" />
<EditText
android:id="@+id/qq_uer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:background="@null"
android:padding="10dp"/>
</LinearLayout>
//关于密码控件的设置
<LinearLayout
android:id="@+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/uer"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#ffffff"
android:orientation="horizontal">
<TextView
android:id="@+id/qq_PW"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="密码:"
android:textSize="25sp"
android:textColor="#000" />
<EditText
android:id="@+id/qq_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf = "@+id/qq_PW"
android:layout_marginLeft="5dp"
android:background="@null"
android:padding="10dp"
android:inputType="numberPassword" />
</LinearLayout>
//登录点击按钮控件的设置
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/password"
android:layout_marginTop="50dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#3C8DC4"
android:text="登录"
android:textColor="#ffffff"
android:textSize="20sp"/>
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#000"
android:textSize="20sp"
android:layout_marginTop="25dp"
android:layout_below="@+id/button"
android:layout_alignLeft="@+id/button"
android:layout_alignStart="@+id/button"/>
</RelativeLayout>
4.将MainActivitty.java代码中的R.layout.activity_main改为R.layout.qqface,如下图:
到此,一个简单的登录界面就做好了。