작심삼일ing

안드로이드 웹뷰(WebView) 사용하기

웹뷰

 - 웹뷰는 앱 내에 웹화면을 띄우는 뷰를 말합니다.

웹뷰는 인터넷을 사용하기 때문에 웹뷰를 사용하기 위해선 인터넷 접속권한을 등록해야합니다.

manifests 파일에 들어가서 아래에 밑줄 쳐진 permission을 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.examples.androidpractice8">
    
    <uses-permission android:name="android.permission.INTERNET"/>

    <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">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

웹뷰를 사용할 레이아웃에 들어가서 웹뷰를 추가합니다.

액티비티 파일에서 웹뷰를 선언 및 객체화를 시켜주고 여러가지 설정이 있는데 몇가지 예를 들면

.setJavaScriptEnabled - 웹뷰에서 자바 스크립트 사용

.setSupportZoom - 손으로 확대, 축소를 할 수 있도록 사용

.setBuiltInZoomControls - WebView 내장 Zoom 사용

등이 있습니다.

이 상태에서 loadUrl을 통해 페이지를 불려오려고 하면  외부 브라우저를 실행하게 됩니다.

웹뷰 내에서 웹 페이지를 돌아다니기 위해선 WebViewClient의 shouldOverrideUrlLoading 함수를 사용해야합니다.  

.onPageStarted() - 웹뷰에서 url이 로드 될때 호출 되는 함수

.onPageFinished() - 웹뷰에서 url 로딩이 완료되면 호출 되는 함수 

위에 2가지 메소드를 추가하면 url이 로드될 때, 완료 되었을 때 상황을 설정해 줄 수 있습니다.

아래 코드에서는 로드가 시작되면 ProgressDialog를 실행하고 완료되면 로드가 완료된 url을 editText에 설정해주는 예제입니다.

webView.setWebViewClient(new WebViewClient(){
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
        progressDialog.setMessage("Loading");
        progressDialog.setProgressStyle(ProgressDialog.STYLE_SPINNER);
        progressDialog.show();
    }

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

    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        et.setText(url);

    }
});

웹에서 띄우는 팝업 창을 웹뷰를 통해 보여주게 하려면 .setWebChromeClient()를 설정해야 합니다. 

.onProgressChanged() - 위의 코드에서 설정해준 ProgressDialog가 로딩이 완료되면 값이 100이상이 되는데 이 경우

ProgressDialog를 사라자기게 하기 위해 사용합니다.

.onJSAlert() -  웹에서 띄우는 팝업 창 같은 것을 웹뷰에서 보여주기 위해 사용합니다.

webView.setWebChromeClient(new WebChromeClient(){
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        super.onProgressChanged(view, newProgress);
        if(newProgress >= 100) progressDialog.dismiss();
    }

    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        return super.onJsAlert(view, url, message, result);
    }
});

마지막으로 웹뷰에서 url을 로드할때 loadUrl을 사용합니다.

webView.loadUrl("http://www.naver.com");

안드로이드 CustomWidget 만들기

CustomWidget을 만들기 위해서 4단계를 거쳐야 합니다.

1. CustomWidget의 Layout생성
2. Widget을 상속받는 Custom클래스 생성
3. Custom Class에 생성자 추가
4. Custom Widget에 Custom Layout inflating

1. CustomWidget의 Layout생성

-CustomWidget에 표현하고 싶은 Layout을 만듭니다.

2.Widget을 상속받는 Custom클래스 생성

-아래와 같이 Widget을 상속하는 클래스를 생성합니다.

public class CustomWidget extends LinearLayout {


}

3. Custom Class에 생성자 추가

-여러가지 생성자가 있는데 xml파일에서도 Class에서 만든 CustomWidget을 사용하기 위해서

 AttributeSet이 추가된 생성자를 추가해야합니다.

public class CustomWidget extends LinearLayout {

    public CustomWidget(Context context, @Nullable AttributeSet attrs) {

        super(context, attrs);

    }

}

4.Custom Widget에 Custom Layout inflating

-1번에서 작성했던 Layout을 Custom Widget에 inflating 해줍니다.

public class CustomWidget extends LinearLayout implements View.OnClickListener{
    AutoCompleteTextView autoEt;
    ImageView img;
    Button add_btn;
    Button next_btn;

    int imageno = 0;

    public CustomWidget(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    private void init(Context context){
        LayoutInflater.from(context).inflate(R.layout.customwidget,this);

        autoEt = (AutoCompleteTextView)findViewById(R.id.autoCompleteTextView);
        img = (ImageView)findViewById(R.id.image1);
        add_btn = (Button)findViewById(R.id.b_add);
        next_btn = (Button)findViewById(R.id.b_next);

        add_btn.setOnClickListener(this);
        next_btn.setOnClickListener(this);
    } 

그리고 만든 CustomWidget을 추가해주고 싶은 xml파일에 추가해주면 됩니다.

<?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:orientation="vertical"
    android:padding="8dp"
    android:layout_height="match_parent"
    tools:context="com.examples.androidpractice7.MainActivity">


    <com.examples.androidpractice7.CustomWidget
        android:id="@+id/cswidget"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </com.examples.androidpractice7.CustomWidget>

</LinearLayout>

만약 만든 CustomWidget의 Button클릭 같은 event를 다른 activity파일에서 구현해주고 싶으면 interface를 이용하면 됩니다.

아래는 interface를 이용한 예제입니다.

interface를 사용하기 위해서 추상 메소드를 만들고 setOnAMListiner 호출을 통해 다른 activity에서

추상 메소드를 구현하게  만들었습니다.

public class CustomWidget extends LinearLayout implements View.OnClickListener{
    AutoCompleteTextView autoEt;
    ImageView img;
    Button add_btn;
    Button next_btn;

    int imageno = 0;

    private Boolean M = false;
    public CustomWidget(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    private void init(Context context){
        LayoutInflater.from(context).inflate(R.layout.customwidget,this);

        autoEt = (AutoCompleteTextView)findViewById(R.id.autoCompleteTextView);
        img = (ImageView)findViewById(R.id.image1);
        add_btn = (Button)findViewById(R.id.b_add);
        next_btn = (Button)findViewById(R.id.b_next);

        add_btn.setOnClickListener(this);
        next_btn.setOnClickListener(this);

    }

    public void setItem(Fruit temp){
        autoEt.setText(temp.getName());
        img.setImageResource(temp.getImgno());
        add_btn.setText("M");
        M = true;
    }

    interface OnAMListener{
        void onAdd(String name, int imgno, int p);
        void onModify(String name, int imgno, int p);
    }

    public OnAMListener onAddListener;
    public OnAMListener onModifyListener;

    public void setOnAMListener(OnAMListener onAddListener){
        this.onAddListener = onAddListener;
        this.onModifyListener = onAddListener;

    }
    @Override
    public void onClick(View view) {
        if(view == add_btn){
            if(M){
                onModifyListener.onModify(autoEt.getText().toString(), Fruit.image[imageno], imageno);
                add_btn.setText("Add");
                M = false;
                autoEt.setText("");
            }
            else {
                onAddListener.onAdd(autoEt.getText().toString(), Fruit.image[imageno], imageno);
                autoEt.setText("");
            }
        }else{
            if(imageno == Fruit.image.length -1) imageno = -1;
            img.setImageResource(Fruit.image[++imageno]);
        }

    }
}

아래는 CustomWidget, interface을 이용해 만든 예제입니다

위 앱의 모든 코드는 GitHub에서 볼 수 있습니다!

https://github.com/Ywook/AndroidPractice7

안드로이드 Custom GridView 사용하기

ListView가 어댑터로부터 데이터를 받아서 리스트 형식으로 출력하는 방식이라면 GridView는 어댑터로부터 데이터를 받아서 테이블 형식으로

출력해주는 방식입니다.

GridView의 대표적인 속성으로 아래 3가지가 있습니다.

android:verticalSpacing=""

android:horizontalSpacing=""

android:numColumns=""

verticalSpacing은 item사이의 세로 간격을 지정하는 속성

horizontalSpacing은 item사이의 가로 간격

numColumns는 GridView의 행에 나열될 Column의 개수를 지정하는 속성입니다. 

Custom GridView를 만들기 위해서는 Custom ListView와 마찬가지로 GridView에 들어갈 item의 layout파일을 작성합니다.

그리고 BaseAdapter를 상속하는 Adapter 클래스를 만들고 Adapter와 GridView를 연결해 주면 됩니다.

public class GridViewAdapter extends BaseAdapter {
    private Context context;
    private ArrayList<String> data;

    public GridViewAdapter(Context context, ArrayList<Fruit> data) {
        this.context = context;
        this.data = data;
    }

    @Override
    public int getCount() {
        return data.size();
    }

    @Override
    public Object getItem(int i) {
        return data.get(i);
    }

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

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        return null;
    }
}