アンドロイド - 、Button、TextViewを実装する方法

By JS | Last updated: January 06, 2018

androidbasic

Buttonはボタン入力を受けて、TextViewはTextを表現するときに使用するViewです。もちろん、これらはViewGroupがないので、他のViewの位置を定めることはできません。

通常AndroidはUIをxmlファイルに定義し、Event Handling(イベント処理)は、Javaファイルで行います。 JavaコードでもUIを作成することができますが、柔軟な開発をしようとAndroidは、これを区分しました。今後UIはすべてxmlファイルに 定義すると考えてくださいになりそうで、イベント処理は、Javaでと考えてくださいと思われる。

この章では、以下のような順序でButtonについて調べてみましょう。

  1. xmlファイルから、ButtonとTextView生成します。
  2. JavaファイルでUI controlとEvent handling。

プロジェクトを作成する

[File] >> [New] >> [New Project]でEmpty Activityを選択し、新しいプロジェクトを作成してください。

プロジェクトを作成すると、自動的にMainActivity.javaとactivity_main.xmlファイルが生成されます。

UI生成

/layout/activity_main.xmlでUIを定義することができます。アプリが実行されるFrameworkは、xmlファイルを読むViewオブジェクトを生成します。

基本的に生成された activity_main.xmlを見ればConstraintLayoutの中にTextViewが定義されていますよ。 TextViewの下にButton 2つを生成してみましょう。

以下のようにコードを入力してください。各Viewオブジェクトごとにidを設定したが、Javaで作成されたViewオブジェクトにアクセスするには、idが必要なためです。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.codechacha.myapplication.MainActivity">

    <TextView
        android:id="@+id/tv_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=""
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn_prev"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Prev"
        android:layout_margin="3dp"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintRight_toLeftOf="@+id/btn_next"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <Button
        android:id="@+id/btn_next"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Next"
        android:layout_margin="3dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/btn_prev"
        app:layout_constraintBottom_toBottomOf="parent"/>

</android.support.constraint.ConstraintLayout>

ビルドしてアプリを起動してみると、下にボタンが2つ作成されたことを確認することができます。 ConstraintLayoutの Weighted Chainを利用して、各Buttonのサイズが幅の半々占めるようにしました。 また、TextViewのtextプロパティは、 ""に設定したため、何も見えません。

ボタンを押してみるとAnimation効果が見えます。基本的には設定されたanimationでcustomして変更することができている部分です。

button-textview

UI control & Event handling

アプリが実行されるFrameworkはxmlファイルを読んでUIオブジェクトを生成します。 Javaでは、生成されたオブジェクトをcontrolすることができます。 また、ユーザーから受信したInput eventをhandlingできます。

MainActivity.javaを開いてみてください。オブジェクトは、生成された状態であり、Javaでこれを参照して使用する必要があります。 オブジェクト参照をするには、以下のコードのように入力します。

package com.codechacha.myapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private TextView mTextView;
    private Button mBtnPrev;
    private Button mBtnNext;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mTextView = (TextView) findViewById(R.id.tv_text);
        mBtnPrev = (Button) findViewById(R.id.btn_prev);
        mBtnNext = (Button) findViewById(R.id.btn_next);
    }
}

コードを分析してみると、まずTextViewオブジェクト1つ、Buttonオブジェクトの2つを定義します。

private TextView mTextView;
private Button mBtnPrev;
private Button mBtnNext;

setContentView()は、 activity_main.xmlファイルを参照して、オブジェクトを生成するという意味です。そして、 findViewById()関数に activity_main.xmlで定義したidをargumentに入力して、オブジェクトを参照することができます。

setContentView(R.layout.activity_main);

mTextView = (TextView) findViewById(R.id.tv_text);
mBtnPrev = (Button) findViewById(R.id.btn_prev);
mBtnNext = (Button) findViewById(R.id.btn_next);

XMLによって生成されたオブジェクトをJavaで参照したら、もう使用するだけです。

簡単に... Butotnが押されたとき、TextViewのtextを変更することを実装してみましょう。次のコードを入力し、結果を確認してみてください。

package com.codechacha.myapplication;

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    public static final String TAG = "MainActivity";
    private TextView mTextView;
    private Button mBtnPrev;
    private Button mBtnNext;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mTextView = (TextView) findViewById(R.id.tv_text);
        mBtnPrev = (Button) findViewById(R.id.btn_prev);
        mBtnNext = (Button) findViewById(R.id.btn_next);

        mBtnPrev.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.d(TAG, "Prev button is pressed");
                mTextView.setText("Prev button is pressed");
                mTextView.setTextSize(20);
                mTextView.setTextColor(Color.BLUE);
            }
        });

        mBtnNext.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.d(TAG, "Next button is pressed");
                mTextView.setText("Next button is pressed");
                mTextView.setTextSize(15);
                mTextView.setTextColor(Color.RED);
            }
        });
    }
}

Buttonオブジェクトは、listenerを登録することができます。 OnClickListenerを登録すると、Buttonが押されたときcallbackをしてくれます。 もしButtonが押されるとonClick()の関数が1回呼び出されます。

TextView.setText()という関数は、TextViewのtextを変更する関数であり、TextView.setTextSize()は、文字サイズを変更する関数です。 また、TextView.setTextColor()は、textの色を変更する関数です。

mBtnPrev.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Log.d(TAG, "Prev button is pressed");
        mTextView.setText("Prev button is pressed");
        mTextView.setTextSize(20);
        mTextView.setTextColor(Color.BLUE);
    }
});

アプリを起動して、ボタンを押してみるとコーディングしたようにtextが入力されました。 button-textview

ボタンが押されるたびに、ログにも出力されることを確認することができます。

01-08 21:36:37.335 5254-5254/com.codechacha.myapplication D/MainActivity: Prev button is pressed
01-08 21:36:37.873 5254-5254/com.codechacha.myapplication D/MainActivity: Next button is pressed

まとめ

ButtonとTextViewオブジェクトについて簡単に調べてみました。実際、多くの関数がありますが、単純なだけ書いてみました。 他のViewオブジェクトを学ぶとき、他の機能を使用して、見て、知識を広げる良さそうです。

ButtonとTextViewが提供する関数についてもっと知りたい方はAPI Referenceを参照してください。

チュートリアルで使用したコードは、GitHub：Button、TextViewで確認することができます。

参考

android

Related Posts

codechachaCopyright ©2019 codechacha