<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:id="@+id/opt_mycar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="내자동차" /> <TextView android:id="@+id/opt_oil" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="주유" /> <TextView android:id="@+id/opt_maintenance" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="정비" /> <TextView android:id="@+id/opt_report" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="리포트" /> </FrameLayout>
위 소스는 main.xml 입니다.
아래는 DgvmActivity.xml 입니다.
package dgvm.kr;
import android.app.TabActivity; import android.os.Bundle; import android.view.LayoutInflater; import android.widget.TabHost;
public class DgvmActivity extends TabActivity { TabHost mTab; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); TabHost mTab = getTabHost(); LayoutInflater inflater = LayoutInflater.from(this); inflater.inflate(R.layout.main, mTab.getTabContentView(), true); mTab.addTab(mTab.newTabSpec("tag") .setIndicator("내자동차") .setContent(R.id.opt_mycar)); mTab.addTab(mTab.newTabSpec("tag") .setIndicator("주유") .setContent(R.id.opt_oil)); mTab.addTab(mTab.newTabSpec("tag") .setIndicator("정비") .setContent(R.id.opt_maintenance)); mTab.addTab(mTab.newTabSpec("tag") .setIndicator("레포트") .setContent(R.id.opt_report)); } }
아래 이미지는 위 소스를 실행시켰을떄 나오는 화면 입니다.
위 이미지에서 보듯이 총 4개의 탭으로 구성되어 있습니다.
내 자동차 / 주유 / 정비 / 레포트
지금은 내 자동차 탭이 선택되어 있습니다.
내 자동차 탭을 클릭시 현재 내 자동차 가 출력되게 되어있습니다. ( text )
이것을 ( 내 자동차 탭 클릭시 내 자동차가 글자가 아닌, webview 로 네이버가 나오게 하고 싶습니다. )
web 소스 ---
public class DgvmActivity extends TabActivity { WebView mWeb;
이렇게 하시면.. 일단 탭 안에서 네이버가 뜹니다..
사용해보시면 아시겠지만.. 심각한 오류가 하나 있습니다.. ( 음.. 오류는 아니지만.. 암튼.)
바로 뒤로가기 버튼을 누르면 웹페이지 뒤로가기가 아니라 어플이 종류되는 사태가 발생합니다 -_-....
아.. 이건 어떻게 안되나요.. -_- 라고 물으신다면.. 물론.. 여기까지는 답이 있습니다..
back버튼을 override하시면 되는데요..
@Override
public void onBackPressed() {
if(mWeb.canGoBack()) //뒤로갈페이지가있으면
mWeb.goBack();
else
finish();
}
이걸 님의 DgvmActivity 클래스 안에 살짝 추가하면 됩니다..
그럼 일단 웹뷰 뒤로가기가 가능해지고 더이상 뒤로갈 페이지가 없을때 종료됩니다.
그럼 이제 문제가 끝난건가??? 라고 생각하셨으면.. 추후 발생할 또 다른 문제때문에 머리 쥐어잡는 일이 생길겁니다..
만약.. 각 탭별로 다른 웹페이지를 보여주고 싶으면???? 그 이후로는 한번 해보세요..
아마.. 뒤로가기 버튼때문에 좀 힘들구나 라는걸 알수 있습니다..
그렇다면 영 방법이 없느냐면.. 그건또 아니고..
탭 안에 뷰를 넣는게 아니라 액티비티를 넣는 방법으로 모든 문제를 해결할수 있습니다.
이건 귀찮아서 안할렵니다....;
아무튼... 첨에 탭안에 넣는 방식을 왜 비추라고 했느냐면.. 사실 이렇게 단순한 탭의 경우는 문제가 없습니다..
문제는 만약 탭1 에서 버튼을 누르면 또 다른 화면으로 이동하는걸 구현하려고 할때 발생합니다..
그때는 ActivityGroup라는걸 이용해야 되는데요.. 이게 방식이 매우 구려서 뒤로가기 버튼을 내맘대로 조절하기가 매우 힘듭니다.
물론 저 역시 초짜라서 그런걸수도 있구요..
왜 그렇냐고 말씀드리자면.. 음.. 각 탭안에 보여지는 레이아웃이 있고 이안에 뭐 버튼이 있다고 가정합니다..
ActivityGroup를 사용하면.. 이 버튼을 클릭했을때 이벤트를 받는 곳과... 그냥 폰에 있는 뒤로가기 버튼의 이벤트를 받는곳이
달라집니다.. ;;
이게 무슨말이냐면.. 안드로이드는 아이폰과 달리 물리적인 뒤로가기 버튼이 있는데.. 보통 안드로이드폰 유저는 뒤로가기 버튼으로 화면 이동을 합니다.. 그런데 이러한 뒤로가기 버튼을 각각 화면별로 마음대로 사용할수 없다는건.. 화면 이동에 있어 심각한 제약을
받을수 있습니다..
저 같은 경우.. 특히 웹뷰가 그랬습니다..
예를 들어 탭1을 누르면 버튼이 4개 나오고 각각 버튼 클릭시 다른 웹뷰가 보여집니다..
(물론 탭 액티비티 안에서요.. 탭안에 보이는게 아니라 새롭게 웹뷰가 뜨는 방식이면 문제가 없습니다..)
그리고 그 웹뷰에 들어갔을때 뒤로가기 버튼을 눌러 이전 웹페이지를 보는 기능이.. 구현이 안됩니다 ;;
제가 잘 몰라서 그런걸수도 있지만.. 일단 전 안되더군요..
하여튼 결론은..
탭은 썩었다 -_-? 입니다... 단순한 페이지를 몇개 이동하는 정도라면.. 아무 문제가 없습니다.
그러나 만약 각 탭에서 복잡한 작업을 하고 액티비티의 실행 순서가 중요한게 있다면.. 매우 어려운 문제가 발생할 수 있습니다.
그렇다면.. 다른 어플들에서는 잘만 쓰는데.... 라고 하신다면..
다른 어플에서 보이는 탭.. 대부분 보시면 단순한 내용만 나오는걸 볼수있습니다..
또한 커스텀으로 하단탭을 구현한게 있는데.. 물론 안드로이드에 있는 탭을 하단으로 내려서 이미지 넣고 그렇게 할수 있습니다..
그러나 복잡한 기능을 구현하는데는 어려운 문제는 여전히 발생하구요..
복잡한 화면 이동하는것도 있던데... 라고 하신다면..
대부분 탭을 사용한게 아니라고 말씀드리고 싶네요.. 탭처럼 보이게 만든 버튼입니다..
참고로 카카오톡을 기준으로 한번 보자면..
카카오톡은 화면별로 다양한 기능이 존재하지요.. 그렇다면 이것도 탭이 아닌가라고 한다면.. 이건 누가봐도 탭입니다..
뭐 복잡하게 구현되네.. 라고 생각할수 있는데.. 잘보면 카카오톡에서 대부분 화면을 누르면 탭아래에서 생기는게 아니라
새롭게 창이 뜹니다.. (새롭게 창이 뜨는 경우는 아무 문제가 없습니다. 뒤로가기 버튼의 문제는 오직 탭 안에서 보여줄때 생기는 거거든요..) 또는 탭 안에서 뜨는 뭐 친구 정보? 같은거.. 더이상의 복잡한 화면이 없습니다.
일단... 제가 탭을 사용하면서 어려움이 많아서 길지만 적어봤구요..
셤기간인데 왜 내가 이런걸 적고 있냐는 생각이 문뜩 지나가네요...
(혹시 리눅스 프로그래밍좀 할줄 아시는분 없나요 ㅠ... 과제 해야 되는데 뭘 알아먹어야 하지요.. )
고수는 아니지만 -_-... 그냥 답해드리자면...
일단 결론적으로.. 탭뷰안에 웹뷰를 넣는건 매우 비추임을 먼저 알립니다..
일단.. 탭뷰는 왠만하면 안쓰시는게 정신건강에 이롭습니다.. 매우 짜증납니다..
탭안에 내용물 넣는건.. 위의 방법처럼 단순히 view를 넣는 방법과 다른 activity를 만들어 넣는 방법이 있습니다..
일단 위에는 view를 넣는 방식으로 되어있으니..
public class AaaimsiActivity extends TabActivity{
TabHost mTab;
WebView mWeb;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
TabHost mTab = getTabHost();
LayoutInflater inflater = LayoutInflater.from(this);
inflater.inflate(R.layout.main, mTab.getTabContentView(), true);
mTab.addTab(mTab.newTabSpec("tag1")
.setIndicator("내자동차")
.setContent(R.id.opt_mycar));
mTab.addTab(mTab.newTabSpec("tag2")
.setIndicator("주유")
.setContent(R.id.opt_oil));
mTab.addTab(mTab.newTabSpec("tag3")
.setIndicator("정비")
.setContent(R.id.opt_maintenance));
mTab.addTab(mTab.newTabSpec("tag4")
.setIndicator("레포트")
.setContent(R.id.opt_report));
mWeb = (WebView)findViewById(R.id.web);
mWeb.setWebViewClient(new MyWebViewClient());
mWeb.loadUrl("http://www.naver.com");
}
}
class MyWebViewClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl("url);
return true;
}
}
소스코드는 이렇게 하시면 됩니다.. 보시면 아시겠지만... main 레이아웃도 바뀌어야 합니다.
참고로 소스코드 보시면 WebViewClient 클래스를 상속받는 클래스가 하나 있는데.. 이렇게 안하고 그냥 loadUrl 사용하면
탭안에서 웹뷰가 뜨는게 아니라 새롭게 인터넷 창이 뜹니다.
일단 현재는 view를 탭에 넣어서 보여주는 방식이기 때문에 첫번째 탭에서 보여줄 레이아웃에도 웹뷰가 있어야 합니다.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- 탭1 -->
<LinearLayout
android:id="@+id/opt_mycar"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<WebView
android:id="@+id/web"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
<!-- 탭2 -->
<TextView android:id="@+id/opt_oil"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="주유" />
<!-- 탭3 -->
<TextView android:id="@+id/opt_maintenance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="정비" />
<!-- 탭4 -->
<TextView android:id="@+id/opt_report"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="리포트" />
</FrameLayout>
첫번째 탭을 보면 아시겠지만 LinearLayout 안에 웹뷰가 들어있습니다.
또 한가지 중요한건 웹뷰는 인터넷을 사용하기 때문에 인터넷 사용에 대한 permission(권한) 이 설정되어 있어야 합니다.
permission 설정은 AndroidManifest.xml에서 할수 있습니다.
</application > 뒷부분이나 <application> 이 시작하기 전이나 상관없이
<uses-permission android:name="android.permission.INTERNET" />
이걸 복사해 넣어줘야 인터넷 사용이 가능해집니다.