android - ভাসমান লেবেল স্পিনার?




android-layout android-spinner (6)

আমি TextInputLayout এর ভাসমান লেবেলের সাথে টেক্সট আকার, ফন্ট এবং রঙটি মেলে চাই

এটি কোনও বাহ্যিক গ্রন্থাগার ছাড়াই সহজেই অর্জন করা যায়। TextInputLayout হ্যাক করার চেষ্টা করার পরেও এবং নিজস্ব কাস্টম ভিউ করার পরেও আমি বুঝতে পেরেছি যে একটি সাধারণ TextView ব্যবহার করা অনেক কম কোড নেয় এবং এটি সম্ভবত আরও দক্ষ।

AppCompat লাইব্রেরি থেকে পাঠ্য শৈলী অনুলিপি করা যায়।

স্টাইল

ম্যাটেরিয়াল ডিজাইনের গাইডলাইন থেকে আমরা নিম্নলিখিত তথ্যগুলি পেয়েছি:

  • লেবেলের 8dp নীচে মার্জিন হওয়া উচিত
  • লেবেলটি ইনপুট পাঠ্যের সাথে উল্লম্বভাবে প্রান্তিক করা উচিত

উপাদানগুলির সম্পাদনা EditText বিষয়ে নির্দেশিকাগুলি কী উল্লেখ করে না তা এখানে:

  • এটির 4dp বাম প্যাডিং রয়েছে
  • এর লেবেলের আসলে উপরে 16dp কোনও ব্যবধান নেই, এটি ইন্টারফেস ডিজাইনারের কাছে রেখে দেওয়া হয়েছে: এটি 16dp করে কারণ আপনি যদি এটি অন্য 8dp এর অধীনে 8dp আপনার কেবল অতিরিক্ত 8dp স্থানের প্রয়োজন হবে

তদতিরিক্ত, ডিজাইন সমর্থন লাইব্রেরিতে একটি কেন্দ্রিক উপাদানগুলির লেবেলের জন্য এই স্টাইলটি রয়েছে:

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

নিষ্ক্রিয় উপাদানগুলি কেবল TextAppearance.AppCompat.Caption ব্যবহার TextAppearance.AppCompat.Caption

বাস্তবায়ন

আপনার dimens.xml ফাইলে নিম্নলিখিতটি 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 TextAppearance.AppCompat.Caption TextAppearance.Design.Hint TextAppearance.AppCompat.Caption সাথে প্রতিস্থাপন করুন। TextAppearance.AppCompat.Caption গুগল ডিজাইন সমর্থন লাইব্রেরি থেকে TextAppearance.Design.Hint তবে আপনি যদি একই স্ক্রিনে EditText লেবেল করেন তবে এটি সম্ভবত কিছুটা অদ্ভুত লাগবে।

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

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

ফল

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

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

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

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

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

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

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

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

সম্পাদনা করুন:

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

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

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

সুতরাং ভাসমান লেবেল ফন্টটি হল: রোবোটো নিয়মিত 12 এসপি । অতএব আপনি Spinner লেবেলটি প্রদর্শন করতে একটি TextView ব্যবহার করতে পারেন কারণ আমি কোনও কাস্টম View বা আপনার ব্যবহার করতে পারেন এমন বিশেষ উপাদানগুলি সম্পর্কে জানি না।

যাইহোক , এটি চেষ্টা করে দেখার পরেও চিত্রটিতে প্রদর্শিত উদাহরণের মতো এটি বেশ ভাল দেখাচ্ছে না। একটি কাস্টম ভিউ এর পক্ষে আরও ভাল হতে পারে , কারণ এটি দেখতে আরও ভাল লাগতে পারে তবে উপরের সমাধানটি হ'ল আমি যা চেয়েছিলাম তার কাছাকাছি কিছু অর্জনের একমাত্র উপায়।


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>

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

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>

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

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

ফল

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


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


আমি একটি যৌগিক View উপাদান তৈরি করেছি যা Spinner উপরে একটি লেবেল Spinner । লেবেলের জন্য পাঠ্যটি এক্সএমএল বা জাভাতে সেট করা যেতে পারে।

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

আমি এটির নাম একটি LabelledSpinner এবং এটি অ্যাপাচি ২.০ লাইসেন্সের আওতায় গিটহাবের আমার UsefulViews অ্যান্ড্রয়েড লাইব্রেরির অংশ হিসাবে উপলব্ধ।

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

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

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


এখানে আমার কৌশল,

ভাল জিনিস হ'ল সবকিছু আপনার ইচ্ছা মতো কাজ করবে,

তবে খারাপটি হ'ল এটি লেআউট স্তরক্রমকে বাড়িয়ে তুলছে, এবং আপনাকে কোডে কার্যকারিতা পরিচালনা করতে হবে এবং এটি একটি কুৎসিত সমাধান:

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

        }
    });

যদি আপনার কোন প্রশ্ন থাকে আমাকে জিজ্ঞাসা করুন





android-textinputlayout