うちなー えんじにあ ぶろぐ

開発に関するブログです 沖縄県民 Android好き

Android Buttonのよくつかう色々まとめ

よくつかうボタン!!
クリックイベントはTextViewの次に覚えるものな気がしますね!
※偏見かもですがw

Androidでボタンって言っても、
標準ボタンを使ってほにゃほにゃするーっていうのあまり見たことが無い気がします。
2018/3/9 追記
標準でもStyle定義でいい感じの設定がありました!ww
materialdoc.com

最初の説明は標準ボタンでやりますが、
カスタマイズしたボタンまで記事にしますので!お楽しみに。

Buttonのいろいろ

  • ボタンの設定
  • クリックイベントについて
    • 匿名実装
    • interface
    • 独自クラス
    • xmlから
  • 色々なボタン

環境

AndroidStudio 3
Java
DataBinding

ボタン

それでは早速、xmlどん!

<!--android:text="ここに静的テキストを!"-->
<Button
    android:id="@+id/button1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="ぼたん"/>

はい。。ボタンですね。。。
前回のTextViewと同じようにtextの部分にボタンテキストを設定します。
もうそのまんまです。

そのほかにも標準で用意されているボタンは
ToggleButton
checked=""でOn/Off切り替えができるボタンです。

<ToggleButton
    android:id="@+id/toggle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="ToggleButton" 
    android:checked="true"/>

ImageButton
src=""で画像が設定できるボタンです。

<ImageButton
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@mipmap/ic_launcher"/>
見た目

f:id:kamiya-kizuku:20171210201635p:plain

標準ボタンを設定できるのですが、
すごく見た目が微妙です。。。
冒頭で伝えた、標準を使ってほにゃほにゃーの部分がよくわかったかと思います。。。
なんかやったら標準でイケてる感じになるのかな?知ってる人いたら教えてほしいです!
後ほど見た目にこだわる為の設定方法を記載します。
では次!!

クリックイベントについて

ボタンのクリックイベント!
簡単に設定できるのですが、問題が1点!
設定方法多すぎ問題!!!w
このブログ内では自分の一番好きな方法をおすすめとして記載しますが、
既存のアプリに修正を入れるのであれば、
クリック処理はそれに合わせて対応したほうが良いかと思いますw
それでは1つずつ説明していきます!
※好きな書き方順で書いています

匿名実装

ボタンひとつに対して、一つ設定する事ができる。
ボタンをクリックすると、new View.OnClickListener(){}の中にいる、
public void onClick(View v){}というメソッドがコールされる

mBinding.button1.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Log.e("Button", "Button1");
    }
});
interface

ボタン操作を行うクラスに対して、implements View.OnClickListener
を設定し、例題ではMainActivityの中に、onClick(View v){}を実装し、
ボタンに対してthis(自身)を渡す。
setOnClickListener(this)
の部分。

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);

        // Button2のクリックイベント設定
        mBinding.button2.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        Log.e("Button", "Button2クリックー");
    }
}

MainActivityにpublicでonClickメソッドを実装する必要がある部分が好きじゃないw
たくさんボタンがあった場合、共通でthisを渡せば可読性が上がる気もする。
必要であれば実装もありかと。
たくさんのボタンがあると、匿名の場合は大量にクリック処理が必要になるため

独自クラス

独自Clickクラスを別で作成し対応するパターン

public class MyClick implements View.OnClickListener {
    @Override
    public void onClick(View v) {
        Log.d("Button", "Button3クリックー");
    }
}

Button実装側

// Button3のクリックイベント設定
mBinding.button3.setOnClickListener(new MyClick());

Activityをまたがるが、Click処理は共通化したいとかそういった時に使うものかと。
ただ、クラスが分かれてしまうので、見る物が多くなってしまうため、
あまり好きになれない。。。
これも必要であればかと!

xmlのボタン項目にonClick="onClickButton4"という実装を行う。
Activity側で同じ名前でメソッドを作成し実装する方法。

<Button
    android:id="@+id/button4"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="ぼたん"
    android:onClick="onClickButton4"/>
public void onClickButton4(View v){
    Log.d("Button", "Button4クリックー");
}

xml側の検索が必要。
Java側の検索が必要。
メソッド名称を変更するとxml側も変更する必要がある。
Java側で使われていないメソッドと判断される。
等、個人的にあまり好きになれない実装方法です。
setOnClickListenerを書かなくて良いとうメリットはあると思います!

結論、
個人的に好きなクリック処理で実装したほうが一番だと思いますw
4パターンの書き方はClick処理だけで無く、タッチイベントやロングクリック等、
色々なイベントで同じような書き方ができるので一つ覚えたら色々な応用は利くようにしています。

続いてレイアウト!

  • 色々なボタン

標準ボタンってそっけない!
そんなあなたへ。。。
はいどーん!!
とりあえず見て下さい!

<LinearLayout
    android:id="@+id/button5"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <ImageView
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@mipmap/ic_launcher" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="タイトル" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2行目の文章だす!" />

    </LinearLayout>

</LinearLayout>
// Button5のクリックイベント設定
mBinding.button5.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Log.d("Button", "Button5クリックー");
    }
});

LinearLayoutに対してOnClickListenerを定義する事ができるのです!
というより、正確に言うとViewクラスが継承されて出来ているViewに対して、
全てonClickのイベントを取得する事が可能です。
※onClick以外におonTouch等色々あります。
なので、レイアウトをカスタマイズしたいという場合は、
ViewGroupのLayoutを活用して独自でカスタマイズしてしまえば良いのです!
ますます標準Buttonの役割が微妙になってきましたがw
レイアウトにこだわらない時とかはボタンを押したフィードバックも付いているし、そのままの奴使うとかになるのかもしれませんね。

それでは本日はここまでー

最終的なやつ

f:id:kamiya-kizuku:20171210210232p:plain

Github

github.com

あげてますー