[Android]Android 元件佈局(六) ConstraintLayout UI設置(SurfaceView, TextView, ImageView, ImageButton)

本篇以ConstraintLayout 結合ImageView作為例子 :
ConstraintLayout官方連結



ImageView官方連結

import android.widget.ImageView; //引入ImageView library
private ImageView i_music = null; //宣告ImageView空物件
i_music.setImageResource(R.drawable.midea_icon_normal);設定空物件

SurfaceView
        android:id="@+id/cluster_sfv_background"
        android:layout_width="fill_parent"     //填滿父物件
        android:layout_height="fill_parent"    //填滿父物件
        app:layout_constraintLeft_toLeftOf="@id/cluster_layout_background" //以背景圖左邊界為基礎位移
        app:layout_constraintTop_toTopOf="@id/cluster_layout_background" //以背景圖上邊界為基礎位移


     android:layout_width="66dp" //圖的寬度 66
     android:layout_height="41dp" //圖的高度 41
     android:text="Button"
     app:layout_constraintLeft_toLeftOf="@id/ctlayout_comfort" //以背景圖左邊界為基礎位移
     app:layout_constraintTop_toTopOf="@id/ctlayout_comfort" //以背景圖上邊界為基礎位移
     android:layout_marginTop="100dp" //與上界的高度差 0
     android:layout_marginLeft="100dp" //與左邊界的位移差 35

ImageView
        android:id="@+id/i_music"
        android:layout_width="66dp" //圖的寬度 66
        android:layout_height="41dp" //圖的高度 41
        android:src="@drawable/midea_icon_normal"
        app:layout_constraintLeft_toLeftOf="@id/ctlayout_comfort" //以背景圖左邊界為基礎位移
        app:layout_constraintTop_toTopOf="@id/ctlayout_comfort" //以背景圖上邊界為基礎位移
        android:layout_marginTop="0dp" //與上界的高度差 0
        android:layout_marginLeft="35dp" //與左邊界的位移差 35

TextView
        android:id="@+id/temperature"            //textview id
        android:layout_width="wrap_content" //寬度以內容為基準
        android:layout_height="wrap_content" //高度以內容為基準
        android:layout_marginLeft="530dp" //與左邊界的位移差 530
        android:layout_marginTop="31dp"   //與上界的高度差       31
        android:fontFamily="@font/fine"
        android:text="18°c"                           //TextView字的內容
        android:textColor="@color/red"       //
        android:textSize="19sp"                   //字級大小19
        android:gravity="left|top"
        app:layout_constraintLeft_toLeftOf="@id/cluster_layout_background" //以背景圖左邊界為基礎位移
        app:layout_constraintTop_toTopOf="@id/cluster_layout_background" //以背景圖上邊界為基礎位移