Android UI開發(2)


線性佈局的使用


 

利用所學的UI開發方面的知識完成如下界面:






打開AndroidStudio開發環境,建立LinearLayout文件,其圖一界面代碼如下:





<?xml version="1.0"

encoding="utf-8"
?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:padding="20dp"

    android:orientation="vertical"


>

    <Button

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="#000"

        android:layout_weight="1"

        
/>

    <Button

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="#f00"

        android:layout_weight="1"

        android:layout_marginTop="20dp"


/>

    <Button

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="#ff0"

        android:layout_weight="1"

        android:layout_marginTop="20dp"

        
/>

    <Button

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="#f0f"

        android:layout_weight="1"

        android:layout_marginTop="20dp"

        
/>

    <Button

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="#f0f1"

        android:layout_weight="1"

        android:layout_marginTop="20dp"

        
/>


</LinearLayout>


其中


android:padding="20dp"含義是所建控件相對於佈局上下左右均存在20dp的空間


android:layout_wight="1"運用權重使控件符合佈局


android:layout_marginTop="20dp"表示離某元素上邊緣的距離


android:background="#f0f1"界面中的元素的顏色屬性,通過修改"#"後邊的數值改變顏色的配色方案


最後呈現出的界面圖如下:








現在進行圖二所示界面的編輯,同樣的打開AndroidStudio開發環境,建立LinearLayout文件,其代碼如下:



<?xml version="1.0"

encoding="utf-8"
?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    
>

    <EditText

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="To"

        
/>


<EditText

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="Subject"

        
/>


<TextView

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="Message"

        android:layout_weight="1"

        
/>


<Button

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="Send"

        android:layout_gravity="bottom"

        android:gravity="right"

        
/>


</LinearLayout>



同樣的這其中也運用權重使控件符合佈局,能適應不同尺寸的界面。



其界面最終呈現效果如下:







這樣我們就按照要求完成瞭線性佈局的簡單應用,相信在以後的學習過程中 會在更多的方面用到線性佈局方面的知識。










0 個評論

要回覆文章請先登錄註冊