Canvas поверх GridLayout

@SP236 · Регистрация: 26.01.2015

Студворк — интернет-сервис помощи студентам

Рад всех приветствовать!

Чтобы лучше понять мой вопрос, представьте себе игру крестики-нолики. Когда кто-нибудь выигрывает, выигрышный ряд зачёркивается линией.
Так вот, у меня имеется таблица GridLayout. Она имеет ячейки типа ImageView. Нужно сделать так, чтобы через эти ячейки можно было провести линию (по горизонтали, по вертикали или по диагонали). Решил поизучать такие классы, как Canvas, Paint и т.п. Но возникли трудности.

Для наглядности приведу тестовый пример.
java-код:

Кликните здесь для просмотра всего текста

Java
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
public class MainActivity extends Activity {
 
    FrameLayout frmLay1;
    GridLayout gridLay1;
    ImageView imageView0;
    ImageView imageView1;
    ImageView imageView2;
    ImageView imageView3;
 
    @Override protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        frmLay1 = (FrameLayout)findViewById(R.id.frmLay1);
        gridLay1 = (GridLayout)findViewById(R.id.gridLay1);
        imageView0 = (ImageView)findViewById(R.id.imageView0);
        imageView1 = (ImageView)findViewById(R.id.imageView1);
        imageView2 = (ImageView)findViewById(R.id.imageView2);
        imageView3 = (ImageView)findViewById(R.id.imageView3);
    }
    
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        
        Paint p = new Paint();
        p.setStrokeWidth(10);
        p.setColor(Color.BLACK);
        
        Bitmap bmp0 = Bitmap.createBitmap(imageView0.getWidth(), imageView0.getHeight(), Config.ARGB_8888);
        Canvas c0 = new Canvas(bmp0);
        imageView0.draw(c0);
        c0.drawLine(0, 0, 100, 100, p);
        imageView0.setImageBitmap(bmp0);
        
        Bitmap bmp3 = Bitmap.createBitmap(imageView3.getWidth(), imageView3.getHeight(), Config.ARGB_8888);
        Canvas c3 = new Canvas(bmp3);
        imageView1.draw(c3);
        c3.drawLine(0, 0, 100, 100, p);
        imageView3.setImageBitmap(bmp3);
    }
}

xml-код:

Кликните здесь для просмотра всего текста

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
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/frmLay1"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    <GridLayout
        android:id="@+id/gridLay1"
        android:columnCount="2"
        android:background="#FF59BEEC"
        android:orientation="horizontal"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
        <ImageView
            android:id="@+id/imageView0"
            android:layout_marginRight="20dp"
            android:layout_marginBottom="20dp"
            android:background="#FFE97F"
            android:layout_width="50dp"
            android:layout_height="50dp" />
        <ImageView
            android:id="@+id/imageView1"
            android:background="#FFE97F"
            android:layout_width="50dp"
            android:layout_height="50dp" />
        <ImageView
            android:id="@+id/imageView2"
            android:background="#FFE97F"
            android:layout_width="50dp"
            android:layout_height="50dp" />
        <ImageView
            android:id="@+id/imageView3"
            android:background="#FFE97F"
            android:layout_width="50dp"
            android:layout_height="50dp" />
    </GridLayout>
    
</FrameLayout>

Скриншот:

Кликните здесь для просмотра всего текста

На скриншоте жёлтым цветом изображён фон ImageView, синим - фон GridLayout (виден благодаря внешним отступам между ImageView), чёрным - нарисованная с помощью Canvas линия. Здесь для упрощения приведена таблица 2x2, в реальности же она больше.

Проблема в том, что чёрная линия не пересекает отступы (понятно, почему). Как сделать так, чтобы она пересекала отступы?
Т.к. с такими классами я пока не умею работать, то не представляю, как решить проблему и куда копать. Поэтому прошу помощи

.

@Gabberr · 27.01.2015, 13:41

Интересная задачка, я бы поверх всего наложил прозрачный relativelayout со своей вьюхой, вьюха принимает координату начала и конца линии и отрисовывет ее , ну и в конце игры, обновляешь эту вьюху и делаешь ее видимой.

@SP236 · 27.01.2015, 17:40 **[ТС]**

Gabberr, спасибо за мысль, всё получилось!

Только я вместо

Сообщение от Gabberr

прозрачный relativelayout со своей вьюхой

сразу использовал View. А т.к. в предыдущей реализации есть проблемы с перерисовкой вьюхи, то я использовал переопределённый onDraw() и метод invalidate() (заодно разобрался, что это такое и для чего нужно).
Вот результат.
java (цифры подобраны для hdpi-плотности):

Кликните здесь для просмотра всего текста

Java
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
public class MainActivity extends Activity {
    private FrameLayout frmLayMain;
    private View drawView;
    private boolean isLeftDiag = true;
    
    @Override protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        frmLayMain = (FrameLayout)findViewById(R.id.frmLayMain);    
        drawView = new DrawView(this);
        
        ViewGroup.LayoutParams layPar = new ViewGroup.LayoutParams((int)(120*1.5), (int)(120*1.5));
        FrameLayout.LayoutParams frmLayPar = new FrameLayout.LayoutParams(layPar);
        frmLayPar.gravity = Gravity.CENTER;
        
        frmLayMain.addView(drawView, frmLayPar);
    }
    
    class DrawView extends View {
        Paint p;
 
        public DrawView(Context context) {
            super(context);
            p = new Paint();
        }
 
        @Override protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            p.setColor(Color.BLUE);
            p.setStrokeWidth(15);
            
            if(!isLeftDiag) {           
                canvas.drawLine(0, 180, 180, 0, p);
            } else {
                canvas.drawLine(0, 0, 180, 180, p);
            }
        }
    }
    
    public void onClickDraw(View v) {
        drawView.invalidate();
        if(!isLeftDiag) {           
            //drawView.setVisibility(View.VISIBLE);
            isLeftDiag = true;
        } else {
            //drawView.setVisibility(View.INVISIBLE);
            isLeftDiag = false;
        }
    }
}

xml:

Кликните здесь для просмотра всего текста

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
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/frmLayMain"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    <GridLayout
        android:id="@+id/gridLay1"
        android:onClick="onClickDraw"
        android:columnCount="2"
        android:background="#FF59BEEC"
        android:orientation="horizontal"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
        <ImageView
            android:id="@+id/imageView0"
            android:layout_marginRight="20dp"
            android:layout_marginBottom="20dp"
            android:background="#FFE97F"
            android:layout_width="50dp"
            android:layout_height="50dp" />
        <ImageView
            android:id="@+id/imageView1"
            android:background="#FFE97F"
            android:layout_width="50dp"
            android:layout_height="50dp" />
        <ImageView
            android:id="@+id/imageView2"
            android:background="#FFE97F"
            android:layout_width="50dp"
            android:layout_height="50dp" />
        <ImageView
            android:id="@+id/imageView3"
            android:background="#FFE97F"
            android:layout_width="50dp"
            android:layout_height="50dp" />
    </GridLayout>
 
</FrameLayout>

Скриншот:

Кликните здесь для просмотра всего текста

Новые блоги и статьи Все статьи Все блоги /
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .

@Gabberr 105 / 105 / 19 Регистрация: 13.10.2009 Сообщений: 406
	27.01.2015, 13:41
	Интересная задачка, я бы поверх всего наложил прозрачный relativelayout со своей вьюхой, вьюха принимает координату начала и конца линии и отрисовывет ее , ну и в конце игры, обновляешь эту вьюху и делаешь ее видимой. 1