Sau khi sử dụng Thư viện hỗ trợ thiết kế của Android TextInputLayoutđể đặt nhãn nổi phía trên một EditTextthành phần, tôi đã tự hỏi liệu có cách nào để thêm nhãn nổi vào Spinnerthành phần đó không (không nhất thiết phải sử dụng Thư viện thiết kế).

Bởi điều này, ý tôi là một cái gì đó giống như TextViewđược đặt bên trên Spinner(rõ ràng là không có hoạt ảnh nào giống như TextInputLayout), nhưng tôi muốn kích thước văn bản, phông chữ và màu sắc phù hợp với TextInputLayoutnhãn nổi của .

Ví dụ: nó sẽ trông giống như thế này (xem các nhãn phía trên các Spinners):

Như tôi đã đề cập trước đây, mục đích chính của tôi là có một nhãn phía trên Spinner, cũng giống như TextInputLayout- kích thước văn bản, phông chữ, màu sắc và khoảng cách giữa nhãn và thành phần sẽ giống nhau.

Trên trang Thiết kế của Google về các trường văn bản nhãn nổi , có một sơ đồ hiển thị các kích thước của nhãn liên quan đến thành phần, nhưng không có dấu hiệu về kích thước hoặc màu văn bản nhãn:

Vì vậy, để tóm tắt, tôi hỏi:
- Nếu có một thành phần đặc biệt để đạt được những gì tôi đang yêu cầu hoặc một chế độ xem tùy chỉnh mà tôi có thể sử dụng, thì nó sẽ là gì và tôi có thể sử dụng nó như thế nào.
- Nếu không, kích thước văn bản nhãn nổi, màu sắc và phông chữ là gì, để tôi có thể đặt TextViewở trên của tôi Spinnervới kích thước bố cục như trong hình trên.

BIÊN TẬP:

Từ nguyên tắc Thiết kế của Google dành cho các trường văn bản , nó có các nội dung sau dành cho nhãn nổi:

Gợi ý và phông chữ nhập: Roboto Thông thường 16sp
Phông chữ nhãn: Roboto Thông thường 12sp
Chiều cao ô: 72dp Phần đệm
trên và dưới
văn bản: 16dp Phần đệm chia trường văn bản: 8dp

cũng như các hình ảnh hiển thị ở trên.

Vì vậy, phông chữ nhãn nổi là: Roboto Regular 12sp . Do đó, bạn có thể sử dụng a TextViewđể hiển thị Spinnernhãn vì tôi không biết về bất kỳ Viewthành phần tùy chỉnh hoặc đặc biệt nào mà bạn có thể sử dụng.

Tuy nhiên , sau khi dùng thử, nó không hoàn toàn tốt như ví dụ trong hình ảnh. Một giao diện tùy chỉnh có thể tốt hơn cho điều này , vì nó có thể trông đẹp hơn, nhưng giải pháp trên chỉ là một cách để đạt được một cái gì đó gần với những gì tôi muốn ban đầu.

Tôi muốn kích thước văn bản, phông chữ và màu sắc phù hợp với TextInputLayoutnhãn nổi của .

Điều này có thể đạt được dễ dàng mà không cần bất kỳ thư viện bên ngoài nào. Sau khi cố gắng hack TextInputLayoutvà thậm chí tạo chế độ xem tùy chỉnh của riêng mình, tôi nhận ra rằng việc sử dụng một cách đơn giản TextViewsẽ tốn ít mã hơn nhiều và nó có lẽ hiệu quả hơn.

Kiểu văn bản có thể được sao chép từ AppCompatthư viện.

Phong cách

Từ các nguyên tắc thiết kế Material Design, chúng tôi nhận được thông tin sau:

• nhãn phải có lề dưới là 8dp
• nhãn phải được căn chỉnh theo chiều dọc với văn bản đầu vào

Dưới đây là những điều mà nguyên tắc không đề cập đến về Vật liệu EditText:

• nó có một phần đệm bên trái của 4dp
• nhãn của nó thực sự không có bất kỳ khoảng cách nào 16dpở trên nó, điều này được để cho người thiết kế giao diện: điều này có ý nghĩa bởi vì nếu bạn đặt nó dưới nhãn khác EditText, bạn sẽ chỉ cần thêm một 8dpkhoảng trống

Hơn nữa, Thư viện hỗ trợ thiết kế chứa kiểu này cho nhãn của phần tử tập trung:

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

Các yếu tố không hoạt động chỉ cần sử dụng TextAppearance.AppCompat.Caption.

Thực hiện

Thêm phần sau vào dimens.xmltệp của bạn :

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

Sau đó thêm cái này vào 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>

Nếu bạn muốn nhãn luôn có màu được đánh dấu (có dấu), hãy thay thế TextAppearance.AppCompat.Captionbằng TextAppearance.Design.Hinttừ Thư viện hỗ trợ thiết kế của Google. Tuy nhiên, điều này có thể sẽ hơi kỳ lạ nếu bạn cũng có các EditTextchế độ xem được gắn nhãn trên cùng một màn hình.

Cuối cùng, bạn có thể đặt một TextViewphía trên của bạn Spinner(hoặc bất kỳ phần tử nào khác) với kiểu được áp dụng:

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

Kết quả

Ảnh chụp màn hình sau đây cho thấy một ví dụ đơn giản với hai TextInputLayoutchế độ xem bình thường theo sau là nhãn và a Spinner. Tôi đã không áp dụng 8dpkhoảng cách bổ sung để tách chúng ra xa hơn, nhưng điều này cho bạn thấy rằng kích thước, phông chữ và màu sắc được phản ánh.

Các phần tử bên trong Spinnercó một phần đệm khác nhau, tuy nhiên tôi muốn giữ căn chỉnh theo chiều dọc với tất cả các nhãn khác để có được cái nhìn đồng nhất hơn.

Tôi đã đạt được điều này bằng cách sử dụng AutoCompleteTextView, tắt bàn phím và hiển thị các tùy chọn khi chạm.

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;
    }
});

Tôi có một ý chính do chính tôi đưa ra để giải quyết vấn đề tương tự mà bạn gặp phải.

Kiểm tra nó ra:

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

Bây giờ tôi không cần con quay. Bạn vẫn sẽ có hiệu ứng nhãn nổi với các hoạt ảnh được bao gồm.

Tôi đã tạo một Viewthành phần phức hợp hiển thị nhãn phía trên Spinner. Văn bản cho nhãn có thể được đặt bằng XML hoặc bằng Java.

Thành phần có các tính năng chính của một Spinner( không phải tất cả chúng) cũng như trông giống với TextInputLayoutthành phần.

Tôi đã đặt tên cho nó là a LabelledSpinnervà nó có sẵn như một phần của thư viện Android UsefulViews của tôi trên GitHub theo Giấy phép Apache 2.0 .

Để sử dụng nó, hãy thêm phần phụ thuộc thư viện vào build.gradletệp của bạn :

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

Ví dụ về cách sử dụng nó có sẵn tại kho lưu trữ GitHub (cả ứng dụng mẫu và hướng dẫn sử dụng).

Tôi đã sửa đổi giải pháp của Rodrigo để sử dụng bộ điều hợp, tức là giống một Spinner tiêu chuẩn hơn https://gist.github.com/smithaaron/d2acd57937d7a4201a79

Tôi có một giải pháp thay thế sử dụng hành vi của TextInputLayout và DialogFragment tùy chỉnh (AlertDialog) để mô phỏng cửa sổ bật lên hộp thoại xoay.

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>

Tạo Spinner tùy chỉnh qua 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");
}

Kết quả

Khi bạn nhấp vào TextInputLayout theo kiểu vòng quay, nó sẽ kích hoạt hộp thoại cảnh báo chứa danh sách các lựa chọn của bạn. Sau khi lựa chọn được chọn, EditText sẽ được điền vào lựa chọn của bạn và nhãn sẽ nổi như cách bạn muốn.

Bạn có thể đạt được điều này:

Với các kiểu thư viện Material mới như thế này:

<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>

để biết thêm thông tin: https://material.io/develop/android/components/menu/

Đây là mẹo của tôi,

điều tốt là mọi thứ sẽ hoạt động như bạn muốn,

nhưng điều tồi tệ là nó đang tăng hệ thống phân cấp bố cục và bạn phải xử lý chức năng trong mã, và đó là một giải pháp tồi tệ:

    <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>

và ghi đè bộ điều hợp cho spinner, để làm cho các giá trị đã chọn trong suốt

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;
    }
}

và sau khi chọn trong spinner, chỉ cần lấy văn bản đã chọn và đặt nó thành EditText và nó sẽ có cùng hiệu ứng với hoạt ảnh

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) {

        }
    });

Nếu bạn có bất kỳ câu hỏi nào Hãy hỏi tôi

Đây là thư viện mà tôi sử dụng cho Thư viện vật liệu spinner rey5137 Floating label

Ngoài ra, để tham khảo trong tương lai, đây là danh sách một số thư viện tuyệt vời. Thư viện UI Core Thư viện

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>