안드로이드 스튜디오 뷰 컨테이너

뷰 컨테이너에서는 스크롤뷰, 슬라이딩드로어, 뷰플리퍼, 웹뷰 등이 있습니다.

스크롤뷰는 기존에 사용하던 리니어 레이아웃 등은 화면을 벗어나는 경우 이를 표시해 주는 기능이 없어 고안된 기능으로 수직 또는 수평 스크롤을 가능한 레이아웃입니다.

기본적인 스크롤뷰는 수직으로 스크롤하는 기능이며 수평으로 진행하는 스크롤은 수평스크롤뷰로 따로 존재합니다.

주의할 점으로는 스크롤뷰에는 단 하나의 위젯만 들어갈 수 있기 때문에 주로 스크롤뷰를 밖에 놓고 안에 리니어 레이아웃을 집어넣는 방법으로 구현합니다.

예시 코드

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical">
        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="버튼 1"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="버튼 2"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="버튼 3"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="버튼 4"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="버튼 5"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="버튼 6"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="버튼 7"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="버튼 8"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="버튼 9"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="버튼 10"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="버튼 11"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="버튼 12"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="버튼 13"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="버튼 14"/>
    </LinearLayout>

</ScrollView>

예시 이미지

실행 영상

 

https://youtu.be/ViLrbOwEr0o

슬라이딩드로어는 서랍과 같은 역할로 서랍처럼 위젯을 열어서 보여주거나 닫아서 감추는 형태를 가지고 있습니다. 

작성할 때의 규칙으로는 슬라이딩드로어의 handle속성에 지정된 이름과 슬라이딩드로어의 손잡이 역할을 하는 버튼의 id가 동일해야 하며 슬라이딩드로어의 content속성에 지정된 이름과 리니어레이아웃의 id가 동일해야 합니다.

예시 코드

<?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:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="여기는 서랍 밖 입니다."/>
    <SlidingDrawer
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:content="@+id/content"
        android:handle="@+id/handle">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/handle"
            android:text="서랍 손잡이"/>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/content"
            android:background="#00FF00"
            android:gravity="center">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="여기는 서랍안 입니다."/>
        </LinearLayout>
    </SlidingDrawer>



</LinearLayout>

예시 이미지

실행결과

https://youtu.be/hXnhGU48TTM

뷰플리퍼는 안에 여러 개의 위젯을 배치하고 필요에 따라 화면을 왼쪽 혹은 오른쪽으로 밀어서 하나의 위젯씩 화면에 보여주는 방식입니다.

예시 코드

<?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="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/btnPrev"
            android:text="이전 화면"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/btnNext"
            android:text="다음 화면"/>
    </LinearLayout>
    <ViewFlipper
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viewFlipper1">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#ff0000">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="1번"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#00ff00">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2번"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#0000ff">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="3번"/>
        </LinearLayout>
    </ViewFlipper>
</LinearLayout>

예시 자바

package com.example.ch6_ex615;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ViewFlipper;

public class MainActivity extends AppCompatActivity {

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

        Button btnPrev, btnNext;
        final ViewFlipper vFlipper;

        btnPrev = (Button)findViewById(R.id.btnPrev);
        btnNext = (Button)findViewById(R.id.btnNext);
        vFlipper = (ViewFlipper)findViewById(R.id.viewFlipper1);

        btnPrev.setOnClickListener(new View.OnClickListener(){
            public void onClick(View v){
                vFlipper.showPrevious();
            }
        });
        btnNext.setOnClickListener(new View.OnClickListener(){
            public void onClick(View v){
                vFlipper.showNext();
            }
        });
    }
}

예시 이미지

실행 결과

https://youtu.be/3aCsZOiIMMg

웹뷰는 사용자가 웹브라우저 기능을 앱 안에 직접 포함할 수 있는 위젯으로 간단한 웹브라우저 기능을 제공합니다. 또한 웹브라우저 기능을 사용하기 위해서는 매니페스트 파일에 퍼미션을 지정해야 합니다.

코드

<?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="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/edtUrl"
            android:layout_weight="1"
            android:singleLine="true">
        </EditText>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/btnGo"
            android:text="이동">
        </Button>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/btnBack"
            android:text="이전">
        </Button>
    </LinearLayout>
    <WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/webView1"/>

</LinearLayout>

package com.example.ch6_project6_2;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.webkit.WebResourceRequest;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;

public class MainActivity extends AppCompatActivity {

    EditText edtUrl;
    Button btnGo, btnBack;
    WebView web;

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


        edtUrl = (EditText)findViewById(R.id.edtUrl);
        btnGo = (Button)findViewById(R.id.btnGo);
        btnBack = (Button)findViewById(R.id.btnBack);
        web = (WebView)findViewById(R.id.webView1);

        web.setWebViewClient(new MyWebViewClient());

        WebSettings webSet = web.getSettings();
        webSet.setBuiltInZoomControls(true);

        btnGo.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                web.loadUrl(edtUrl.getText().toString());
            }
        });
        btnBack.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                web.goBack();
            }
        });

    }
    class MyWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
            return super.shouldOverrideUrlLoading(view, request);
        }
    }
}

실행결과

매니페스트를 수정하면 다음과 같은 검색이 가능합니다. 해당하는 코드를 매니페스트 태그 안에 넣으시면 됩니다.

<uses-permission android:name="android.permission.INTERNET"/>

0123

실행결과

 

https://youtu.be/-bXhlrmOR1A

다만 유튜브 등은 제대로 작동하지 않는데 아마 사이트 문제인 듯합니다.

 

다음은 메뉴와 대화 상자로 이어집니다.