Circular ImageView в Android с использованием Jetpack Compose
Circular ImageView используется во многих приложениях. Эти типы изображений обычно используются для представления изображения профиля пользователя и многих других изображений. Мы видели реализацию ImageView в Android с помощью Jetpack Compose. В этой статье мы рассмотрим реализацию Circle ImageView в Android с использованием Jetpack Compose.
Пошаговая реализация
Шаг 1: Создайте новый проект
Чтобы создать новый проект в Android Studio Canary Version, обратитесь к статье Как создать новый проект в Android Studio Canary Version с помощью Jetpack Compose.
Шаг 2: добавьте изображение в папку с возможностью рисования
После создания нового проекта мы должны добавить изображение в нашу папку с возможностью рисования для отображения этого изображения внутри нашего ImageView. Скопируйте свое изображение из папки и зайдите в наш проект. Внутри нашего проекта перейдите в приложение > res > drawable > щелкните правой кнопкой мыши папку drawable и вставьте туда свое изображение.
Шаг 3: Работа с файлом MainActivity.kt
После добавления этого изображения перейдите к приложению > java > MainActivity.kt и добавьте к нему приведенный ниже код. Комментарии добавляются внутри кода, чтобы понять код более подробно.
Kotlin
import android.graphics.drawable.shapes.Shape import android.media.Image import android.os.Bundle import android.widget.Toast import androidx.appcompat.app.AppCompatActivity import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.Image import androidx.compose.foundation.InteractionState import androidx.compose.foundation.Text import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material.* import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.AccountCircle import androidx.compose.material.icons.filled.Info import androidx.compose.material.icons.filled.Phone import androidx.compose.runtime.* import androidx.compose.runtime.savedinstancestate.savedInstanceState import androidx.compose.ui.Alignment import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.platform.setContent import androidx.compose.ui.res.imageResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.example.gfgapp.ui.GFGAppTheme import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.platform.ContextAmbient import androidx.compose.ui.platform.testTag import androidx.compose.ui.res.colorResource import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.input.* import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.TextUnit class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContent { GFGAppTheme { // A surface container using the "background" color from the theme Surface(color = MaterialTheme.colors.background) { // at below line we are calling // our function for button. CircleImg(); } } } } } @Preview (showBackground = true ) @Composable fun DefaultPreview() { GFGAppTheme { CircleImg(); } } @Composable fun CircleImg() { Column( // we are using column to align our imageview // to center of the screen. modifier = Modifier.fillMaxWidth().fillMaxHeight(), // below line is used for specifying // vertical arrangement. verticalArrangement = Arrangement.Center, // below line is used for specifying // horizontal arrangement. horizontalAlignment = Alignment.CenterHorizontally, ) { // creating a card for creating a circle image view. Card( // below line is use to add size to our image view and // test tag is use to add tag to our image. modifier = Modifier.preferredSize( 100 .dp).testTag(tag = "circle" ), // below line is use to // add shape to our image view. shape = CircleShape, // below line is use to add // elevation to our image view. elevation = 12 .dp ) { // below line we are creating a new image. Image( // in below line we are providing image // resource from drawable folder. imageResource(id = R.drawable.gfgimage), // below line is use to give scaling // to our image view. contentScale = ContentScale.Crop, // below line is use to add modifier // to our image view. modifier = Modifier.fillMaxSize() ) } } } |
Теперь запустите ваше приложение и посмотрите, что выдает приложение.
Выход: