หลังจากใช้ไลบรารีการสนับสนุนการออกแบบของ Android TextInputLayoutเพื่อวางป้ายลอยไว้เหนือEditTextส่วนประกอบฉันสงสัยว่ามีวิธีเพิ่มป้ายกำกับแบบลอยให้กับSpinnerส่วนประกอบหรือไม่ (ไม่จำเป็นต้องใช้ไลบรารีการออกแบบ)

ด้วยเหตุนี้ฉันหมายถึงสิ่งที่คล้ายกับสิ่งที่TextViewวางไว้เหนือSpinner(เห็นได้ชัดว่าไม่มีภาพเคลื่อนไหวเหมือนTextInputLayout) แต่ฉันต้องการให้ขนาดตัวอักษรแบบอักษรและสีตรงกับTextInputLayoutป้ายกำกับลอยของ

ตัวอย่างเช่นจะมีลักษณะดังนี้ (ดูป้ายกำกับด้านบนSpinners):

ดังที่ฉันได้กล่าวไว้ก่อนหน้านี้จุดมุ่งหมายหลักของฉันคือการมีป้ายกำกับด้านบนSpinnerเช่นเดียวกับในTextInputLayoutขนาดข้อความแบบอักษรสีและระยะห่างระหว่างป้ายกำกับและส่วนประกอบจะเหมือนกัน

ในหน้าการออกแบบของ Google เกี่ยวกับช่องข้อความป้ายกำกับแบบลอยมีแผนภาพที่แสดงขนาดของป้ายกำกับที่สัมพันธ์กับส่วนประกอบ แต่ไม่มีการระบุสีหรือขนาดข้อความป้ายกำกับ:

ดังนั้นเพื่อสรุปฉันกำลังถามว่า:
- หากมีองค์ประกอบพิเศษเพื่อให้บรรลุสิ่งที่ฉันขอหรือมุมมองแบบกำหนดเองที่ฉันสามารถใช้ได้มันจะเป็นอย่างไรและฉันจะใช้มันได้อย่างไร
- ถ้าไม่ใช่ขนาดตัวอักษรสีและแบบอักษรของป้ายกำกับแบบลอยคืออะไรเพื่อที่ฉันจะได้วางTextViewด้านบนSpinnerด้วยขนาดเค้าโครงที่แสดงในภาพด้านบน

แก้ไข:

จากหลักเกณฑ์การออกแบบของ Google สำหรับช่องข้อความมีดังต่อไปนี้สำหรับป้ายกำกับแบบลอย:

คำแนะนำและแบบอักษรป้อน: Roboto Regular 16sp
Label font: Roboto Regular 12sp
Tile height: 72dp
Text top and bottom padding: 16dp
Text field divider padding: 8dp

เช่นเดียวกับภาพที่แสดงด้านบน

ดังนั้นตัวอักษรป้ายลอย: Roboto 12sp คุณจึงสามารถใช้ a TextViewเพื่อแสดงSpinnerฉลากได้เนื่องจากฉันไม่รู้จักViewส่วนประกอบที่กำหนดเองหรือส่วนประกอบพิเศษใด ๆ ที่คุณสามารถใช้ได้

อย่างไรก็ตามหลังจากลองใช้งานแล้วมันดูไม่ดีเท่าที่แสดงในภาพ มุมมองที่กำหนดเองอาจจะดีกว่าสำหรับการนี้ขณะที่มันอาจจะดูดีกว่า แต่การแก้ปัญหาดังกล่าวข้างต้นเป็นเพียงวิธีการหนึ่งของการบรรลุสิ่งที่ใกล้กับสิ่งที่ฉันอยาก

ฉันต้องการให้ขนาดตัวอักษรแบบอักษรและสีตรงกับTextInputLayoutป้ายกำกับลอยของ

สิ่งนี้สามารถทำได้อย่างง่ายดายโดยไม่ต้องมีไลบรารีภายนอก หลังจากพยายามแฮ็กTextInputLayoutและแม้แต่สร้างมุมมองที่กำหนดเองของฉันฉันก็รู้ว่าการใช้รหัสธรรมดาTextViewใช้รหัสน้อยกว่ามากและอาจมีประสิทธิภาพมากกว่า

รูปแบบข้อความสามารถคัดลอกได้จากAppCompatไลบรารี

รูปแบบ

จากหลักเกณฑ์การออกแบบวัสดุเราได้รับข้อมูลต่อไปนี้:

• ฉลากควรมีขอบด้านล่างเป็น 8dp
• ฉลากควรอยู่ในแนวตั้งตรงกับข้อความที่ป้อน

หลักเกณฑ์ที่ไม่ได้กล่าวถึงเกี่ยวกับเนื้อหามีEditTextดังนี้

• มีช่องว่างภายในด้านซ้าย 4dp
• ป้ายกำกับของมันไม่ได้มีระยะห่างใด ๆ จาก16dpด้านบนสิ่งนี้ถูกทิ้งไว้ให้กับผู้ออกแบบอินเทอร์เฟซ: สิ่งนี้สมเหตุสมผลเพราะถ้าคุณวางไว้ใต้ป้ายอื่นEditTextคุณจะต้องมี8dpพื้นที่เพิ่มเติมเท่านั้น

นอกจากนี้ไลบรารีสนับสนุนการออกแบบยังมีลักษณะนี้สำหรับป้ายกำกับขององค์ประกอบที่เน้น:

<style name="TextAppearance.Design.Hint" parent="TextAppearance.AppCompat.Caption">
    <item name="android:textColor">?attr/colorControlActivated</item>
</style>

TextAppearance.AppCompat.Captionองค์ประกอบที่ไม่ได้ใช้งานเพียงแค่ใช้

การนำไปใช้

เพิ่มสิ่งต่อไปนี้ในdimens.xmlไฟล์ของคุณ:

<dimen name="input_label_vertical_spacing">8dp</dimen>
<dimen name="input_label_horizontal_spacing">4dp</dimen>

จากนั้นเพิ่มสิ่งนี้ในstyles.xml:

<style name="InputLabel" parent="TextAppearance.AppCompat.Caption">
    <item name="android:paddingBottom">@dimen/input_label_vertical_spacing</item>
    <item name="android:paddingLeft">@dimen/input_label_horizontal_spacing</item>
    <item name="android:paddingRight">@dimen/input_label_horizontal_spacing</item>
</style>

หากคุณต้องการให้ป้ายกำกับมีสีไฮไลต์ (เน้นเสียง) เสมอให้แทนที่TextAppearance.AppCompat.Captionด้วยTextAppearance.Design.Hintจาก Google Design Support Library อย่างไรก็ตามสิ่งนี้อาจดูแปลก ๆ หากคุณติดป้ายกำกับEditTextมุมมองไว้บนหน้าจอเดียวกัน

สุดท้ายคุณสามารถใส่TextViewเหนือSpinner(หรือองค์ประกอบอื่น ๆ ) ของคุณโดยใช้สไตล์:

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/category"
    style="@style/InputLabel" />

ผลลัพธ์

ภาพหน้าจอต่อไปนี้แสดงตัวอย่างง่ายๆที่มีTextInputLayoutมุมมองปกติสองมุมมองตามด้วยป้ายกำกับและไฟล์Spinner. ฉันไม่ได้ใช้การ8dpเว้นวรรคเพิ่มเติมเพื่อแยกส่วนเพิ่มเติม แต่นี่แสดงให้คุณเห็นว่าขนาดแบบอักษรและสีจะสะท้อนให้เห็น

องค์ประกอบภายในSpinnerมีช่องว่างภายในที่แตกต่างกันอย่างไรก็ตามฉันต้องการให้การจัดตำแหน่งแนวตั้งกับป้ายกำกับอื่น ๆ ทั้งหมดเพื่อให้ได้รูปลักษณ์ที่สม่ำเสมอมากขึ้น

ฉันทำได้โดยใช้ AutoCompleteTextView ปิดการใช้งานแป้นพิมพ์และแสดงตัวเลือกเมื่อสัมผัส

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, getResources().getStringArray(R.array.locations));

AutoCompleteTextView mTextView = (AutoCompleteTextView) findViewById(R.id.location);

mTextView.setAdapter(adapter);
mTextView.setKeyListener(null);
mTextView.setOnTouchListener(new View.OnTouchListener(){
    @Override
    public boolean onTouch(View v, MotionEvent event){
        ((AutoCompleteTextView) v).showDropDown();
        return false;
    }
});

ฉันมีส่วนสำคัญที่สร้างขึ้นด้วยตัวเองเพื่อแก้ปัญหาเดียวกันกับที่คุณมี

ตรวจสอบ:

https://gist.github.com/rodrigohenriques/77398a81b5d01ac71c3b

ตอนนี้ฉันไม่ต้องการสปินเนอร์ คุณจะยังคงมีเอฟเฟกต์ป้ายกำกับแบบลอยพร้อมภาพเคลื่อนไหว

ฉันได้สร้างViewส่วนประกอบของสารประกอบซึ่งแสดงฉลากเหนือไฟล์Spinner . ข้อความสำหรับเลเบลสามารถตั้งค่าได้โดยใช้ XML หรือใน Java

ส่วนประกอบมีคุณสมบัติหลักของ a Spinner( ไม่ใช่ทั้งหมด ) รวมทั้งมีลักษณะคล้ายกับไฟล์TextInputLayoutส่วนประกอบ

ผมได้ตั้งชื่อมันLabelledSpinnerและมันก็เป็นส่วนหนึ่งของฉันUsefulViewsห้องสมุด Android บน GitHub ภายใต้สัญญาอนุญาต Apache 2.0

หากต้องการใช้ให้เพิ่มการพึ่งพาไลบรารีในbuild.gradleไฟล์ของคุณ:

compile 'com.satsuware.lib:usefulviews:+'

ตัวอย่างการใช้งานมีอยู่ที่ที่เก็บ GitHub (ทั้งแอปตัวอย่างและคู่มือการใช้งาน)

คุณสามารถบรรลุสิ่งนี้:

ด้วยรูปแบบไลบรารีวัสดุใหม่เช่นนี้:

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/fullNameLay"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

    <androidx.appcompat.widget.AppCompatAutoCompleteTextView
            android:id="@+id/fullNameEt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>

สำหรับข้อมูลเพิ่มเติม: https://material.io/develop/android/components/menu/

ฉันแก้ไขโซลูชันของ Rodrigo เพื่อใช้อะแดปเตอร์เช่น Spinner มาตรฐานมากขึ้น https://gist.github.com/smithaaron/d2acd57937d7a4201a79

ฉันมีทางเลือกอื่นที่ใช้ลักษณะการทำงานของ TextInputLayout และ DialogFragment (AlertDialog) ที่กำหนดเองเพื่อจำลองป๊อปอัปไดอะล็อกสปินเนอร์

layout.xml:

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/your_et"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/your_label"
        android:maxLines="1"
        android:inputType="textNoSuggestions"
        android:textAppearance="@style/TextAppearance.AppCompat.Medium"
        android:focusable="false"
        style="@style/Base.Widget.AppCompat.Spinner.Underlined"/>
</android.support.design.widget.TextInputLayout>

สร้าง Custom Spinner ผ่าน DialogFragment (AlertDialog)

SpinnerFragment.java:

public class SpinnerFragment extends DialogFragment {

private static final String TITLEID = "titleId";
private static final String LISTID = "listId";
private static final String EDITTEXTID = "editTextId";

public static SpinnerFragment newInstance(int titleId, int listId, int editTextId) {
    Bundle bundle = new Bundle();
    bundle.putInt(TITLEID, titleId);
    bundle.putInt(LISTID, listId);
    bundle.putInt(EDITTEXTID, editTextId);
    SpinnerFragment spinnerFragment = new SpinnerFragment();
    spinnerFragment.setArguments(bundle);

    return spinnerFragment;
}

@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
    final int titleId = getArguments().getInt(TITLEID);
    final int listId = getArguments().getInt(LISTID);
    final int editTextId = getArguments().getInt(EDITTEXTID);
    AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());

    try {
        final String[] items = getResources().getStringArray(listId);

        builder.setTitle(titleId)
                .setItems(listId, new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog, int pos) {
                        EditText et = (EditText) getActivity().findViewById(editTextId);
                        String selectedText = items[pos];
                        if (!TextUtils.isEmpty(selectedText)) {
                            et.setText(selectedText);
                        } else {
                            et.getText().clear();
                        }
                    }
                });

    } catch (NullPointerException e) {
        Log.e(getClass().toString(), "Failed to select option in " + getActivity().toString() + " as there are no references for passed in resource Ids in Bundle", e);
        Toast.makeText(getActivity(), getString(R.string.error_failed_to_select), Toast.LENGTH_LONG).show();
    }

    return builder.create();
}

}

Activity.java:

private void addCustomSpinner() {
    EditText yourEt = (EditText) findViewById(R.id.your_et);
    yourEt.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            showCustomSpinnerDialog(view);
        }
    });
}

private void showCustomSpinnerDialog(View v) {
    int titleId = R.string.your_label;
    int listId = R.array.spinner_selections;
    int editTextId = R.id.your_et;
    SpinnerFragment spinnerFragment = SpinnerFragment.newInstance(titleId, listId, editTextId);
    spinnerFragment.show(getFragmentManager(), "customSpinner");
}

ผลลัพธ์

เมื่อคุณคลิกที่ TextInputLayout สไตล์สปินเนอร์มันจะเรียกกล่องโต้ตอบการแจ้งเตือนที่มีรายการการเลือกของคุณ เมื่อเลือกสิ่งที่เลือกแล้ว EditText จะถูกเติมด้วยสิ่งที่คุณเลือกและป้ายกำกับจะลอยตามที่คุณต้องการ

นี่คือเคล็ดลับของฉัน

สิ่งที่ดีคือทุกอย่างจะเป็นไปอย่างที่คุณต้องการ

แต่สิ่งที่แย่ก็คือมันกำลังเพิ่มลำดับชั้นของเลย์เอาต์และคุณต้องจัดการกับฟังก์ชันการทำงานในโค้ดและมันเป็นวิธีที่น่าเกลียด:

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.TextInputLayout
            android:id="@+id/til"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <EditText
                android:id="@+id/edt"
                android:layout_width="match_parent"
                android:layout_height="@dimen/edt_height"
                android:hint="@string/create_gcc_visa_txt_step" />

        </android.support.design.widget.TextInputLayout>

        <Spinner
            android:id="@+id/spn"
            style="@style/MyAppTheme.Base.Spinner"
            android:layout_height="@dimen/edt_height"
            android:layout_alignBottom="@id/til" />

    </RelativeLayout>

และแทนที่อะแดปเตอร์สำหรับสปินเนอร์เพื่อทำให้ค่าที่เลือกโปร่งใส

public class MySpinnerAdapter extends SimpleAdapter {
    Context mContext;

    public MySpinnerAdapter(Context context, List<String> data, int resource, String[] from, int[] to) {
        super(context, data, resource, from, to);
        mContext = context;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        convertView = super.getView(position, convertView, parent);

        TextView tv = (TextView) convertView.findViewById(android.R.id.text1);
            tv.setTextColor(ContextCompat.getColor(mContext, R.color.transparent));
        return convertView;
    }
}

และหลังจากเลือกในสปินเนอร์เพียงแค่รับข้อความที่เลือกและตั้งค่าเป็น EditText และจะมีผลเช่นเดียวกันกับภาพเคลื่อนไหว

yourSpinnerView.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
        @Override
        public void onItemSelected(AdapterView<String> adapterView, View view, int i, long l) {
            //get your selected text from adapter or from where you want 
            String selectedText = adapterView.getItemAtPosition(i));

            if (i != 0) { 
                edt.setText(selectedText);
            } else { 
                // if in case your spinner have first empty text, 
                // then when spinner selected, just empty EditText.
                edt.setText("");
            }
        }

        @Override
        public void onNothingSelected(AdapterView<?> adapterView) {

        }
    });

หากคุณมีคำถามใด ๆ ถามฉัน

นี่คือไลบรารีที่ฉันใช้สำหรับ Floating label spinner rey5137 Material Library

นอกจากนี้สำหรับการอ้างอิงในอนาคตนี่คือรายชื่อห้องสมุดที่ยอดเยี่ยมบางส่วน ไลบรารี หลักของUI Libraries

SpinnerCustom.java

package com.pozitron.tfkb.customviews;

import android.content.Context;
import android.content.res.TypedArray;
import android.support.annotation.Nullable;
import android.text.SpannableString;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;

import com.pozitron.commons.customviews.TextViewFont;
import com.pozitron.tfkb.R;

import butterknife.BindView;
import butterknife.ButterKnife;

/**
 * Created by so12607 on 31/01/2018.
 */

public class SpinnerCustom extends LinearLayout {

    @BindView(R.id.layoutSpinnerCustomLabel)
    TextViewFont layoutSpinnerCustomLabel;

    @BindView(R.id.layoutSpinnerCustomSpinner)
    TextViewFont layoutSpinnerCustomSpinner;

    @BindView(R.id.layoutSpinner)
    LinearLayout layoutSpinner;

    private View v;

    public SpinnerCustom(Context context) {
        this(context, null);
    }

    public SpinnerCustom(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);

    }

    public SpinnerCustom(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        v = LayoutInflater.from(context).inflate(R.layout.layout_spinner_custom, this, true);
        ButterKnife.bind(this);

        if (!isInEditMode()) {

            TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.SpinnerCustom, 0, 0);
            final String label = array.getString(R.styleable.SpinnerCustom_label);
            final boolean enable = array.getBoolean(R.styleable.SpinnerCustom_enabled, true);
            layoutSpinnerCustomLabel.setText(label);

            layoutSpinnerCustomLabel.setEnabled(enable);
            layoutSpinnerCustomSpinner.setEnabled(enable);
            layoutSpinner.setEnabled(enable);
            layoutSpinner.setClickable(enable);
            v.setEnabled(enable);
            v.setClickable(enable);
            array.recycle();
        }
    }

    public void setText(String text) {
        layoutSpinnerCustomSpinner.setText(text);
    }

    public void setText(SpannableString text) {
        layoutSpinnerCustomSpinner.setText(text);
    }

    public void setText(CharSequence text) {
        layoutSpinnerCustomSpinner.setText(text);
    }

    public void setLabel(String text) {
        layoutSpinnerCustomLabel.setText(text);
    }

    public void setError(SpannableString text) {
        layoutSpinnerCustomSpinner.setError(text);
    }

    public void setEnabled(boolean enable) {
        layoutSpinnerCustomLabel.setEnabled(enable);
        layoutSpinnerCustomSpinner.setEnabled(enable);
        layoutSpinner.setEnabled(!enable);
        layoutSpinner.setClickable(!enable);
    }
}

layout_spinner_custom.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/layoutSpinner"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <com.pozitron.commons.customviews.TextViewFont
        android:id="@+id/layoutSpinnerCustomLabel"
        style="@style/TextLabel"
        tools:text="label" />

    <com.pozitron.commons.customviews.TextViewFont
        android:id="@+id/layoutSpinnerCustomSpinner"
        style="@style/SpinnerText"
        android:clickable="false" />

</LinearLayout>

style.xml

<style name="TextLabel" parent="android:Widget.TextView">
    <item name="font">@integer/font_GTEestiDisplay_Regular</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:textSize">14sp</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:gravity">bottom</item>
    <item name="android:textColor">@color/greyLabel</item>
</style>

<style name="SpinnerText" parent="EditText">
    <item name="font">@integer/font_GTEestiDisplay_Medium</item>
    <item name="android:gravity">bottom</item>
    <item name="android:textSize">17sp</item>
    <item name="android:minHeight">35dp</item>
    <item name="android:focusable">false</item>
    <item name="android:background">@drawable/spinner_selector</item>
    <item name="android:text">@string/select</item>
    <item name="android:textColor">@color/selector_spinner_text</item>
</style>