SlidingTabLayout 以适应屏幕

Posted

技术标签:

【中文标题】SlidingTabLayout 以适应屏幕【英文标题】:SlidingTabLayout to fit the screen 【发布时间】:2015-01-04 09:32:46 【问题描述】:

我正在使用 Google 的 SlidingTabLayout。因为我只有 3 个选项卡要显示,所以我在最后一个选项卡之后看到了空白区域。 请截图如下。

谁能解释一下如何让标签适合整个屏幕。感谢您的宝贵时间。

【问题讨论】:

能否添加一些相关的代码和xml? 如果你使用默认的tablayout而不是尝试下面的答案***.com/a/31620690/1391158 【参考方案1】:

在 setViewPager() 之前使用这个:

slidingTabs.setDistributeEvenly(true);

如果您收到此错误Cannot resolve method 'setDistributeEvenly(boolean)',您应该从 Google I/O 源代码更新您的 SlidingTabLayout.java 和 SlidingTabStrip.java:

SlidingTabLayout.java

SlidingTabStrip.java

【讨论】:

并在 setViewPager 之前调用它 这是正确答案,你应该从github下载代码而不是google开发者页面。 完美!谢谢!只是一个问题,在开发人员页面的版本中,SlidingTabLayout.TabColorizer 具有方法“getDividerColor”,该方法已在 github 的代码中删除。事实上,分隔线完全消失了。这种变化的动机是什么? @NonUmemoto 我刚刚将代码从 github 复制并粘贴到了 android 示例包中。无需下载任何东西【参考方案2】:

SlidingTabLayout.java,找到

protected TextView createDefaultTabView(Context context)

并将这些行添加到该方法中:

WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
Display display = wm.getDefaultDisplay();
Point size = new Point();
display.getSize(size);
textView.setWidth(size.x / 3);

这为我解决了问题。基本上,您将获得屏幕宽度并除以 3(选项卡数)并将其设置为构成选项卡的 TextField 的宽度。

更新:

在目前的源码中,google 增加了一个setDistributeEvenly(Boolean); 方法,所以你可以使用slidingTabs.setDistributeEvenly(true); 代替。使用较旧的源代码时,要么使用我上面的解决方案,要么更新到最新的源代码(推荐后者)。

【讨论】:

我在使用上面的 sn-p 时遇到问题,因为我的 minSDKVersion 是 Gingerbread,它不支持 getSize()。无论如何,我的疑问是,当我们在后续行中不使用 display.getSize(size) 时,它有什么用。 它将大小传递给大小变量。我相信在较旧的 sdks 中您可以使用 getx,但我不确定。 这个解决方案有效,但你最好使用sliding_tabs.setDistributeEvenly(true)。 请看下面我的回答。 Google 正式添加此功能。 重要提示:在 setViewPager() 之前使用它,否则它将不起作用!【参考方案3】:

更改 SlidingTabLayout.java 文件可能会有所帮助。但是,该解决方案可能看起来不是很通用。 在 SlidingTabLayout.java 文件中,搜索方法

protected TextView createDefaultTabView(Context context)

在 TextView 'set' 方法下方,输入以下代码。

textView.setLayoutParams(new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT, 1f));

每个标签条只是一个自定义的线性布局。

【讨论】:

【参考方案4】:

SubliemeSiem 的答案是正确的。一个更灵活、更短的答案是为组成选项卡的每个 TextView 添加权重 1。

在SlidingTabLayout.java,找到

protected TextView createDefaultTabView(Context context)

在撰写本文时是第 171 行。将此行添加到函数中。

textView.setLayoutParams(new TableLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, 1f));

TableLayout.LayoutParams 接受三个参数,最后一个是重量。由于水平布局中的所有视图都将具有相同的权重,因此它们的大小将相同。随着选项卡数量的增加和大小超出屏幕宽度,换行内容应该允许优雅的行为,但我还没有测试过..

【讨论】:

【参考方案5】:

您可以创建自定义选项卡布局并将其分配给您的 SlidingTabLayout 以进行膨胀。

custom_tab.xml:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_
android:layout_
android:layout_weight="1"
android:id="@+id/customTab">
  <TextView
    android:layout_
    android:layout_
    android:id="@+id/customText"/>
</FrameLayout>

在您的代码中:

    viewPager = (ViewPager) rootView.findViewById(R.id.viewPager);
    viewPager.setAdapter(new SampleAdapter(getChildFragmentManager()));
    SlidingTabLayout tabLayout = (SlidingTabLayout)rootView.findViewById(R.id.slidingTab);
    tabLayout.setCustomTabView(R.layout.custom_tab,R.id.customText);
    tabLayout.setViewPager(viewPager);

通过将宽度保持为 0 dp 并将权重保持为 1(数字是任意的),布局应注意为所有选项卡提供相等的屏幕空间。这也适用于任意数量的选项卡。您不需要修改 SlidingTabLayout.java。

【讨论】:

是的,这个作品。但是选项卡上的文本设置为非常小,选项卡底部的蓝线仍位于选项卡上的文本上方。如何解决它,@amitav13? 回复我的问题:在看到 createDefaultTabView 之后,我认为 - 只需将这些添加到 custom_tab.xml 中的 TextView(参见 @amitav13 的回复):android:gravity="center" android:textStyle= "bold" android:paddingLeft="2dp" android:paddingRight="2dp" android:paddingTop="10dp" android:paddingBottom="10dp" 它对我有用。如果选项卡 @DQuade 是的,在纵向模式下很难在屏幕上看到 5 个或更多标签。如果要减少蓝线(选中指标)的粗细,需要调整SlidingTabStrip类中SELECTED_INDICATOR_THICKNESS_DIPS的值。【参考方案6】:

Google 已发布Design Support Library。您现在可以使用TabLayout。要使标签适合屏幕,您可以致电setTabMode(TabLayout.MODE_FIXED);

【讨论】:

如果您使用的是设计支持库中最新版本的 TabLayout,这是最好的解决方案。【参考方案7】:

更动态的方法是

编辑SlidingTabLayout.java

找到private void populateTabStrip()方法并替换

mTabStrip.addView(tabView);

 // get dimension of current layout
 DisplayMetrics display = this.getResources().getDisplayMetrics();
   int width = display.widthPixels;
        //your tab names here
        String[] tabTitles = "tab1", "tab2", "tab3"
        // compare max width and number of tabs's length 
        //will not fit to the maxwidth it will distribute the tabs evenly
        if(width%(width/tabTitles.length) == 0)
            mTabStrip.addView(tabView,
                    new LinearLayout.LayoutParams(width/tabTitles.length, ViewGroup.LayoutParams.WRAP_CONTENT));
         else 
            mTabStrip.addView(tabView);
        

【讨论】:

为什么这个是-1?【参考方案8】:

SlidingTabLayout.java 在以下方法下,就在 return 语句之前:

protected TextView createDefaultTabView(Context context)

我在该方法中添加了这些行:

final PagerAdapter adapter = mViewPager.getAdapter();
LinearLayout.LayoutParams param = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT, 1.0f / adapter.getCount());
textView.setLayoutParams(param);

这与标记为问题解决方案的答案非常接近,但是我不必使用窗口管理器。

【讨论】:

【参考方案9】:

在每个文本视图的 xml 布局中尝试这个 android:layout_weight="1"

【讨论】:

以上是关于SlidingTabLayout 以适应屏幕的主要内容,如果未能解决你的问题,请参考以下文章

使用 jquery mobile 调整图像大小以适应移动设备上的屏幕

渲染 Java AWT 画布以适应屏幕

无法让 UIImageView 调整大小以适应屏幕

调整按钮以适应不同的屏幕尺寸

代号一:如何缩放图像以适应屏幕宽度?

tablayout 结合viewpager 怎么点击tab无效