android的登陆界面实现

最新推荐文章于 2025-09-21 09:25:55 发布

原创最新推荐文章于 2025-09-21 09:25:55 发布 · 2.7k 阅读

CC 4.0 BY-SA版权

本文详细介绍了登录界面的XML代码实现，包括布局设计、控件使用及样式设置，旨在提供一个简洁美观且功能完整的登录界面设计方案。

xml代码：<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/login_bg">

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">

<TextView
android:id="@+id/Login_walk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="4dp"
android:gravity="right|bottom"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="@drawable/icon_walk"
/>
<TextView
android:id="@+id/Login_forget_psd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="4dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="4dp"
android:layout_toLeftOf="@+id/Login_walk"
android:gravity="right|bottom"
android:background="@drawable/icon_forget_psd"/>

<ImageView
android:id="@+id/Login_icon_logo"
android:layout_width="208dp"
android:layout_height="wrap_content"

android:layout_centerHorizontal="true"
android:src="@drawable/icon_logo"/>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="80dp"
android:orientation="vertical" >

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="80dp"
android:background="#ffffff"
android:orientation="horizontal" >

<ImageView
android:id="@+id/Login_icon_phone"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="8dp"
android:src="@drawable/icon_phone" />

<EditText
android:id="@+id/Login_EditText01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:background="#ffffff"
android:gravity="left|center_vertical"
android:hint="手机号"
android:padding="8dp"
android:textColor="#000000" />
</LinearLayout>

<View
android:layout_width="fill_parent"
android:layout_height="0.1dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:background="#D1D1CF" />

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_weight="0.25"
android:background="#ffffff"
android:orientation="horizontal" >

<ImageView
android:id="@+id/Login_icon_psd"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="8dp"
android:src="@drawable/icon_psd" />

<EditText
android:id="@+id/Login_EditText02"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:background="#ffffff"
android:gravity="left|center_vertical"
android:hint="请输入密码"
android:padding="8dp"
android:textColor="#000000" />
</LinearLayout>

<Button
android:id="@+id/btn_login"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="16dp"
android:background="@drawable/btn_shape_red"
android:text="登陆" />

<Button
android:id="@+id/btn_register"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="16dp"
android:background="@drawable/btn_shape_yellow"
android:text="注册" />
"

</LinearLayout>

</RelativeLayout>

</RelativeLayout>

手机分辨率：800x480

效果图：

主要控件：

icon_walk

icon_forget_psd

icon_logo

icon_phone

icon_psd

主要布局：

1.整体为RelativeLayout布局，设置为fillparent就可以。

设置背景图。

2.然后在另一个RelativeLayout下进行具体设置。

设置两个文本框，放置效果图中右下角的图片，将来实现监听功能。

设置主题logo。

3.设置两个EditView，包含在两个LinearLayout中，设置为horizontal。

包含两个ImageView，

4.设置两个Button，实现圆角边，

代码如下：<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="5dp"/>//圆角框的弧度
<solid android:color="#888373"/>//这个是注册button的颜色

// <solid android:color="#f71a07"/>这个是登陆button的颜色

//字体距离button边界的距离
</shape>

3,4包含在同一个LinearLayout下使用。

总结：1、<View>的使用。

2、src和background的区别：（百度的）

ImageButton 是带图标的Button控件，有src的属性，也就是设置他的图标，也有一个所有控件公有的属性background， 这个也可以设置它的“图标”。
其实，src才是设置图标，而background只是设置背景。
如果控件的大小是100*100 图片资源是80*80的话，那么用src，图片就会居中显示，如果使用background那么图片就会被拉伸充满控件。
重要的是，background是底层的图片资源，src是覆盖在background上面的资源，他们可以叠加使用，实现选中的效果。在ActivityGroup用到。

	3、gravity中包含两个元素的使用：例如right|bottom。右下角。

4、layout_alignParentxx的使用。

5、layout_toxxOf的使用。

6、layout_centerHorizontal的使用。