도전!16 - 웹브라우저 화면 구성

웹뷰랑 애니메이션 복습하는 예제.

실행화면은 다음과 같다.

 

1️⃣activity_main.xml

🔸전체 코드🔸

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

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

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

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:background="#496FE0"
            android:text="닫기"
            android:textSize="20sp"
            android:textStyle="bold" />

        <LinearLayout
            android:id="@+id/tab"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="18"
            android:background="#9CB2ED"
            android:orientation="horizontal"
            android:visibility="visible">

            <EditText
                android:id="@+id/editTextText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="5dp"
                android:layout_weight="17"
                android:background="@drawable/box"
                android:ems="10"
                android:hint="사이트 주소 입력"
                android:inputType="text"
                android:padding="8dp"
                android:textSize="14sp" />

            <Button
                android:id="@+id/btn_input"
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                android:text="입력" />
        </LinearLayout>
    </LinearLayout>

</FrameLayout>

 

최상위 레이아웃은 FrameLayout으로 설정했다. (다른 레이아웃으로 설정한다면, 탭을 열고 닫을 때 그 부분은 웹뷰가 없어서 하얀 빈칸이 보이게 될 것이다.)

'닫기' 버튼을 누르면 오른쪽 부분만 열고 닫을 수 있도록 분리했다. (tab)

 

참고로 visibility를 가지고 tab이 열렸는지, 열리지 않았는지를 구분할 수 있도록 설정해놨기 때문에

tab의 visibility 속성을 설정해줘야한다. (처음엔 보이니까 visible. 난 당연히 visible로 기본 설정되어있는 줄 알았는데 아예 아무런 값도 설정되어있지 않았음.)

 

(근데 사실 tab을 열고 닫는 애니메이션을 하면서 알아서 시야에서 사라지고 나타나기 때문에 visible 속성이 딱히 필요한 건 아니다. 그냥 어떤 변수 설정해서 그 값으로 열렸는지 닫혔는지 구분해도 무방함)

 

 

2️⃣애니메이션 만들기

tab이 올라가는 거(up)랑 내려가는 걸(down) 만들었다.

up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromYDelta="0%"
        android:toYDelta="-100%"
        android:duration="1000"
        android:repeatCount="0"
        android:fillAfter="true"
        />
</set>

 

down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromYDelta="-100%"
        android:toYDelta="0%"
        android:duration="1000"
        android:repeatCount="0"
        android:fillAfter="true"
        />
</set>

의문점🤨

처음에는 up을 0% -> 100%로, down을 100% -> 0%로 설정해주었다. 이게 맞지 않나?

근데 반대로 동작하길래 수정해서 up을 0% -> -100%로,down을 -100% -> 0%로 바꿨다.

 

뭐지? X는 -가 왼쪽이고 +가 오른쪽인데 Y는 -가 위고 +가 아래인가?

내가 이해를 뭔가 잘못한 걸까.. 음

 

 

3️⃣MainActivity.java

코드가 그렇게 어렵진 않다. 

이전에 웹뷰랑 애니메이션 공부할 때 코드 그대로 가져다 섞으면 됨.

package com.example.doitmission_16;

public class MainActivity extends AppCompatActivity {

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

        // 선언 모음
        Button button = findViewById(R.id.button);
        Button btn_input = findViewById(R.id.btn_input);
        WebView webView = findViewById(R.id.webView);
        View tab = findViewById(R.id.tab);
        EditText editText = findViewById(R.id.editTextText);

        // 웹뷰
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webView.setWebViewClient(new ViewClient());

        // tab 열고 닫는 버튼
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Animation anim;

                if(tab.getVisibility()== VISIBLE){
                    anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.up);
                    tab.setVisibility(View.INVISIBLE);
                    button.setText("열기");
                }
                else{
                    tab.setVisibility(VISIBLE);
                    anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.down);
                    button.setText("닫기");
                }
                tab.startAnimation(anim);
            }
        });

        // 입력한 웹 URL을 웹뷰에 로드하는 버튼
        btn_input.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                webView.loadUrl(editText.getText().toString());
            }
        });
    }

    // 이건 여전히 왜 있는지 모르겠음
    private class ViewClient extends WebViewClient{
        @Override
        public boolean shouldOverrideUrlLoading(final WebView view, final String url) {
            view.loadUrl(url);
            return true;
        }
    }
}

 

 

4️⃣AndroidManifest.xml

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

    <application
        android:usesCleartextTraffic="true"

웹뷰를 사용하기 위해 매니패스트에 코드 추가.

 

끝! 실행결과는 맨 위에...