如何在 android 中制作椭圆形 tabhost
How to make oval shape tabhost in android
我尝试按照预期的形状制作椭圆形 tabhost。
我尝试了以下代码。
public class AndroidTabLayoutActivity extends TabActivity {
TabHost tabHost;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
tabHost = getTabHost();
TabHost.TabSpec spec;
Intent intent;
intent = new Intent().setClass(this, PhotosActivity.class);
View tabView = createTabView(this, "Updates");
spec = tabHost.newTabSpec("tab1").setIndicator(tabView).setContent(intent);
tabHost.addTab(spec);
tabView = createTabView(this, "Events");
intent = new Intent().setClass(this, SongsActivity.class);
spec = tabHost.newTabSpec("tab2").setIndicator(tabView)
.setContent(intent);
tabHost.addTab(spec);
TabWidget tabWidget = (TabWidget) findViewById(android.R.id.tabs);
final int tabChildrenCount = tabWidget.getChildCount();
View currentView;
for (int i = 0; i < tabChildrenCount; i++) {
currentView = tabWidget.getChildAt(0);
LinearLayout.LayoutParams currentLayout =
(LinearLayout.LayoutParams) currentView.getLayoutParams();
currentLayout.setMargins(0, 0, 16, 0);
}
tabWidget.requestLayout();
tabHost.getTabWidget().setDividerDrawable(null);
}
private static View createTabView(Context context, String tabText) {
View view = LayoutInflater.from(context).inflate(R.layout.custom_tab, null, false);
TextView tv = (TextView) view.findViewById(R.id.tabTitleText);
tv.setText(tabText);
return view;
}
}
main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#2CA0E6">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="20dp"
android:layout_marginTop="30dp"
android:paddingLeft="20dp"
android:paddingRight="20dp">
<TabHost
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="2dp">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingTop="5dp">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="70dp" />
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
</TabHost>
</LinearLayout>
custom_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabTitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:clickable="true"
android:padding="5dp"
android:textSize="15sp"
android:textStyle="bold"
android:layout_gravity="center"
android:ellipsize="marquee"
android:singleLine="true"
android:textColor="@color/tab_textcolor"
android:background="@drawable/tab_selector"/>
我得到了如下图的输出
谁能帮忙，怎么弄的。谢谢
那就是 image.All 你需要做的就是准备好图像并将它们设置为选定的 tab.That 了！
我没有那张图片，所以我使用了下面的图片(selected.png,not_selected.png) 只是为了展示它是如何工作的，但它们设计得不好 ;)
P.s currentLayout.setMargins(0, 0, this_should_be_zero, 0); 并且您的图片应该有该边距（无论预期的差距如何），否则两张图片之间会有差距。
此外，您可以使用选择器（相同的 png 和另一种颜色）来显示所选的。
似乎您正在尝试找出一种编程方式，尝试使用 Paint class 解决方法，如果您有额外的时间和精力，如果您使用形状将很难找出确切的视图因为比较复杂，可以看到tab A view和B不一样，用图片最简单
并在您的 custom_tab.xml 中设置
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabTitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:clickable="true"
android:padding="5dp"
android:textSize="15sp"
android:textStyle="bold"
android:layout_gravity="center"
android:ellipsize="marquee"
android:MaxLines="1" // you can use this instead of android:singleLine="true"
android:textColor="@color/black"
android:background="@drawable/tab_button_effect"/> // here set selector
tab_button_effect.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/not_selected" android:state_selected="true"></item>
<item android:drawable="@drawable/selected"></item>
</selector>
我认为实现这种外观的最简单方法是为分隔符创建 3 个可绘制对象：
1. 左侧选项卡聚焦（白色），右侧未聚焦（蓝色）
2.右对焦（白色），左不对焦（蓝色）
3. 均未聚焦（蓝色）
在其中一个选项卡获得焦点后，您只需将其左右分隔符（如果存在）更改为焦点之一。
我会post它作为评论，但我的声誉太低还没有评论...
you can make oval tabs by using drawables in tabhost. please find the code snippets below
tabHost.newTabSpec("tab1").setIndicator(getCustomLayout()).setContent(intent);
private static View getCustomLayout(Context context, String tabText) {
查看 view = LayoutInflater.from(context).inflate(R.drawable.custom_tab,null, false);
return 查看；
}
custom-tab.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke
android:width="1dp"
android:color="#000000"/>
<corners android:radius="2dp"/>
</shape>
制作您的自定义背景 xml 并添加它并尝试设置填充，这样就不需要使用图像或其他方式
在您的 xml.and 中尝试将其用作选项卡。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:bottomLeftRadius="30dp"
android:bottomRightRadius="30dp"
android:radius="60dp"
android:topLeftRadius="30dp"
android:topRightRadius="30dp" />
<solid android:color="#CFCFCF" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
<size
android:height="60dp"
android:width="270dp" />
</shape>
我尝试按照预期的形状制作椭圆形 tabhost。
我尝试了以下代码。
public class AndroidTabLayoutActivity extends TabActivity {
TabHost tabHost;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
tabHost = getTabHost();
TabHost.TabSpec spec;
Intent intent;
intent = new Intent().setClass(this, PhotosActivity.class);
View tabView = createTabView(this, "Updates");
spec = tabHost.newTabSpec("tab1").setIndicator(tabView).setContent(intent);
tabHost.addTab(spec);
tabView = createTabView(this, "Events");
intent = new Intent().setClass(this, SongsActivity.class);
spec = tabHost.newTabSpec("tab2").setIndicator(tabView)
.setContent(intent);
tabHost.addTab(spec);
TabWidget tabWidget = (TabWidget) findViewById(android.R.id.tabs);
final int tabChildrenCount = tabWidget.getChildCount();
View currentView;
for (int i = 0; i < tabChildrenCount; i++) {
currentView = tabWidget.getChildAt(0);
LinearLayout.LayoutParams currentLayout =
(LinearLayout.LayoutParams) currentView.getLayoutParams();
currentLayout.setMargins(0, 0, 16, 0);
}
tabWidget.requestLayout();
tabHost.getTabWidget().setDividerDrawable(null);
}
private static View createTabView(Context context, String tabText) {
View view = LayoutInflater.from(context).inflate(R.layout.custom_tab, null, false);
TextView tv = (TextView) view.findViewById(R.id.tabTitleText);
tv.setText(tabText);
return view;
}
}
main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#2CA0E6">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="20dp"
android:layout_marginTop="30dp"
android:paddingLeft="20dp"
android:paddingRight="20dp">
<TabHost
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="2dp">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingTop="5dp">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="70dp" />
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
</TabHost>
</LinearLayout>
custom_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabTitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:clickable="true"
android:padding="5dp"
android:textSize="15sp"
android:textStyle="bold"
android:layout_gravity="center"
android:ellipsize="marquee"
android:singleLine="true"
android:textColor="@color/tab_textcolor"
android:background="@drawable/tab_selector"/>
我得到了如下图的输出
谁能帮忙，怎么弄的。谢谢
那就是 image.All 你需要做的就是准备好图像并将它们设置为选定的 tab.That 了！
我没有那张图片，所以我使用了下面的图片(selected.png,not_selected.png) 只是为了展示它是如何工作的，但它们设计得不好 ;)
P.s currentLayout.setMargins(0, 0, this_should_be_zero, 0); 并且您的图片应该有该边距（无论预期的差距如何），否则两张图片之间会有差距。
此外，您可以使用选择器（相同的 png 和另一种颜色）来显示所选的。
似乎您正在尝试找出一种编程方式，尝试使用 Paint class 解决方法，如果您有额外的时间和精力，如果您使用形状将很难找出确切的视图因为比较复杂，可以看到tab A view和B不一样，用图片最简单
并在您的 custom_tab.xml 中设置
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabTitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:clickable="true"
android:padding="5dp"
android:textSize="15sp"
android:textStyle="bold"
android:layout_gravity="center"
android:ellipsize="marquee"
android:MaxLines="1" // you can use this instead of android:singleLine="true"
android:textColor="@color/black"
android:background="@drawable/tab_button_effect"/> // here set selector
tab_button_effect.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/not_selected" android:state_selected="true"></item>
<item android:drawable="@drawable/selected"></item>
</selector>
我认为实现这种外观的最简单方法是为分隔符创建 3 个可绘制对象： 1. 左侧选项卡聚焦（白色），右侧未聚焦（蓝色） 2.右对焦（白色），左不对焦（蓝色） 3. 均未聚焦（蓝色）
在其中一个选项卡获得焦点后，您只需将其左右分隔符（如果存在）更改为焦点之一。
我会post它作为评论，但我的声誉太低还没有评论...
you can make oval tabs by using drawables in tabhost. please find the code snippets below
tabHost.newTabSpec("tab1").setIndicator(getCustomLayout()).setContent(intent);
private static View getCustomLayout(Context context, String tabText) { 查看 view = LayoutInflater.from(context).inflate(R.drawable.custom_tab,null, false); return 查看； }
custom-tab.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke
android:width="1dp"
android:color="#000000"/>
<corners android:radius="2dp"/>
</shape>
制作您的自定义背景 xml 并添加它并尝试设置填充，这样就不需要使用图像或其他方式
在您的 xml.and 中尝试将其用作选项卡。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:bottomLeftRadius="30dp"
android:bottomRightRadius="30dp"
android:radius="60dp"
android:topLeftRadius="30dp"
android:topRightRadius="30dp" />
<solid android:color="#CFCFCF" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
<size
android:height="60dp"
android:width="270dp" />
</shape>