Material UI 로 간단하게 깔끔한 UI 구현하기 - (1)

 

 

까먹기 전에 기록한다. 이건 여러 컴포넌트를 세세하게 다룰거니까...시리즈로 쓴다.

 

 

 

 

 

 

 

 

사이드를 하다보면

규모가 작다보니ㅠ

프론트 개발자가 간단한 디자인을 그리게 되는 경우가 많다.

 

학부생때는 시간도 많았고,,열정도 넘쳤고,,,포폴로도 쓰고싶었으니 포토샵이니 일러스트니 써가면서

모든 컴포넌트를 세세하게 디자인했지만

이제 시간 없음.

그럴 여유와 이유가 삭제됨...

그냥 주는 테마를 쓰게 된다.

 

 

 

난 이거 썼다.

Material 2 Design Kit | Figma Community

get a copy해서 템플릿 복사해오면

 

 

 

 

레퍼런스 이렇게 많다. 짱이지? 대박임. 밑에 더 있음

 

 

 

 

저기서 알아서 필요한거 갖다 쓰고..가감하고..하면 된다.

난 2를 썼지만....MUI는 어마무시하게 많은 템플릿이 제공되고 있으니

내 눈에 예쁜거 쓰면 된다.

 

 

 

 

다크테마 같은것도 준다.

Material Dark Theme Design Kit | Figma Community

 

 

 

 

적당히 색깔 예쁘게 잘 바꿔서

부끄러우니까 작게 보여준다

 

 

갖다 쓰면 끝. 피그마 관련 기능들은 나중에..자세히 쓰기로 하자...

 

MUI는 구글에서 메인으로 권장하는 형식이라서,

이렇게 MUI형식으로 디자인을 해두면

구현도 개쉽다;;

 

 

우선 공식 문서를 따라 gradle 세팅하고

Material Design

 

난 1.6.1인데...어째 새 버전이 또 나온것같다..?

 

 

필요한 액티비티나 뭐 프래그먼트나 뭐,,,xml 파일에서 

요 태그로 시작하는 친구들 불러다가 쓰면 된다.

 

 

 

 

 

 

개인적으로 난

  <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/field_id"
            android:layout_width="350sp"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:counterEnabled="true"
            app:errorEnabled="true"
            app:counterMaxLength="20"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:theme="@style/ThemeOverlay.AppTheme.TextInputEditText.Outlined">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/id_edittext"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="아이디"
                android:textSize="13sp"
                android:textColor="@color/primary50Color"
                />
        </com.google.android.material.textfield.TextInputLayout>

요 outlinebox textinput을 제일 많이 쓴다.

 

 

 

 

 

아래 요건데

텍스트필드 자체에 걸 수 있는 액션이 많아서

유용하게 써먹고있다.

 

 

끗.