Форум программистов, компьютерный форум CyberForum.ru

Программирование Android

Войти
Регистрация
Восстановить пароль
 
Dimitrii
1 / 1 / 0
Регистрация: 20.04.2013
Сообщений: 185
#1

Разместить 16 квадратов одним большим - Программирование Android

03.01.2016, 20:41. Просмотров 277. Ответов 6
Метки нет (Все метки)

Нужно из 16 квадратов образовать поле. Вроде пятнашек. У кого-то есть шаблончик для layout? Чтоб покрасивей, а то я в верстке и дизайне не очень пока... нужно чтоб красиво выглядело, а у меня все в белых стыках.... в общем помогите из 16 имейдж вью сделать красивый квадрат.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
03.01.2016, 20:41     Разместить 16 квадратов одним большим
Посмотрите здесь:

Разместить панель внизу FrameLayout - Программирование Android
Имеется такой layout. В нем карта растянута на весь экран, а панель panelTools располагается внизу. <?xml version="1.0"...

Разместить поверх ImageView рамку - Программирование Android
У меня есть некое изображение, ImageView, которое находится по центру экрана. Мне нужно, поместить по верх этого изображения рамку. Рамка...

Разместить Drawable посередине EditText - Программирование Android
Привет всем! Как разместить Drawable посередине в EditText? <View android:layout_width="wrap_content" ...

Разместить картинку под кнопкой - Программирование Android
Как это сделать? Кнопка будет круглой и прозрачной, чтобы удобнее было кликать. А под кнопкой картинка. Что я уже сделал: ...

Как разместить карту на Fragment - Программирование Android
Есть решенный класс для запуска карт в FragmentActivity. Как запустить в Fragment? Не могу вызвать GetSupportFragmentManager import...

Разместить TextView внутри кнопки - Программирование Android
Добрый день, каким образом можно поместить TextView как бы на кнопку и центрировать TextView относительно Button?

Как разместить элемент над центром в RelativeLayout? - Программирование Android
Как разместить элемент над/под центром в RelativeLayout? А также слева/справа от центра?

После регистрации реклама в сообщениях будет скрыта и будут доступны все возможности форума.
san92der
14 / 14 / 3
Регистрация: 27.10.2012
Сообщений: 108
04.01.2016, 05:10     Разместить 16 квадратов одним большим #2
Эм. а что значит красиво? а что значит образовать поле? а что значит всё в белых стыках? что значит шаблончик для layout? что значит красивый квадрат?
Dimitrii
1 / 1 / 0
Регистрация: 20.04.2013
Сообщений: 185
04.01.2016, 11:35  [ТС]     Разместить 16 квадратов одним большим #3
вот так как то. 16 квадратов плотно прилегают и не налазят друг на друга. Желательно с масштабированием в зависимости от размеров экрана. Если без него-понятно что тупо позиции высчитать можно по иксу и игреку каждому, но при смене устройства...эм... не очень эстетично выглядит.
Миниатюры
Разместить 16 квадратов одним большим  
Pablito
2455 / 1900 / 591
Регистрация: 12.05.2014
Сообщений: 6,702
Завершенные тесты: 1
04.01.2016, 11:57     Разместить 16 квадратов одним большим #4
что делать если экран устройства не квадратный?
Dimitrii
1 / 1 / 0
Регистрация: 20.04.2013
Сообщений: 185
04.01.2016, 12:38  [ТС]     Разместить 16 квадратов одним большим #5
в центр поставить квадрат, увеличить по меньшей стороне....
Pablito
2455 / 1900 / 591
Регистрация: 12.05.2014
Сообщений: 6,702
Завершенные тесты: 1
04.01.2016, 12:48     Разместить 16 квадратов одним большим #6
как вариант сделать свой лаяут как предлагают тут
Квадратный Layout
а дальше либо его использовать как контейтер для квадратов (LinearLayout-ы с одинаковыми весами)
либо из этого кастомного лаяута и делать все квадратики
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
06.01.2016, 19:54     Разместить 16 квадратов одним большим
Еще ссылки по теме:

Как разместить 2 элемнта с центаром на одной прямой? - Программирование Android
Я не могу понять, как можно в активности разместить два элемента так, чтобы их центры были расположены на одной прямой... Если, например,...

Как красиво разместить на экране 16 кнопок (4x4)? - Программирование Android
мне надо разместить на экране 16 кнопок(4х4 размещение, кнопки квадратные, одинакового размера, с рисунками). подскажите новичку, как...

JSOUP - найти 2 значения одним селектом - Программирование Android
<div class="i"> <input type="checkbox" name="city" value="77" id="c15" /> <label for="c15">Москва</label></div> <div class="i"> <input...

Как разместить EditText и область рисования Canvas в одном Activity? - Программирование Android
Как разместить EditText и область рисования Canvas в одном Activity?

Реализовать рисование и перемещение картинки одним касанием - Программирование Android
Здравствуйте, форумчане, проблема в следующем: необходимо реализовать перемещение объекта (ImageView) с помощью метода onTouch() и...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
Pablito
2455 / 1900 / 591
Регистрация: 12.05.2014
Сообщений: 6,702
Завершенные тесты: 1
06.01.2016, 19:54     Разместить 16 квадратов одним большим #7
Так как вопрос про квадратные лаяуты поднимается не первый раз, я немного поднапрягся и сделал.
Только xml, никакого кода.

Кое какие строки добавлены для наглядности и я немного попытался отрефакторить xml (стили).
Так как непонятно из чего должны состоять те 16 квадратов, я решил сделать их кнопками. В разметке будет показан отдельно сам квадратный лаяут и в него includ-ом включен лаяут с кнопками (сильно не рефакторил).

Что бы понять ход моей мысли, попытайтесь не читать по диагонали, а делать по пунктам
Итак:

1. в файл build.gradle подключаем PercentFrameLayout
XML
1
compile 'com.android.support:percent:23.1.1'
2. Приготовим стиль для наших кнопок. В файл values/styles.xml добавляем
Кликните здесь для просмотра всего текста
XML
1
2
3
4
5
6
7
    <style name="MyAwesomeButton" parent="@style/Widget.AppCompat.Button.Borderless">
        <item name="android:layout_weight">1</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:background">#FFF</item>
        <item name="android:layout_margin">1dp</item>
    </style>

Цвет фона и margin добавил для наглядности, их можно убрать потом.

3. Теперь важно, внимательно! В папке res/values создаем файл square_layout_style.xml и копируем туда эти строки
Кликните здесь для просмотра всего текста
XML
1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="utf-8"?>
<resources>
 
    <style name="SquareStyle">
        <item name="layout_widthPercent">@fraction/hundred_percent</item>
        <item name="layout_aspectRatio">@fraction/hundred_percent</item>
 
        //эти строчки можно убрать, они для наглядности
        <item name="android:background">#5a7</item>
        <item name="android:layout_gravity">center</item>
    </style>
</resources>


4. Тоже важно! Рядом с папкой values надо создать папку для горизонтальной ориентации, назовем ее values-land

5. Копируем туда файл square_layout_style.xml (который мы создали на прошлом шаге в папке values)
Дожно получиться так
Кликните здесь для просмотра всего текста
Название: Untitled.png
Просмотров: 19

Размер: 5.0 Кб


6. Открываем файл square_layout_style.xml из папки values-land и немного меняем содержимое, а точнее одну строку, но лучше просто копируем код
Кликните здесь для просмотра всего текста
XML
1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="utf-8"?>
<resources>
 
    <style name="SquareStyle">
        <item name="layout_heightPercent">@fraction/hundred_percent</item>
        <item name="layout_aspectRatio">@fraction/hundred_percent</item>
 
        //эти строчки можно убрать, они для наглядности
        <item name="android:background">#5a7</item>
        <item name="android:layout_gravity">center</item>
    </style>
</resources>

Становится очевидно что разница только в том что для ландшафтной ориентации мы задаем размер лаута 100% по высоте. А в файле values для портретной ориентации мы задали 100% по ширине.

7. Теперь задаем сами размеры. В папке values, создаем файл fractions.xml и копиреум туда этот код
Кликните здесь для просмотра всего текста
XML
1
2
3
4
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <fraction name="hundred_percent">100%</fraction>
</resources>


8. И напоследок файл с 16-ю кнопками. Там ничего интересного, но без него не взлетит.
Кликните здесь для просмотра всего текста
XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
 
    <LinearLayout
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
 
        <Button
            style="@style/MyAwesomeButton"
            android:text="1" />
 
        <Button
            style="@style/MyAwesomeButton"
            android:text="2" />
 
        <Button
            style="@style/MyAwesomeButton"
            android:text="3" />
 
        <Button
            style="@style/MyAwesomeButton"
            android:text="4" />
 
    </LinearLayout>
 
    <LinearLayout
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
 
        <Button
            style="@style/MyAwesomeButton"
            android:text="5" />
 
        <Button
            style="@style/MyAwesomeButton"
            android:text="6" />
 
        <Button
            style="@style/MyAwesomeButton"
            android:text="7" />
 
        <Button
            style="@style/MyAwesomeButton"
            android:text="8" />
 
    </LinearLayout>
 
    <LinearLayout
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
 
        <Button
            style="@style/MyAwesomeButton"
            android:text="9" />
 
        <Button
            style="@style/MyAwesomeButton"
            android:text="10" />
 
        <Button
            style="@style/MyAwesomeButton"
            android:text="11" />
 
        <Button
            style="@style/MyAwesomeButton"
            android:text="12" />
 
    </LinearLayout>
 
    <LinearLayout
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
 
        <Button
            style="@style/MyAwesomeButton"
            android:text="13" />
 
        <Button
            style="@style/MyAwesomeButton"
            android:text="14" />
 
        <Button
            style="@style/MyAwesomeButton"
            android:text="15" />
 
        <Button
            style="@style/MyAwesomeButton"
            android:text="16" />
 
    </LinearLayout>
 
</LinearLayout>


10. Чуть не забыл )
Разметка активити, обычно это файл activity_main.xml
Кликните здесь для просмотра всего текста
XML
1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <FrameLayout
        style="@style/SquareStyle">
 
        <include layout="@layout/sixteen_squares"/>
 
    </FrameLayout>
 
</android.support.percent.PercentFrameLayout>

Без разницы где в разметке будет эта конструкция. Для простоты я убрал все остальные лаяуты и тулбар, но это не принципиально.

У меня в студии превьюшка не всегда перерисовывается, поэтому либо нажимаем refresh либо смотрим на в превью, а на устройстве.

11. PROFIT
Yandex
Объявления
06.01.2016, 19:54     Разместить 16 квадратов одним большим
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Рейтинг@Mail.ru