Android studio - UI 界面设计（仿问卷星登陆注册界面）

最新推荐文章于 2024-06-27 19:22:57 发布
最新推荐文章于 2024-06-27 19:22:57 发布
阅读量1.3w 收藏 376
点赞数 33
分类专栏： android studio 文章标签： android studio ui android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47725780/article/details/123558133
版权
本文介绍了如何在Android应用中使用自定义按钮样式，包括修改themes.xml文件，创建不同颜色和形状的按钮，并在LoginActivity和RegisterActivity中布局和实现页面跳转。详细展示了代码实例和界面效果。
摘要由CSDN通过智能技术生成

1 先上效果图：

请添加图片描述

2 准备工作 建如下活动文件以及素材文件

在这里插入图片描述

3 代码实现

3.1 修改themes.xml、 themes.xml(night)文件 使自定义按钮组件起效果

在这里插入图片描述

	在框出区域加	.Bridge 两个 xml 文件都要加

在这里插入图片描述

	**自定义按钮的应用**

在这里插入图片描述

代码实现

btn_login.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#00000000"/>
    <!--颜色 透明-->
    <corners android:radius="30dp"/>
    <!--标准圆角-->
</shape>

button_lg.xml

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

    <!--  灰色 圆角按钮  -->
    <solid android:color="#CCCCCC"/>
    <corners android:radius="120dip"/>

</shape>

button_res.xml

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

    <!--  蓝色圆角按钮  -->
    <corners android:radius="120dip"/>
    <solid android:color="#0099FF"/>

</shape>
3.2 实现布局
LinearLayout(线性布局) 和 RelativeLayout(相对布局)
3.2.1 登陆界面 activity_login.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".LoginActivity"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="-10dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="180dp"
            android:src="@drawable/bj" />
    </LinearLayout>

    <LinearLayout
        android:layout_marginTop="-20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_gravity="bottom"
        android:showDividers="middle">

        <Button
            android:id="@+id/bt_lg"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:background="@drawable/btn_login"
            android:layout_weight="1"
            android:text="登陆"
            android:textSize="30dp"
            android:textColor="#03A9F4"
            android:textStyle="bold"
            android:letterSpacing="0.5">
        </Button>


        <Button
            android:id="@+id/bt_reg"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:background="@drawable/btn_login"
            android:layout_weight="1"
            style="?android:attr/borderlessButtonStyle"
            android:text="注册"
            android:textSize="30dp"
            android:textColor="#999999"
            android:textStyle="bold"
            android:letterSpacing="0.5"/>
    </LinearLayout>

    <View
        android:layout_gravity="center"
        android:layout_width="350dp"
        android:layout_height="1dp"
        android:background="#000000" />

    <LinearLayout
        android:layout_marginTop="15dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp">

        <EditText
            android:id="@+id/et_phone"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:drawableLeft="@drawable/pn"
            android:inputType="phone"
            android:drawablePadding="10dp"
            android:hint="请输入手机号"
            android:letterSpacing="0.15"
            android:textSize="20sp" />

    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp">

        <EditText
            android:id="@+id/et_pwd"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:drawableLeft="@drawable/pwd"
            android:drawablePadding="10dp"
            android:hint="请输入密码"
            android:inputType="numberPassword"
            android:letterSpacing="0.15"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/forget_pwd"
            android:layout_width="130dp"
            android:layout_height="80dp"
            android:layout_alignParentEnd="true"
            android:gravity="center_vertical"
            android:hint="忘记密码？"
            android:textColorHint="#3399FF"
            android:textSize="25sp"
            android:textStyle="bold" />

    </RelativeLayout>

    <LinearLayout
        android:layout_marginTop="30dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp">

        <Button
            android:id="@+id/bt_lg1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/button_lg"
            android:text="登 陆"
            android:textColor="#999999"
            android:textSize="25sp"
            android:textStyle="bold" />

    </LinearLayout>

    <LinearLayout
        android:layout_marginTop="45dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal">

        <TextView
            android:gravity="center_horizontal"
            android:layout_width="wrap_content"
            android:layout_height="95dp"
            android:drawableTop="@drawable/wx"
            android:drawablePadding="10dp"
            android:text="微信登陆"
            android:textColor="#C0C0C0"
            android:textStyle="bold"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"/>
        <TextView
            android:gravity="center_horizontal"
            android:layout_width="wrap_content"
            android:layout_height="95dp"
            android:drawableTop="@drawable/qq"
            android:drawablePadding="10dp"
            android:text="QQ登陆"
            android:textColor="#C0C0C0"
            android:textStyle="bold"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"/>
        <TextView
            android:gravity="center_horizontal"
            android:layout_width="wrap_content"
            android:layout_height="95dp"
            android:drawableTop="@drawable/phone"
            android:drawablePadding="10dp"
            android:text="短信登陆"
            android:textColor="#C0C0C0"
            android:textStyle="bold"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"/>

    </LinearLayout>

    <LinearLayout
        android:layout_marginTop="30dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal">

        <RadioButton
            android:id="@+id/rb1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我同意问卷星"
            android:textColor="#CCCCCC"
            android:textStyle="bold"
            tools:ignore="TouchTargetSizeCheck" />
        <TextView
            android:id="@+id/t1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="《用户服务协议》"
            android:textColor="#3399FF"
            android:textStyle="bold"/>
        <TextView
            android:id="@+id/t2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="和"
            android:textColor="#CCCCCC"
            android:textStyle="bold"/>
        <TextView
            android:id="@+id/t3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="《隐私条款》"
            android:textColor="#3399FF"
            android:textStyle="bold"/>
    </LinearLayout>

</LinearLayout>

	登陆效果图如下

请添加图片描述

3.2.2 注册界面 activity_register.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".RegisterActivity"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="-10dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="180dp"
            android:src="@drawable/bj" />
    </LinearLayout>

    <LinearLayout
        android:layout_marginTop="-20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_gravity="bottom"
        android:showDividers="middle">

        <Button
            android:id="@+id/bt_lg"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:background="@drawable/btn_login"
            android:layout_weight="1"
            android:text="登陆"
            android:textSize="30dp"
            android:textColor="#999999"
            android:textStyle="bold"
            android:letterSpacing="0.5">
        </Button>


        <Button
            android:id="@+id/bt_reg"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:background="@drawable/btn_login"
            android:layout_weight="1"
            style="?android:attr/borderlessButtonStyle"
            android:text="注册"
            android:textSize="30dp"
            android:textColor="#03A9F4"
            android:textStyle="bold"
            android:letterSpacing="0.5"/>
    </LinearLayout>

    <View
        android:layout_gravity="center"
        android:layout_width="350dp"
        android:layout_height="1dp"
        android:background="#000000" />

    <LinearLayout
        android:layout_marginTop="15dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp">

        <EditText
            android:id="@+id/et_phone"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:drawableLeft="@drawable/pn"
            android:inputType="phone"
            android:drawablePadding="10dp"
            android:hint="请输入手机号"
            android:textColorHint="#808080"
            android:textStyle="bold"
            android:letterSpacing="0.15"
            android:textSize="20sp" />

    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp">

        <EditText
            android:id="@+id/et_dx"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:drawableLeft="@drawable/dx"
            android:inputType="phone"
            android:drawablePadding="10dp"
            android:hint="短信码验证"
            android:letterSpacing="0.15"
            android:textColorHint="#808080"
            android:textSize="20sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/forget_pwd"
            android:layout_width="130dp"
            android:layout_height="80dp"
            android:layout_alignParentEnd="true"
            android:gravity="center_vertical"
            android:hint="获取验证码"
            android:textColorHint="#3399FF"
            android:textSize="25sp"
            android:textStyle="bold" />

    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp">

        <EditText
            android:id="@+id/et_pwd"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:drawableLeft="@drawable/pwd"
            android:inputType="numberPassword"
            android:drawablePadding="10dp"
            android:hint="8-20位密码"
            android:textColorHint="#808080"
            android:textStyle="bold"
            android:letterSpacing="0.15"
            android:textSize="20sp" />

    </LinearLayout>

    <LinearLayout
        android:layout_marginTop="30dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp">

        <Button
            android:id="@+id/bt_lg1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/button_res"
            android:text="注 册"
            android:textColor="#ffffff"
            android:textSize="25sp"
            android:textStyle="bold" />

    </LinearLayout>

    <LinearLayout
        android:layout_marginTop="100dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal">

        <RadioButton
            android:id="@+id/rb1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我同意问卷星"
            android:textColor="#696969"
            android:textStyle="bold"
            tools:ignore="TouchTargetSizeCheck" />
        <TextView
            android:id="@+id/t1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="《用户服务协议》"
            android:textColor="#3399FF"
            android:textStyle="bold"/>
        <TextView
            android:id="@+id/t2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="和"
            android:textColor="#696969"
            android:textStyle="bold"/>
        <TextView
            android:id="@+id/t3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="《隐私条款》"
            android:textColor="#3399FF"
            android:textStyle="bold"/>
    </LinearLayout>

</LinearLayout>

	注册界面效果如下：

请添加图片描述

4 按钮实现页面跳转

4.1 LoginActivity.java
package com.example.你的项目名;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class LoginActivity extends AppCompatActivity implements View.OnClickListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);

        Button button1 = findViewById(R.id.bt_lg);
        button1.setOnClickListener(this);

        Button button2 = findViewById(R.id.bt_reg);
        button2.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.bt_lg:

                final Intent intent1 = new Intent(LoginActivity.this, LoginActivity.class);
                startActivity(intent1);
                break;

            case R.id.bt_reg:
                final Intent intent2 = new Intent(LoginActivity.this, RegisterActivity.class);
                //启动活动（参数）
                startActivity(intent2);
                break;
        }
    }
}
4.2 RegisterActivity.java
package com.example.你的项目名;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class RegisterActivity extends AppCompatActivity implements View.OnClickListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_register);

        Button button1 = findViewById(R.id.bt_lg);
        button1.setOnClickListener(this);

        Button button2 = findViewById(R.id.bt_reg);
        button2.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.bt_lg:

                final Intent intent1 = new Intent(RegisterActivity.this, LoginActivity.class);
                startActivity(intent1);
                break;

            case R.id.bt_reg:
                final Intent intent2 = new Intent(RegisterActivity.this, RegisterActivity.class);
                //启动活动（参数）
                startActivity(intent2);
                break;
        }
    }
}

最后，在 AndroidManifest.xml	
				中设置启动页保证两个页面都能实现跳转。

在这里插入图片描述
最后，如有问题或指正的地方，请在下方评论，一起讨论学习。

源相
关注
  • 33
    点赞
  • 踩
  • 376
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
专栏目录
android studio 登陆ui界面设计
five233的博客
03-14 6246
一、在activity_mian布局中设计，此处用RelativeLayout控件，功能是实现滑动功能，可上下也可左右，按需求设计。以下是代码部分 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layo
android studio静态界面设计,2.3 使用Android Studio 简单设计UI界面
weixin_42186387的博客
05-27 4492
首先 创建一个新的项目找到app 文件目录下的layout的 activity_main.xml因为Android Studio 是可视化的，所有操作都可以在图形界面进行。该res 界面当中 drawable 可以将需要的图片导入该目录当中进行调用 layout的目录是布局界面values 当中存有可以更改界面的颜色 字符串还有款式的xml文件。当然也可以在可视化界面当中便捷的更改。如下图所示为...
Android Studio——类微信界面设计
qq_59564018的博客
09-30 2805
Android studio制作简易类微信界面。展示四个可切换界面，当点击下方按钮时，界面随之切换。分别对应四个界面的中间内容，内容随意，设置颜色背景及大小。
Android studio各种布局，UI界面交互功能
最新发布
qq_52898134的博客
06-27 1086
在这个示例中，使用GestureDetectorCompat类来创建一个gestureDetector对象，并通过实现GestureDetector.OnGestureListener接口中的方法来处理用户的滑动操作。在实际项目中，可以通过设置控件之间的相对位置关系来实现灵活的布局效果。可以根据自己的需求添加更多的菜单项，并在MainActivity.java中相应地处理它们的点击事件。在Java文件中找到对应的Button控件，并设置点击事件监听器，然后在事件处理方法中编写相应的逻辑代码。
android 漂亮的UI界面 完整的界面设计
03-03
声明：这也是我学习时在网上下载的，鉴于分享精神，并且觉得很不错才上传上来的。 android 漂亮的UI界面 完整的界面设计 这是一个完整的UI设计，但是没写动作，这是一个公司程序员的公司任务设计，请别商用，要用请修改。
AndroidStudio-实战演练-仿美团外卖菜单全部代码，加图片资源
04-20
在本项目中，我们主要关注的是使用Android Studio进行实战演练，目标是仿造美团外卖的菜单功能。这个压缩包包含了实现这一目标所需的所有代码和图片资源。以下是对这些关键元素的详细解读： 1. **Android Studio**:...
基于Android Studio制作的仿QQ界面
12-21
登录注册界面的实现，涉及到EditText用于用户输入，Button用于触发事件，以及ImageView用于展示背景动画。这些元素的交互和布局调整是UI设计的重要环节。 对于登录注册功能，项目使用了SQLite作为本地数据库，存储...
android studio 登录界面设计，登录后简易仿照微信界面
04-07
首先，让我们深入探讨如何在Android Studio中设计登录界面。登录界面通常包含用户名（或手机号）输入框、密码输入框、登录按钮、可能还有“记住密码”和“忘记密码”的选项。在XML布局文件中，我们可以使用`EditText...
Orchid-02_基于Android Studio的仿QQ主界面UI界面.zip
12-14
在这个项目"Orchid-02_基于Android Studio的仿QQ主界面UI界面"中，我们将探讨如何使用Android Studio来创建一个类似QQ主界面的用户界面。 首先，我们要了解【Android UI设计】的基本概念。Android UI设计主要依赖于...
android studio注册界面
07-17
android studio的注册界面，与登录界面使用同一风格。
android-studio-ide-201.7042882-windows.zip
10-14
Android Studio 是Google官方推出的一款集成开发环境（IDE），专为Android应用开发者设计。它以其强大的功能、高效的开发流程和友好的用户界面赢得了广大开发者的一致好评。本文将深入探讨Android Studio 201....
Android Studio：基本UI界面设计 （详细）
热门推荐
reborncgy的博客
12-02 13万+
一、 实验题目  基本UI界面设计 二、 实现内容 实现一个 Android 应用，界面呈现如下效果：        三、 实验过程 （1）标题   首先我们建立一个TextView控件来写标题。 实验对标题的要求如下：  标题字体大小 20sp（android:textSize="20sp"） ‚ 与顶部距离 20dp  （与父容器顶部对齐后再设置与顶部距离20dp）
androidstudio简单页面设计
weixin_56102526的博客
09-27 7213
简单页面设计一、代码设计（一）主页面（二）联系人电话二、演示界面 一、代码设计 （一）主页面 1.ThreeActivity package com.example.helloworld1; import androidx.annotation.NonNull; import androidx.annotation.Nullable; import androidx.appcompat.app.AppCompatActivity; import androidx.core.app.ActivityComp
android studio——设计简单微信界面超详细教程
m0_73786116的博客
10-16 7742
android studio设计微信界面以及可能遇到的问题
Android Studio完成简单UI设计
weixin_47936384的博客
05-29 2818
目录一、五个简单UI设计：a.双击打开activity main.xmlb.添加辅助线二、TextView图文混排三、修改不同颜色的按钮四、设计CheckBox和radioButton五、完善学生信息添加和显示 一、五个简单UI设计： a.双击打开activity main.xml b.添加辅助线 二、TextView图文混排 三、修改不同颜色的按钮 四、设计CheckBox和radioButton 五、完善学生信息添加和显示 ...
Android Studio学习一得——Android用户界面的设计布局
tengtengdish的博客
06-20 9077
当我们创建了一个安卓项目后，我们会发现真正建立一个完善的安卓项目并不是想象的那么容易。其实和设计可视化界面一样，开发安卓也需要考虑很多方面，主要考虑的还是界面布局和需要的组件。
android studio中的background
09-25
在Android Studio中，background是指界面的背景设置。根据提供的引用内容，可以看出background可以通过修改Theme和添加自定义的背景图片来设置。可以通过点击File -> Settings -> Appearance -> Theme来将背景换成黑色，并使用清晰度较高的背景图片。同时，还可以在System Settings -> Background Image Plus中添加自己喜欢的图片，并将其放置在backgrounds文件夹中。
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值