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>
注册界面效果如下：
文章来源：https://www.toymoban.com/news/detail-507238.html
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
中设置启动页保证两个页面都能实现跳转。
最后，如有问题或指正的地方，请在下方评论，一起讨论学习。文章来源地址https://www.toymoban.com/news/detail-507238.html
到了这里，关于Android studio - UI 界面设计（仿问卷星登陆注册界面）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
