화면 분할 (Fragment)

화면 분할 (Fragment)

1. 메인 레이아웃

<?xml version="1.0" encoding="utf-8"?>
<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="horizontal"
    tools:context="com.progdv.chap15_fragment.MainActivity">

    <fragment
        android:id="@+id/image_list_fragment"
        android:name="com.progdv.chap15_fragment.SampleListFragment"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="25"/>

    <fragment
        android:id="@+id/image_viewer_fragment"
        android:name="com.progdv.chap15_fragment.SampleViewerFragment"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="75"/>

</LinearLayout>

위의 fragment에 해당하는 클래스인 SampleListFragment와 SampleViewerFragment 클래스를 생성하여 일단 에러를 뜨지 않게 만든다.

2. 화면에 띄울 레이아웃

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

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30dp"
        android:text="이미지 영역"
        android:gravity="center" />
    
    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@mipmap/ic_launcher"
        android:scaleType="fitCenter" />

</LinearLayout>

3. res/drawable 디렉토리에 샘플 이미지를 넣는다.

012

각 영역은 별개의 클래스로 정의한다.

4. SampleViewerFragment 클래스

package com.progdv.chap15_fragment;

import android.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class SampleViewerFragment extends Fragment {

    String[] imageTitles = {"First Image", "Second Image", "Third Image"};
    int[] imageLocations = {R.drawable.dream01, R.drawable.dream02, R.drawable.dream03};

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // return super.onCreateView(inflater, container, savedInstanceState);
        return inflater.inflate(R.layout.image_viewer_fragment, container, false);
    }
    public void imageUpdate(int index) {
        TextView title = (TextView)getView().findViewById(R.id.title);
    }
}

5. SampleListFragment 클래스 

package com.progdv.chap15_fragment;

import android.app.Activity;
import android.app.ListFragment;
import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;

/**
 * Created by Administrator on 2016-05-11.
 */
public class SampleListFragment extends ListFragment{
    private int index = 0;
    private ListItemSelectedListener selectedListener;

    @Override
    public void onListItemClick(ListView l, View v, int position, long id) {
        //super.onListItemClick(l, v, position, id);
        index = position;
        selectedListener.onListItemSelected(position);
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        setListAdapter(ArrayAdapter.createFromResource(getActivity(), R.array.image_titles, android.R.layout.simple_list_item_1));
        // string.xml에 image_titles라는 name의 항목을 만들어줘서 불러온다.
        if(savedInstanceState != null) { // 이전 활성화된 액티비티 상태값의 존재유무
            index = savedInstanceState.getInt("index", 0);
            selectedListener.onListItemSelected(index);
        }
    }

    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        outState.putInt("index", index);
    }

    @Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);
        selectedListener = (ListItemSelectedListener)activity;
    } // 인덱스값을 관리하게끔 구성

    public interface ListItemSelectedListener{ // 이 인터페이스를 메인액티비티에서 구현
        public void onListItemSelected(int index);
    }
}

6. string.xml

res/values/strings.xml 편집

<resources>
    <string name="app_name">chap15_Fragment</string>
    <string-array name="image_titles">
        <item>첫번째 이미지</item>
        <item>두번째 이미지</item>
        <item>세번째 이미지</item>
    </string-array>
</resources>

7. 메인 액티비티

package com.progdv.chap15_fragment;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity implements SampleListFragment.ListItemSelectedListener {
// SampleListFragment의 인터페이스 ListItemSelectedListener를 구현하며 추상메서드 onListItemSelected를 오버라이딩한다.

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

    @Override
    public void onListItemSelected(int index) {
        SampleViewerFragment imageViewer =
        (SampleViewerFragment)getFragmentManager().findFragmentById(R.id.image_viewer_fragment);
        imageViewer.imageUpdate(index);
    }
}

8. 가로 화면 출력을 위한 AndroidManifest.xml에 screenOrientation="landscape" 항목 추가

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.progdv.chap15_fragment">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity" android:screenOrientation="landscape">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>