«   2024/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

올해는 머신러닝이다.

Custom Tab을 꾸며보자 본문

Android/Tip&Tech

Custom Tab을 꾸며보자

행복한 수지아빠 2011. 3. 23. 12:31



 

Tabs can be a difficult component when you first start building Android applications.  To do something as simple as change the height of the tabs you need to build a view and pass it to setIndicator in the TabSpec.  It might sound confusing but hopefully this code sample helps.  It uses custom tab backgrounds, tab height, and programmatic tab creation.


Image Files:

Custom Tab Images

MyActivity.java

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.LinearLayout;
import android.widget.TabHost;
import android.widget.TabWidget;
import android.widget.TextView;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TabHost.TabContentFactory;
import android.widget.TabHost.TabSpec;

//Custom Tabs
public class MyActivity extends Activity {

int tabHeight = 40;


@Override
public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
LinearLayout main = new LinearLayout(this);
main.setOrientation(LinearLayout.VERTICAL);
setContentView(main);

TabHost tabs = new TabHost(this);
tabs.setId(android.R.id.tabhost);
main.addView(tabs);

TabWidget tabWidget = new TabWidget(this);
tabWidget.setId(android.R.id.tabs);
tabs.addView(tabWidget);

FrameLayout tabContent = new FrameLayout(this);
tabContent.setId(android.R.id.tabcontent);
tabContent.setPadding(0, tabHeight, 0, 0);
tabs.addView(tabContent);

TextView content = new TextView(this);
content.setText("This is the Frame Content");
content.setId(100);
tabs.setup();

TabSpec tspec1 = tabs.newTabSpec("Tab1");
tspec1.setIndicator(makeTabIndicator("One"));
tspec1.setContent(new PreExistingViewFactory(content));
tabs.addTab(tspec1);

TabSpec tspec2 = tabs.newTabSpec("Tab2");
tspec2.setIndicator(makeTabIndicator("Two"));
tspec2.setContent(new PreExistingViewFactory(content));
tabs.addTab(tspec2);

TabSpec tspec3 = tabs.newTabSpec("Tab3");
tspec3.setIndicator(makeTabIndicator("Three"));
tspec3.setContent(new PreExistingViewFactory(content));
tabs.addTab(tspec3);

}

private TextView makeTabIndicator(String text){

TextView tabView = new TextView(this);
LayoutParams lp3 = new LayoutParams(LayoutParams.WRAP_CONTENT, tabHeight, 1);
lp3.setMargins(1, 0, 1, 0);
tabView.setLayoutParams(lp3);
tabView.setText(text);
tabView.setTextColor(Color.WHITE);
tabView.setGravity(Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL);
tabView.setBackgroundDrawable( getResources().getDrawable(R.drawable.tab_indicator));
tabView.setPadding(13, 0, 13, 0);
return tabView;

}

class PreExistingViewFactory implements TabContentFactory{

private final View preExisting;
protected PreExistingViewFactory(View view){
preExisting = view;
}

public View createTabContent(String tag) {
return preExisting;
}

}

}

res/drawable/tab_indicator.xml


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item android:state_focused="false"
android:state_selected="false"
android:state_pressed="false"
android:drawable="@drawable/tab_deselect" />
<item android:state_focused="false"
android:state_selected="true"
android:state_pressed="false"
android:drawable="@drawable/tab_select" />

<!-- Focused states -->
<item android:state_focused="true"
android:state_selected="false"
android:state_pressed="false"
android:drawable="@drawable/tab_deselect" />
<item android:state_focused="true"
android:state_selected="true"
android:state_pressed="false"
android:drawable="@drawable/tab_select" />


<!-- Pressed -->
<item android:state_pressed="true"
android:drawable="@drawable/tab_focus" />
</selector>