2022-2023/Lab/Lab1/1.2 - Interfejs - ConstraintLayout.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "2a32fb4f-5aa7-42ff-b862-21d46a9dc164",
   "metadata": {},
   "source": [
    "## 1.2 Constraint Layout"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b957bab9-c80c-41d3-ab42-0bf2f06f529f",
   "metadata": {},
   "source": [
    "Rozpoczynamy projekt wybierając `Empty Activity`. Język nie ma znaczenia - w tym przykładzie posłużymy się tlyko `XML`. Przechodzimy do layoutu aktywności i do zakładki `Design`. Dodajmy do layoutu przycisk."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "167829ab-ff7a-4d22-8088-f697670fb2d0",
   "metadata": {},
   "source": [
    "<img src=\"https://fv9-6.failiem.lv/thumb_show.php?i=pzntkpxba&view\" width=\"300\" />"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bc8a19b6-68c2-4f10-9c01-52655bc5e6b4",
   "metadata": {},
   "source": [
    "Mamy cztery elementy które możemy zaznaczyć i przeciągnąć w kierunku dowolnej krawędzi tworząc w ten sposób ograniczenie (constraint)."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "39a3b8ab-fc44-4648-a361-d8a1d6e5e15b",
   "metadata": {},
   "source": [
    "Jeżeli dodamy ograniczenie do górnej części ekranu, pojawi się warning o niewystarczającej liczbie ograniczeń."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "617e7567-7c10-4f52-b7bd-b0c2e461164d",
   "metadata": {},
   "source": [
    "<img src=\"https://fv9-5.failiem.lv/thumb_show.php?i=b4m6r639a&view\" width=\"300\" />"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "205a9a15-187d-414a-8e6c-aa315563b17a",
   "metadata": {},
   "source": [
    "Minimalną liczbą ograniczeń są dwa - co najmniej jedno wertykalne i co najmniej jedno horyzontalne."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "551a8f86-7a16-478d-8b9b-51ca1fc3f91e",
   "metadata": {},
   "source": [
    "```xml\n",
    "    <Button\n",
    "        android:id=\"@+id/button\"\n",
    "        android:layout_width=\"wrap_content\"\n",
    "        android:layout_height=\"wrap_content\"\n",
    "        android:layout_marginStart=\"24dp\"\n",
    "        android:text=\"Button\"\n",
    "        app:layout_constraintEnd_toEndOf=\"parent\"\n",
    "        app:layout_constraintStart_toStartOf=\"parent\"\n",
    "        app:layout_constraintTop_toTopOf=\"parent\" />\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "4e133393-cc3d-42e8-a9b8-b3b37d915f95",
   "metadata": {},
   "source": [
    "Połączenia pomiędzy elementami są kierunkowe. Dodajmy dwa przyciski do layoutu i utwórzmy pomiędzy nimi połączenie."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6a3a79f9-6f02-4204-83d2-d51f4f27c52f",
   "metadata": {},
   "source": [
    "<img src=\"https://fv9-3.failiem.lv/thumb_show.php?i=s2c74txj7&view\" width=\"300\" />"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6b7198ea-d400-4f49-b7fc-74ed833e4bd5",
   "metadata": {},
   "source": [
    "Czyli mamy połączenie od przycisku po lewej do przycisku po prawej stronie. Przy ustalonym marginesie pomiędzy dwoma elementami i połączeniu kierunkowym, przeciągając przycisk po lewej przeciągamy tylko ten przycisk zwiększając margines. Jeżeli zaczniemy przeciągać przycisk po prawej, margines zostanie zachowany a oba przyciski zmienią pozycję."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "908e5780-57bc-4c2b-afc0-0fb08f535f7a",
   "metadata": {},
   "source": [
    "<img src=\"https://fv9-2.failiem.lv/thumb_show.php?i=9cznugwh7&view\" width=\"300\" />"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1d19bb26-32fd-4ce3-a0b4-fb24a84b6fbf",
   "metadata": {},
   "source": [
    "Rozwijając menu kontekstowe na jednym z przycisków możemy wybrać opcję **show baseline**, która umożliwia nam wyrównanie dwóch lub więcej elementów"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "29c6a3b3-17a3-4533-b877-1c06a910ee84",
   "metadata": {},
   "source": [
    "<img src=\"https://fv9-3.failiem.lv/thumb_show.php?i=kxuj2wjh7&view\" width=\"300\" />"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1eefc8d7-1551-455a-ab03-3b9fcdb17434",
   "metadata": {},
   "source": [
    "Możemy również wyrównać wiele elementów. W tym celu zaznaczamy elementy które chcemy zmodyfikować i z menu kontekstowego wybieramy **align** lub **chain** w celu wyrównania względem rodzica lub wyrównania względem siebie na wzajem."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c81a2e5e-782c-405b-a88a-1703a277b10a",
   "metadata": {},
   "source": [
    "<img src=\"https://fv9-6.failiem.lv/thumb_show.php?i=q2vqfgmbv&view\" width=\"300\" />"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "18a09987-6b4c-48a6-9ac0-71eb115085e8",
   "metadata": {},
   "source": [
    "Pełny kod źródłowy:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9619745a-c6ad-4188-9cd2-02d4443f72a6",
   "metadata": {},
   "outputs": [],
   "source": [
    "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n",
    "<androidx.constraintlayout.widget.ConstraintLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n",
    "    xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n",
    "    xmlns:tools=\"http://schemas.android.com/tools\"\n",
    "    android:layout_width=\"match_parent\"\n",
    "    android:layout_height=\"match_parent\"\n",
    "    tools:context=\".MainActivity\">\n",
    "\n",
    "    <Button\n",
    "        android:id=\"@+id/button6\"\n",
    "        android:layout_width=\"0dp\"\n",
    "        android:layout_height=\"wrap_content\"\n",
    "        android:text=\"Button\"\n",
    "        app:layout_constraintBottom_toBottomOf=\"parent\"\n",
    "        app:layout_constraintEnd_toEndOf=\"parent\"\n",
    "        app:layout_constraintHorizontal_bias=\"0.5\"\n",
    "        app:layout_constraintStart_toEndOf=\"@+id/button7\"\n",
    "        app:layout_constraintTop_toTopOf=\"parent\" />\n",
    "\n",
    "    <Button\n",
    "        android:id=\"@+id/button7\"\n",
    "        android:layout_width=\"0dp\"\n",
    "        android:layout_height=\"wrap_content\"\n",
    "        android:text=\"Button\"\n",
    "        app:layout_constraintBottom_toBottomOf=\"parent\"\n",
    "        app:layout_constraintEnd_toStartOf=\"@+id/button6\"\n",
    "        app:layout_constraintHorizontal_bias=\"0.5\"\n",
    "        app:layout_constraintStart_toEndOf=\"@+id/button8\"\n",
    "        app:layout_constraintTop_toTopOf=\"parent\" />\n",
    "\n",
    "    <Button\n",
    "        android:id=\"@+id/button8\"\n",
    "        android:layout_width=\"0dp\"\n",
    "        android:layout_height=\"wrap_content\"\n",
    "        android:text=\"Button\"\n",
    "        app:layout_constraintBottom_toBottomOf=\"parent\"\n",
    "        app:layout_constraintEnd_toStartOf=\"@+id/button7\"\n",
    "        app:layout_constraintHorizontal_bias=\"0.5\"\n",
    "        app:layout_constraintStart_toStartOf=\"parent\"\n",
    "        app:layout_constraintTop_toTopOf=\"parent\" />\n",
    "\n",
    "    <androidx.constraintlayout.widget.Guideline\n",
    "        android:id=\"@+id/guideline2\"\n",
    "        android:layout_width=\"wrap_content\"\n",
    "        android:layout_height=\"wrap_content\"\n",
    "        android:orientation=\"vertical\"\n",
    "        app:layout_constraintGuide_begin=\"137dp\" />\n",
    "\n",
    "    <Button\n",
    "        android:id=\"@+id/button9\"\n",
    "        android:layout_width=\"wrap_content\"\n",
    "        android:layout_height=\"wrap_content\"\n",
    "        android:layout_marginStart=\"24dp\"\n",
    "        android:text=\"Button\"\n",
    "        app:layout_constraintBottom_toTopOf=\"@+id/button7\"\n",
    "        app:layout_constraintEnd_toEndOf=\"parent\"\n",
    "        app:layout_constraintStart_toStartOf=\"parent\"\n",
    "        app:layout_constraintTop_toTopOf=\"parent\" />\n",
    "</androidx.constraintlayout.widget.ConstraintLayout>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b8fbe66d-e0b4-4128-848a-0ed1299ebaa8",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.9.13"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}