{"id":114,"date":"2016-05-08T23:14:17","date_gmt":"2016-05-08T21:14:17","guid":{"rendered":"http:\/\/antek.atthost24.pl\/?p=114"},"modified":"2016-05-29T18:20:12","modified_gmt":"2016-05-29T16:20:12","slug":"problem-z-gui-tworzonym-w-kodzie","status":"publish","type":"post","link":"https:\/\/blog.lantkowiak.pl\/index.php\/2016\/05\/08\/problem-z-gui-tworzonym-w-kodzie\/","title":{"rendered":"Problem z GUI tworzonym w kodzie"},"content":{"rendered":"<p>Ostatnie kilka godzin pisania aplikacji po\u015bwi\u0119ci\u0142em na walce z dynamicznym tworzeniem element\u00f3w GUI w kodzie. Uda\u0142o mi si\u0119 w ko\u0144cu wst\u0119pnie uzyska\u0107 efekt, kt\u00f3ry chcia\u0142em, i kt\u00f3ry jeszcze dopracuj\u0119. Problemem okaza\u0142 si\u0119 ma\u0142y szczeg\u00f3\u0142, o kt\u00f3rym nie widzia\u0142em&#8230;<\/p>\n<p>Problem, kt\u00f3ry chc\u0119 opisa\u0107, napotka\u0142em przy tworzeniu ekranu wy\u015bwietlaj\u0105cego szczeg\u00f3\u0142y dokumentu. Na tym ekranie powinien by\u0107 widoczny tytu\u0142 dokumentu, tagi oraz wszystkie pliki wraz z ich opisami. I przy tym ostatnim elemencie powsta\u0142y problemy.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-119 aligncenter\" src=\"http:\/\/antek.atthost24.pl\/wp-content\/uploads\/2016\/05\/Screenshot_2010-04-01-02-58-53.png\" alt=\"Screenshot_2010-04-01-02-58-53\" width=\"352\" height=\"626\" srcset=\"https:\/\/blog.lantkowiak.pl\/wp-content\/uploads\/2016\/05\/Screenshot_2010-04-01-02-58-53.png 540w, https:\/\/blog.lantkowiak.pl\/wp-content\/uploads\/2016\/05\/Screenshot_2010-04-01-02-58-53-169x300.png 169w\" sizes=\"auto, (max-width: 352px) 100vw, 352px\" \/><\/p>\n<p>Powy\u017cej wstawi\u0142em efekt jaki bym chcia\u0142 osi\u0105gn\u0105\u0107. Chodzi oczywi\u015bcie o rozmieszczenie element\u00f3w &#8211; niebieskie linie oraz zielony kolor zosta\u0142y dodane dla lepszej widoczno\u015bci co si\u0119 dziej\u0119. Wracaj\u0105c do uk\u0142adu element\u00f3w &#8211; pliki chcia\u0142bym wy\u015bwietli\u0107 w formie tabelarycznej, gdzie w lewej kolumnie b\u0119dzie miniaturka zdj\u0119cia\/pliku, a w prawej b\u0119dzie dodany opis pliku.<\/p>\n<p>Powy\u017cszy efekt uda\u0142o si\u0119 uzyska\u0107 przy pomocy nast\u0119puj\u0105cego kodu:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;TableRow\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"&gt;\r\n\r\n    &lt;FrameLayout\r\n        android:layout_width=\"110dp\"\r\n        android:layout_height=\"110dp\"&gt;\r\n\r\n        &lt;ImageView\r\n            android:layout_width=\"100dp\"\r\n            android:layout_height=\"100dp\"\r\n            android:layout_gravity=\"center_horizontal|center_vertical\"\r\n            android:src=\"@android:drawable\/ic_dialog_map\" \/&gt;\r\n    &lt;\/FrameLayout&gt;\r\n\r\n    &lt;TextView\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"110dp\"\r\n        android:scrollHorizontally=\"false\"\r\n        android:text=\"Ut ac libero tincidunt, bibendum sem nec, pellentesque sem.\" \/&gt;\r\n&lt;\/TableRow&gt;<\/pre>\n<p>Czy tworz\u0119 TableRow i s\u0105 w nim dwa elementy:<\/p>\n<ul>\n<li>FrameLayout, kt\u00f3ry w sobie zawiera ImageView z obrazem<\/li>\n<li>TextView, kt\u00f3ry zawiera opis pliku<\/li>\n<\/ul>\n<p>Oczywi\u015bcie kod ten w XMLu stworzy\u0142em tylko po to, \u017ceby zobaczy\u0107, kt\u00f3rych element\u00f3w mam u\u017cy\u0107, \u017ceby uzyska\u0107 efekt jaki chc\u0119. Sama lista plik\u00f3w z opisami b\u0119dzie oczywi\u015bcie tworzona dynamicznie w kodzie.<\/p>\n<p>Jeden wiersz tworzy\u0142em mniej wi\u0119cej w poni\u017cszy spos\u00f3b:<\/p>\n<pre>val filesLayout = findViewById(R.id.show_document_files_table).asInstanceOf[TableLayout]\r\n\r\nval dim110 = (110 * this.getResources.getDisplayMetrics.density + 0.5f).toInt\r\n\r\nval tableRow = new TableRow(this)\r\ntableRow.setLayoutParams(new TableRow.LayoutParams(MATCH_PARENT, MATCH_PARENT))\r\n\r\nval imageFrameLayout = new FrameLayout(this)\r\nimageFrameLayout.setLayoutParams(new FrameLayout.LayoutParams(dim110, dim110))\r\n\r\nval imageView: ImageView = new ImageView(this)\r\nimageView.setImageBitmap(...)\r\nval layoutParams = new LinearLayout.LayoutParams(thumbnail.getWidth, thumbnail.getHeight)\r\nlayoutParams.gravity = Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL\r\nimageView.setLayoutParams(layoutParams)\r\n\r\nimageFrameLayout.addView(imageView)\r\n\r\ntableRow.addView(imageFrameLayout)\r\n\r\nval fileDescription = new TextView(this)\r\nfileDescription.setLayoutParams(new LinearLayout.LayoutParams(WRAP_CONTENT, dim110, 0.1f))\r\nfileDescription.setText(...)\r\n\r\ntableRow.addView(fileDescription)\r\n\r\nfilesLayout.addView(tableRow)<\/pre>\n<p>Tworz\u0105c elementy tabeli w kodzie stara\u0142em si\u0119 tworzy\u0142 dok\u0142adnie te same elementy z tymi samymi parametrami, kt\u00f3re u\u017cy\u0142em w XMLu. Niestety tworzenie wiersza tabeli w powy\u017cszy spos\u00f3b powodowa\u0142, \u017ce na ekranie nic si\u0119 nie pojawia\u0142o &#8211; tabela zostawa\u0142a pusta. Metod\u0105 pr\u00f3b i b\u0142\u0119d\u00f3w pr\u00f3bowa\u0142em doj\u015b\u0107 do tego co jest nie tak i w ko\u0144cu mi si\u0119 uda\u0142o.<\/p>\n<p>Okaza\u0142o si\u0119, \u017ce przy tworzeniu ustawie\u0144 layouty, czyli tworz\u0105c obiekty\u00a0LayoutParams musimy u\u017cy\u0107\u00a0LayoutParams z klasy rodzica danego elementu, a nie z samego elementu. Czyli w przypadku gdzie tworzy\u0142em wiersz tabeli w poni\u017cszy spos\u00f3b<\/p>\n<pre>val tableRow = new TableRow(this)\r\ntableRow.setLayoutParams(new TableRow.LayoutParams(MATCH_PARENT, MATCH_PARENT))<\/pre>\n<p>wystarczy\u0142o zamieni\u0107 na:<\/p>\n<pre>val tableRow = new TableRow(this)\r\ntableRow.setLayoutParams(new TableLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT))<\/pre>\n<p>Czyli u\u017cy\u0107\u00a0TableLayout.LayoutParams zamiast\u00a0TableRow.LayoutParams, poniewa\u017c\u00a0TableLayout jest rodzicem naszego wiersza.<\/p>\n<p>Po takich zmianach w kodzie ekran wy\u015bwieli\u0142 elementy w taki spos\u00f3b w jaki chcia\u0142em. Kod po modyfikacjach wyglada nast\u0119puj\u0105co:<\/p>\n<pre>val filesLayout = findViewById(R.id.show_document_files_table).asInstanceOf[TableLayout]\r\n\r\nval dim110 = (110 * this.getResources.getDisplayMetrics.density + 0.5f).toInt\r\n\r\nval tableRow = new TableRow(this)\r\ntableRow.setLayoutParams(new TableLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT))\r\n\r\nval imageFrameLayout = new FrameLayout(this)\r\nimageFrameLayout.setLayoutParams(new TableRow.LayoutParams(dim110, dim110))\r\n\r\nval imageView: ImageView = new ImageView(this)\r\nimageView.setImageBitmap(...)\r\nval layoutParams = new FrameLayout.LayoutParams(thumbnail.getWidth, thumbnail.getHeight)\r\nlayoutParams.gravity = Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL\r\nimageView.setLayoutParams(layoutParams)\r\n\r\nimageFrameLayout.addView(imageView)\r\n\r\ntableRow.addView(imageFrameLayout)\r\n\r\nval fileDescription = new TextView(this)\r\nfileDescription.setLayoutParams(new TableRow.LayoutParams(WRAP_CONTENT, dim110, 0.1f))\r\nfileDescription.setText(...)\r\n\r\ntableRow.addView(fileDescription)\r\n\r\nfilesLayout.addView(tableRow)<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Ostatnie kilka godzin pisania aplikacji po\u015bwi\u0119ci\u0142em na walce z dynamicznym tworzeniem element\u00f3w GUI w kodzie. Uda\u0142o mi si\u0119 w ko\u0144cu wst\u0119pnie uzyska\u0107 efekt, kt\u00f3ry chcia\u0142em, i kt\u00f3ry jeszcze&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,6],"tags":[5,3,4],"class_list":["post-114","post","type-post","status-publish","format-standard","hentry","category-daj-sie-poznac","category-simple-document-manager","tag-android","tag-dajsiepoznac","tag-sdm"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Problem z GUI tworzonym w kodzie - Lukasz Antkowiak&#039;s blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.lantkowiak.pl\/index.php\/2016\/05\/08\/problem-z-gui-tworzonym-w-kodzie\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Problem z GUI tworzonym w kodzie - Lukasz Antkowiak&#039;s blog\" \/>\n<meta property=\"og:description\" content=\"Ostatnie kilka godzin pisania aplikacji po\u015bwi\u0119ci\u0142em na walce z dynamicznym tworzeniem element\u00f3w GUI w kodzie. Uda\u0142o mi si\u0119 w ko\u0144cu wst\u0119pnie uzyska\u0107 efekt, kt\u00f3ry chcia\u0142em, i kt\u00f3ry jeszcze...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog.lantkowiak.pl\/index.php\/2016\/05\/08\/problem-z-gui-tworzonym-w-kodzie\/\" \/>\n<meta property=\"og:site_name\" content=\"Lukasz Antkowiak&#039;s blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-08T21:14:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-05-29T16:20:12+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/antek.atthost24.pl\/wp-content\/uploads\/2016\/05\/Screenshot_2010-04-01-02-58-53.png\" \/>\n<meta name=\"author\" content=\"\u0141ukasz Antkowiak\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Napisane przez\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u0141ukasz Antkowiak\" \/>\n\t<meta name=\"twitter:label2\" content=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minuty\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.lantkowiak.pl\/index.php\/2016\/05\/08\/problem-z-gui-tworzonym-w-kodzie\/\",\"url\":\"https:\/\/blog.lantkowiak.pl\/index.php\/2016\/05\/08\/problem-z-gui-tworzonym-w-kodzie\/\",\"name\":\"Problem z GUI tworzonym w kodzie - Lukasz Antkowiak&#039;s blog\",\"isPartOf\":{\"@id\":\"https:\/\/blog.lantkowiak.pl\/#website\"},\"datePublished\":\"2016-05-08T21:14:17+00:00\",\"dateModified\":\"2016-05-29T16:20:12+00:00\",\"author\":{\"@id\":\"https:\/\/blog.lantkowiak.pl\/#\/schema\/person\/009bfc4db220c225786c59b1748ba1e6\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.lantkowiak.pl\/index.php\/2016\/05\/08\/problem-z-gui-tworzonym-w-kodzie\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.lantkowiak.pl\/index.php\/2016\/05\/08\/problem-z-gui-tworzonym-w-kodzie\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.lantkowiak.pl\/index.php\/2016\/05\/08\/problem-z-gui-tworzonym-w-kodzie\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/blog.lantkowiak.pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Problem z GUI tworzonym w kodzie\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.lantkowiak.pl\/#website\",\"url\":\"https:\/\/blog.lantkowiak.pl\/\",\"name\":\"Lukasz Antkowiak&#039;s blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.lantkowiak.pl\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.lantkowiak.pl\/#\/schema\/person\/009bfc4db220c225786c59b1748ba1e6\",\"name\":\"\u0141ukasz Antkowiak\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/blog.lantkowiak.pl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e18e2bfe319da9b5757cf7f7ae1bfecf?s=96&d=monsterid&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e18e2bfe319da9b5757cf7f7ae1bfecf?s=96&d=monsterid&r=g\",\"caption\":\"\u0141ukasz Antkowiak\"},\"description\":\"dd\",\"url\":\"https:\/\/blog.lantkowiak.pl\/index.php\/author\/antek\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Problem z GUI tworzonym w kodzie - Lukasz Antkowiak&#039;s blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.lantkowiak.pl\/index.php\/2016\/05\/08\/problem-z-gui-tworzonym-w-kodzie\/","og_locale":"pl_PL","og_type":"article","og_title":"Problem z GUI tworzonym w kodzie - Lukasz Antkowiak&#039;s blog","og_description":"Ostatnie kilka godzin pisania aplikacji po\u015bwi\u0119ci\u0142em na walce z dynamicznym tworzeniem element\u00f3w GUI w kodzie. Uda\u0142o mi si\u0119 w ko\u0144cu wst\u0119pnie uzyska\u0107 efekt, kt\u00f3ry chcia\u0142em, i kt\u00f3ry jeszcze...","og_url":"https:\/\/blog.lantkowiak.pl\/index.php\/2016\/05\/08\/problem-z-gui-tworzonym-w-kodzie\/","og_site_name":"Lukasz Antkowiak&#039;s blog","article_published_time":"2016-05-08T21:14:17+00:00","article_modified_time":"2016-05-29T16:20:12+00:00","og_image":[{"url":"http:\/\/antek.atthost24.pl\/wp-content\/uploads\/2016\/05\/Screenshot_2010-04-01-02-58-53.png"}],"author":"\u0141ukasz Antkowiak","twitter_card":"summary_large_image","twitter_misc":{"Napisane przez":"\u0141ukasz Antkowiak","Szacowany czas czytania":"4 minuty"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.lantkowiak.pl\/index.php\/2016\/05\/08\/problem-z-gui-tworzonym-w-kodzie\/","url":"https:\/\/blog.lantkowiak.pl\/index.php\/2016\/05\/08\/problem-z-gui-tworzonym-w-kodzie\/","name":"Problem z GUI tworzonym w kodzie - Lukasz Antkowiak&#039;s blog","isPartOf":{"@id":"https:\/\/blog.lantkowiak.pl\/#website"},"datePublished":"2016-05-08T21:14:17+00:00","dateModified":"2016-05-29T16:20:12+00:00","author":{"@id":"https:\/\/blog.lantkowiak.pl\/#\/schema\/person\/009bfc4db220c225786c59b1748ba1e6"},"breadcrumb":{"@id":"https:\/\/blog.lantkowiak.pl\/index.php\/2016\/05\/08\/problem-z-gui-tworzonym-w-kodzie\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.lantkowiak.pl\/index.php\/2016\/05\/08\/problem-z-gui-tworzonym-w-kodzie\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blog.lantkowiak.pl\/index.php\/2016\/05\/08\/problem-z-gui-tworzonym-w-kodzie\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/blog.lantkowiak.pl\/"},{"@type":"ListItem","position":2,"name":"Problem z GUI tworzonym w kodzie"}]},{"@type":"WebSite","@id":"https:\/\/blog.lantkowiak.pl\/#website","url":"https:\/\/blog.lantkowiak.pl\/","name":"Lukasz Antkowiak&#039;s blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.lantkowiak.pl\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pl-PL"},{"@type":"Person","@id":"https:\/\/blog.lantkowiak.pl\/#\/schema\/person\/009bfc4db220c225786c59b1748ba1e6","name":"\u0141ukasz Antkowiak","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/blog.lantkowiak.pl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e18e2bfe319da9b5757cf7f7ae1bfecf?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e18e2bfe319da9b5757cf7f7ae1bfecf?s=96&d=monsterid&r=g","caption":"\u0141ukasz Antkowiak"},"description":"dd","url":"https:\/\/blog.lantkowiak.pl\/index.php\/author\/antek\/"}]}},"_links":{"self":[{"href":"https:\/\/blog.lantkowiak.pl\/index.php\/wp-json\/wp\/v2\/posts\/114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.lantkowiak.pl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.lantkowiak.pl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.lantkowiak.pl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.lantkowiak.pl\/index.php\/wp-json\/wp\/v2\/comments?post=114"}],"version-history":[{"count":5,"href":"https:\/\/blog.lantkowiak.pl\/index.php\/wp-json\/wp\/v2\/posts\/114\/revisions"}],"predecessor-version":[{"id":139,"href":"https:\/\/blog.lantkowiak.pl\/index.php\/wp-json\/wp\/v2\/posts\/114\/revisions\/139"}],"wp:attachment":[{"href":"https:\/\/blog.lantkowiak.pl\/index.php\/wp-json\/wp\/v2\/media?parent=114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.lantkowiak.pl\/index.php\/wp-json\/wp\/v2\/categories?post=114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.lantkowiak.pl\/index.php\/wp-json\/wp\/v2\/tags?post=114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}