用一段描述讓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> |
接著,我們需要在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 | |
} | |
}); | |
} | |
} |
這樣就完成了具有內嵌網頁和兩個按鈕的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代碼提供了按下分享按鈕時的功能,可以在其中添加實際的分享代碼。