89

TextInputLayoutコンポーネントの上にフローティング ラベルを配置するために Android Design Support Library を使用した後、EditTextコンポーネントにフローティング ラベルを追加する方法があるかどうか疑問に思いましたSpinner(必ずしもデザイン ライブラリを使用する必要はありません)。

これは、 のTextView上に配置された のようなものを意味しますSpinner(明らかに のようなアニメーションはありませんTextInputLayout) が、テキストのサイズ、フォント、および色をのフローティング ラベルのものと一致さTextInputLayoutせたいと考えています。

たとえば、次のようになります ( Spinners の上のラベルを参照してください)。

ここに画像の説明を入力

前に述べたように、私の主な目的は、のように の上にラベルを表示することSpinnerですTextInputLayout。そのため、ラベルとコンポーネントの間のテキスト サイズ、フォント、色、および距離は同じになります。

フローティング ラベル テキスト フィールドに関する Google デザイン ページには、コンポーネントに対するラベルの寸法を示す図がありますが、ラベル テキストの色やサイズは示されていません。

ここに画像の説明を入力

要約すると、私は尋ねています:
- 私が求めていることを達成するための特別なコンポーネントまたは使用できるカスタム ビューがある場合、それは何であり、どのように使用できますか。
- そうでない場合、フローティング ラベルのテキスト サイズ、色、フォントを教えてください。上の画像に示されているレイアウトの寸法でTextView上にを配置できます。Spinner

編集：

テキスト フィールドの Google デザイン ガイドラインから、フローティング ラベルについては次のようになります。

ヒントと入力のフォント: Roboto Regular 16sp
ラベルのフォント: Roboto Regular 12sp
タイルの高さ: 72 dp
テキストの上下のパディング: 16 dp
テキスト フィールドの区切りのパディング: 8 dp

上に示した画像も同様です。

したがって、フローティング ラベルのフォントはRoboto Regular 12spです。したがって、使用できるカスタム s または特別なコンポーネントがわからないため、 a を使用しTextViewてラベルを表示できます。SpinnerView

ただし、試してみると、画像に示されている例ほど見栄えがよくありません。カスタム ビューの方が見栄えが良いので、これには適しているかもしれませんが、上記のソリューションは、私が最初に望んでいたものに近いものを実現するための 1 つの方法にすぎません。

4

10 に答える 10

45

テキストのサイズ、フォント、色をのフローティング ラベルと一致さTextInputLayoutせたい。

これは、外部ライブラリなしで簡単に実現できます。をハックしようとしたり、独自のカスタム ビューを作成したりした後、シンプルなビューを使用するとコードが大幅に減り、おそらくより効率的でTextInputLayoutあることに気付きました。TextView

文字スタイルはライブラリからコピーできます。AppCompat

スタイル

マテリアル デザイン ガイドラインから、次の情報が得られます。

  • ラベルの下マージンは8dp
  • ラベルは入力テキストと垂直方向に揃える必要があります

Material についてガイドラインで言及されていないことは次の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 Design Support Library のTextAppearance.AppCompat.Caption色に置き換えます。ただし、同じ画面にTextAppearance.Design.Hintラベル付きのビューもある場合、これはおそらく少し奇妙に見えるでしょう。EditText

最後に、スタイルを適用して (またはその他の要素)のTextView上に a を置くことができます。Spinner

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

結果

次のスクリーンショットは、2 つの通常のTextInputLayoutビューの後にラベルとSpinner. それらをさらに分離するために追加のスペースを適用しませんでした8dpが、これはサイズ、フォント、および色が反映されていることを示しています.

内の要素のSpinnerパディングは異なりますが、より均一な外観にするために、他のすべてのラベルとの垂直方向の配置を維持することを好みます。

ここに画像の説明を入力

于 2016-08-12T11:34:25.737 に答える
34

あなたが抱えているのと同じ問題を解決するために、私は自分で作った要点を持っています。

見てみな：

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

今ではスピナーは必要ありません。アニメーションが含まれている場合でも、フローティング ラベル効果が得られます。

于 2015-08-02T20:46:01.193 に答える
5

アダプターを使用するようにロドリゴのソリューションを変更しました。つまり、標準のスピナーに似てい ます https://gist.github.com/smithaaron/d2acd57937d7a4201a79

于 2015-11-13T15:30:26.993 に答える
1

これは、フローティング ラベル スピナー rey5137 マテリアル ライブラリに使用するライブラリです。

また、今後の参考のために、いくつかの優れたライブラリのリストを次に示します。 UI ライブラリ コア ライブラリ

于 2015-08-04T02:51:41.147 に答える
0

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>
于 2018-02-23T08:35:16.077 に答える