ChatGPT測試_6(寫UI code for IOS/Android/HTML+CSS)

用一段描述讓ChatGPT幫你寫UI code

SwiftUI」 or 「Android + java + XML」or 「HTML + CSS + JavaScript」…….等,都可替換成能寫UI的程式語言

Note: 以下僅提供咒語&ChatGPT回答,實際執行結果請自行嘗試


(1)

幫我用SwiftUI產生一個app登入頁面,頁面要能讓使用者輸入帳號和登入密碼,並有一個login按鈕讓使用者點擊登入。且輸入帳號和登入密碼UI與頁面邊緣的左右間距為20。login按鈕和頁面邊界的左右間距為20。登入密碼UI與頁面底部邊界距離100。輸入帳號上方,有一個300×300的圖片,該圖片與頁面上方邊界距離20且水平置中,且圖片與輸入帳號UI垂直間距20。

ChatGPT回答:

在SwiftUI中,您可以使用以下程式碼來創建符合您描述的登入頁面。請將您的圖片檔案名稱替換為 yourImageName,並將其放在您的專案資源文件夾中。

import SwiftUI
struct ContentView: View {
@State private var username: String = ""
@State private var password: String = ""
var body: some View {
VStack {
Spacer(minLength: 20)
Image("yourImageName")
.resizable()
.frame(width: 300, height: 300)
.padding(.bottom, 20)
TextField("Username", text: $username)
.padding()
.frame(height: 40)
.background(Color(.systemGray6))
.cornerRadius(8)
.padding(.horizontal, 20)
SecureField("Password", text: $password)
.padding()
.frame(height: 40)
.background(Color(.systemGray6))
.cornerRadius(8)
.padding(.horizontal, 20)
Spacer(minLength: 100)
Button(action: {
// 登入按鈕的動作
}) {
Text("Login")
.font(.headline)
.foregroundColor(.white)
.padding()
.frame(maxWidth: .infinity)
.background(Color.blue)
.cornerRadius(8)
.padding(.horizontal, 20)
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}

這段程式碼創建了一個包含圖片、帳號輸入框、密碼輸入框和登入按鈕的登入頁面,並根據您的要求進行了佈局。請將此程式碼添加到您的SwiftUI專案中,並將其設置為主視圖。


(2)

幫我用Android + java + XML產生一個app頁面,頁面有一個內嵌網頁,內嵌網頁與頁面邊界頂端距離22,內嵌網頁和頁面邊界的左右間距為40,和頁面底邊距離200。另外有兩個按鈕,一個是Accept,一個是Cancel。兩個按鈕的大小皆為120×60。Accept按鈕的文字是「Accept」,其與頁面左邊界距離40、頁面下邊界距離50,Accept按鈕背景顏色是0xF2F5FA,文字顏色是0x0053B5。Cancel按鈕與頁面右邊界距離40,Cancel按鈕與頁面下邊界距離50,Cancel按鈕背景顏色是0xFFFFFF,邊框大小為2,邊框顏色為0xF2F5FA,文字顏色是0x8EA7D6。

ChatGPT回答:

首先,讓我們建立主要的XML布局檔案,命名為activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="22dp"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:layout_marginBottom="200dp" />
<Button
android:id="@+id/accept_button"
android:layout_width="120dp"
android:layout_height="60dp"
android:layout_marginLeft="40dp"
android:layout_marginBottom="50dp"
android:layout_alignParentBottom="true"
android:background="#F2F5FA"
android:text="Accept"
android:textColor="#0053B5" />
<Button
android:id="@+id/cancel_button"
android:layout_width="120dp"
android:layout_height="60dp"
android:layout_marginRight="40dp"
android:layout_marginBottom="50dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="#FFFFFF"
android:text="Cancel"
android:textColor="#8EA7D6"
app:borderWidth="2dp"
app:borderColor="#F2F5FA" />
</RelativeLayout>
view raw XMLTest1.xml hosted with ❤ by GitHub

接著,我們需要在MainActivity.java中設定WebView和按鈕的事件。

import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Color;
import android.graphics.drawable.GradientDrawable;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
private WebView webView;
private Button acceptButton, cancelButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = findViewById(R.id.webview);
acceptButton = findViewById(R.id.accept_button);
cancelButton = findViewById(R.id.cancel_button);
// Configure WebView settings
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebViewClient(new WebViewClient());
webView.loadUrl("https://www.example.com&quot;);
// Set border for cancelButton
GradientDrawable border = new GradientDrawable();
border.setColor(Color.WHITE);
border.setStroke(2, Color.parseColor("#F2F5FA"));
cancelButton.setBackground(border);
// Set button click listeners
acceptButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Handle accept button click
}
});
cancelButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Handle cancel button click
}
});
}
}

這樣就完成了具有內嵌網頁和兩個按鈕的Android應用程式頁面。您可以根據需要調整網址和按鈕的點


(3)
幫我用HTML + CSS + JavaScript產生一個app頁面,頁面有一個圖片,圖片大小是230×230,圖片與頁面邊界頂端距離72,圖片水平置中。另外有一個輸入欄位讓使用者輸入ID,輸入欄位高度為50,輸入欄位的上邊在頁面上方邊界距離500且與頁面左右間距皆為30。輸入欄位下方有一串文字,文字是「Enter your ID to activate share function」,文字顏色是0x9698AA,其寬度與輸入欄位相同。還有一個分享按鈕,這個按鈕的大小為208×40,這個按鈕水平置中,且這個按鈕的底邊與頁面底邊距離88。Accept按鈕背景顏色是0xF2F5FA,文字顏色是0x0053B5。

ChatGPT回答:

以下是使用HTML、CSS和JavaScript創建符合您需求的app頁面的代碼。請確保您的圖片文件路徑正確,或者將其替換為合適的圖片URL。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>App 頁面</title>
<style>
body {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
}
img {
width: 230px;
height: 230px;
margin-top: 72px;
}
input[type="text"] {
width: calc(100% 60px);
height: 50px;
margin: 500px 30px 0;
padding-left: 10px;
box-sizing: border-box;
}
p {
width: calc(100% 60px);
color: #9698AA;
text-align: center;
margin: 0;
}
button {
width: 208px;
height: 40px;
background-color: #F2F5FA;
color: #0053B5;
font-weight: bold;
border: none;
margin-bottom: 88px;
}
</style>
</head>
<body>
<img src="your_image_path.jpg" alt="圖片">
<input type="text" id="user_id" placeholder="輸入ID">
<p>Enter your ID to activate share function</p>
<button onclick="share()">分享</button>
<script>
function share() {
const userId = document.getElementById('user_id').value;
if (userId) {
// 在這裡添加分享功能的代碼
alert(`Share function activated for ID: ${userId}`);
} else {
alert('請輸入ID以啟用分享功能');
}
}
</script>
</body>
</html>

這個HTML檔案包含了您要求的所有元素,包括圖片、輸入欄位、提示文字和分享按鈕。CSS用於描述元素的樣式,使其符合您所需的大小、顏色和位置。JavaScript代碼提供了按下分享按鈕時的功能,可以在其中添加實際的分享代碼。

%d 位部落客按了讚: