Custom Tab Widget 사용 예제
15 Feb 2019
|
Android
drawable/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>
<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;
}
}
