1. 리니어
- (Linear) 선
- Orientation - 방향
- Weight - 가중치 (css flex box와 비슷한)
- weightSum
- layout_weight
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="horizontal"
android:weightSum="1"
>
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#F44436"
/>
<View
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="50dp"
android:background="#FFEB3B"
/>
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#3F51B5"
/>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical"
android:weightSum="3"
android:gravity="center"
>
<LinearLayout
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="right"
android:weightSum="3"
>
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#F44436"
/>
<View
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="50dp"
android:background="#FFEB3B"
/>
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#3F51B5"
/>
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
>
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#F44436"
/>
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#FFEB3B"
/>
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#3F51B5" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal"
android:gravity="right"
>
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#009688" />
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#4CAF50" />
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#FF9800" />
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#3F51B5" />
</LinearLayout>
</LinearLayout>
2. 레러티브
- (Relative) 관계,상대
- 뷰끼리 겹칠 수 있다.
<?xml version="1.0" encoding="utf-8"?>
<!--스플래시 화면 만들때, 정가운데에 정렬을 둘대 -->
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".RelativeLayout"
>
<View
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#FF5722"
/>
<View
android:id="@+id/blue_view"
android:layout_alignParentLeft="true"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#2196F3"
/>
<View
android:id="@+id/green_view"
android:layout_toRightOf="@+id/blue_view"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#8BC34A"
/>
</RelativeLayout>
3. 콘스트레인트
- (Constraint) 강제,앵커
- 계층이 하나다. 비교적 복잡한 구조를 한개의 뷰로 한 층으로 그릴수 있다.
- 화면전환이 이루어졌을때 그 비율을 유지한다.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ConstraintLayout"
>
<!-- 최소 3개는 잡아야함-->
<View
android:id="@+id/orange_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#FF9800"
/>
<View
android:id="@+id/blue_view"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#2196F3"
app:layout_constraintTop_toBottomOf="@+id/orange_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
/>
<!-- app:layout_constraintTop_toBottomOf
탑을 누군가의 바텀에 주겠다.
-->
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#9C27B0"
app:layout_constraintTop_toBottomOf="@+id/blue_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
로그인페이지 연습
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg"
android:orientation="vertical"
android:weightSum="1"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="140dp"
android:text="Login\nHello Android"
android:textAlignment="center"
android:textColor="#fff"
android:textSize="30dp"
android:textStyle="bold" />
<View
android:layout_weight="0.85"
android:layout_width="0dp"
android:layout_height="0dp"
/>
<!-- wrap_content 안에있는 내용물에 따라서 높이나 폭이 달라진다-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Already have an account?"
android:textColor="#fff"
android:layout_gravity="center_horizontal"
android:textSize="20dp"
android:textStyle="bold"
android:layout_marginTop="20dp"
/>
<Button
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="20dp"
android:background="@drawable/rounded_corner_white_transparent"
android:text="Login"
android:textAllCaps="false"
android:textColor="#fff"
app:backgroundTint="@null" />
<!-- textAllCaps true시 전부 대문자-->
<!-- app:backgroundTint="@null" 처리하여 배경색이 고정되지 않도록-->
<Button
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="@drawable/rounded_corner"
android:text="Create free account"
android:textAllCaps="false"
android:textColor="#fff"
app:backgroundTint="@null" />
<Button
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="20dp"
android:background="@drawable/rounded_corner_blue"
android:text="Continue with facebook"
android:textAllCaps="false"
android:textColor="#fff"
app:backgroundTint="@null" />
</LinearLayout>
<!-- theme.xml -->
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Base.Theme.LayoutPractice" parent="Theme.Material3.DayNight.NoActionBar">
<!-- Customize your light theme here. -->
<!-- <item name="colorPrimary">@color/my_light_primary</item> -->
<item name="android:statusBarColor" tools:targetApi="l">@color/white</item>
<item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
</style>
<style name="Theme.LayoutPractice" parent="Base.Theme.LayoutPractice" />
</resources>
<!-- res/drawable/... -->
<!-- rounded_corner.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#75F38B"
android:endColor="#175B91"
android:angle="45"/>
<corners android:radius="30dp" />
</shape>
<!-- rounded_corner_blue.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#409FEA" />
<corners android:radius="30dp" />
</shape>
<!-- rounded_corner_white_transparent.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#4DFFFFFF" />
<stroke
android:width="1dp"
android:color="#979797" />
<corners android:radius="30dp" />
</shape>
