Custom Tab Widget 사용 예제
15 Feb 2019 | Androiddrawable/tab_focused.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:padding="10dp" android:shape="rectangle"> <gradient android:angle="-90" android:endColor="#ffcc00" android:startColor="#ffcc00"/> </shape>
drawable/tab_pressed.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="rectangle"> <solid android:color="#FFcccccc"/> </shape> </item> <item android:bottom="0dp" android:left="-3dp" android:right="-3dp" android:top="-3dp"> <shape android:shape="rectangle"> <padding android:bottom="15dp" android:left="10dp" android:right="10dp" android:top="15dp"/> <stroke android:color="#FF00ccff" android:width="2dp"/> <solid android:color="#00000000"/> </shape> </item> </layer-list>
drawable/tab_selected.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="rectangle"> <solid android:color="#FFefefef"/> </shape> </item> <item android:bottom="0dp" android:left="-3dp" android:right="-3dp" android:top="-3dp"> <shape android:shape="rectangle"> <padding android:bottom="15dp" android:left="10dp" android:right="10dp" android:top="15dp"/> <stroke android:color="#FF00ccff" android:width="2dp"/> <solid android:color="#00000000"/> </shape> </item> </layer-list>
drawable/tab_unselected.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="rectangle"> <solid android:color="#FFefefef"/> </shape> </item> <item android:bottom="0dp" android:left="-3dp" android:right="-3dp" android:top="-3dp"> <shape android:shape="rectangle"> <padding android:bottom="15dp" android:left="10dp" android:right="10dp" android:top="15dp"/> <stroke android:color="#FF00ccff" android:width="2dp"/> <solid android:color="#00000000"/> </shape> </item> </layer-list>
drawable/tab_indicator.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- Non focused states --> <item android:drawable="@drawable/tab_unselected" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/> <item android:drawable="@drawable/tab_selected" android:state_focused="false" android:state_pressed="false" android:state_selected="true"/> <!-- Focused states --> <item android:drawable="@drawable/tab_focused" android:state_focused="true" android:state_pressed="false" android:state_selected="false"/> <item android:drawable="@drawable/tab_focused" android:state_focused="true" android:state_pressed="false" android:state_selected="true"/> <!-- Pressed --> <item android:drawable="@drawable/tab_pressed" android:state_pressed="true" android:state_selected="true"/> <item android:drawable="@drawable/tab_pressed" android:state_pressed="true"/> </selector>
tab_menu.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/tab_indicator" android:orientation="vertical"> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical|center_horizontal" android:textSize="12sp"/> </LinearLayout>
main_activity.xml
<?xml version="1.0" encoding="utf-8"?> << 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="horizontal" tools:context=".MainActivity"> <LinearLayout android:layout_width="0px" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="vertical"> <TabHost android:id="@+id/tab_host" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TabWidget android:id="@android:id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/MenuTabStyle"/> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:id="@+id/tab1" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <Button android:id="@+id/clearBtn" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Clear"/> </LinearLayout> <LinearLayout android:id="@+id/tab2" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <Button android:id="@+id/addRectBtn" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Add Rect"/> </LinearLayout> <LinearLayout android:id="@+id/tab3" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <Button android:id="@+id/addLineBtn" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Add Line"/> </LinearLayout> </FrameLayout> </LinearLayout> </TabHost> </LinearLayout> <FrameLayout android:id="@+id/canvas_view" android:layout_width="0px" android:layout_height="match_parent" android:layout_weight="5"/> </LinearLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); TabHost tabHost = (TabHost) findViewById(R.id.tab_host); tabHost.setup(); setNewTab(tabHost, "Normal", R.id.tab1); setNewTab(tabHost, "Rect", R.id.tab2); setNewTab(tabHost, "Line", R.id.tab3); tabHost.setOnTabChangedListener(new OnTabChangeListener() { @Override public void onTabChanged(String tabId) { //TODO } }); } private void setNewTab(TabHost host, String title, int contentID) { TabHost.TabSpec tabSpec = host.newTabSpec(title); tabSpec.setIndicator(getTabIndicator(title)); tabSpec.setContent(contentID); host.addTab(tabSpec); } private View getTabIndicator(String title) { View view = LayoutInflater.from(getApplicationContext()).inflate(R.layout.tab_menu, null); TextView tv = view.findViewById(R.id.textView); tv.setText(title); return view; } }