Fragment结合ViewPage实现滑动效果

最新推荐文章于 2022-05-21 21:05:20 发布

℃、Z

最新推荐文章于 2022-05-21 21:05:20 发布

阅读量81

点赞数

文章标签： android studio viewpager

本文链接：https://blog.csdn.net/qq_44307686/article/details/116999312

版权

本文介绍如何在Android Studio中结合Fragment和ViewPager实现界面滑动效果。通过创建多个Fragment布局和对应的Denglu主界面，利用代码进行详细操作演示。

摘要由CSDN通过智能技术生成

这边需要一个Denglu主界面，Denglu类还有四个Fragment类和它们的布局界面：

在这里插入图片描述
首先是Denglu.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Denglu">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </androidx.viewpager.widget.ViewPager>

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.9"
        />

    <RadioGroup
        android:id="@+id/radiogroup"
        android:layout_width="474dp"
        android:layout_height="56dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline">

        <RadioButton
            android:id="@+id/radioButton1"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:padding="5dp"
            android:text="视频"
            android:textSize="25dp" />
        <RadioButton
            android:id="@+id/radioButton2"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:padding="5dp"
            android:text="音乐"
            android:textSize="25dp" />

        <RadioButton
            android:id="@+id/radioButton3"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:padding="5dp"
            android:text="爱豆"
            android:textSize="25dp" />

        <RadioButton
            android:id="@+id/radioButton4"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:padding="5dp"
            android:text="个人"
            android:textSize="25dp" />
    </RadioGroup>
</androidx.constraintlayout.widget.ConstraintLayout>

我们还需要新建一个fragment_layout15界面
在这里插入图片描述
代码如下：

<?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"
    android:background="#f1f1f1"
    android:orientation="vertical">
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />
    <RadioGroup
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:checkedButton="@+id/tab1"
        android:gravity="center"
        android:orientation="horizontal"
        >
        <RadioButton
            android:id="@+id/tab1"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_margin="10dp"
            android:background="@drawable/tab_selector"
            android:button="@null"
            />
        <RadioButton
            android:id="@+id/tab2"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_margin="10dp"
            android:background="@drawable/tab_selector"
            android:button="@null"
            />
        <RadioButton
            android:id="@+id/tab3"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_margin="10dp"
            android:background="@drawable/tab_selector"
            android:button="@null"
            />
        <RadioButton
            android:id="@+id/tab4"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_margin="10dp"
            android:background="@drawable/tab_selector"
            android:button="@null"
            />
        <RadioButton
            android:id="@+id/tab5"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_margin="10dp"
            android:background="@drawable/tab_selector"
            android:button="@null"
            />
        <RadioButton
            android:id="@+id/tab6"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_margin="10dp"
            android:background="@drawable/tab_selector"
            android:button="@null"
            />
        <RadioButton
            android:id="@+id/tab7"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_margin="10dp"
            android:background="@drawable/tab_selector"
            android:button="@null"
            />

    </RadioGroup>

</LinearLayout>

四个Fragment布局代码我就不一一给出了，然后是Denglu实现类的代码
代码如下：

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import androidx.viewpager.widget.PagerTabStrip;
import androidx.viewpager.widget.ViewPager;

import android.content.pm.ActivityInfo;
import android.graphics.Color;
import android.os.Bundle;
import android.util.TypedValue;
import android.view.View;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.RadioGroup;

import java.util.ArrayList;
import java.util.List;;

public class Denglu extends AppCompatActivity implements ViewPager.OnPageChangeListener, RadioGroup.OnCheckedChangeListener{

    private ArrayList<Fragment> mFragments;
    private ViewPager mViewpager;
    private MyFragmentPageAdapter adapter;
    private RadioGroup mRadiogroup;
    private List<Integer> mTabs;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_denglu);
        initView();
        initAdapter();
    }
    private void initView(){
        mViewpager=(ViewPager)findViewById(R.id.viewpager);
        mViewpager.addOnPageChangeListener(this);
        mRadiogroup=(RadioGroup)findViewById(R.id.radiogroup);
        mRadiogroup.setOnCheckedChangeListener(this);
        mFragments=new ArrayList<>();
        mFragments.add(new Fragment1());
        mFragments.add(new Fragment2());
        mFragments.add(new Fragment3());
        mFragments.add(new Fragment4());
        mTabs=new ArrayList<>();
        mTabs.add(R.id.radioButton1);
        mTabs.add(R.id.radioButton2);
        mTabs.add(R.id.radioButton3);
        mTabs.add(R.id.radioButton4);
        mRadiogroup.check(R.id.radioButton1);
    }
    private void initAdapter(){
        adapter=new MyFragmentPageAdapter(getSupportFragmentManager(),this,mFragments);//,mTitleList
        mViewpager.setAdapter(adapter);
    }
    @Override
    public void onPageScrolled(int i, float v, int i1) {
    }
    @Override
    public void onPageSelected(int i) {
        mRadiogroup.check(mTabs.get(i));
    }
    @Override
    public void onPageScrollStateChanged(int i) {
    }
    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        mViewpager.setCurrentItem(mTabs.indexOf(checkedId));
    }
    protected void Onresume(){
        super.onResume();
    }
}```


还有四个Fagment实现类的代码，这里我就给出一个，剩下的和第一个一样：

```java
public class Fragment1 extends Fragment {
 @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
                              View view=inflater.inflate(R.layout.fragment_1,null);
							  return view;
	}
}