Drawble Selectorを使用してButtonを作成する

11033 ワード

なぜデフォルトのボタンがあるの?


私たちが通常使用しているButtonは様々な制限を受けていますが、これらの制限を避けるためにはカスタマイズして使用する必要があります.ボタンや画像をタッチしたい場合や、1つのボタンの現在の状態、例えばフォーカスされた場合、選択された場合など、様々な状態に合わせてカスタマイズしたい場合はDrawble Selectorを使用して作成することができます.

Drawble Selector


まず、Drawble Selectorを使用してボタンを画像としてクリックした場合、別の非クリック画像を作成してみます.
  • res/drawableフォルダをクリックすると、クリックしていない場合(trueとfalse)に画像を入れます.
  • drawableフォルダを右クリックし、「New/Dawable Resource File」を選択し、Root要素をSelectorに指定してSelector XMLを作成し、ボタンをクリックしたときの動作を表示します.

  • の例では、クリック時とクリックしていない場合にのみ2つの例が作成されます.
  • <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="true" 
        	  android:drawable="@drawable/press"/>
        <item android:state_pressed="false"
        	  android:drawable="@drawable/not_pressed"/>
    </selector>
  • で使用されるボタンの背景に適用されます.
  • <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/clicked"
            android:text="버튼 클릭" />
    このように応用すれば?

    だめです。


    どうしてだめなの?特定のバージョンのアンドロイドスタジオでプロジェクトを作成するとき
    1. Theme.MaterialComponents.DayNights.DarkActionBarをデフォルトのトピックに設定します.
    2.トピックでButton生成MaterialButtonを生成します.
    3.MaterialButtonのバックグラウンドには独自のバックグラウンドがあり、android:バックグラウンド属性の設定値を無視!
    それを修正するには、2つの方法があります.
    android xは
  • 標準Buttonに取って代わった.appcompat.widget.AppCompatButtonを使用します.
  • <androidx.appcompat.widget.AppCompatButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/clicked"
            android:text="버튼 클릭" />
  • res/values/themes/themes.xmlでは、上部のparent="Theme.Material Components.DayNight.DarkActionBar"セクション
    parent=“Theme.AppCompat.DayNight.DarkActionBar”.
  • この2つの方法のうちの1つを適用すると、ボタンをクリックしたときとクリックしないときとで異なる画像が表示され、以下に示す.

    ImageViewまたはTextViewのSelector


    では、ImageViewまたはTextViewは同様に適用されますか?ImageViewまたはTextViewでは異なるアプリケーションがあります.TextViewまたはImageViewを上部に配置し、clickable="true"に設定します.次に、バックグラウンドプロパティに同じdrawableを設定します.
    これは、このように設定せずにTextViewにclickable属性を与えると、Textを正しくクリックしないと画像が変化しないためです.
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity">
    
        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/clicked"
            android:clickable="true">
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Hello World!" />
        </RelativeLayout>
    
        <androidx.appcompat.widget.AppCompatButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/clicked" />
    
        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/clicked"
            android:clickable="true">
    
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/clicked" />
        </RelativeLayout>
    
    </LinearLayout>

    六つの状態


    ボタンをクリックすると、それ以外にもいろいろな選択肢があります.
    android:state enable:使用可能なステータス
    android:state select:選択ステータス
    android:state presse:クリック状態(押下状態の場合)
    Android:state focus:フォーカス状態
    Android:state checked:選択した状態
    android:state checkable:チェックできるかどうか
    いろいろな選択肢を実行したい.
    SelectorがEnabled、Selectedなど複数の属性の画像が異なる場合(属性が重なる場合)、最後の属性の画像が表示されます.

    整理する


    1.Drawable Selectorを使用する場合はtrueとfalseを設定します(デフォルトはfalse)。


    2.既存のButtonはDefault値のために変更されませんので、AppCompatのButtonを使用してください(またはトピックで設定を変更してください)


    3.ImageViewまたはTextViewでSelectorを使用する場合は、ビューグループに配置し、ClickableをTrueに設定して使用します。


    ソース


    https://curryyou.tistory.com/398