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()
	}
	}

view raw ChatGPTGenerateSwiftUITest1.swift hosted with ❤ by GitHub

這段程式碼創建了一個包含圖片、帳號輸入框、密碼輸入框和登入按鈕的登入頁面，並根據您的要求進行了佈局。請將此程式碼添加到您的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");

	// 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
	}
	});
	}
	}

view raw ChatGPT AndroidActivityTest1.java hosted with ❤ by GitHub

這樣就完成了具有內嵌網頁和兩個按鈕的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>

view raw ChatGPT_HTML_Test1.html hosted with ❤ by GitHub

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

LifeJourney

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

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

(1)

ChatGPT回答:

(2)

ChatGPT回答:

ChatGPT回答:

請按讚：

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

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

(1)

ChatGPT回答:

(2)

ChatGPT回答:

ChatGPT回答:

分享此文：

請按讚：

探索更多來自 LifeJourney 的內容