[안드로이드] EditText 화면 밀림: 입력창을 가지는 Custom EditText

    

위와 같이 EditText를 사용하다보면 키보드가 올라가면서 화면이 밀리게 되는데요,

windowSoftInputMode 속성으로 소프트 키보드가 출력될 때 화면 변화를 설정할 수도 있지만

또 다른 방법으로 내용을 편집할 수 있는 입력 창을 따로 띄워주는 Custom EditText을 

활용하는 것도 방법이 될 수 있을 것 같습니다.

 

 

 

잠깐 시작하기 전에

그래서 어떤 Custom EditText인지 사진으로 보는게 확실하기 때문에 결과 화면부터 보고 갑시다.

    

 

 

 

 

1. Custom EditText : InputTextView

Custom EditText 네이밍은 InputTextView로 했습니다.

InputTextView라는 클래스를 생성하고 아래와 같이 작성합니다.

 

class InputTextView(context: Context, attrs: AttributeSet) : LinearLayout(context, attrs) {
private lateinit var inputTextViewBinding: ViewInputTextBinding

init {
initView()
}

private fun initView() {
val layoutInflater = LayoutInflater.from(context)
inputTextViewBinding = ViewInputTextBinding.inflate(layoutInflater, this, true)

setOnClickListener { v: View? -> showEditDialog() }
}

private fun showEditDialog() {
val builder = AlertDialog.Builder(context)
val alertDialog = builder.create()
alertDialog.window?.setBackgroundDrawableResource(R.color.transparent)

val layoutInflater = LayoutInflater.from(context)
val inputTextDialogBinding = DialogInputTextBinding.inflate(layoutInflater, this, false)

inputTextDialogBinding.etText.setText(inputTextViewBinding.tvText.text)
inputTextDialogBinding.btnOk.setOnClickListener { v: View? ->
setText(inputTextDialogBinding.etText.text.toString())
alertDialog.dismiss()
}
inputTextDialogBinding.btnCancel.setOnClickListener { v: View? ->
alertDialog.dismiss()
}
alertDialog.setView(inputTextDialogBinding.root)
alertDialog.show()
}

fun setText(text: String) {
inputTextViewBinding.tvText.text = text
}

fun getText(): String {
return inputTextViewBinding.tvText.text.toString()
}
}

 

 

(참고)

R.color.transparent는 values 경로에 있는 colors.xml에 아래와 같이 추가해주면 됩니다.

colors.xml

<resources>
<color name="transparent">#00000000</color>
...
</resources>

 

 

 

 

 

 

 

2. InputTextView : layout

InputTextView에 대한 layout을 아래와 같이 작성합니다.

view_input_text.xml

<layout xmlns:android="http://schemas.android.com/apk/res/android">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<TextView
android:id="@+id/tvText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:maxLines="1"
android:paddingStart="2dp"
android:paddingEnd="2dp"
android:singleLine="true"
android:textColor="@color/black"
android:textSize="17dp" />

<TextView
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_margin="3dp"
android:background="#222222" />
</LinearLayout>
</layout>

 

dialog_input_text.xml

<layout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">

<LinearLayout
android:layout_width="350dp"
android:layout_height="wrap_content"
android:background="#888888"
android:gravity="center"
android:orientation="vertical">

<TextView
android:id="@+id/tvTitle"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#000000"
android:gravity="center"
android:text="편집"
android:textColor="@color/white"
android:textSize="20sp"
android:textStyle="bold" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="vertical">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingStart="10dp"
android:paddingEnd="10dp">

<EditText
android:id="@+id/etText"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_margin="3dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:gravity="center"
android:selectAllOnFocus="true"
android:textSize="17sp" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="25dp"
android:orientation="horizontal">

<Space
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2" />

<Button
android:id="@+id/btnCancel"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="3dp"
android:layout_weight="1"
android:text="취소"
android:textAllCaps="false"
android:textSize="17sp" />

<Button
android:id="@+id/btnOk"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="3dp"
android:layout_weight="1"
android:text="확인"
android:textAllCaps="false"
android:textSize="17sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</layout>

 

 

 

 

 

 

 

3. InputTextView 사용

Custom EditText가 준비되었으니 원하시는 layout에 아래와 같이 정의해서 사용해주시면 됩니다.

<com.example.customedittext.view.InputTextView
android:id="@+id/inputText"
android:layout_width="match_parent"
android:layout_height="wrap_content" />