amod kanthe Blocked Unblock Seguir Seguindo 17 de janeiro
O ConstraintLayout é introduzido para criar uma interface de usuário muito complexa e responsiva para seu aplicativo. Anteriormente, para criar uma interface de usuário complexa, eu estava usando o RelativeLayout até me deparar com essa interface complexa.
Acima a captura de tela é o rodapé de um fragmento no rodapé do aplicativo descreve as etapas do processo de login e em qual etapa o usuário está atualmente. Existem três etapas para concluir o login
- Digite o número do celular
- OTP
- Perfil
e usuário atualmente na primeira etapa que é digitar o número do celular.
Agora demore alguns minutos e tente construir acima da interface do usuário usando RelativeLayout ou qualquer outro layout e veja como funciona, avise-me nos comentários se alguém conseguir criar o layout usando layout diferente de ConstraintLayout.
Aqueles que são novos no ConstraintLayout consideram a leitura após o primeiro
https://developer.android.com/training/constraint-layout/
Vamos começar
Primeiro adicione a dependência gradle ao seu projeto.
dependências {
implementação 'com.android.support.constraint: constraint-layout: 1.1.2'
}
Para explicar ainda mais, deixe-me mostrar como a interface do usuário é exibida no modo de design no Android studio
Construir essa interface do usuário foi possível usando as Diretrizes . As orientações estão observando, mas a visão virtual não são visíveis, como tal, eles podem ser visualizados na visualização de design e esquemas na imagem acima, você pode ver Eu usei duas diretrizes duas linhas pontilhadas que podem ser vistas no centro verticalmente e horizontalmente são nada além de diretrizes.
Depois de adicionar a diretriz, é assim que o xml parece
< android.support.constraint.ConstraintLayout xmlns: android = "http://schemas.android.com/apk/res/android"
xmlns: app = "http://schemas.android.com/apk/res-auto"
android: layout_width = "match_parent"
android: layout_height = "80dp"
android: paddingBottom = "8dp" >
< android.support.constraint.Guideline
android: id = "@ + id / guideline"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: orientation = "vertical"
app: layout_constraintGuide_percent = "0.5" />
< android.support.constraint.Guideline
android: id = "@ + id / guideline1"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: orientation = "horizontal"
app: layout_constraintGuide_percent = "0.5" />
</ android.support.constraint.ConstraintLayout >
Agora app: layout_constraintGuide_percent = ”0.5” isto define onde você quer a diretriz exatamente no meu caso eu queria no centro então o valor é 0.5 Suponha que você não queira adicionar uma visão de texto horizontalmente após 3/4 de largura da tela você irá adicionar uma diretriz vertical , sim, não confunda vertical, já que estamos dividindo a tela horizontalmente, usaremos a diretriz vertical e a diretriz ficará como abaixo
< android.support.constraint.Guideline
android: id = "@ + id / guideline"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: orientation = "vertical"
app: layout_constraintGuide_percent = "0.75" />
Espero que todos tenham uma idéia sobre a diretriz, vamos voltar ao problema original agora.
Depois de adicionar duas diretrizes, uma horizontal e outra verticalmente exatamente no centro, vamos adicionar o primeiro elemento da interface do usuário.
Primeiro, você adicionará o ImageView exatamente no centro das diretrizes a seguir.
< ImageView
android: id = "@ + id / ivotp"
android: layout_width = "16dp"
android: layout_height = "16dp"
android: layout_marginTop = "8dp"
android: background = "@ drawable / otp_process_circle"
app: layout_constraintBottom_toTopOf = "@ + id / guideline1"
app: layout_constraintEnd_toStartOf = "@ + id / guideline"
app: layout_constraintStart_toStartOf = "@ + id / guideline"
app: layout_constraintTop_toTopOf = "@ + id / diretriz1" />
O código a seguir é para colocar o ImageView exatamente no centro com relação à diretriz horizontal
app: layout_constraintBottom_toTopOf = "@ + id / guideline1"
app: layout_constraintTop_toTopOf = "@ + id / diretriz1"
e abaixo do código para colocar ImageView exato no centro com relação à diretriz vertical
app: layout_constraintEnd_toStartOf = "@ + id / guideline"
app: layout_constraintStart_toStartOf = "@ + id / guideline"
Agora, à esquerda e à direita deste ImageView, adicionaremos divisores conforme necessário na interface do usuário
< ImageView
android: id = "@ + id / ivseconddiv"
android: layout_width = "76dp"
android: layout_height = "2dp"
android: background = "@ drawable / stroke_divider"
android: layerType = "software"
app: layout_constraintBottom_toBottomOf = "@ + id / ivotp"
app: layout_constraintStart_toEndOf = "@ + id / ivotp"
app: layout_constraintTop_toTopOf = "@ + id / ivotp" />
< ImageView
android: id = "@ + id / ivfirstdiv"
android: layout_width = "76dp"
android: layout_height = "2dp"
android: layerType = "software"
android: src = "@ drawable / stroke_divider"
app: layout_constraintBottom_toBottomOf = "@ + id / ivotp"
app: layout_constraintEnd_toStartOf = "@ + id / ivotp"
app: layout_constraintTop_toTopOf = "@ + id / ivotp" />
Abaixo linhas estão colocando divisor exato no centro vertical em relação ao ImageView ivotp
app: layout_constraintBottom_toBottomOf e app: layout_constraintTop_toTopOf
é assim que a nossa interface vai ficar agora
Agora, no final desses divisores, adicionaremos dois ImageViews como abaixo
< ImageView
android: id = "@ + id / ivnumberfill"
android: layout_width = "16dp"
android: layout_height = "16dp"
app: layout_constraintBottom_toBottomOf = "@ + id / ivfirstdiv"
app: layout_constraintEnd_toStartOf = "@ + id / ivfirstdiv"
app: layout_constraintTop_toTopOf = "@ + id / ivfirstdiv"
app: srcCompat = "@ drawable / ic_otp_fill" />
< ImageView
android: id = "@ + id / ivprofile"
android: layout_width = "16dp"
android: layout_height = "16dp"
android: layout_toRightOf = "@ + id / ivseconddiv"
android: background = "@ drawable / otp_process_circle"
app: layout_constraintBottom_toBottomOf = "@ + id / ivseconddiv"
app: layout_constraintStart_toEndOf = "@ + id / ivseconddiv"
app: layout_constraintTop_toTopOf = "@ + id / ivseconddiv" />
É assim que a nossa interface será agora
Agora só precisamos adicionar três TextView abaixo de cada círculo ImageViews exatamente no centro horizontal seguinte é código para adicioná-lo
< TextView
android: id = "@ + id / tvnumber"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: layout_below = "@ + id / ivnumberfill"
android: layout_marginTop = "4dp"
android: text = "Número do celular"
android: textColor = "? colorAccent"
android: textSize = "11sp"
app: layout_constraintEnd_toEndOf = "@ id / ivnumberfill"
app: layout_constraintStart_toStartOf = "@ id / ivnumberfill"
app: layout_constraintTop_toBottomOf = "@ id / ivnumberfill" />
< TextView
android: id = "@ + id / tvotp"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: layout_below = "@ + id / ivnumberfill"
android: layout_marginTop = "8dp"
android: text = "OTP"
android: textColor = "# 949595"
android: textSize = "11sp"
app: layout_constraintEnd_toStartOf = "@ + id / ivseconddiv"
app: layout_constraintStart_toStartOf = "@ + id / ivotp"
app: layout_constraintTop_toBottomOf = "@ + id / ivotp" />
< TextView
android: id = "@ + id / tvprofile"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: layout_below = "@ + id / ivnumberfill"
android: layout_marginTop = "8dp"
android: text = "Perfil"
android: textColor = "# 949595"
android: textSize = "11sp"
app: layout_constraintEnd_toEndOf = "@ + id / ivprofile"
app: layout_constraintStart_toStartOf = "@ + id / ivprofile"
app: layout_constraintTop_toBottomOf = "@ + id / ivprofile" />
Depois de construir esta interface do usuário, comecei a conhecer a importância e o uso do ConstraintLayout e agora tento usar o ConstraintLayout em todos os lugares possíveis.
Caso você ache este artigo interessante, dê uma olhada no meu outro artigo adicionando o Google Analytics ao seu aplicativo 1 e 2 antes de adicionar análises ao seu aplicativo.
https://medium.com/@amodpkanthe/add-analytics-to-your-app-b683cf2acbd1 e https://medium.com/@amodpkanthe/add-analytics-to-your-app-2-6c023d92ec24