เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

by **Mosboom2** » 16/06/2020 2:58 am

[size=150][/size][quote=phennapa post_id=190714 time=1592221185 user_id=28863]
Android - ออกแบบUI หน้าlogin
หลังจากเปิดโปรเจ็ค android studio ก็ทำตามด้านล่างเลยค่ะ
แก้ไขที่ไฟล์ / activity_main.xml
เปลี่ยน androidx.constraintlayout.widget.ConstraintLayout เป็น RelativeLayout
[code]<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayoutxmlns: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">

</androidx.constraintlayout.widget.ConstraintLayout>
[/code]

ตามโค้ดด้านล่างนี้คือเปลี่ยน RelativeLayout แล้ว
[code]<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">

</RelativeLayout>
[/code]
ขั้นตอนต่อไปคือ ออกแบบหน้าUI Login
1) ImageView ใส่รูปตามที่กำหนด ชื่อไฟล์รูป abc
[code]<ImageView
android:id="@+id/imageView"
android:layout_width="153dp"
android:layout_height="139dp"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="121dp"
android:layout_marginBottom="522dp"
android:src="@drawable/abc" /> //ไฟล์รูปชื่อ abc
[/code]
1.png
2) กำหนดTextView .ใส่ชื่อหัวข้อ “Login”
[code]<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="209dp"
android:text="Login"
android:textSize="35dp" />
[/code]
2.png
3) <EditText> สร้างช่องใส่ Name
[code]<EditText
android:id="@+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:layout_marginStart="-3dp"
android:layout_marginLeft="-3dp"
android:layout_marginTop="179dp"
android:layout_marginEnd="3dp"
android:layout_marginRight="3dp"
android:focusable="true"
android:hint="Enter Name"
android:textColorHighlight="#ff7eff15"
android:textColorHint="#ffff25e6" />

[/code]
3.png
4) editText2 สร้างช่องใส่ Password
[code] <EditText
android:id="@+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/editText"
android:layout_alignEnd="@+id/editText"
android:layout_alignRight="@+id/editText"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_marginStart="-3dp"
android:layout_marginLeft="-3dp"
android:layout_marginTop="9dp"
android:layout_marginEnd="-3dp"
android:layout_marginRight="-3dp"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
android:textColorHint="#ffff299f" />
[/code]
4.png

5) <Button> คือการสร้างปุ่ม Login
[code]<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginEnd="-9dp"
android:layout_marginRight="-9dp"
android:layout_marginBottom="138dp"
android:layout_toStartOf="@+id/textview"
android:layout_toLeftOf="@+id/textview"
android:text="login" />
[/code]
5.png
6) <Button2>คือการสร้างปุ่ม cancle
[code]<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginStart="-6dp"
android:layout_marginLeft="-6dp"
android:layout_marginBottom="137dp"
android:layout_toEndOf="@+id/textview"
android:layout_toRightOf="@+id/textview"
android:text="Cancel" />

[/code]
6.png
ทั้งหมดนี้คือการขั้นตอนการออกแบบ UI บน android
[/quote]

by **phennapa** » 15/06/2020 6:39 pm

Android - ออกแบบUI หน้าlogin
หลังจากเปิดโปรเจ็ค android studio ก็ทำตามด้านล่างเลยค่ะ
แก้ไขที่ไฟล์ / activity_main.xml
เปลี่ยน androidx.constraintlayout.widget.ConstraintLayout เป็น RelativeLayout

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayoutxmlns: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">

</androidx.constraintlayout.widget.ConstraintLayout>

ตามโค้ดด้านล่างนี้คือเปลี่ยน RelativeLayout แล้ว

Code: Select all

<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">


</RelativeLayout>

ขั้นตอนต่อไปคือ ออกแบบหน้าUI Login
1) ImageView ใส่รูปตามที่กำหนด ชื่อไฟล์รูป abc

Code: Select all

<ImageView
    android:id="@+id/imageView"
    android:layout_width="153dp"
    android:layout_height="139dp"
    android:layout_alignParentRight="true"
    android:layout_alignParentBottom="true"
    android:layout_marginRight="121dp"
    android:layout_marginBottom="522dp"
    android:src="@drawable/abc" /> //ไฟล์รูปชื่อ abc

: 1.png (6.99 KiB) Viewed 429 times

2) กำหนดTextView .ใส่ชื่อหัวข้อ “Login”

Code: Select all

<TextView
    android:id="@+id/textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="209dp"
    android:text="Login"
    android:textSize="35dp" />

: 3.png (7.11 KiB) Viewed 429 times

3) <EditText> สร้างช่องใส่ Name

Code: Select all

<EditText
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_centerInParent="true"
        android:layout_marginStart="-3dp"
        android:layout_marginLeft="-3dp"
        android:layout_marginTop="179dp"
        android:layout_marginEnd="3dp"
        android:layout_marginRight="3dp"
        android:focusable="true"
        android:hint="Enter Name"
        android:textColorHighlight="#ff7eff15"
        android:textColorHint="#ffff25e6" />

: 2.png (7.14 KiB) Viewed 429 times

4) editText2 สร้างช่องใส่ Password

Code: Select all

 <EditText
        android:id="@+id/editText2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editText"
        android:layout_alignEnd="@+id/editText"
        android:layout_alignRight="@+id/editText"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_marginStart="-3dp"
        android:layout_marginLeft="-3dp"
        android:layout_marginTop="9dp"
        android:layout_marginEnd="-3dp"
        android:layout_marginRight="-3dp"
        android:ems="10"
        android:hint="Password"
        android:inputType="textPassword"
        android:textColorHint="#ffff299f" />

: 4.png (7.11 KiB) Viewed 429 times

5) <Button> คือการสร้างปุ่ม Login

Code: Select all

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginEnd="-9dp"
    android:layout_marginRight="-9dp"
    android:layout_marginBottom="138dp"
    android:layout_toStartOf="@+id/textview"
    android:layout_toLeftOf="@+id/textview"
    android:text="login" />

: 6.png (7.08 KiB) Viewed 429 times

6) <Button2>คือการสร้างปุ่ม cancle

Code: Select all

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginStart="-6dp"
    android:layout_marginLeft="-6dp"
    android:layout_marginBottom="137dp"
    android:layout_toEndOf="@+id/textview"
    android:layout_toRightOf="@+id/textview"
    android:text="Cancel" />

: 5.png (7.08 KiB) Viewed 429 times

ทั้งหมดนี้คือการขั้นตอนการออกแบบ UI บน android

เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

Android - การออกแบบUI หน้าlogin พื้นฐาน

Post a reply

Expand view Topic review: Android - การออกแบบUI หน้าlogin พื้นฐาน

Re: Android - การออกแบบUI หน้าlogin พื้นฐาน

Android - การออกแบบUI หน้าlogin พื้นฐาน