ViewPager2 中的片段未填充高度
Fragments in ViewPager2 not filling height
我已经使用 TabLayout 设置了 ViewPager2,以便通过轻扫或单击选项卡来切换片段。我知道的问题是我的片段没有占用所有 space 并且我在底部有一个空的 space 我无法滑动。我怎样才能让我的碎片填满 space?
编辑:我认为我的问题与我试图将我的 viewpager 加载到另一个片段中这一事实有关。我将我的代码复制到一个新项目中,而不是将我的代码加载到一个片段中,而是将它加载到主 activity 中并且它已经工作了。在片段中加载 viewpager 是一种不好的做法吗?
我已经像这样更改了我的ProfileFragment.kt,但它仍然无法正常工作:
class ProfileFragment : Fragment() {
private lateinit var tabsText: List<String>
private val adapter by lazy {
ViewPagerAdapter(childFragmentManager, lifecycle)
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
tabsText = listOf<String>(getString(R.string.user_info),
getString(R.string.saved_recipes), getString(R.string.shopping_list))
}
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_profile, container, false)
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
pager.adapter = adapter
TabLayoutMediator(tabs, pager) { tab, position ->
tab.text = tabsText.get(position)
}.attach()
}
}
class ViewPagerAdapter(manager: FragmentManager, lifecycle: Lifecycle): FragmentStateAdapter(manager, lifecycle) {
override fun getItemCount(): Int = 3
override fun createFragment(position: Int): Fragment = when(position) {
0 -> UserInfoFragment.newInstance()
1 -> SavedRecipesFragment.newInstance()
else -> ShoppingListFragment.newInstance()
}
}
fragment_profile.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"/>
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
ProfileFragment.kt
class ProfileFragment : Fragment() {
private lateinit var tabsText: List<String>
private val adapter by lazy {
ViewPagerAdapter(this)
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
tabsText = listOf<String>(getString(R.string.user_info),
getString(R.string.saved_recipes), getString(R.string.shopping_list))
}
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_profile, container, false)
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
pager.adapter = adapter
TabLayoutMediator(tabs, pager) { tab, position ->
tab.text = tabsText.get(position)
}.attach()
}
}
class ViewPagerAdapter(fragment: Fragment): FragmentStateAdapter(fragment) {
override fun getItemCount(): Int = 3
override fun createFragment(position: Int): Fragment = when(position) {
0 -> UserInfoFragment.newInstance()
1 -> SavedRecipesFragment.newInstance()
else -> ShoppingListFragment.newInstance()
}
}
我正在加载的其中一个片段有这个 xml:
fragment_user_info.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:padding="8dp">
<TextView
android:id="@+id/username_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:drawableTop="@drawable/ic_account_circle_black_56dp"
android:text="@string/username" />
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/init_info_age"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/username_text"
android:layout_marginTop="8dp"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:hint="@string/age"
app:helperTextEnabled="true"
app:helperText="@string/fui_required_field">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/init_info_age_editText"
android:inputType="number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</com.google.android.material.textfield.TextInputLayout>
<LinearLayout
android:id="@+id/linear_layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:layout_below="@id/init_info_age">
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/profile_info_height"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:hint="@string/height"
app:helperTextEnabled="true"
app:helperText="@string/fui_required_field"
>
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/profile_info_height_editText"
android:inputType="number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/profile_info_weight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="8dp"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:hint="@string/weight"
app:helperTextEnabled="true"
app:helperText="@string/fui_required_field"
>
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/profile_info_weight_editText"
android:inputType="number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/linear_layout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:layout_below="@id/linear_layout1">
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/profile_gender"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="8dp"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
android:hint="@string/gender"
>
<AutoCompleteTextView
android:id="@+id/autocomplete_view_gender"
android:labelFor="@id/profile_gender"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
tools:ignore="LabelFor" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/profile_lifestyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="8dp"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
android:hint="@string/activity"
>
<AutoCompleteTextView
android:id="@+id/autocomplete_view_lifestyle"
android:labelFor="@id/profile_gender"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
tools:ignore="LabelFor" />
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/edit"
android:layout_below="@id/linear_layout2"
android:layout_alignParentEnd="true"/>
</RelativeLayout>
您的 ViewPager 的高度设置为 wrap_content
因此它的高度尽可能小。尝试将其设置为 0dp
并设置 android:layout_weight="1"
.
您可能还想使用 ConstraintLayout 而不是 LinearLayout。尝试:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorAccent"
app:layout_constraintTop_toTopOf="parent"
app:tabMode="fixed" />
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@id/tabs" />
</androidx.constraintlayout.widget.ConstraintLayout>
这将使您的 ViewPager
高度从 TabLayout 的底部到父布局的底部。
我从你的示例代码(我不得不模拟你的片段和字符串资源)结合我的 ConstraintLayout xml:
我已经使用 TabLayout 设置了 ViewPager2,以便通过轻扫或单击选项卡来切换片段。我知道的问题是我的片段没有占用所有 space 并且我在底部有一个空的 space 我无法滑动。我怎样才能让我的碎片填满 space?
编辑:我认为我的问题与我试图将我的 viewpager 加载到另一个片段中这一事实有关。我将我的代码复制到一个新项目中,而不是将我的代码加载到一个片段中,而是将它加载到主 activity 中并且它已经工作了。在片段中加载 viewpager 是一种不好的做法吗?
我已经像这样更改了我的ProfileFragment.kt,但它仍然无法正常工作:
class ProfileFragment : Fragment() {
private lateinit var tabsText: List<String>
private val adapter by lazy {
ViewPagerAdapter(childFragmentManager, lifecycle)
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
tabsText = listOf<String>(getString(R.string.user_info),
getString(R.string.saved_recipes), getString(R.string.shopping_list))
}
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_profile, container, false)
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
pager.adapter = adapter
TabLayoutMediator(tabs, pager) { tab, position ->
tab.text = tabsText.get(position)
}.attach()
}
}
class ViewPagerAdapter(manager: FragmentManager, lifecycle: Lifecycle): FragmentStateAdapter(manager, lifecycle) {
override fun getItemCount(): Int = 3
override fun createFragment(position: Int): Fragment = when(position) {
0 -> UserInfoFragment.newInstance()
1 -> SavedRecipesFragment.newInstance()
else -> ShoppingListFragment.newInstance()
}
}
fragment_profile.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"/>
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
ProfileFragment.kt
class ProfileFragment : Fragment() {
private lateinit var tabsText: List<String>
private val adapter by lazy {
ViewPagerAdapter(this)
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
tabsText = listOf<String>(getString(R.string.user_info),
getString(R.string.saved_recipes), getString(R.string.shopping_list))
}
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_profile, container, false)
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
pager.adapter = adapter
TabLayoutMediator(tabs, pager) { tab, position ->
tab.text = tabsText.get(position)
}.attach()
}
}
class ViewPagerAdapter(fragment: Fragment): FragmentStateAdapter(fragment) {
override fun getItemCount(): Int = 3
override fun createFragment(position: Int): Fragment = when(position) {
0 -> UserInfoFragment.newInstance()
1 -> SavedRecipesFragment.newInstance()
else -> ShoppingListFragment.newInstance()
}
}
我正在加载的其中一个片段有这个 xml: fragment_user_info.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:padding="8dp">
<TextView
android:id="@+id/username_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:drawableTop="@drawable/ic_account_circle_black_56dp"
android:text="@string/username" />
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/init_info_age"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/username_text"
android:layout_marginTop="8dp"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:hint="@string/age"
app:helperTextEnabled="true"
app:helperText="@string/fui_required_field">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/init_info_age_editText"
android:inputType="number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</com.google.android.material.textfield.TextInputLayout>
<LinearLayout
android:id="@+id/linear_layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:layout_below="@id/init_info_age">
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/profile_info_height"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:hint="@string/height"
app:helperTextEnabled="true"
app:helperText="@string/fui_required_field"
>
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/profile_info_height_editText"
android:inputType="number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/profile_info_weight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="8dp"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:hint="@string/weight"
app:helperTextEnabled="true"
app:helperText="@string/fui_required_field"
>
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/profile_info_weight_editText"
android:inputType="number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/linear_layout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:layout_below="@id/linear_layout1">
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/profile_gender"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="8dp"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
android:hint="@string/gender"
>
<AutoCompleteTextView
android:id="@+id/autocomplete_view_gender"
android:labelFor="@id/profile_gender"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
tools:ignore="LabelFor" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/profile_lifestyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="8dp"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
android:hint="@string/activity"
>
<AutoCompleteTextView
android:id="@+id/autocomplete_view_lifestyle"
android:labelFor="@id/profile_gender"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
tools:ignore="LabelFor" />
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/edit"
android:layout_below="@id/linear_layout2"
android:layout_alignParentEnd="true"/>
</RelativeLayout>
您的 ViewPager 的高度设置为 wrap_content
因此它的高度尽可能小。尝试将其设置为 0dp
并设置 android:layout_weight="1"
.
您可能还想使用 ConstraintLayout 而不是 LinearLayout。尝试:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorAccent"
app:layout_constraintTop_toTopOf="parent"
app:tabMode="fixed" />
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@id/tabs" />
</androidx.constraintlayout.widget.ConstraintLayout>
这将使您的 ViewPager
高度从 TabLayout 的底部到父布局的底部。
我从你的示例代码(我不得不模拟你的片段和字符串资源)结合我的 ConstraintLayout xml: