View Container

간단한 기능의 View Container 알아보기

 

ScrollView

 

widget, layout 이 화면에 넘칠 때 ScrollView 에 넣으면 스크롤 효과를 낼 수 있다.

스크롤뷰는 수직으로 스크롤하는 기능이며 수평으로 스크롤하는 수평 스크롤뷰(HorizontalScrollView)는 따로 있다.

주의할 점은 스크롤뷰에 단 하나의 위젯만 넣는게 가능하다.

그래서 리니어레이아웃을 스크롤뷰 안에 한개 넣어놓고, 리니어 레이아웃에 자신이 원하는 것을 여러 개 넣는 방법으로 사용된다.

 

XML Code

 

<?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="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="Button 1"/>

        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="Button 2"/>

        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="Button 3"/>

        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="Button 4"/>

        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="Button 5"/>

        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="Button 6"/>

        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="Button 7"/>

        <Button
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="Button 8"/>

    </LinearLayout>

</ScrollView>

 

자세히 보면 오른쪽에 스크롤이 보인다.

 

SlidingDrawer

 

서랍을 뜻하는 SlidingDrawer 는 위젯을 서랍처럼 열ㄹ어서 보여주거나 닫아서 감춘다.

슬라이딩드로어의 handle 속성에 지정된 이름과 슬라이딩드로어의 손잡이 역할을 하는 버튼의 id 가 동일해야 한다.슬라이딩드로어의 content 속성에 지정된 이름과 리니어레이아웃의 id 도 동일해야 한다.LinearLayout이 아닌 다른 레이아웃도 가능하다.

 

XML Code

 

<?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">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="여기는 서랍 밖입니다."/>

    <SlidingDrawer
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:content="@+id/content"
        android:handle="@+id/handle">

        <Button
            android:id="@+id/handle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="서랍 손잡이"/>

        <LinearLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#00FF00"
            android:gravity="center">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="여기는 서랍 안입니다."/>

        </LinearLayout>

    </SlidingDrawer>

</LinearLayout>

 

버튼을 누르기 전

 

버튼을 누른 후

 

복잡한 기능의 View Container 에 대해 알아보기

 

ViewFlipper

 

VoewFlipper 는 안에 여러 개의 위젯을 배치하고 필요에 따라 화면을 왼쪽, 오른쪽으로 밀어서 하나의 위젯씩 화면에 보여주는 방식의 View Container 이다.

 

XML Code

 

<?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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="이전화면"
                android:id="@+id/btn1"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="다음화면"
                android:id="@+id/btn2"/>

        </LinearLayout>

    </LinearLayout>

    <ViewFlipper
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viewFlipper">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#FF0000"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#00FF00"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#0000FF"/>

    </ViewFlipper>

</LinearLayout>

 

Java Code

 

public class MainActivity extends AppCompatActivity{

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

        Button prevBtn, nextBtn;
        final ViewFlipper vFlipper;

        prevBtn = (Button)findViewById(R.id.btn1);
        nextBtn = (Button)findViewById(R.id.btn2);
        vFlipper = (ViewFlipper)findViewById(R.id.viewFlipper);

        prevBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                vFlipper.showPrevious();
            }
        });

        nextBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                vFlipper.showNext();
            }
        });

    }
}

이전 화면 / 다음 화면 을 클릭하면 현재 화면에서 다른 화면으로 전환된다.

연습 ) ViewFlipper 를 이용하여 자동 사진 보기 앱을 작성해보기

 

XML Code

 

<?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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="이전화면"
                android:id="@+id/btn1"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="다음화면"
                android:id="@+id/btn2"/>

        </LinearLayout>

    </LinearLayout>

    <ViewFlipper
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viewFlipper">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="350dp"
                android:layout_height="350dp"
                android:scaleType="fitCenter"
                android:src="@drawable/rabbit"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="350dp"
                android:layout_height="350dp"
                android:scaleType="fitCenter"
                android:src="@drawable/cat"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="350dp"
                android:layout_height="350dp"
                android:scaleType="fitCenter"
                android:src="@drawable/lion"/>

        </LinearLayout>

    </ViewFlipper>

</LinearLayout>

 

Java Code

 

public class MainActivity extends AppCompatActivity{

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

        Button prevBtn, nextBtn;
        final ViewFlipper vFlipper;

        prevBtn = (Button)findViewById(R.id.btn1);
        nextBtn = (Button)findViewById(R.id.btn2);
        vFlipper = (ViewFlipper)findViewById(R.id.viewFlipper);

        prevBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                vFlipper.showPrevious();
            }
        });

        nextBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                vFlipper.showNext();
            }
        });

    }
}

 

 

TabHost

 

ViewFlipper 가 차례로 다음이나 이전 화면을 보여주는 기능을 하는 반면, TabHost는 여러 탭을 두고 각 탭을 클릭할 때마다 해당 화면이 나오도록 설정하는 View Container 이다.

TabHost 도 실제 동작하는 부분은 Java 에서 작성한다.

 

XML Code

 

<?xml version="1.0" encoding="utf-8"?>
<TabHost 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:id="@android:id/tabhost"
    tools:context=".MainActivity">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TabWidget
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@android:id/tabs">
        </TabWidget>

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@android:id/tabcontent">

            <LinearLayout
                android:orientation="vertical"
                android:id="@+id/tabSong"
                android:background="#F00000"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
            </LinearLayout>

            <LinearLayout
                android:orientation="vertical"
                android:id="@+id/tabArtist"
                android:background="#F0F000"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
            </LinearLayout>

            <LinearLayout
                android:orientation="vertical"
                android:id="@+id/tabAlbum"
                android:background="#F000FF"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
            </LinearLayout>

        </FrameLayout>

    </LinearLayout>

</TabHost>

 

Java Code

 

@SuppressWarnings("deprecation")
public class MainActivity extends TabActivity {

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

        TabHost tabHost = getTabHost();

        TabHost.TabSpec tabSpecSong = tabHost.newTabSpec("SONG").setIndicator("음악별");
        tabSpecSong.setContent(R.id.tabSong);
        tabHost.addTab(tabSpecSong);

        TabHost.TabSpec tabSpecArtist = tabHost.newTabSpec("ARTIST").setIndicator("가수별");
        tabSpecArtist.setContent(R.id.tabArtist);
        tabHost.addTab(tabSpecArtist);

        TabHost.TabSpec tabSpecAlbum = tabHost.newTabSpec("ALBUM").setIndicator("앨범별");
        tabSpecAlbum.setContent(R.id.tabAlbum);
        tabHost.addTab(tabSpecAlbum);

        tabHost.setCurrentTab(0);

    }
}

 

 

연습 ) TabHost를 이용하여 동물 선택 앱 만들기

 

XML Code

 

<?xml version="1.0" encoding="utf-8"?>
<TabHost 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:id="@android:id/tabhost"
    tools:context=".MainActivity">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:id="@android:id/tabcontent">

            <ImageView
                android:layout_width="250dp"
                android:layout_height="250dp"
                android:id="@+id/lion"
                android:layout_gravity="center"
                android:scaleType="fitCenter"
                android:src="@drawable/lion"/>

            <ImageView
                android:layout_width="250dp"
                android:layout_height="250dp"
                android:id="@+id/cat"
                android:layout_gravity="center"
                android:scaleType="fitCenter"
                android:src="@drawable/cat"/>

            <ImageView
                android:layout_width="250dp"
                android:layout_height="250dp"
                android:id="@+id/rabbit"
                android:layout_gravity="center"
                android:scaleType="fitCenter"
                android:src="@drawable/rabbit"/>

            <ImageView
                android:layout_width="250dp"
                android:layout_height="250dp"
                android:id="@+id/dog"
                android:layout_gravity="center"
                android:scaleType="fitCenter"
                android:src="@drawable/dog"/>

        </FrameLayout>

        <TabWidget
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#FFFF00"
            android:id="@android:id/tabs">
        </TabWidget>

    </LinearLayout>

</TabHost>

 

Java Code

 

@SuppressWarnings("deprecation")
public class MainActivity extends TabActivity {

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

        TabHost tabHost = getTabHost();

        TabHost.TabSpec tabSpecLion = tabHost.newTabSpec("Lion").setIndicator("라이언");
        tabSpecLion.setContent(R.id.lion);
        tabHost.addTab(tabSpecLion);

        TabHost.TabSpec tabSpecCat = tabHost.newTabSpec("Cat").setIndicator("고양이");
        tabSpecCat.setContent(R.id.cat);
        tabHost.addTab(tabSpecCat);

        TabHost.TabSpec tabSpecRabbit = tabHost.newTabSpec("Rabbit").setIndicator("토끼");
        tabSpecRabbit.setContent(R.id.rabbit);
        tabHost.addTab(tabSpecRabbit);

        TabHost.TabSpec tabSpecDog = tabHost.newTabSpec("Dog").setIndicator("강아지");
        tabSpecDog.setContent(R.id.dog);
        tabHost.addTab(tabSpecDog);

        tabHost.setCurrentTab(0);

    }
}

 

 

 

연습 ) 간단한 웹 브라우저 만들어 보기

 

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:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/edtUrl"
            android:layout_weight="1"
            android:singleLine="true"
            android:hint="URL을 입력하세요."/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="이동"
            android:id='@+id/btnGo'/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="이전"
            android:id="@+id/btnBack"/>

    </LinearLayout>

    <WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/webView1"/>

</LinearLayout>

 

manifests Code

 

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

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

    <application
        android:allowBackup="true"
        android:icon="@drawable/emo_im_cool"
        android:label="쿡북 웹브라우저"
        android:roundIcon="@drawable/web"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity"
            android:label="간단 웹브라우저">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

 

Java Code

 

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 CookWebViewClient());

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

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

        btnBack.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                web.goBack();
            }
        });

    }

    class CookWebViewClient extends WebViewClient{
        public boolean shouldOverrideUrlLoading(WebView view, String url){
            return super.shouldOverrideUrlLoading(view, url);
        }
    }

}