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

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	
				中设置启动页保证两个页面都能实现跳转。

最后，如有问题或指正的地方，请在下方评论，一起讨论学习。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/992679.html

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

发表评论

评论列表（0条）