如何使用 Android Studio 创建 Twitter 登录 UI？

如今，Android 应用程序非常流行，尤其是社交媒体应用程序。这个登录 UI 一般在“推特”App 中见过。在本文中，我们将在 Android Studio 中创建一个 Twitter 登录 UI。以下是有关如何执行此操作的各个步骤。这将帮助初学者通过参考这篇文章在 android 中构建一些很棒的 UI。

分步实施

第 1 步：创建一个新项目

要在 Android Studio 中创建新项目，请参阅如何在 Android Studio 中创建/启动新项目。首先选择空活动，然后单击下一步按钮。为您的应用命名，例如“Twitter 登录 UI”。然后选择Kotlin/ Java作为编程语言。在这个项目中，我们使用Java作为编程语言。然后选择最小SDK，例如在这个项目中我们使用“API16: Android 4.1(Jelly Bean)”。然后点击完成按钮。

第 2 步：使用 colors.xml 文件

colors.xml是一个 XML 文件，用于存储资源的颜色。一个 Android 项目包含 3 种基本颜色，即：

原色
颜色PrimaryDark
颜色口音

在app > res > values > colors.xml文件中添加此代码。

XML



    #03A9F4
    #2196F3
    #F1f1f1
    #FF03DAC5
    #FF018786
    #2196F3
    #FF000000
    #FFFFFFFF

XML

Java

package com.example.twitter;
  
import android.os.Bundle;
  
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity extends AppCompatActivity {
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

如果您没有在 colors.xml 文件中获得 colorPrimary、colorPrimaryDark 和 colorAccent。然后您可以转到themes.xml文件，您可以在themes.xml文件中找到这些颜色名称。这些颜色也用于 android studio 的一些预定义资源中。这些颜色需要设置为不透明，否则可能会导致出现一些异常。

第 3 步：使用themes.xml 文件

在此文件中将 DarkActionBar 更改为 NoActionBar。 NoActionBar 将从您的应用程序中删除 TittleBar。如果您不想从您的应用程序中删除 TittleBar，请保持原样。导航到app > res > values > theme.xml文件。

XML

第 4 步：使用可绘制文件

我们在可绘制文件中添加的所有图像。因此，在可绘制文件中添加 Twitter 徽标。此项目中使用的图像被添加到 drawable 文件夹中。要导航图像，请导航到app > res > drawable。您将在该文件夹中找到该图像。

第 5 步：使用 activity_main.xml 文件

为了创建 Twitter 登录 UI，我们在 XML 文件中使用了以下 UI 组件：

约束布局
一个图像视图
六 TextView
两个 EditText
一种相对布局
一个视图

导航到app > res > layout > activity_main.xml并将以下代码添加到该文件。下面是activity_main.xml文件的代码。

XML

第 6 步：使用 roundtext.xml 文件

转到应用程序 > res > drawable > 右键单击 > 新建 > 可绘制资源文件并将文件命名为roundtext。下面是roundtext.xml文件的代码。

XML

第 7 步：使用 MainActivity。Java

因为我们没有使用MainActivity。 Java文件，所以我们不需要在MainActivity 中编写任何代码。 Java文件。保留MainActivity。原样的Java文件。

Java

package com.example.twitter;
  
import android.os.Bundle;
  
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity extends AppCompatActivity {
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

现在运行应用程序并查看下面代码的输出。要构建和运行应用程序，您可以在 Windows 中按shift + f10 ，在 Mac 中按 Ctrl + R。

输出界面：