T02.01-Exercise-CreateLayout

첫번째 App은 장난감 목록을 보여주는 것인데

ToyBox라는 class에 있는 것들을 보여주는 것이었다.

두번째 App : Github-Repo-Search

Github에 있는 project를 검색하여 해당 목록을 보여주는 것이다.

network통신 및 parsing 작업

Ex1에서는 프로젝트 생성이다.

T01 프로젝트와 같이 프로젝트 생성

예제 프로젝트의 TODO 를 Complete 하면 된다.

- activity_main.xml 에서 25개

- MainActivity.java 에서 6개

- build.gradle에서 1개

총 3개의 파일에 32개의 TODO가 있다.

먼저 activity_main.xml

<!--TODO (1) Change the ConstraintLayout to a LinearLayout-->
<!--TODO (2) Make the orientation vertical-->
<!--TODO (3) Give left, right, and top padding of 16dp-->
<!--TODO (4) Remove the line that declares the id, we don't need it-->
<!--TODO (5) Remove the xmlns:app declaration, we don't need that anymore-->

ConstraintLayout -> LinearLayout 로 바꾼다.

이때 LinearLayout은 한줄로 세우는 것이므로 가로로 세울지 세로로 세울지 지정해야한다

orientation=vertical 은 세로, horizontal은 가로

왼쪽,오른쪽,위,아래 여백 설정(16dp)

android:id=activity_main은 필요없으므로 제거

xmlns:app 도 필요없으므로

<android.support.constraint.ConstraintLayout     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     android:id="@+id/activity_main"     android:layout_width="match_parent"     android:layout_height="match_parent"> ... </android.support.constraint.ConstraintLayout>

<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"     android:paddingLeft="16dp"     android:paddingRight="16dp"     android:paddingTop="16dp"     tools:context=".MainActivity"> </LinearLayout> ... </LinearLayout>

<!--TODO (6) Delete this TextView-->

기본으로 정의 된 Hello World TextView를 제거한다.

<TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Hello World!"         app:layout_constraintBottom_toBottomOf="parent"         app:layout_constraintLeft_toLeftOf="parent"         app:layout_constraintRight_toRightOf="parent"         app:layout_constraintTop_toTopOf="parent" />

<!--TODO (7) Add an EditText-->
<!--TODO (8) Give the EditText an id of @+id/et_search_box-->
<!--TODO (9) Set the text size to 22sp-->
<!--TODO (10) Set the width to match_parent and the height to wrap_content-->
<!--TODO (11) Provide a hint telling the user to enter a query and then click search-->

EditText를 추가하고

id 설정하고

text size=22sp

width, height 설정

hint 넣기 : edit text에 아무것도 입력이 안되었을 때 가이드하는 문장

<EditText     android:id="@+id/et_search_box"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:hint="Enter a query, then click Search"     android:textSize="22sp" />

<!--TODO (12) Add a TextView-->
<!--TODO (13) Give the TextView an id of @+id/tv_url_display-->
<!--TODO (14) Set the text size to 22sp-->
<!--TODO (15) Set the width to wrap_content and the height to wrap_content-->
<!--TODO (16) Give the TextView a top margin of 8dp-->
<!--TODO (17) Set the text to tell the user their search URL will show up here when they click search-->

TextView 추가

id 설정

text size=22sp

width, height

margin 설정

textview에 표시할 글자 'Click search and your URL will show up here!' 설정

<TextView     android:id="@+id/tv_url_display"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:layout_marginTop="8dp"     android:text="Click search and your URL will show up here!"     android:textSize="22sp" />

<!--TODO (18) Add a ScrollView-->
<!--TODO (19) Set the width to match_parent and the height to wrap_content-->
<!--TODO (20) Set the top margin to 16dp-->

Scrollview 추가

width, height, margin 설정

<ScrollView     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:layout_marginTop="16dp">     </ScrollView>

<!--TODO (21) Within the ScrollView, add a TextView-->
<!--TODO (22) Give the TextView an id of @+id/tv_github_search_results_json-->
<!--TODO (23) Set the text size to 18sp-->
<!--TODO (24) Set the height and width to wrap_content-->
<!--TODO (25) Set the text to something that tells the user to make a search-->

ScrollView 안에 TextView 추가

id 설정

textsize=18

width, height 설정

textview에 표시할 글씨 'Make a Search!' 설정

(scrollView는 이미 추가했으므로 TextView만 ScrollView아래에 추가한다)

<ScrollView     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:layout_marginTop="16dp">     <TextView         android:id="@+id/tv_github_search_results_json"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Make a search!"         android:textSize="18sp" /> </ScrollView>

여기까지 main_activity.xml

MainActivity.java에서 나머지 TODO

// TODO (26) Create an EditText variable called mSearchBoxEditText
// TODO (27) Create a TextView variable called mUrlDisplayTextView
// TODO (28) Create a TextView variable called mSearchResultsTextView

사용자 입력 EditText 변수 정의

조회된 내용 중 url 표시 TextView 변수 정의

조회결과 TextView 변수 정의

import android.widget.EditText; import android.widget.TextView; public class MainActivity extends AppCompatActivity {     // TODO (26) Create an EditText variable called mSearchBoxEditText     private EditText mSearchBoxEditText;     // TODO (27) Create a TextView variable called mUrlDisplayTextView     private TextView mUrlDisplayTextView;     // TODO (28) Create a TextView variable called mSearchResultsTextView     private TextView mSearchResultsTextView; ...    }

// TODO (29) Use findViewById to get a reference to mSearchBoxEditText
// TODO (30) Use findViewById to get a reference to mUrlDisplayTextView
// TODO (31) Use findViewById to get a reference to mSearchResultsTextView

onCreate Method 안에서

editText 변수에 xml에 정의 된 EditText 연결

TextView 변수에 xml에 정의 된 TextView 연결

@Override protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentView(R.layout.activity_main);     // TODO (29) Use findViewById to get a reference to mSearchBoxEditText     mSearchBoxEditText = (EditText) findViewById(R.id.et_search_box);     // TODO (30) Use findViewById to get a reference to mUrlDisplayTextView     mUrlDisplayTextView = (TextView) findViewById(R.id.tv_url_display);     // TODO (31) Use findViewById to get a reference to mSearchResultsTextView     mSearchResultsTextView = (TextView) findViewById(R.id.tv_github_search_results_json); }

마지막으로

settings.gradle 파일 수정

// TODO (32) Remove the ConstraintLayout dependency as we aren't using it for these simple projects

맨 처음에 ConstraintLayout 을 LinearLayout으로 바꿨음.

없애지 않아도 무관하나 깔끔하게 제거.

ConstraintLayout은 기본Layout이 아니라 android.support를 통해 제공되므로 불필요함.

자동으로 수정되어 include:app 만 있는 경우는 그냥 진행하면 됨.

원래는 setting.gradle에 아래와 같이 정의되어 있음.

dependencies {     compile fileTree(dir: 'libs', include: ['*.jar'])     compile 'com.android.support:appcompat-v7:25.1.0'     // TODO (32) Remove the ConstraintLayout dependency as we aren't using it for these simple projects     compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4' }

모든 수정이 끝났으면 실행

필요한 항목만 만들어놓은 껍데기 이므로 실제 동작하지 않음.

조회버튼과 입력된 내용으로 검색하는 로직은 다음 프로젝트에서 계속...