O ConstraintLayout do Android foi explicado usando uma interface do usuário complexa

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

Texto original em inglês.