●RelativeLayout實作範例(一):align練習(一)

1.PNG

 

程式碼:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_red_light"
    android:padding="16dp">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:scaleType="center"
        android:src="@drawable/sasuke"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="New message!"
        android:gravity="center"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:textSize="35sp"
        android:textColor="@android:color/white"
        android:background="#009668"/>

</RelativeLayout>

 

●RelativeLayout實作範例(二):align練習(二)

2.PNG

 

程式碼:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="左上"
    android:textSize="34sp"
    android:background="@android:color/holo_red_light"
    android:textColor="@android:color/white"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"    />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="右上"
        android:textSize="34sp"
        android:background="@android:color/holo_red_light"
        android:textColor="@android:color/white"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"    />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="左下"
        android:textSize="34sp"
        android:background="@android:color/holo_red_light"
        android:textColor="@android:color/white"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"    />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="右下"
        android:textSize="34sp"
        android:background="@android:color/holo_red_light"
        android:textColor="@android:color/white"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"    />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="左中"
        android:textSize="34sp"
        android:background="@android:color/holo_red_light"
        android:textColor="@android:color/white"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"    />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="下中"
        android:textSize="34sp"
        android:background="@android:color/holo_red_light"
        android:textColor="@android:color/white"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"    />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="上中"
        android:textSize="34sp"
        android:background="@android:color/holo_red_light"
        android:textColor="@android:color/white"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"    />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="中央"
        android:textSize="34sp"
        android:background="@android:color/holo_red_light"
        android:textColor="@android:color/white"
        android:layout_centerInParent="true"
            />
</RelativeLayout>

 

●RelativeLayout實作範例(三):toRightof、toLeftof練習

3.PNG

 

程式碼:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    >
    <TextView
        android:id="@+id/tom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_purple"
        android:layout_centerHorizontal="true"
        android:text="TOM"
        android:padding="16dp"
        android:textColor="@android:color/white"
        android:textSize="25sp"/>
    <TextView
        android:id="@+id/kevin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="16dp"
        android:background="@android:color/holo_purple"
        android:text="Kevin"
        android:layout_toLeftOf="@id/tom"
        android:padding="16dp"
        android:textColor="@android:color/white"
        android:textSize="25sp"/>
    <TextView
        android:id="@+id/john"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_purple"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@id/tom"
        android:layout_marginLeft="16dp"
        android:text="JOHN"
        android:padding="16dp"
        android:textColor="@android:color/white"
        android:textSize="25sp"/>
    <TextView
        android:id="@+id/amy"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_blue_dark"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="AMY"
        android:padding="16dp"
        android:textColor="@android:color/white"
        android:textSize="25sp"/>
    <TextView
        android:id="@+id/Jimmy"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_blue_dark"
        android:layout_marginBottom="16dp"
        android:layout_alignParentRight="true"
        android:layout_above="@id/amy"
        android:text="JIMMY"
        android:padding="16dp"
        android:textColor="@android:color/white"
        android:textSize="25sp"/>
    <TextView
        android:id="@+id/steve"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_blue_dark"
        android:layout_marginBottom="16dp"
        android:layout_alignParentRight="true"
        android:layout_above="@id/Jimmy"
        android:text="STEVE"
        android:padding="16dp"
        android:textColor="@android:color/white"
        android:textSize="25sp"/>
    <TextView
        android:id="@+id/linda"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_orange_dark"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:text="LINDA"
        android:padding="16dp"
        android:textColor="@android:color/white"
        android:textSize="25sp"/>
    <TextView
        android:id="@+id/maraia"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_orange_dark"
        android:layout_alignParentLeft="true"
        android:layout_above="@id/linda"
        android:text="MARIA"
        android:padding="16dp"
        android:layout_marginBottom="16dp"
        android:textColor="@android:color/white"
        android:textSize="25sp"/>
    <TextView
        android:id="@+id/coco"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_orange_dark"
        android:layout_alignParentBottom="true"
        android:layout_toRightOf="@id/linda"
        android:text="COCO"
        android:padding="16dp"
        android:layout_marginLeft="16dp"
        android:textColor="@android:color/white"
        android:textSize="25sp"/>
</RelativeLayout>

 

●RelativeLayout實作範例(四):多層layout練習(ㄧ)--RelativeLayout包LinearLayout

4.PNG

 

程式碼:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_red_light">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_centerInParent="true">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/kakashi"
            android:layout_alignParentTop="true"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="旗木卡卡西"
            android:layout_gravity="center"
            android:textColor="@android:color/white"
            android:background="#009668"
            android:textSize="50sp"/>
    </LinearLayout>

</RelativeLayout>

 

●RelativeLayout實作範例(五):多層layout練習(二)--RelativeLayout包LinearLayout

5.PNG

 

程式碼:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentTop="true"
        android:background="@android:color/holo_red_light"
        android:padding="16dp">
        <ImageView
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:src="@drawable/sasuke"
            android:layout_marginRight="16dp"
            android:scaleType="centerCrop"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:layout_height="90dp"
            android:text="佐助"
            android:gravity="center"
            android:background="#009668"
            android:paddingLeft="60dp"
            android:paddingRight="60dp"
            android:textSize="40sp"
            android:textColor="@android:color/white"/>
    </LinearLayout>
</RelativeLayout>

 

●RelativeLayout實作範例(六):多層layout練習(三)--RelativeLayout包RelativeLayout

6.PNG

 

程式碼:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
   <RelativeLayout
       android:background="@android:color/holo_red_light"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:padding="16dp">
       <ImageView
           android:id="@+id/pic"
           android:layout_width="130dp"
           android:layout_height="130dp"
           android:src="@drawable/figure"/>
       <TextView
           android:id="@+id/text1"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="火影忍者疾風傳"
           android:layout_toRightOf="@id/pic"
           android:layout_marginLeft="16dp"
           android:padding="15dp"
           android:textSize="25sp"
           android:textColor="@android:color/white"
           android:background="#009668"/>
       <TextView
           android:id="@+id/text2"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="再一次通靈之術"
           android:layout_toRightOf="@id/pic"
           android:padding="15dp"
           android:layout_marginLeft="16dp"
           android:layout_marginTop="10dp"
           android:layout_below="@id/text1"
           android:textSize="25sp"
           android:textColor="@android:color/white"
           android:background="#009668"/>


   </RelativeLayout>
</RelativeLayout>

 

*程式參考(gitHub):layout實作練習

 

arrow
arrow
    創作者介紹
    創作者 muchone 的頭像
    muchone

    簡單。生活。享受

    muchone 發表在 痞客邦 留言(0) 人氣()