Udacity 강좌 - Lesson 1 실습

Lesson 1 에서는 Sunshine Project 를 생성하고 리스트 뷰를 만드는 과정을 다뤘습니다.

우선 MainActivity 클래스를 한번 보겠습니다.

이 클래스가 시작되면 제일 먼저 onCreate 메소드가 실행됩니다.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    if (savedInstanceState == null) {
        getSupportFragmentManager().beginTransaction()
                .add(R.id.container, new PlaceholderFragment())
                .commit();
    }
}

View는 layout에 있는 activity_main xml 파일을 세팅합니다. 이 파일은 프레임 레이아웃을 정의한 파일 입니다.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/container"
    android:layout_width="match_parent" android:layout_height="match_parent"
    tools:context=".MainActivity" tools:ignore="MergeRootFrame" />

그 다음 if문에서는 첫번째 인스턴스가 생성될 때 즉 처음 실행되는 경우라면 이 구문 안의 코드를 실행합니다.

이 구문 안에는 위 xml의 아이디인 container를 사용해서 그곳에 PlaceholderFragment() 클래스를 세팅합니다.

그러면 이제 PlaceholderFragment() 클래스를 살펴 봐야 합니다.

/**
 * A placeholder fragment containing a simple view.
 */
public static class PlaceholderFragment extends Fragment {

    public PlaceholderFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_main, container, false);
        return rootView;
    }
}

이 클래스에서는 onCreateView 메소드 내용을 실행하게 됩니다.

이곳에서는 inflater를 사용해서 layout에 있는 fragment_main xml 파일을 container 에 세팅합니다.

<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity$PlaceholderFragment">

    <TextView android:text="@string/hello_world" android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

이 파일에는 RelativeLayout 과 TextView 가 있는데 이 파일은 나중에 수정 할 겁니다.

이 프로젝트 구조는 이렇게 돼 있습니다.

이제 여기에 list_item_forecast.xml 파일을 layout 폴더에 추가하겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:id="@+id/list_item_forecast_textview"/>

</LinearLayout>

그리고 나서 fragment_main 파일의 TextView를 ListView로 바꾸고 레이아웃을 FrameLayout으로 바꿉니다.

<FrameLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity$PlaceholderFragment">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/listview_forecast"/>

</FrameLayout>

이 파일은 나중에 사용하고 임시로 MainActivity클래스의 PlaceholderFragment 클래스에 배열을 사용해 Fake Data를 만들어 보겠습니다.

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout.fragment_main, container, false);
    String[] forecastArray = {
            "Today - Sunny - 88/63",
            "Tomorrow - Foggy - 70/40",
            "Weds - Cloudy - 72/63",
            "Thurs - Asteroids - 75/65",
            "Fri - Heavy Rain - 65/56",
            "Sat - HELP TRAPPED IN WEATHERSTATION - 60/51",
            "Sun - Sunny - 80/68"
    };

    List<String> weekForecast = new ArrayList<String>(
            Arrays.asList(forecastArray)
    );

    return rootView;
}

이제 이 배열의 내용들을 화면에 표시하려면 ArrayAdapter<T>를 사용해야 합니다.

아까 만들었던 list_item_forecast 레이아웃에 있는 ID가 list_item_forecast_textview인 TextVIew 에 이 내용을 뿌려 줍니다.

/**
 * A placeholder fragment containing a simple view.
 */
public static class PlaceholderFragment extends Fragment {

    public PlaceholderFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_main, container, false);
        String[] forecastArray = {
                "Today - Sunny - 88/63",
                "Tomorrow - Foggy - 70/40",
                "Weds - Cloudy - 72/63",
                "Thurs - Asteroids - 75/65",
                "Fri - Heavy Rain - 65/56",
                "Sat - HELP TRAPPED IN WEATHERSTATION - 60/51",
                "Sun - Sunny - 80/68"
        };

        List<String> weekForecast = new ArrayList<String>(
                Arrays.asList(forecastArray)
        );

        ArrayAdapter<String> mForecastAdapter =
                new ArrayAdapter<String>(
                        getActivity(),
                        R.layout.list_item_forecast,
                        R.id.list_item_forecast_textview,
                        weekForecast
                );

        ListView listView = (ListView) rootView.findViewById(R.id.listview_forecast);
        listView.setAdapter(mForecastAdapter);

        return rootView;

    }

이렇게 하면 list view 를 아래와 같이 볼 수 있습니다.