갤러리와 스피너

갤러리

 

갤러리는 사진이나 이미지를 배치하고 좌우로 스크롤해서 볼 수 있게 해준다.

단, 이미지 목록을 스크롤하는 기능만 있으므로 이미지를 클릭하면 큰 이미지가 보이는 방법은 Java 코드로 추가해야 한다.

그리드뷰 효과보다 더 고급스러운 느낌이 난다.

코드를 작성해서 확인해보도록 한다.

 

연습하기 ) 좌우로 넘기면서 포스터 보기 구현

 

acitivity_main.xml Code

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:padding="10dp"
    android:orientation="vertical">

    <Gallery
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/gallery1"
        android:spacing="5dp"/>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imgPoster"
        android:padding="20dp"/>

</LinearLayout>

 

MainActivity.java Code

 

public class MainActivity extends AppCompatActivity {

    Integer []moveId = {R.drawable.oreo, R.drawable.lion, R.drawable.kitty,
            R.drawable.rabbit, R.drawable.cherry, R.drawable.apple,
            R.drawable.dog, R.drawable.cat, R.drawable.bear,
            R.drawable.oreo, R.drawable.lion, R.drawable.kitty,
            R.drawable.rabbit, R.drawable.cherry, R.drawable.apple,
            R.drawable.dog, R.drawable.cat, R.drawable.bear,
            R.drawable.oreo, R.drawable.lion, R.drawable.kitty,
            R.drawable.rabbit, R.drawable.cherry, R.drawable.apple,
            R.drawable.dog, R.drawable.cat, R.drawable.bear};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setTitle("연습하기");

        Gallery gallery = (Gallery)findViewById(R.id.gallery1);
        MyGalleryAdapter galAdapter = new MyGalleryAdapter(this);
        gallery.setAdapter(galAdapter);
    }

    public class MyGalleryAdapter extends BaseAdapter{
        Context context;

        MyGalleryAdapter(Context c){ context = c; }

        @Override
        public int getCount() {
            return moveId.length;
        }

        @Override
        public Object getItem(int i) {
            return null;
        }

        @Override
        public long getItemId(int i) {
            return 0;
        }

        @Override
        public View getView(int position, View view, ViewGroup viewGroup) {
            final ImageView imageview = new ImageView(context);
            imageview.setLayoutParams(new Gallery.LayoutParams(200,300));
            imageview.setScaleType(ImageView.ScaleType.FIT_CENTER);
            imageview.setPadding(5,5,5,5);
            imageview.setImageResource(moveId[position]);
            
            final int pos = position;
            imageview.setOnTouchListener(new View.OnTouchListener() {
                @Override
                public boolean onTouch(View view, MotionEvent motionEvent) {
                    ImageView poster = (ImageView)findViewById(R.id.imgPoster);
                    poster.setScaleType(ImageView.ScaleType.FIT_CENTER);
                    poster.setImageResource(moveId[pos]);
                    return false;
                }
            });

            return imageview;
        }
    }
}

 

스피너

 

스피너는 PC의 드롭다운 박스와 비슷한 기능으로 화면이 작은 스마트폰에서 여러 개 중 하나를 선택할 수 있도록 확장하는 용도로 쓰인다.

 

연습 ) 스피너에서 해당 이름을 클릭하면 포스터가 아래의 이미지뷰에 나오도록 구현하기

 

activity_main.xml Code

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:padding="10dp"
    android:orientation="vertical">

    <Spinner
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/spinner1"/>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imgPoster"
        android:padding="20dp"/>

</LinearLayout>

 

MainActivity.java Code

 

public class MainActivity extends AppCompatActivity {

    Integer []imgId = {R.drawable.oreo, R.drawable.lion, R.drawable.kitty,
            R.drawable.rabbit, R.drawable.cherry, R.drawable.apple,
            R.drawable.dog, R.drawable.cat, R.drawable.bear};
    ImageView img;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setTitle("연습하기");

        final String[] name = {"오레오", "라이언", "키티",
                "토끼", "체리","사과", "개", "고양이","배"};

        Spinner spinner = (Spinner)findViewById(R.id.spinner1);

        ArrayAdapter<String> adapter;
        adapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, name);
        spinner.setAdapter(adapter);

        img = (ImageView)findViewById(R.id.imgPoster);

        spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
                img.setImageResource(imgId[i]);
            }

            @Override
            public void onNothingSelected(AdapterView<?> adapterView) {

            }
        });
    }

}