स्पिनर पर फ्लोटिंग लेबल कैसे जोड़ें

Question 1

एंड्रॉइड डिज़ाइन सपोर्ट लाइब्रेरी का उपयोग करने के बाद TextInputLayoutएक ऊपर एक फ्लोटिंग लेबल लगाने के लिएEditText घटक के , मैं सोच रहा था कि क्या Spinnerघटक के लिए फ़्लोटिंग लेबल जोड़ने का एक तरीका है (जरूरी नहीं कि डिज़ाइन लाइब्रेरी का उपयोग करके)।

इसके द्वारा, मेरा मतलब है कि TextViewऊपर रखी गई वस्तु की तरह Spinner(जाहिर है कोई एनिमेशन जैसा TextInputLayout), लेकिन मैं चाहता हूं पाठ का आकार, फ़ॉन्ट और रंग मेल खाने वाले TextInputLayoutफ्लोटिंग लेबल से मेल खाए ।

उदाहरण के लिए, यह कुछ इस तरह दिखेगा ( Spinnerएस के ऊपर के लेबल देखें ):

जैसा कि मैंने पहले उल्लेख किया है, मेरा मुख्य उद्देश्य ऊपर एक लेबल है Spinner, जैसे कि TextInputLayout- इसलिए पाठ आकार, फ़ॉन्ट, रंग और लेबल और घटक के बीच की दूरी समान होगी।

फ्लोटिंग लेबल टेक्स्ट फ़ील्ड के बारे में Google डिज़ाइन पृष्ठ पर, घटक के सापेक्ष लेबल के आयाम दिखाने वाला आरेख है, लेकिन लेबल टेक्स्ट के रंग या आकार का कोई संकेत नहीं है:

इसलिए, संक्षेप में, मैं पूछ रहा हूं:
- यदि मैं जो पूछ रहा हूं या जो कस्टम दृश्य मैं उपयोग कर सकता हूं, वह क्या होगा, और मैं इसका उपयोग कैसे कर सकता हूं, इसे प्राप्त करने के लिए एक विशेष घटक है।
- यदि नहीं, तो फ्लोटिंग लेबल टेक्स्ट का आकार, रंग और फ़ॉन्ट क्या है, ताकि मैं उपरोक्त छवि में दिखाए गए लेआउट आयामों के साथ TextViewअपने ऊपर रख Spinnerसकूं।

संपादित करें:

से टेक्स्ट फ़ील्ड के लिए गूगल डिजाइन दिशा निर्देशों , यह अस्थायी लेबल के लिए निम्नलिखित है:

संकेत और इनपुट फ़ॉन्ट: रोबोटो नियमित 16sp
लेबल फ़ॉन्ट: रोबोटो नियमित 12sp
टाइल ऊंचाई: 72dp
पाठ ऊपर और नीचे गद्दी: 16dp
पाठ क्षेत्र विभक्त पैडिंग: 8dp

साथ ही ऊपर दिखाए गए चित्र।

तो फ्लोटिंग लेबल फ़ॉन्ट है: रोबोटो रेगुलर 12sp । इसलिए आप लेबल TextViewको प्रदर्शित करने के लिए एक का उपयोग कर सकते हैं Spinnerक्योंकि मुझे किसी भी कस्टम का पता नहीं हैView एस या विशेष घटकों के आप उपयोग कर सकते हैं।

हालांकि , इसे आज़माने के बाद, यह छवि में दिखाए गए उदाहरण के रूप में बहुत अच्छा नहीं लगता है। एक कस्टम दृश्य इस के लिए बेहतर हो सकता है , क्योंकि यह अच्छे लग सकता है, लेकिन उपरोक्त समाधान मूल रूप से जो चाहते थे उसके करीब कुछ हासिल करने का सिर्फ एक तरीका है।

Question 2

मैं चाहता हूं कि पाठ का आकार, फ़ॉन्ट और रंग मेल खाने वाले 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>

यदि आप चाहते हैं कि लेबल हमेशा हाइलाइटेड (उच्चारण) रंग का हो, तो Google डिज़ाइन समर्थन लाइब्रेरी से प्रतिस्थापित TextAppearance.AppCompat.Captionकरें TextAppearance.Design.Hint। हालाँकि, यह शायद थोड़ा अजीब लगेगा अगर आपने भी 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में एक अलग पैडिंग है, हालांकि मैं अधिक समान रूप पाने के लिए सभी अन्य लेबलों के साथ ऊर्ध्वाधर संरेखण रखना पसंद करता हूं।

Question 3

मैंने 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;
    }
});

Question 4

मेरे पास आपके द्वारा बनाई गई एक ही समस्या के समाधान के लिए एक जिस्ट है।

इसकी जांच - पड़ताल करें:

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

अब मुझे स्पिनरों की जरूरत नहीं है। आप अभी भी शामिल एनिमेशन के साथ फ्लोटिंग लेबल प्रभाव रखेंगे।

Question 5

मैंने एक कंपाउंड Viewकंपोनेंट बनाया है जो ऊपर एक लेबल प्रदर्शित करता है Spinner। लेबल का पाठ XML या जावा का उपयोग करके सेट किया जा सकता है।

घटक की मुख्य विशेषताएं हैं Spinner( उनमें से सभी नहीं ) और साथ ही साथ समान दिखती हैंTextInputLayout घटक के हैं।

मैंने इसे एक नाम दिया है LabelledSpinner, और यह Apache 2.0 लाइसेंस के तहत GitHub पर मेरे उपयोगी दृश्यों के एंड्रॉइड लाइब्रेरी के हिस्से के रूप में उपलब्ध है ।

इसका उपयोग करने के लिए, अपनी build.gradleफ़ाइल में पुस्तकालय निर्भरता जोड़ें :

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

इसके उपयोग के उदाहरण GitHub रिपॉजिटरी (एक नमूना ऐप और एक उपयोग गाइड दोनों) में उपलब्ध हैं।

Question 6

एडॉप्टर का उपयोग करने के लिए मैंने रॉड्रिगो के समाधान को संशोधित किया, अर्थात मानक स्पिनर की तरह https://gist.github.com/smithaaron/d2acd57937d7a4201a79

Question 7

मेरे पास एक वैकल्पिक समाधान है जो स्पिनर संवाद पॉपअप का अनुकरण करने के लिए TextInputLayout और एक कस्टम डायलॉगफ्रेगमेंट (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>

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

परिणाम

जब आप स्पिनर स्टाइल किए गए टेक्स्टइंटरप्लॉयआउट पर क्लिक करते हैं, तो यह आपके चयन की सूची वाले अलर्ट डायलॉग को ट्रिगर करेगा। एक बार एक चयन चुने जाने के बाद, EditText आपके चयन के साथ आबाद हो जाएगा और लेबल तैर जाएगा जैसे आप चाहते हैं।

Question 8

आप इसे प्राप्त कर सकते हैं:

इस तरह से नई सामग्री पुस्तकालय शैलियों के साथ:

<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/compenders/menu/

Question 9

यहाँ मेरी चाल है,

अच्छी बात यह है कि सब कुछ आप की तरह काम करेंगे,

लेकिन बुरा यह है कि यह लेआउट पदानुक्रम को बढ़ा रहा है, और आपको कोड में कार्यक्षमता को संभालना होगा, और यह एक बदसूरत समाधान है:

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

        }
    });

यदि आपके पास कोई प्रश्न है, तो मुझसे पूछें

Question 10

यहाँ एक पुस्तकालय है जो मैं फ़्लोटिंग लेबल स्पिनर के लिए उपयोग करता हूँ rey5137 सामग्री पुस्तकालय

इसके अलावा, भविष्य के संदर्भ के लिए, यहां कुछ महान पुस्तकालयों की सूची दी गई है। UI लाइब्रेरीज़ कोर लाइब्रेरीज़

Question 11

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>