【问题标题】:Android does not show tabsAndroid 不显示标签
【发布时间】:2016-05-03 16:18:22
【问题描述】:

我正在更改家庭活动以包含标签。我使用https://github.com/saulmm/CoordinatorExamples 作为来源。由于未知原因,我在AppBarLayout 中看不到标签。我可以看到Fragment 内容,但根本不显示选项卡标题。我使用 appcompat-v7:23.3.0。

缩短布局:

<android.support.design.widget.CoordinatorLayout
  <android.support.design.widget.AppBarLayout
    <android.support.design.widget.CollapsingToolbarLayout
        <ImageView ..
        <android.support.v7.widget.Toolbar ..
    </android.support.design.widget.CollapsingToolbarLayout>
    <android.support.design.widget.TabLayout
        android:id="@+id/main.tabs"
        android:layout_width="fill_parent"
        android:layout_height="?attr/actionBarSize"
        app:tabSelectedTextColor="?android:attr/textColorPrimaryInverse"
        app:tabIndicatorColor="?android:attr/textColorPrimaryInverse"
        app:tabIndicatorHeight="4dp" />
  </android.support.design.widget.AppBarLayout>

  <android.support.v4.view.ViewPager
    android:id="@+id/dashboard.viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    />

活动:

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_dashboard);

    CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.main_collapsing);
    collapsingToolbarLayout.setTitle(getString(R.string.app_name));

    ViewPager viewPager  = (ViewPager) findViewById(R.id.dashboard_viewpager);
    viewPager.setAdapter(new TabsAdapter(getSupportFragmentManager()));
    TabLayout tabLayout = (TabLayout) findViewById(R.id.main_tabs);
    tabLayout.setupWithViewPager(viewPager);
}

class TabsAdapter extends FragmentPagerAdapter {
    public TabsAdapter(FragmentManager fm) {
        super(fm);
    }

    public int getCount() {
        return 1;
    }

    public Fragment getItem(int i) {
        switch(i) {
            case 0: return DashboardHomeFragment.newInstance();
        }
        return null;
    }

    public CharSequence getPageTitle(int position) {
        return "Home";
    }
}

片段:

public class DashboardHomeFragment extends Fragment implements View.OnClickListener {
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    return inflater.inflate(R.layout.fragment_dashboard_home, container, false);
}

public void onActivityCreated(@Nullable Bundle state) {
    log.debug("onActivityCreated()");
    super.onActivityCreated(state);
}

及其布局:

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Hry"
    android:textAppearance="@style/TextAppearance.Header"
    android:paddingRight="8dp"
    android:paddingLeft="8dp"
    style="@style/TextComponent.ItemRow"/>

<TextView
    android:id="@+id/main.button.puzzle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Najdi výsledek"
    android:textAppearance="@style/TextAppearance.Item"
    android:drawableRight="@drawable/ic_arrow_forward_24dp"
    style="@style/TextComponent.ItemRow.Selectable"/>

还有第二个问题,但我会将其发布在与该问题相关的单独问题中。

更新:

这是由 CoordinatorLayout 配置错误引起的。我改变了:

android:layout_height="150dp"

android:layout_height="wrap_content"

标签突然出现了。

【问题讨论】:

  • 您是否从此处缩短的 XML 中删除了 android.support.v7.widget.Toolbar
  • 我添加了请求的部分..
  • 你必须使用 CoordinatorLayout 吗?你真的只需要一个 Toolbar 和一个 TabLayout 来获取标签。试试看this guide 是否有帮助。
  • 是的,我想使用 CoordinatorLayout,它看起来很棒。
  • @cricket_007 非常好的一点 - 我按照您的建议对其进行了简化,并且标签显示时没有 CoordinatorLayout!我复制的示例也使用了 CoordinatorLayout,并且可以正常工作。

标签: android android-tabs


【解决方案1】:

根据 Android 的指导方针和材料设计,使用 coordinatorLayout 是正确的。

appBarLayout 最大应该是 256dp,在里面我们可以找到你需要的工具栏和视图。

如果您希望视图折叠插入 collapsingToolbarLayout。

如果您希望工具栏可展开,则将其插入 collapsingToolbarLayout 内。

tabLayout 通常是插入到 appBarLayout 中,但在 collapsingToolbarLayout 之外。

视图高度之和等于 appBarLayout 高度(或使用 wrap_content 为 appBarLayout)。

这是一个带有 tabLayout 的可扩展工具栏示例,在这种情况下 appBarLayout 具有固定高度,但您可以使用 wrap_content。

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">


        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="202dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="@color/your_color"
            android:fitsSystemWindows="true">

            <--Your views-->

            <android.support.v7.widget.Toolbar
               android:id="@+id/toolbar"
               android:layout_width="match_parent"
               android:layout_height="?attr/actionBarSize"
               android:gravity="top"
               app:titleMarginTop="13dp"
               android:minHeight="?attr/actionBarSize"
               app:popupTheme="@style/AppTheme.PopupOverlay"
               app:layout_collapseMode="pin"
            />
        </android.support.design.widget.CollapsingToolbarLayout>

       <android.support.design.widget.TabLayout
               android:id="@+id/tabs"
               android:layout_width="match_parent"
               android:layout_height="?attr/actionBarSize"
               android:layout_gravity="bottom"
               android:background="@color/your_color"
               app:tabSelectedTextColor="@color/your_color"
               app:tabTextColor="@color/your_color"
               app:tabIndicatorColor="@color/your_color"
               app:tabMode="fixed"
               app:tabGravity="fill"
           />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />
</android.support.design.widget.CoordinatorLayout>

【讨论】:

  • 谢谢,您的代码也能正常工作。还有一些我不知道的新属性,所以我又学到了一些东西:-)
  • 不客气。这个新代码还解决了另一个问题?
  • 我现在有一个设计问题。 CollapsingToolbarLayout 中有一个 ImageView 在滚动期间被隐藏。标签栏看起来不太好。我需要找到好的背景。并且可能滚动工具栏以仅显示选项卡。这是一个很大的变化和尝试,因为我不了解协调器配置。
  • 对于工具栏,您可以删除 minHeight (这可以让栏变得不可见)。在 Imageview 中添加 app:layout_collapseMode="parallax" 以隐藏在具有视差效果的滚动处。对于 tabLayout,请参阅文档中的属性。对于Coordinator,这是一个小描述link
  • 我认为这个功能很神奇。它以某种方式起作用,但我不喜欢它的外观。我没有达到预期的效果,所以我发布了另一个问题:stackoverflow.com/q/37033899/1639556
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2020-04-19
  • 2016-07-10
  • 1970-01-01
  • 2016-04-16
  • 2020-08-31
  • 2018-02-28
  • 1970-01-01
相关资源
最近更新 更多