如何在 viewpager 每个项目的片段底部添加动作布局

Posted

技术标签:

【中文标题】如何在 viewpager 每个项目的片段底部添加动作布局【英文标题】:How to add action layout over fragment bottom in viewpager each item 【发布时间】:2020-03-05 16:44:19 【问题描述】:

我正在尝试使用viewpager 创建一个tablayout,我想在fragment 底部添加一个清晰的button 以从viewpager 清除片段视图,如图所示。

Image link or figure link

【问题讨论】:

【参考方案1】:

1- 你的 MainActivity 布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_
android:layout_
android:orientation="vertical"
tools:context=".MainActivity">


    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tablayout"
        android:layout_
        android:layout_
        >

        <com.google.android.material.tabs.TabItem
            android:id="@+id/tab_1"
            android:layout_
            android:layout_
            android:text="Tab1" />

        <com.google.android.material.tabs.TabItem
            android:id="@+id/tab_2"
            android:layout_
            android:layout_
            android:text="Tab2" />

        <com.google.android.material.tabs.TabItem
            android:id="@+id/tab_3"
            android:layout_
            android:layout_
            android:text="Tab3" />

    </com.google.android.material.tabs.TabLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_
        android:layout_ />
    </LinearLayout>

2-你的 MainActivity 和你的 mPagerAdapter 类:

 import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;
import android.os.Bundle;
import com.google.android.material.tabs.TabLayout;

public class MainActivity extends AppCompatActivity 

    private TabLayout tabLayout;
    private ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tabLayout = findViewById(R.id.tablayout);
        viewPager = findViewById(R.id.viewPager);

        viewPager.setAdapter(new mPagerAdapter(getSupportFragmentManager()));
        tabLayout.setupWithViewPager(viewPager);
    

    public class mPagerAdapter extends FragmentPagerAdapter 

        public mPagerAdapter(FragmentManager fm) 
            super(fm);
        

        @Override
        public Fragment getItem(int position) 
            switch (position) 
                case 0:
                    return new Item1();
                case 1:
                    return new Item2();
                case 2:
                default:
                    return new Item3();
            
        

        @Override
        public int getCount() 
            return 3;
        

        @Override
        public CharSequence getPageTitle(int position) 
            switch (position) 
                case 0:
                    return "Tab 1";
                case 1:
                    return "Tab 2";
                case 2:
                default:
                    return "Tab 3";
            
        
    

    public void removeFragment(int position) 
        tabLayout.removeTabAt(position);
    

3- 你的片段布局:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_
    android:layout_>


    <TextView
        android:layout_
        android:layout_
        android:gravity="center"
        android:layout_centerVertical="true"
        android:text="item1"/>

    <ImageView
        android:id="@+id/btnDelete"
        android:layout_
        android:layout_
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:src="@android:drawable/ic_delete"/>
</RelativeLayout>

4- 和你的 Fragment 类:

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class Item1 extends Fragment 
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) 
        View view = inflater.inflate(R.layout.item_1, container, false);

        view.findViewById(R.id.btnDelete).setOnClickListener(new View.OnClickListener() 
            @Override
            public void onClick(View v) 
                ((MainActivity) getActivity()).removeFragment(1);
            
        );

        return view;
    

【讨论】:

以上是关于如何在 viewpager 每个项目的片段底部添加动作布局的主要内容,如果未能解决你的问题,请参考以下文章

将视图粘贴在协调器布局内的 viewpager 片段的底部

底部导航片段中的 Viewpager2

在片段中添加 Viewpager

从ViewPager android替换片段

以编程方式设置 ViewPager 高度会自动滚动到最底部

通过按钮更改 viewpager 片段 Click