Android:如何构建类似于 Android UI 页面上显示的选项卡

标签 android android-layout android-tabhost android-ui

因此,android 不遗余力地构建了这个漂亮的 UI 指南供所有人使用。但是我看不到任何地方显示了如何构建这些元素的代码示例。

可以在此处找到选项卡的 UI 指南。 http://developer.android.com/design/building-blocks/tabs.html .

有人知道如何创建像这个一样的标签吗? enter image description here

任何帮助将不胜感激,谢谢。

解决方案发布
好的,这就是我可能浪费了大约 10 个小时试图制作一些好看的标签后最终做的事情。
enter image description here

首先,我放弃了使用 android 的选项卡实现的整个想法。出于一个原因,标签主机小部件被认为不推荐用于操作栏,但操作栏仅适用于 android 3。

我终于发现,如果 a 使用线性布局并作为线性布局的背景,我会放置我想要使用的图像(使用 9 个补丁图像)。然后创建另一个线性布局和 TextView ,以便将文本放在该线性布局的顶部。然后让你的线性布局可点击。然后随着你变得更高级,你可以让你的线性布局背景成为一个 xml 选择器,你就可以开始了。以防你没有得到所有这里是我的代码。

线性布局

    <LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="50dp"
    android:background="@color/main_screen_bg_color"
    android:orientation="horizontal"
    android:padding="2dp" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@drawable/selector_not_current"
        android:clickable="true"
        android:onClick="onClickSub"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:text="Example 1"
                android:textColor="@color/black"
                android:textSize="18sp"
                android:textStyle="bold" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@drawable/selector_current"
        android:clickable="true"
        android:onClick="onClickFoodDetails"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:text="Example 2"
                android:textColor="@color/black"
                android:textSize="18sp"
                android:textStyle="bold" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

示例选择器

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
      android:drawable="@drawable/selected_pressed_tab" /> <!-- pressed -->
<item android:state_focused="true"
      android:drawable="@drawable/selected_pressed_tab" /> <!-- focused -->
<item android:drawable="@drawable/selected_tab" /> <!-- default -->

希望这对每个人都有帮助。 Android 选项卡太难了,使用起来很烦人,从头开始制作我自己的更容易。祝你好运!

最佳答案

做这样的事情。

这是一个完整的工作代码。享受

在扩展 Tabactivity 的 Activity 的 oncreate 方法中的某个地方

  tabHost = getTabHost();
  Intent intent;
  intent = new Intent().setClass(this, FirstActvity.class);
  setupTab("NearBy", intent, R.drawable.firsttabdrawable);
  intent = new Intent().setClass(this, SecondActivity.class);
  setupTab("History", intent, R.drawable.secondtabdrawable);
  intent = new Intent().setClass(this, ThirdActivity.class);
  setupTab("Setting", intent, R.drawable.thirdtabdrawable);

将 setupTab 方法定义为

  private void setupTab(String tag, Intent intent, int selectorId) {
  View tabView = LayoutInflater.from(tabHost.getContext()).inflate(R.layout.view, null);
  tabView.setBackgroundResource(selectorId);
  TabSpec setContent = tabHost.newTabSpec(tag).setIndicator(tabView).setContent(intent);
  tabHost.addTab(setContent);
  }

view.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"
>
</LinearLayout>

和drawable文件夹中的firsttabdrawable.xml为

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <!-- When selected, use grey -->
   <item android:drawable="@drawable/selectedfirsttabimage"
      android:state_selected="true" />
   <!-- When not selected, use white-->
   <item android:drawable="@drawable/notselectedfirsttabimage" />
</selector>

以同样的方式定义secondtabdrawable.xml和thirddrawable.xml

关于Android:如何构建类似于 Android UI 页面上显示的选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9992639/

相关文章:

android - 错误 : "To upload an android app bundle you must be enrolled in app signing by google play"

android - 获取 TextView 中文本的大小

android - TabHost,滑动 Intent 失败

Android 预加载 TabHost View

android - 制作一个Webview搜索栏来搜索Google和URL的

java - Libgdx Android游戏绘图形状(位图与SVG)

android - Xamarin.Forms。像 Telegram 一样滑动到上一页

android - 抽屉导航多个容器和最佳实践

java - 在用户聊天 Activity 中组织消息

Android webview 下拉菜单不适用于 Android 4.x 设备