첨부사진의 UI를 만들려고하는데 이렇게 만들면 별로인가요..?

Question

https://material.io/design/components/text-fields.html#usage

material design 사이트에 있는 위 사진을 만들려구하는데요...

<LinearLayout 
  
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="30dp"
    tools:context=".Sign_Up">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="RESGISTER"
        android:textSize="25dp"
        android:gravity="center"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:orientation="horizontal"
        android:layout_marginTop="10dp"
        android:layout_marginRight="20dp">

        <ImageView
            android:id="@+id/imageView8"
            android:layout_width="20dp"
            android:layout_height="25dp"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:tint="@color/iconColor"
            android:layout_marginTop="2dp"
            app:srcCompat="@drawable/address" />

        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="30dp"
            android:layout_height="wrap_content"
            android:layout_weight="10"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Phone-Number" />

        </com.google.android.material.textfield.TextInputLayout>
    </LinearLayout>
</LinearLayout>

첨부 xml소스가 위 사진의 코드인데..

잘하시는 분들이라 다 아시겠지만 간단하게 설명드리면..

가장 큰 레이아웃을 LinearLayout의 vertical 으로 잡고..

그안에 작은 LinearLayout을 Horizontal로 잡습니다..이 내부 LinearLayout에는 위 사진처럼

좌측의 작은 아이콘과 우측의 아웃라인 텍스트뷰를 넣었는데요..이게 하나의

LinearLayout Horizontal입니다..이걸 여러개하면..vertical이니 항목하나당 아래로 쭈우욱..내려가겠죠..

 

비효율적인가요...?저는 비효율 적이라고 생각하는데...margin이랑 padding도 깔끔하게 못잡겠구ㅜㅜ

예를들어서 이상하게 좌측의 아이콘이 우측의 텍스트 뷰보다 진짜 미세하게 올라가있더라구요..

그래서 layout_marginTop="2dp"를 줘서..눈대강으로 맞췄는데.. 

이게 뭔가 깔끔한 방법이 아닌것같아 찝찝해서 질문드립니다..ㅜ 

 

 

+) 소스 다붙이니 양이 많아 안올라가져 내부Linearlayout은 하나만 넣었습니다...

Answer 1

저런형식의 뷰는 linearlayout 보다는

최신의 constraintlayout 을 사용하시는것이 더 좋아보이고, 질문자님의 고민도 해결해 줄것같아요

 

우선, 코드상으로 보면, linearlayout 의 layout_weight 를 사용하게 되면

child 요소들을 한번더 측정하는 심각한 문제가 있어, xml 코드가 길어질 경우 앱에 상당한 무리를 줄거에요

 

차근차근 컨스트레인트 레이아웃을 공부해보셔요.

거의 모든 layout 을 컨스트레인트 레이아웃 1뎁스로 구현가능합니다..

Comments

제가 어제 해보면서 사진처럼 만들기는 했는데요..Linear layout으로 만들고
그안에 또 linear를 사용해서 만들었는데..말씀대로 코드가 좀 길어지기는하는군요..
그런데 Constraint layout으로 하는건 생각도 못해봤는데..단순 배치만으로 그게 가능할까요?..

---

네 컨스트레인트 레이아웃을 사용하시면 우선 기존의 모든 레이아웃을 거의 완벽하게 대응가능하시구여

코드가 길어지는건 사실 크게 상관이 없는데,
linearLayout은 뷰 구조가 복잡해질수록 xml depth 도 깊어져서 앱 성능에 직접적인 영향을 미친다는게 좀 큽니다~

유지보수적인 측면에서도 이미 만들어진 레이아웃 구조에서 기획이 바뀌는 케이스에서는..
 linearlayout 의 경우, 잘못하면 모든 xml 코드를 재수정해야하는 상황이 발생할수도있구여
그과정에서 멘탈이 녹아버릴가능성이...

---

그리구 본문에 질문자님께서 적어주신 케이스는
코드상으로만 보면, 부모 레이아웃에 gravity 를 설정해 주지 않아서 위나 아래로 붙는 케이스로 보입니다