Thiết kế giao diện Android - App Calculation Android Studio

Đối với lập trình trên thiết bị di động thiết kế giao diện quá một vấn đề cực kỳ quan trọng. Bởi App của bạn có được người dùng ưa thích không là 1 phần lớn do giao diện của nó. Đặc biệt là đối với lập trình trên android thì thiết kế giao diện Android là một vấn đề cực kỳ khó khăn bởi vì các thiết bị sử dụng android có rất nhiều chủng loại, nhiều kích cỡ màng hình khác nhau.
Vậy làm sao để thiết kế giao diện Android 1 cách đẹp nhất. Hôm nay StudyCoding.Net sẽ hướng dẫn các bạn chương trình "dễ nhất mọi ngôn ngữ" Calculation 





PHP:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    
xmlns:tools="http://schemas.android.com/tools"
    
android:layout_width="match_parent"
    
android:layout_height="match_parent"
    
android:background="#FF000000"
    
tools:context=".MainActivity" >

    <!-- 
dòng 1  Nháºp -->

    <
TextView
        android
:id="@+id/edt_output"
        
android:layout_width="wrap_content"
        
android:layout_height="wrap_content"
        
android:ems="10"
        
android:gravity="right"
        
android:textSize="15sp" />

    <
TableRow
        android
:layout_width="fill_parent"
        
android:layout_height="60sp"
        
android:background="#FF000000" >

        <
EditText
            android
:id="@+id/edt"
            
android:layout_width="match_parent"
            
android:layout_height="60sp"
            
android:layout_weight="0.9"
            
android:gravity="right"
            
android:inputType="number"
            
android:text="9x8"
            
android:textColor="#FFFFFFFF"
            
android:textSize="35sp" >

            <
requestFocus />
        </
EditText>
    </
TableRow>
    <!-- 
dòng 2 Space vs DELETE -->

    <
TableRow
        android
:layout_width="fill_parent"
        
android:layout_height="60sp"
        
android:background="#FF000000" >

        <
Button
            android
:id="@+id/btnSpace"
            
android:layout_width="match_parent"
            
android:layout_height="50sp"
            
android:layout_marginLeft="2sp"
            
android:layout_weight="0.6"
            
android:background="#FF252222" >
        </
Button>

        <
Button
            android
:id="@+id/btnDelete"
            
android:layout_width="match_parent"
            
android:layout_height="50sp"
            
android:layout_marginLeft="3sp"
            
android:layout_marginRight="2sp"
            
android:layout_weight="0.3"
            
android:background="#FF252222"
            
android:onClick="btnNumberClick"
            
android:text="DELETE"
            
android:textColor="#FFFFFFFF" >
        </
Button>
    </
TableRow>

    <
TableLayout
        android
:layout_width="fill_parent"
        
android:layout_height="fill_parent"
        
android:layout_marginRight="3sp"
        
android:layout_marginTop="3sp" >

        <!-- 
789 -->

        <
TableRow
            android
:id="@+id/tableRow1"
            
android:layout_width="wrap_content"
            
android:layout_height="wrap_content"
            
android:layout_weight="0.250" >

            <
Button
                android
:id="@+id/btnNumber7"
                
android:layout_width="fill_parent"
                
android:layout_height="fill_parent"
                
android:layout_marginLeft="2sp"
                
android:layout_weight="0.25"
                
android:background="#FF746C6C"
                
android:onClick="btnNumberClick"
                
android:text="7"
                
android:textColor="#FFFFFFFF"
                
android:textSize="60sp" >
            </
Button>

            <
Button
                android
:id="@+id/btnNumber8"
                
android:layout_width="fill_parent"
                
android:layout_height="fill_parent"
                
android:layout_marginLeft="2sp"
                
android:layout_weight="0.25"
                
android:background="#FF746C6C"
                
android:onClick="btnNumberClick"
                
android:text="8"
                
android:textColor="#FFFFFFFF"
                
android:textSize="60sp" >
            </
Button>

            <
Button
                android
:id="@+id/btnNumber9"
                
android:layout_width="fill_parent"
                
android:layout_height="fill_parent"
                
android:layout_marginLeft="2sp"
                
android:layout_weight="0.25"
                
android:background="#FF746C6C"
                
android:onClick="btnNumberClick"
                
android:text="9"
                
android:textColor="#FFFFFFFF"
                
android:textSize="60sp" >
            </
Button>

            <
Button
                android
:id="@+id/btnChia"
                
android:layout_width="fill_parent"
                
android:layout_height="fill_parent"
                
android:layout_marginLeft="2sp"
                
android:layout_weight="0.25"
                
android:background="#FF252222"
                
android:onClick="btnNumberClick"
                
android:text="/"
                
android:textColor="#FFFFFFFF"
                
android:textSize="40sp" >
            </
Button>
        </
TableRow>
        <!-- 
456 -->

        <
TableRow
            android
:id="@+id/tableRow2"
            
android:layout_width="wrap_content"
            
android:layout_height="wrap_content"
            
android:layout_marginTop="2sp"
            
android:layout_weight="0.250" >

            <
Button
                android
:id="@+id/btnNumber4"
                
android:layout_width="fill_parent"
                
android:layout_height="fill_parent"
                
android:layout_marginLeft="2sp"
                
android:layout_weight="0.25"
                
android:background="#FF746C6C"
                
android:onClick="btnNumberClick"
                
android:text="4"
                
android:textColor="#FFFFFFFF"
                
android:textSize="60sp" >
            </
Button>

            <
Button
                android
:id="@+id/btnNumber5"
                
android:layout_width="fill_parent"
                
android:layout_height="fill_parent"
                
android:layout_marginLeft="2sp"
                
android:layout_weight="0.25"
                
android:background="#FF746C6C"
                
android:onClick="btnNumberClick"
                
android:text="5"
                
android:textColor="#FFFFFFFF"
                
android:textSize="60sp" >
            </
Button>

            <
Button
                android
:id="@+id/btnNumber6"
                
android:layout_width="fill_parent"
                
android:layout_height="fill_parent"
                
android:layout_marginLeft="2sp"
                
android:layout_weight="0.25"
                
android:background="#FF746C6C"
                
android:onClick="btnNumberClick"
                
android:text="6"
                
android:textColor="#FFFFFFFF"
                
android:textSize="60sp" >
            </
Button>

            <
Button
                android
:id="@+id/btnNhan"
                
android:layout_width="fill_parent"
                
android:layout_height="fill_parent"
                
android:layout_marginLeft="2sp"
                
android:layout_weight="0.25"
                
android:background="#FF252222"
                
android:onClick="btnNumberClick"
                
android:text="x"
                
android:textColor="#FFFFFFFF"
                
android:textSize="40sp" >
            </
Button>
        </
TableRow>
        <!-- 
123 -->

        <
TableRow
            android
:id="@+id/tableRow3"
            
android:layout_width="wrap_content"
            
android:layout_height="wrap_content"
            
android:layout_marginTop="2sp"
            
android:layout_weight="0.250" >

            <
Button
                android
:id="@+id/btnNumber1"
                
android:layout_width="fill_parent"
                
android:layout_height="fill_parent"
                
android:layout_marginLeft="2sp"
                
android:layout_weight="0.25"
                
android:background="#FF746C6C"
                
android:onClick="btnNumberClick"
                
android:text="1"
                
android:textColor="#FFFFFFFF"
                
android:textSize="60sp" >
            </
Button>

            <
Button
                android
:id="@+id/btnNumber2"
                
android:layout_width="fill_parent"
                
android:layout_height="fill_parent"
                
android:layout_marginLeft="2sp"
                
android:layout_weight="0.25"
                
android:background="#FF746C6C"
                
android:onClick="btnNumberClick"
                
android:text="2"
                
android:textColor="#FFFFFFFF"
                
android:textSize="60sp" >
            </
Button>

            <
Button
                android
:id="@+id/btnNumber3"
                
android:layout_width="fill_parent"
                
android:layout_height="fill_parent"
                
android:layout_marginLeft="2sp"
                
android:layout_weight="0.25"
                
android:background="#FF746C6C"
                
android:onClick="btnNumberClick"
                
android:text="3"
                
android:textColor="#FFFFFFFF"
                
android:textSize="60sp" >
            </
Button>

            <
Button
                android
:id="@+id/btnTru"
                
android:layout_width="fill_parent"
                
android:layout_height="fill_parent"
                
android:layout_marginLeft="2sp"
                
android:layout_weight="0.25"
                
android:background="#FF252222"
                
android:onClick="btnNumberClick"
                
android:text="-"
                
android:textColor="#FFFFFFFF"
                
android:textSize="40sp" >
            </
Button>
        </
TableRow>
        <!-- . 
= -->

        <
TableRow
            android
:id="@+id/tableRow4"
            
android:layout_width="wrap_content"
            
android:layout_height="wrap_content"
            
android:layout_marginBottom="2sp"
            
android:layout_marginTop="2sp"
            
android:layout_weight="0.250" >

            <
Button
                android
:id="@+id/btnCham"
                
android:layout_width="fill_parent"
                
android:layout_height="fill_parent"
                
android:layout_marginLeft="2sp"
                
android:layout_weight="0.25"
                
android:background="#FF746C6C"
                
android:onClick="btnNumberClick"
                
android:text="."
                
android:textColor="#FFFFFFFF"
                
android:textSize="60sp" >
            </
Button>

            <
Button
                android
:id="@+id/btnNumber0"
                
android:layout_width="fill_parent"
                
android:layout_height="fill_parent"
                
android:layout_marginLeft="2sp"
                
android:layout_weight="0.25"
                
android:background="#FF746C6C"
                
android:onClick="btnNumberClick"
                
android:text="0"
                
android:textColor="#FFFFFFFF"
                
android:textSize="60sp" >
            </
Button>

            <
Button
                android
:id="@+id/btnBang"
                
android:layout_width="fill_parent"
                
android:layout_height="fill_parent"
                
android:layout_marginLeft="2sp"
                
android:layout_weight="0.25"
                
android:background="#FF252222"
                
android:onClick="btnNumberClick"
                
android:text="="
                
android:textColor="#FFFFFFFF"
                
android:textSize="60sp" >
            </
Button>

            <
Button
                android
:id="@+id/btnCong"
                
android:layout_width="fill_parent"
                
android:layout_height="fill_parent"
                
android:layout_marginLeft="2sp"
                
android:layout_weight="0.25"
                
android:background="#FF252222"
                
android:onClick="btnNumberClick"
                
android:text="+"
                
android:textColor="#FFFFFFFF"
                
android:textSize="40sp" >
            </
Button>
        </
TableRow>
    </
TableLayout>

</
TableLayout>

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF000000"

tools:context=".MainActivity" >

<!-- dòng 1 Nhập -->

<TableRow
android:layout_width="fill_parent"
android:layout_height="60sp"
android:background="#FF000000" >

<EditText
android:id="@+id/edt_Output"
android:layout_width="match_parent"
android:layout_height="60sp"
android:layout_weight="0.9"
android:inputType="number"
android:text="9x8"
android:textColor="#FFFFFFFF"
android:textSize="35sp" >

<requestFocus />
</EditText>
</TableRow>
<!-- dòng 2 Space vs DELETE -->

<TableRow
android:layout_width="fill_parent"
android:layout_height="60sp"
android:background="#FF000000" >

<Button
android:id="@+id/btnSpace"
android:layout_width="match_parent"
android:layout_height="50sp"
android:layout_marginLeft="2sp"
android:layout_weight="0.6"
android:background="#FF252222" >
</Button>

<Button
android:id="@+id/btnDelete"
android:layout_width="match_parent"
android:layout_height="50sp"
android:layout_marginLeft="3sp"
android:layout_marginRight="2sp"
android:layout_weight="0.3"
android:background="#FF252222"
android:onClick="btnClick"
android:text="DELETE"
android:textColor="#FFFFFFFF" >
</Button>
</TableRow>

<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginRight="3sp"
android:layout_marginTop="3sp" >

<!-- 789 -->

<TableRow
android:id="@+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.250" >

<Button
android:id="@+id/btnNumber7"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="2sp"
android:layout_weight="0.25"
android:background="#FF746C6C"
android:text="7"
android:textColor="#FFFFFFFF"
android:textSize="60sp" >
</Button>

<Button
android:id="@+id/btnNumber8"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="2sp"
android:layout_weight="0.25"
android:background="#FF746C6C"
android:text="8"
android:textColor="#FFFFFFFF"
android:textSize="60sp" >
</Button>

<Button
android:id="@+id/btnNumber9"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="2sp"
android:layout_weight="0.25"
android:background="#FF746C6C"
android:text="9"
android:textColor="#FFFFFFFF"
android:textSize="60sp" >
</Button>

<Button
android:id="@+id/btnChia"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="2sp"
android:layout_weight="0.25"
android:background="#FF252222"
android:text="/"
android:textColor="#FFFFFFFF"
android:textSize="40sp" >
</Button>
</TableRow>
<!-- 456 -->

<TableRow
android:id="@+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2sp"
android:layout_weight="0.250" >

<Button
android:id="@+id/btnNumber4"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="2sp"
android:layout_weight="0.25"
android:background="#FF746C6C"
android:text="4"
android:textColor="#FFFFFFFF"
android:textSize="60sp" >
</Button>

<Button
android:id="@+id/btnNumber5"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="2sp"
android:layout_weight="0.25"
android:background="#FF746C6C"
android:text="5"
android:textColor="#FFFFFFFF"
android:textSize="60sp" >
</Button>

<Button
android:id="@+id/btnNumber6"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="2sp"
android:layout_weight="0.25"
android:background="#FF746C6C"
android:text="6"
android:textColor="#FFFFFFFF"
android:textSize="60sp" >
</Button>

<Button
android:id="@+id/btnNhan"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="2sp"
android:layout_weight="0.25"
android:background="#FF252222"
android:text="×"
android:textColor="#FFFFFFFF"
android:textSize="40sp" >
</Button>
</TableRow>
<!-- 123 -->

<TableRow
android:id="@+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2sp"
android:layout_weight="0.250" >

<Button
android:id="@+id/btnNumber1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="2sp"
android:layout_weight="0.25"
android:background="#FF746C6C"
android:text="1"
android:textColor="#FFFFFFFF"
android:textSize="60sp" >
</Button>

<Button
android:id="@+id/btnNumber2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="2sp"
android:layout_weight="0.25"
android:background="#FF746C6C"
android:text="2"
android:textColor="#FFFFFFFF"
android:textSize="60sp" >
</Button>

<Button
android:id="@+id/btnNumber3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="2sp"
android:layout_weight="0.25"
android:background="#FF746C6C"
android:text="3"
android:textColor="#FFFFFFFF"
android:textSize="60sp" >
</Button>

<Button
android:id="@+id/btnTru"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="2sp"
android:layout_weight="0.25"
android:background="#FF252222"
android:text="-"
android:textColor="#FFFFFFFF"
android:textSize="40sp" >
</Button>
</TableRow>
<!-- . 0 = -->

<TableRow
android:id="@+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2sp"
android:layout_marginTop="2sp"
android:layout_weight="0.250" >

<Button
android:id="@+id/btnCham"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="2sp"
android:layout_weight="0.25"
android:background="#FF746C6C"
android:text="."
android:textColor="#FFFFFFFF"
android:textSize="60sp" >
</Button>

<Button
android:id="@+id/btnNumber0"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="2sp"
android:layout_weight="0.25"
android:background="#FF746C6C"
android:text="0"
android:textColor="#FFFFFFFF"
android:textSize="60sp" >
</Button>

<Button
android:id="@+id/btnBang"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="2sp"
android:layout_weight="0.25"
android:background="#FF252222"
android:text="="
android:textColor="#FFFFFFFF"
android:textSize="60sp" >
</Button>

<Button
android:id="@+id/btnCong"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="2sp"
android:layout_weight="0.25"
android:background="#FF252222"
android:text="+"
android:textColor="#FFFFFFFF"
android:textSize="40sp" >
</Button>
</TableRow>
</TableLayout>

</TableLayout>

Không có nhận xét nào:

Đăng nhận xét