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

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

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

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

27.01.2015, 00:31. Просмотров 783. Ответов 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 - Программирование Android
В цикле заполняю GridLayout картинками. По нажатию на картинку, GridLayout очищается и заполняется новым набором картинок. Очищаю...

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

Разделить GridLayout на равные части - Программирование Android
Как разделить GridLayout на 2х2, чтобы компоненты, которые лежат в ячейках имели размер 1/2 высоты и 1/2 ширины Layout, (если просто...

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

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

TextEdit выходит за границы экрана в GridLayout - Программирование Android
Доброго времени суток. Делаю такую разметку: &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt; &lt;GridLayout ...

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Gabberr
102 / 102 / 17
Регистрация: 13.10.2009
Сообщений: 403
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 - Программирование Android
Всем привет! Пишу пятнашки) В GridLayout имеется 15 кнопок, примерно таких: &lt;Button android:id=&quot;@+id/b3&quot; ...

Загрузка изображений из стандартной галереи в GridLayout - Программирование Android
Всем привет! Нужно достать фоточки с телефона и красиво отобразить в GridLayout, подгружая фоточки асинхронно. но то ли руки кривые, то ли...

Программное создание GridLayout и добавление в него объектов - Программирование Android
Дисклеймер: Всем доброго дня! Я - новичок в написании программ под Android. Имеется небольшой опыт С++/С#, но речь не об этом. Я...

Равномерное заполнение колонками пространства с помощью GridLayout - Программирование Android
Всем добрый вечер! Помогите пожалуйста! Мне нужно программно заполнять GridLayout. Проблема чтобы колонки равномерно заполнили все...


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

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

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