Форум программистов, компьютерный форум, киберфорум
Наши страницы
Программирование Android
Войти
Регистрация
Восстановить пароль
 
SP236
0 / 0 / 0
Регистрация: 26.01.2015
Сообщений: 3
#1

Canvas поверх GridLayout - Программирование Android

27.01.2015, 00:31. Просмотров 859. Ответов 2
Метки нет (Все метки)

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

Чтобы лучше понять мой вопрос, представьте себе игру крестики-нолики. Когда кто-нибудь выигрывает, выигрышный ряд зачёркивается линией.
Так вот, у меня имеется таблица 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>

Скриншот:
Кликните здесь для просмотра всего текста
Canvas поверх GridLayout

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

Проблема в том, что чёрная линия не пересекает отступы (понятно, почему). Как сделать так, чтобы она пересекала отступы?
Т.к. с такими классами я пока не умею работать, то не представляю, как решить проблему и куда копать. Поэтому прошу помощи .
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
27.01.2015, 00:31
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Canvas поверх GridLayout (Программирование Android):

GridLayout, ширина колонки
Есть GridLayout и 5 TextView(в одной колонке, на разных строках). Как можно...

Объединение ячеек GridLayout
Подскажите, пожалуйста, как программно объединить две соседние ячейки в...

Не добавляются элементы в GridLayout
код @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP) @Override ...

Программное наполнение GridLayout
В цикле заполняю GridLayout картинками. По нажатию на картинку, GridLayout...

Обращение к View-элементу в GridLayout
Имеется Gridlayout, созданный программно. Есть RoundButton, созданный в...

Разделить GridLayout на равные части
Как разделить GridLayout на 2х2, чтобы компоненты, которые лежат в ячейках...

2
Gabberr
103 / 103 / 19
Регистрация: 13.10.2009
Сообщений: 404
27.01.2015, 13:41 #2
Интересная задачка, я бы поверх всего наложил прозрачный relativelayout со своей вьюхой, вьюха принимает координату начала и конца линии и отрисовывет ее , ну и в конце игры, обновляешь эту вьюху и делаешь ее видимой.
1
SP236
0 / 0 / 0
Регистрация: 26.01.2015
Сообщений: 3
27.01.2015, 17:40  [ТС] #3
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>

Скриншот:
Кликните здесь для просмотра всего текста
Canvas поверх GridLayout
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
27.01.2015, 17:40
Привет! Вот еще темы с решениями:

GridLayout заполнение всего содержимого
Добрый день! Имеется GridLayout с размерами 3х3 заполняющий все пространство,...

Отображение кнопок в GridLayout программно
Пишу свой календарь с блэкджеком и путанами. В Гриде 7 столбцов, в каждом по...

Android.support.v7.widget.GridLayout
Друзья, помогите пожалуйста! Никак не получается включить GridLayout в макет из...

GridLayout размеры кнопок пропорционально весу
Здравствуйте, в GridLayout есть кнопки: как сделать чтобы все кнопки...


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

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

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