2.1 UI控件与代码的关联

界面的布局

把我们创建好的Android项目。

打开./app/src/main/res/layout/activity_main.xml

这是一个布局样式的文件。

打开design标签窗口。

通过部署如下界面：

其中有关显示的信息和布局方式等，都可以通过调整xml文件或者通过可视化界面修改。

UI和代码的关联

然后我们打开MainActivity.java文件。

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.EditText;

import com.google.android.gms.appindexing.Action;
import com.google.android.gms.appindexing.AppIndex;
import com.google.android.gms.common.api.GoogleApiClient;

public class MainActivity extends AppCompatActivity {

    public Button btn;
    public EditText editText_username;

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

        //关联变量和 UI控件，其中 R.id.button 为按钮控件的ID
         //      R.id.editText_username为用户名EditText的控件ID
        btn = (Button)findViewById(R.id.button);
        editText_username = (EditText) findViewById(R.id.editText_username);

        //设置btn按钮的点击事件
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //获取editText中的数据
                String username = editText_username.getText().toString();

                //打印到控制台
                Log.e("MainActivityDebug", username);
            }
        });
    }
}

点击运行：

当点击按钮之后，Android Studio控制台会出现如下信息：

/com.cpp.itcast.testapp E/MainActivityDebug: 你好安卓！