স্পিনারে কীভাবে ভাসমান লেবেল যুক্ত করা যায়

Question 1

অ্যান্ড্রয়েড ডিজাইন সাপোর্ট লাইব্রেরিটি TextInputLayoutকোনও EditTextউপাদানটির উপরে ভাসমান লেবেল ব্যবহার করার পরে , আমি ভাবছিলাম যে Spinnerউপাদানটিতে কোনও ভাসমান লেবেল যুক্ত করার উপায় আছে কিনা (অগত্যা ডিজাইনের লাইব্রেরিটি ব্যবহার না করে)।

এর মাধ্যমে, আমি TextViewএর Spinner( প্লেয়ারের মতো কোনও অ্যানিমেশন TextInputLayout) উপরে রাখার মতো কিছু বোঝাতে চাই , তবে আমি চাই ভাসমান লেবেলের সাথে টেক্সট আকার, ফন্ট এবং রঙের সাথে মেলেTextInputLayout ।

উদাহরণস্বরূপ, এটি দেখতে এমন কিছু লাগবে ( Spinnerএর উপরের লেবেলগুলি দেখুন ):

যেমনটি আমি আগেই উল্লেখ করেছি, আমার মূল লক্ষ্যটি হ'ল উপরে Spinnerযেমন একটি লেবেল রয়েছে TextInputLayout- তাই পাঠ্যের আকার, ফন্ট, রঙ এবং লেবেল এবং উপাদানগুলির মধ্যে দূরত্ব একই হবে।

উপর ট্যাগ পাঠ্য ক্ষেত্রের ভাসমান সম্পর্কে Google ডিজাইন পৃষ্ঠা সেখানে উপাদান লেবেল আপেক্ষিক মাত্রা দেখাচ্ছে একটি ডায়াগ্রাম, কিন্তু ট্যাগ পাঠ্যের রঙ বা আকার কোন ইঙ্গিত নেই:

সুতরাং, সংক্ষেপে, আমি জিজ্ঞাসা করছি:
- আমি যা জিজ্ঞাসা করছি বা কাস্টম ভিউটি আমি ব্যবহার করতে পারি তা অর্জন করার জন্য যদি কোনও বিশেষ উপাদান থাকে তবে তা কী হবে এবং আমি কীভাবে এটি ব্যবহার করতে পারি।
- যদি তা না হয় তবে ভাসমান লেবেলের পাঠ্যের আকার, রঙ এবং ফন্টটি কী, যাতে উপরের চিত্রটিতে প্রদর্শিত বিন্যাসের মাত্রাটি TextViewআমি আমার উপরে রাখতে পারি Spinner।

সম্পাদনা:

থেকে পাঠ্য ক্ষেত্রের জন্য Google ডিজাইন নির্দেশিকা , এটা ভাসমান লেবেলের জন্য নিম্নলিখিত রয়েছে:

ইঙ্গিত এবং ইনপুট ফন্ট: রোবোটো নিয়মিত 16 স্প
লেবেল ফন্ট: রোবোটো নিয়মিত 12 স্পি টাইলের
উচ্চতা: 72 ডিপি
পাঠ্য শীর্ষ এবং নীচের প্যাডিং: 16 ডিপি
পাঠ্য ক্ষেত্র বিভাজক প্যাডিং: 8 ডিপি

পাশাপাশি উপরের চিত্রগুলি।

সুতরাং ভাসমান লেবেল ফন্টটি হল: রোবোটো নিয়মিত 12 এসপি । অতএব আপনি লেবেলটি 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>

আপনি যদি চান ট্যাগ সবসময় হাইলাইট (অ্যাকসেন্ট) রঙ আছে, প্রতিস্থাপন TextAppearance.AppCompat.Captionসঙ্গে TextAppearance.Design.Hintগুগল ডিজাইন সাপোর্ট লাইব্রেরী থেকে। তবে আপনার যদি EditTextএকই স্ক্রিনে ভিউগুলি লেবেল করা থাকে তবে এটি সম্ভবত কিছুটা অদ্ভুত লাগবে ।

অবশেষে, আপনি একটি রাখতে পারেন TextViewSpinner প্রয়োগ শৈলীর সাথে আপনার (বা অন্য কোনও উপাদান) উপরে :

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

ফলাফল

নীচের স্ক্রিনশটটি দুটি সাধারণ TextInputLayoutদর্শন সহ একটি সাধারণ উদাহরণ দেখায় যার পরে একটি লেবেল এবং এSpinner । 8dpএগুলি আরও আলাদা করার জন্য আমি অতিরিক্ত স্পেসিং প্রয়োগ করিনি , তবে এটি আপনাকে দেখায় যে আকার, ফন্ট এবং রঙ প্রতিফলিত হয়েছে।

এর অভ্যন্তরের উপাদানগুলির Spinnerআলাদা প্যাডিং রয়েছে, তবে আমি আরও ইউনিফর্ম চেহারা পেতে অন্য সমস্ত লেবেলের সাথে উল্লম্ব সারিবদ্ধ রাখা পছন্দ করি।

Question 3

আমি একটি অটো কমপ্লিটেক্সটভিউ ব্যবহার করে, কীবোর্ড অক্ষম করে এবং স্পর্শে বিকল্পগুলি দেখিয়ে এটি অর্জন করেছি।

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। লেবেলের জন্য পাঠ্যটি এক্সএমএল বা জাভাতে সেট করা যেতে পারে।

উপাদানটির সাথে একটিগুলির Spinner( যেমন সমস্ত নয় ) মূল বৈশিষ্ট্য রয়েছে তেমনি TextInputLayoutউপাদানটির সাথে সাদৃশ্যযুক্ত।

আমি এটির নাম দিয়েছি LabelledSpinnerএবং এটি অ্যাপাচি ২.০ লাইসেন্সের আওতায় গিটহাবের আমার ইউজারফুলভিউ অ্যান্ড্রয়েড গ্রন্থাগারের অংশ হিসাবে উপলব্ধ ।

এটি ব্যবহার করতে, আপনার build.gradleফাইলে লাইব্রেরি নির্ভরতা যুক্ত করুন:

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

এর ব্যবহারের উদাহরণগুলি গিটহাব সংগ্রহস্থলে (উভয় একটি নমুনা অ্যাপ্লিকেশন এবং ব্যবহার নির্দেশিকা) উপলভ্য।

Question 6

আপনি এটি অর্জন করতে পারেন:

এই জাতীয় নতুন লাইব্রেরি স্টাইল সহ:

<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://matory.io/develop/android/components/menu/

Question 7

আমি অ্যাডাপ্টার ব্যবহারের জন্য রডরিগোর সমাধানটি সংশোধন করেছি, যেমন আরও একটি স্ট্যান্ডার্ড স্পিনার https://gist.github.com/smithaaron/d2acd57937d7a4201a79 এর মতো

Question 8

আমার কাছে একটি বিকল্প সমাধান রয়েছে যা স্পিনার ডায়ালগ পপআপ অনুকরণ করতে টেক্সট ইনপুটলয়েট এবং একটি কাস্টম ডায়ালগফ্র্যাগমেন্ট (সতর্কতা ডায়ালগ) ব্যবহার করে।

বিন্যাস.এক্সএমএল:

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

ডায়ালগফ্র্যাগমেন্ট (সতর্কতা ডায়ালগ) এর মাধ্যমে কাস্টম স্পিনার তৈরি করুন

স্পিনারফ্র্যাগমেন্ট.জভা:

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

}

ক্রিয়াকলাপ.জভা:

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

ফলাফল

আপনি যখন স্পিনার স্টাইলযুক্ত টেক্সট ইনপুটলয়আউট ক্লিক করেন, এটি আপনার নির্বাচনের তালিকা সহ একটি সতর্কতা ডায়ালগ ট্রিগার করবে trigger একবার নির্বাচন বাছাই হয়ে গেলে, সম্পাদনা পাঠ আপনার নির্বাচনের সাথে পপুলেটে যাবে এবং লেবেলটি আপনার পছন্দ মতো ভেসে উঠবে।

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

এবং স্পিনারে নির্বাচন করার পরে, কেবল নির্বাচিত পাঠ্যটি পান এবং এডিট টেক্সট এ সেট করুন এবং এটি অ্যানিমেশনের সাথে একই প্রভাব ফেলবে

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 উপাদান লাইব্রেরির জন্য ব্যবহার করি

এছাড়াও, ভবিষ্যতের রেফারেন্সের জন্য, এখানে কয়েকটি দুর্দান্ত গ্রন্থাগারের তালিকা রয়েছে is ইউআই লাইব্রেরি কোর লাইব্রেরি

Question 11

স্পিনারকাস্টম.জভা

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

বিন্যাস_স্পিনার_কাস্টম.এক্সএমএল

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