Размещение меток поверх кнопок в приложении для Android

Я пытаюсь написать первое приложение Android и столкнулся со следующей проблемой.

Это цикл, обрабатывающий некоторые кнопки:

   for (i in 0..7) {
        val btnID = resources.getIdentifier('N'.plus(i.toString()),"id",packageName)
        val imageBtn = findViewById<ImageButton>(btnID)
        imageBtn.setBackgroundColor(0x00)
        imageBtn.setOnClickListener {
            val result = Math.pow(2.toDouble(),i.toDouble()).toInt()
            val textView = findViewById<TextView>(R.id.textView2).apply {//
                text = result.toString()
            }
        }
        // Here I want to put a sticker: "Hi" on top of the button (imageBtn).
        .....
   }

Приведенный выше код работает, и кнопки ведут себя так, как я ожидаю. Теперь я хотел бы наклеить ярлык поверх каждой кнопки. Как я могу это сделать? Я уже пробовал десятки способов, следуя примеру кода, который я нашел в сети, но ничего не работает.

Ниже приведен рисунок, иллюстрирующий то, что я имею в виду более точно.

enter image description here

Конечно, «Привет» не может быть частью изображения кнопки, потому что мне нужно изменить его динамически. Позже он может стать «Хо», «Он», «Па» ... или любым другим в зависимости от состояния приложения.

Почему вы используете петлю? Можно подробности?

BurhanYaprak 23.04.2022 13:08

Как вы хотите визуально разместить ярлык, можете ли вы поделиться им как изображением?

Ömer Seyfettin Yavuzyiğit 23.04.2022 13:32

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

Michel 23.04.2022 19:55
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
0
3
70
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Надеюсь, это может быть работа

 for (i in 0..7) {
        val btnID = resources.getIdentifier('N'.plus(i.toString()),"id",packageName)
        val imageBtn = findViewById<ImageButton>(btnID)
        imageBtn.setBackgroundColor(0x00)
        val result = Math.pow(2.toDouble(),i.toDouble()).toInt()
        imageBtn.setOnClickListener {
           
            val textView = findViewById<TextView>(R.id.textView2).apply {//
                text = result.toString()
            }
        }
        // Here I want to put a sticker: "Hi" on top of the button (imageBtn).
       imageBtn.text = result.toString()
   }

Спасибо, но, к сожалению, это не работает, потому что у imageBtn (ImageButton) нет текстового поля. Я думаю, мне нужен другой компонент для хранения строки «Привет».

Michel 25.04.2022 12:48

Да, вы можете поместить кнопку в относительный или ограниченный макет и поместить текстовое представление в центр макета.

Bhavin Solanki 25.04.2022 13:19

Как я могу это сделать ? Я пишу свое первое приложение для Android. Я многого не знаю в этом мире.

Michel 25.04.2022 17:54

Используйте это в своем макете.

<RelativeLayout
       android:id="@+id/layoutButton"
       android:layout_width="60dp"
       android:layout_height="60dp">
    
       <ImageButton
           android:id="@+id/imgBtn"
           android:layout_width="match_parent"
           android:layout_height="match_parent" />
    
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Hi"
           android:layout_centerInParent="true"
           android:textSize="20sp" />
    
    
</RelativeLayout>

И дайте background как хотите ImageButton.

Могу ли я использовать это динамически, чтобы установить положение метки «Привет» поверх кнопки? Сейчас я изучаю, как работают ConstraintLayout и ConstraintSet. Я нашел этот uwanttolearn.com/android/… и добился некоторого прогресса. Но я до сих пор точно не знаю, как разместить свою метку точно поверх моей кнопки.

Michel 26.04.2022 09:15

Для Constraintlayout Используйте это.

<androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/layoutButton"
        android:layout_width="60dp"
        android:layout_height="60dp">

        <ImageButton
            android:id="@+id/imgBtn"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hi"
            android:textSize="20sp"
            app:layout_constraintBottom_toBottomOf="@+id/imgBtn"
            app:layout_constraintEnd_toEndOf="@+id/imgBtn"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/imgBtn" />


    </androidx.constraintlayout.widget.ConstraintLayout>

Вы можете использовать простой виджет Button вместо ImageButton, у него есть свойство text. Чтобы сделать кнопку круглой, просто установите простую фигуру, которую можно нарисовать на фоне. Например, создайте рисуемый круг.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@android:color/darker_gray"/>
</shape>

И используйте его в виджете Button:

<Button
    ...
    android:background="@drawable/circle"
    .... />

Спасибо. Но мне нужен ImageButton, вот почему у меня эта проблема. Я наконец нашел решение.

Michel 28.04.2022 11:35
Ответ принят как подходящий

Так как мне пришлось потратить некоторое время и это вполне может быть полезно кому-то еще, я помещаю здесь свое решение. Теперь он работает именно так, как я хочу.

Вот:

   for (i in 0..7) {
        val btnID = resources.getIdentifier('N'.plus(i.toString()),"id",packageName)
        val imageBtn = findViewById<ImageButton>(btnID)
        imageBtn.setBackgroundColor(0x00)
        imageBtn.setOnClickListener {
            val result = Math.pow(2.toDouble(),i.toDouble()).toInt()
            val textView = findViewById<TextView>(R.id.textView2).apply {//
                text = result.toString()
            }
        }
        setSticker(i,btnID)
   }


    fun setSticker(n:Int,btn:Int) {
        val label = TextView(this)
        label.id = View.generateViewId()

        label.text = "Hi"
        label.setTextColor(Color.rgb(0xFF,0xFF,0xFF))
        label.setTypeface(null, Typeface.BOLD)
        label.setTextSize(TypedValue.COMPLEX_UNIT_PX, 17.dpToPixels(this))
        label.elevation = 0.dpToPixels(this) // To make the label visible (i.e. on top)

        constraintLayout?.addView(label)
        val constrSet = ConstraintSet()
        constrSet.clone(constraintLayout)
        constrSet.connect(label.id, ConstraintSet.LEFT, btn, ConstraintSet.LEFT)
        constrSet.connect(label.id, ConstraintSet.RIGHT, btn, ConstraintSet.RIGHT)
        constrSet.connect(label.id, ConstraintSet.TOP, btn, ConstraintSet.TOP)
        constrSet.connect(label.id, ConstraintSet.BOTTOM, btn, ConstraintSet.BOTTOM)
        constrSet.applyTo(constraintLayout)
    }

Другие вопросы по теме