Android之模仿微信登陆界面（一）

最新推荐文章于 2025-06-04 12:42:43 发布

攻城狮滕江

最新推荐文章于 2025-06-04 12:42:43 发布

阅读量3.5k

点赞数 3

CC 4.0 BY-SA版权

文章标签：移动开发

本文链接：https://blog.youkuaiyun.com/tj134679258/article/details/84474445

本文介绍了一款基于Android平台的微信风格登录与注册界面的设计与实现过程。文章详细展示了使用XML进行界面布局的方法，包括图标、按钮及文本的布局技巧，并讲解了不同状态下的按钮样式切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本次做的xml是登录和注册界面，用的是button的自定义图标

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffff"
    android:orientation="vertical" >

 <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="60dp"
        android:gravity="center"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:src="@drawable/copyright" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:text="微信"
            android:textColor="#000000"
            android:textSize="35sp" />
    </LinearLayout>
    
 <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/linearLayout1"
        android:layout_marginTop="70dp"
        android:gravity="center"
        android:orientation="vertical" >

        <Button
            android:id="@+id/main_login_btn"
            android:layout_width="wrap_content"
            android:layout_height="45dp"
            android:background="@drawable/main_login_selector"
            android:gravity="center"
            android:paddingLeft="130dp"
            android:paddingRight="130dp"
            android:text="登录"
            android:textColor="#ffffff"
            android:textSize="15sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="使用QQ号或微信号登录"
            android:textSize="14sp" />

        <Button
            android:id="@+id/main_regist_btn"
            android:layout_width="wrap_content"
            android:layout_height="45dp"
            android:layout_marginTop="20dp"
            android:background="@drawable/main_regist_selector"
            android:gravity="center"
            android:paddingLeft="130dp"
            android:paddingRight="130dp"
            android:text="注册"
            android:textColor="#000000"
            android:textSize="15sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="如果你没有QQ号，可以使用手机注册"
            android:textSize="14sp" />
    </LinearLayout>
</RelativeLayout>

通过在RelativeLayout中放入LinearLayou方便放置插件，更加熟悉了布局的嵌套

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" android:drawable="@drawable/main_login_pressed"/><!-- 当按下时 -->
<item android:state_pressed="false" android:drawable="@drawable/main_login_normal"/>
</selector>

通过设置这个文件将按钮的按下和保持换成微信图片

下面研究下代码的用途

android:gravity是对元素本身说的，元素本身的文本显示在什么地方靠着换个属性设置，不过不设置默认是在左侧的。

android:orientation="horizontal" 水平布局这样就能同时放下微信图标和文字了（android:orientation="vertical" 垂直布局）

android:layout_marginLeft指该控件距离边父控件的边距，

android:paddingLeft指该控件内部内容，如文本距离该控件的边距。