FamilyTreeView

Важные улучшения, добавлено представление родословной в стиле приложения "Семья+", которое никак не связано с предыдущими версиями. Можно сразу перейти ко второй части "Представление родословной в стиле 'Семья+'" для просмотра.

Демонстрация отрисовки дерева родства, основанная на использовании пользовательского ViewGroup и canvas для рисования линий. На данный момент реализованы представления себя, супруги, братьев и сестёр, родителей, дедушек и бабушек, прадедушек и прабабушек, детей и зятя/невестки, а также внуков, всего пяти поколений. Также добавлена возможность перемещения через события нажатия.

Первая часть: Простое представление родословной

Процесс выполнения

1. Получение JSON из assets

Частичный JSON

2. Преобразование JSON в список объектов

3. Сохранение списка объектов в базу данных

4. Выборка из базы данных и сборка связанных объектов

5. Отправка связанных объектов контроллеру для отображения родословной

Предварительный просмотр

Обзор процесса

1. Процесс выполнения кода

1.1. Первым делом происходит инициализация данных, включая объекты членов семьи и кисти.
1.2. Затем, на основе объектов членов семьи, вычисляется ширина и высота ViewGroup, максимальная высота составляет пять поколений, ширина рассчитывается как сумма максимальных ширин каждого поколения.
1.3. Инициализация View, установка всех View членов семьи. После этого вызывается invalidate() для обновления экрана.
1.4. В методе onMeasure вычисляются размеры View членов семьи.
1.5. В методе onLayout расставляются все члены семьи на своих местах.
1.6. В методе onDraw используется canvas для отрисовки линий связи между членами семьи.
1.7. Наконец, в методе onTouchEvent записываются события нажатия для перемещения ViewGroup, а в методе onInterceptTouchEvent — события перехвата нажатий на View членов семьи.

2. Обработка позиционирования в методе onLayout

2.1. Сначала устанавливается положение своего View в центре всей композиции.
2.2. Если есть супруг, он располагается справа от меня.
2.3. Братья и сёстры располагаются слева от меня в порядке следования.
2.4. Если есть только один родитель, он располагается прямо над мной. Если есть оба родителя, то отец располагается слева сверху, а мать — справа сверху.
2.5. Дедушки и бабушки располагаются аналогично родителям, но относительно отца и матери соответственно.
2.6. Сначала устанавливаются позиции внучат, так как они определяют положение моих детей.
2.7. После того, как установлены позиции внучат, устанавливаются позиции моих детей.

3. Обработка рисования линий в методе onDraw

3.1. Сначала рисуются линии соединения меня и моего супруга, используя canvas, Paint и Path.
3.2. Затем рисуются линии соединения родителей и дедушек/бабушек, что является простой задачей.
3.3. Линии соединения братьев и сестёр рисуются от крайнего левого брата до моего View.
3.4. Наконец, рисуются линии соединения детей и внучат, начиная с внучат, затем детей и, наконец, меня и моих детей.

Вторая часть: Представление родословной в стиле приложения "Семья+"

Описание: Эта часть была создана в соответствии с приложением "Семья+". UI очень похоже на "Семью+", хотя логика может отличаться. Я хотел разобрать "Семью+" для понимания его работы, но поскольку "Семья+" защищена 360加固, мне было сложно это сделать. Поэтому я сам разработал логику. Отображаемый контент включает информацию о супругах нижних уровней семейных членов.

Процесс выполнения

1. Получение JSON из assets

2. Преобразование JSON в список объектов

3. Сохранение списка объектов в базу данных

4. Передача ID выбранного члена семьи в контроллер, который будет выполнять запросы к базе данных для сборки связанных моделей и отображения родословной

Предварительный просмотр, здесь представлено одно изображение, чтобы дать общее представление, так как родословная слишком большая. Для более подробного восприятия рекомендуется запустить приложение.

Обзор процесса

1. Процесс выполнения кода

1.1. Первым делом происходит инициализация данных, включая объекты членов семьи и кисти.
1.2. Затем, на основе переданного ID члена семьи, выполняются запросы к базе данных и собираются модели.
1.3. Инициализация View, установка всех View членов семьи. При этом уже известны их положения.
1.4. В методе onMeasure вычисляются размеры View членов семьи.
1.5. В методе onLayout расставляются все члены семьи на своих местах.
1.6. В методе onDraw используется canvas для отрисовки линий связи между членами семьи.
1.7. Наконец, в методе onTouchEvent записываются события нажатия для перемещения ViewGroup, а в методе onInterceptTouchEvent — события перехвата нажатий на View членов семьи.#### 2. Процесс позиционирования

1. Позиционирование начинается с нижних уровней и продвигается вверх, так как положение нижних уровней определяет положение верхних.
2. Последовательность шагов: (1)(2) → (3) → (4)(5) → (6)(7) → (8)(9)(10) → (11)(12) → (13)(14). Подробнее можно посмотреть в методе initView().
3. Поскольку логика позиционирования для (1)(2), (4)(5), (11)(12) и (6)(7), (13)(14) схожа, эти шаги объединены в один метод, передаваясь номер поколения и данные.
4. Методы для позиционирования меня и моего супруга, а также родителей, дедушек и бабушек были созданы отдельно из-за специфических требований.

3. Процесс рисования линий

1. Рисование каждой линии, связанной с этим View: (1)(2) → (4)(5) → (6)(7) → (11)(12) → (13)(14) → (3) → (8) → (9) → (10).
2. Рисование связанных линий:
   • Линии между моими детьми
   • Линии между моими братьями и сестрами и мной
   • Линии между дедушками и отцом
   • Линии между бабушками и матерью
   • Линии между отцом и его братьями и сестрами
   • Линии между матерью и её братьями и сестрами. Подробности можно найти в коде.

GitHub: https://github.com/ssj64260/FamilyTreeView