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 以适应屏幕的主要内容,如果未能解决你的问题,请参考以下文章