Khmer Angkor Academy | សិក្សាបង្កើតគេហទំព័រជាភាសាខ្មែរ

Android Layouts - រចនាសម្ព័ន្ធ UI

Layout គឺជា ViewGroup ដែលកំណត់រចនាសម្ព័ន្ធ និង arrangement នៃ child Views នៅក្នុង UI។ វាដូចជា "container" ដែល holds និង positions UI elements។

🌳 View Hierarchy (ព្រឹក្សមើល)

Android UI ត្រូវបានរចនាជា tree structure ដែលមាន parent-child relationships:

┌─────────────────────────────────────────┐
│         ViewGroup (Root Layout)         │  ← Parent
├─────────────────────────────────────────┤
│  ┌──────────────┐  ┌──────────────┐    │
│  │LinearLayout  │  │RelativeLayout│    │  ← Children (ViewGroups)
│  ├──────────────┤  ├──────────────┤    │
│  │ ┌──────────┐ │  │ ┌──────────┐ │    │
│  │ │TextView  │ │  │ │Button    │ │    │  ← Grandchildren (Views)
│  │ ├──────────┤ │  │ ├──────────┤ │    │
│  │ │EditText  │ │  │ │ImageView │ │    │
│  │ └──────────┘ │  │ └──────────┘ │    │
│  └──────────────┘  └──────────────┘    │
└─────────────────────────────────────────┘

💡 Important: Deeper view hierarchies = Slower rendering! ព្យាយាម flatten hierarchy ដើម្បី performance ល្អ។

📐 Layout Types - Detailed Comparison

Layout	ពិពណ៌នា	Use When	Performance
LinearLayout	រៀប views ជា horizontal/vertical line	Simple forms, lists	✅ Good (flat hierarchy)
RelativeLayout	Position relative to parent/siblings	Complex positioning	⚠️ Moderate (2 measure passes)
ConstraintLayout	Constraints-based flexible layout	Complex UIs, responsive design	✅ Best (flat + optimized)
FrameLayout	Stack views on top of each other	Single child, overlays	✅ Excellent (simple)
GridLayout	Grid of rows and columns	Calculator, image gallery	⚠️ Moderate
CoordinatorLayout	Complex scrolling behaviors	Collapsing toolbars, FAB	⚠️ Depends on complexity

🔧 Layout Inflation Process

Layout inflation គឺជា process ដែល Android converts XML layout file ទៅជា View objects:

[1] XML Layout File (activity_main.xml)
         │
         ▼
[2] LayoutInflater.inflate()
         │
         ▼
[3] Parse XML (SAX parser)
         │
         ▼
[4] Create View Objects (using reflection)
         │
         ├─► Create LinearLayout object
         ├─► Create TextView object
         ├─► Create Button object
         └─► Set attributes (width, height, text, etc.)
         │
         ▼
[5] Build View Hierarchy (parent-child relationships)
         │
         ▼
[6] Return Root View
         │
         ▼
[7] setContentView(view) - Display on screen

⚠️ Performance Tip: Layout inflation គឺ expensive! Reuse views (ViewHolder pattern), use merge/include tags, avoid nested layouts។

📏 Layout Measurement & Drawing Process

Android uses 2-pass process to measure and layout views:

Phase	Process	Description
1️⃣ Measure Pass	`onMeasure()`	Parent asks child: "How big do you want to be?" Child calculates size based on content + constraints
2️⃣ Layout Pass	`onLayout()`	Parent tells child: "Here's your size and position" Child positions itself within parent
3️⃣ Draw Pass	`onDraw()`	View draws itself on Canvas Background → Content → Children → Decorations

📊 Layout Measurement Specs

Mode	Khmer	Meaning
`match_parent`	ធំដូច parent	Child takes all available space from parent
`wrap_content`	ធំដូច content	Child size = content size (text, image)
`exact size (dp)`	ទំហំជាក់លាក់	Fixed size: 100dp, 200dp, etc.

Java Code

Click "Run" to execute the Java code