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

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

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

Canvas поверх GridLayout - Android

27.01.2015, 00:31. Просмотров 754. Ответов 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, в реальности же она больше.

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

Canvas Android
Android Программное создание GridLayout и добавление в него объектов
Обращение к View-элементу в GridLayout Android
Кнопка поверх всего Android
Android GridLayout и layout_width="fill_parent" его компонента
GridLayout, ширина колонки Android
Android EditText поверх ImageView
Android Рисовать поверх всего
Android Программное наполнение GridLayout
Android Разделить GridLayout на равные части
Android Равномерное заполнение колонками пространства с помощью GridLayout
Максимально увеличить один элемент в Gridlayout и сжать до минимума остальные Android

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

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

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