web-dev-qa-db-ja.com

カスタムTextInputLayout android

カスタムTextInputLayoutを作成しようとしています。カスタムTextInputLayoutの下に作成するにはどうすればよいですか？ enter image description here

androidandroid-layoutandroid-textinputlayout
12
Dreamfire

アウトラインボックスにはマテリアルデザインスタイルを使用する必要があります。簡単な使い方：

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

TextInputLayoutにあります。 Material Design Guide のAndroidのテキストフィールドを参照してください

enter image description here

14
Francis

次善策があります：

1。layout構造を次のように設計します。

activity_test.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
    Android:orientation="vertical"
    Android:padding="16dp"
    Android:background="@Android:color/white">

    <!-- Username -->
    <RelativeLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content">

        <View
            Android:layout_width="match_parent"
            Android:layout_height="52dp"
            Android:layout_marginTop="10dp"
            Android:background="@drawable/bg_rounded_input_field" />

        <TextView
            Android:id="@+id/text_dummy_hint_username"
            Android:layout_width="wrap_content"
            Android:layout_height="2dp"
            Android:layout_marginTop="10dp"
            Android:layout_marginLeft="16dp"
            Android:paddingLeft="4dp"
            Android:paddingRight="4dp"
            Android:text="Username"
            Android:textSize="16sp"
            Android:background="@Android:color/white"
            Android:visibility="invisible"/>

        <Android.support.design.widget.TextInputLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_marginLeft="16dp"
            Android:layout_marginRight="16dp"
            Android:hint="Username"
            Android:textColorHint="@Android:color/black"
            app:hintTextAppearance="@style/HintTextStyle">

            <EditText
                Android:id="@+id/edit_username"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:inputType="text|textCapWords"
                Android:maxLines="1"
                Android:backgroundTint="@Android:color/transparent"/>
        </Android.support.design.widget.TextInputLayout>
    </RelativeLayout>

    <!-- Password -->
    <RelativeLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_marginTop="8dp">

        <View
            Android:layout_width="match_parent"
            Android:layout_height="52dp"
            Android:layout_marginTop="10dp"
            Android:background="@drawable/bg_rounded_input_field" />

        <TextView
            Android:id="@+id/text_dummy_hint_password"
            Android:layout_width="wrap_content"
            Android:layout_height="2dp"
            Android:layout_marginTop="10dp"
            Android:layout_marginLeft="16dp"
            Android:paddingLeft="4dp"
            Android:paddingRight="4dp"
            Android:text="Password"
            Android:textSize="16sp"
            Android:background="@Android:color/white"
            Android:visibility="invisible"/>

        <Android.support.design.widget.TextInputLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_marginLeft="16dp"
            Android:layout_marginRight="16dp"
            Android:hint="Password"
            Android:textColorHint="@Android:color/black"
            app:hintTextAppearance="@style/HintTextStyle">

            <EditText
                Android:id="@+id/edit_password"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:inputType="textPassword"
                Android:maxLines="1"
                Android:backgroundTint="@Android:color/transparent"/>
        </Android.support.design.widget.TextInputLayout>
    </RelativeLayout>
</LinearLayout>

2。丸みを帯びた角には、以下のドローアブルbg_rounded_input_field.xmlを使用します。

res/drawable/bg_rounded_input_field.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle" >

    <stroke
        Android:color="@Android:color/black"
        Android:width="2dp">
    </stroke>

    <corners
        Android:radius="8dp">
    </corners>

</shape>

3。属性app:hintTextAppearance="@style/HintTextStyle"を追加して、以下のHintTextStyleをTextInputLayoutに使用します。

res/values/styles.xml

<style name="HintTextStyle" parent="TextAppearance.Design.Hint">
    <item name="Android:textSize">16sp</item>
</style>

4。最後に、Activity just show/hide TextView text_dummy_hint_usernameおよびtext_dummy_hint_passwordでfocus変更。

参考までに、Handler遅延付き100 millisを使用して、ダミーのヒントを表示しましたTextViewは、TextInputLayoutヒントテキストanimationと同期します。

TestActivity.Java

import Android.os.Handler;
import Android.support.v7.app.AppCompatActivity;
import Android.os.Bundle;
import Android.view.View;
import Android.widget.EditText;
import Android.widget.TextView;

public class TestActivity extends AppCompatActivity {

    TextView textDummyHintUsername;
    TextView textDummyHintPassword;
    EditText editUsername;
    EditText editPassword;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test);

        textDummyHintUsername = (TextView) findViewById(R.id.text_dummy_hint_username);
        textDummyHintPassword = (TextView) findViewById(R.id.text_dummy_hint_password);
        editUsername = (EditText) findViewById(R.id.edit_username);
        editPassword = (EditText) findViewById(R.id.edit_password);

        // Username
        editUsername.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View v, boolean hasFocus) {

                if (hasFocus) {
                    new Handler().postDelayed(new Runnable() {

                        @Override
                        public void run() {
                            // Show white background behind floating label
                            textDummyHintUsername.setVisibility(View.VISIBLE);
                        }
                    }, 100);
                } else {
                    // Required to show/hide white background behind floating label during focus change
                    if (editUsername.getText().length() > 0)
                        textDummyHintUsername.setVisibility(View.VISIBLE);
                    else
                        textDummyHintUsername.setVisibility(View.INVISIBLE);
                }
            }
        });

        // Password
        editPassword.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View v, boolean hasFocus) {

                if (hasFocus) {
                    new Handler().postDelayed(new Runnable() {

                        @Override
                        public void run() {
                            // Show white background behind floating label
                            textDummyHintPassword.setVisibility(View.VISIBLE);
                        }
                    }, 100);
                } else {
                    // Required to show/hide white background behind floating label during focus change
                    if (editPassword.getText().length() > 0)
                        textDummyHintPassword.setVisibility(View.VISIBLE);
                    else
                        textDummyHintPassword.setVisibility(View.INVISIBLE);
                }
            }
        });
    }
}

出力：

enter image description here

これが役立つことを願っています〜

16
Ferdous Ahamed