簡單的Android介面建立

weixin_33936401發表於2017-03-01
Android

線性佈局

線性佈局：LinearLayout
控制元件特性：
LinearLayout是一種ViewGroup，在其內部的所有控制元件會呈線性排列，可以是水平的，也可以是垂直的。
繼承結構：
View
-- ViewGroup
-- -- LinearLayout
核心屬性：

  • android:orientation -> 設定線性佈局的排列方向，當取值為horizontal時表示水平方向排列，當取值為vertical時表示垂直方向排列
    子級控制元件的屬性：
  • android:layout_gravity -> 子級控制元件的對齊方式，取值可以是：left、right、center、top、bottom，具體哪些值有效，或者呈現什麼樣對齊方式，還得取決於父級佈局的佈局方向
  • android:layout_weight -> 子級控制元件將佔據剩餘的寬度/高度的比重，取值為數值，小結為：以水平方向的線性為例，各控制元件的寬度均設為0dp，則比重表示控制元件的實際寬度的正比。<

相對佈局

相對佈局：RelativeLayout
控制元件特性：
在RelativeLayout下的每個子級控制元件都會以父級控制元件或同級別的其它控制元件作為參考，從而決定自身的尺寸和位置。
在RelativeLayout下的每個子級控制元件預設顯示在左上角，根據程式碼順序，後續出現的控制元件會覆蓋此前出現的控制元件。
繼承結構：
View
-- ViewGroup
-- -- RelativeLayout
核心屬性：
（無）
子級控制元件屬性：

  • android:layout_alignParentTop -> 與父級控制元件的頂部對齊，取值為true或false，通常，如果確定需要與父級控制元件的頂部對齊，則設計該屬性並取值為true，如果不需要，則根本就不要設計這個屬性
  • android:layout_alignParentBottom -> 與父級控制元件的底部對齊，取值同上
  • android:layout_alignParentLeft -> 與父級控制元件的左側對齊，取值同上
  • android:layout_alignParentRight -> 與父級控制元件的需右側對齊，取值同上
  • android:layout_centerHorizontal -> 以父級控制元件的寬度作為參考，將自身在水平方向上居中，取值同上
  • android:layout_centerVertical -> 以父級控制元件的高度作為參考，將自身在垂直方向上居中，取值同上
  • android:layout_centerInParent -> 將自身在父級控制元件中完全居中，取值同上
  • android:layout_below -> 將自身置於同級別的某控制元件的下方，取值為被參考的控制元件的id
  • android:layout_above -> 將自身置於同級別的某控制元件的上方，取值同上
  • android:layout_toRightOf -> 將自身置於同級別的某控制元件的右側，取值同上
  • android:layout_toLeftOf -> 將自身置於同級別的某控制元件的左側，取值同上
  • android:layout_alignTop -> 將自身與同級別的某控制元件的頂部對齊，取值同上
  • android:layout_alignBottom -> 將自身與同級別的某控制元件的底部對齊，取值同上
  • android:layout_alignLeft -> 將自身與同級別的某控制元件的左側對齊，取值同上
  • android:layout_alignRight -> 將自身與同級別的某控制元件的右側對齊，取值同上<

文字顯示控制元件

文字顯示控制元件：TextView
控制元件特性：
用於顯示文字（字串），所有能夠顯示文字的控制元件都是TextView的子孫類。
繼承結構：
View
-- TextView
核心屬性：

  • android:text -> 需要顯示的文字
  • android:textColor -> 文字顏色，取值為RGB顏色或ARGB顏色
  • android:textSize -> 文字尺寸，取值為以sp為單位的資料
  • android:textStyle -> 文字樣式，取值為normal表示正常，取值為bold表示加粗，取值為italic表示傾斜，如果需要同時加粗和傾斜，則2個屬性值並存，並且使用豎槓（|）進行分隔
  • android:gravity -> 文字在控制元件內部的對齊方式，僅當控制元件的尺寸大於文字所需尺寸時有效，取值可參考android:layout_gravity屬性，並且，這些屬性值也可以兩兩組合
  • android:singleLine -> 是否單行顯示，用於文字超出1行時確定顯示方式，取值為布林值
  • android:lines -> 最多顯示多少行，取值為數值<

文字輸入控制元件

文字輸入控制元件：EditText
控制元件特性：
使得使用者在介面上輸入內容！
繼承結構：
View
-- TextView
-- -- EditText<

按鈕控制元件

按鈕控制元件：Button
控制元件特性：
用於被點選！
繼承結構：
View
-- TextView
-- -- Button<

![Upload QQ截圖20170301205058.png failed. Please try again.]

<RelativeLayout 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="@drawable/player_bg_beyond"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText,ContentDescription" >

    <RelativeLayout
        android:id="@+id/rl_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <ImageButton
            android:id="@+id/ib_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:src="@drawable/player_ic_back" />

        <ImageButton
            android:id="@+id/ib_help"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:background="@null"
            android:src="@drawable/player_ic_help" />

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/ib_help"
            android:layout_toRightOf="@+id/ib_back"
            android:gravity="center"
            android:singleLine="true"
            android:text="海闊天空"
            android:textColor="#ffffff"
            android:textSize="18sp"
            android:textStyle="italic|bold" />

        <TextView
            android:id="@+id/tv_author"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv_title"
            android:layout_toLeftOf="@+id/ib_help"
            android:layout_toRightOf="@+id/ib_back"
            android:gravity="center"
            android:singleLine="true"
            android:text="Beyond"
            android:textColor="#ffffff"
            android:textSize="14sp" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_lrc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/rl_current" >

        <TextView
            android:id="@+id/tv_lrc2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv_lrc1"
            android:gravity="right"
            android:paddingBottom="5dp"
            android:paddingTop="5dp"
            android:text="那會怕有一天只你共我"
            android:textColor="#cccccc"
            android:textSize="14sp" />

        <TextView
            android:id="@+id/tv_lrc1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="5dp"
            android:paddingTop="5dp"
            android:text="背棄了理想，誰人都可以"
            android:textColor="#ffffff" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_current"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="10dp"
        android:paddingBottom="8dp"
        android:layout_above="@+id/rl_play" >

        <ImageView
            android:id="@+id/iv_progress"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="3dp"
            android:src="@drawable/player_ic_progress" />

        <TextView
            android:id="@+id/tv_current"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/iv_progress"
            android:textColor="#ffffff"
            android:text="3:52" />

        <TextView
            android:id="@+id/tv_duration"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/iv_progress"
            android:layout_alignParentRight="true"
            android:textColor="#ffffff"
            android:text="5:37" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_play"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" >

        <ImageButton
            android:id="@+id/ib_shuffle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:layout_centerVertical="true"
            android:src="@drawable/player_ic_shuffle" />

        <ImageButton
            android:id="@+id/ib_prev"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:layout_toLeftOf="@+id/ib_play"
            android:layout_centerVertical="true"
            android:src="@drawable/player_ic_prev" />

        <ImageButton
            android:id="@+id/ib_play"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_centerInParent="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:src="@drawable/player_ic_play" />

        <ImageButton
            android:id="@+id/ib_next"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/ib_play"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:src="@drawable/player_ic_next" />

        <ImageButton
            android:id="@+id/ib_fav"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:layout_centerVertical="true"
            android:layout_alignParentRight="true"
            android:src="@drawable/player_ic_fav" />
    </RelativeLayout>

</RelativeLayout>

![Upload Paste_Image.png failed. Please try again.]。

相關文章