30.ViewPager与Fragment合集

一、压缩包

WeChatPage.zip

二、安卓必学：控件jetpack（getLifecycle是jetpack中的一个参数）

三、fragment知识点：

一个activity作为页面的宿主，携带多个fragment在宿主之上显示

四、viewpager知识点：

1.viewpager1提供的两种Adapter：

（1）fragmentPagerAdapter：fragment会缓存，不销毁

（2）FragmentStatePagerAdapter：fragment会走生命周期，会销毁

2.viewpager2提供的一种Adapter：

（1）FragmentStatePagerAdapter

五、viewpager+fragment滑动实现的具体步骤：

1.添加viewpager2依赖，创建viewpager2

2.创建一个适配器FragmentStateAdapter，这个适配器是系统自带的，是专门为viewpager2提供的adapter。（adapter适配的是fragment，系统有提供一个比较好的adapter）

3.绑定控件，创建系统自带的适配器对象，在对象里面放入对应的参数，调用这个适配器

4.定义fragment，进行传参，然后将值放入对应的片段

5.定义一个集合，将数据放入集合内

六、viewpager+fragment滑动的整体代码：

1.布局activity_main.xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/vp_item"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>

2.布局fragment_blank.xml文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".BlankFragment">
    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:id="@+id/tv_item"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="36dp"
        android:text="hello" />
</FrameLayout>

3.MainActivity文件代码

package com.example.wechatpage;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager2.widget.ViewPager2;
import android.os.Bundle;
import android.view.View;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
    ViewPager2 viewpager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initPager();
    }
    private void initPager() {
        viewpager = findViewById(R.id.vp_item);
        ArrayList<Fragment> fragments=new ArrayList<>();
        fragments.add(BlankFragment.newInstance("微信聊天"));
        fragments.add(BlankFragment.newInstance("通讯录"));
        fragments.add(BlankFragment.newInstance("发现"));
        fragments.add(BlankFragment.newInstance("我"));
        MyFragmentPagerAdapter myFragmentPagerAdapter = new MyFragmentPagerAdapter
            (getSupportFragmentManager(),getLifecycle(),fragments);
        viewpager.setAdapter(myFragmentPagerAdapter);
    }
}

4.MyFragmentPagerAdapter文件代码

package com.example.wechatpage;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.lifecycle.Lifecycle;
import androidx.viewpager2.adapter.FragmentStateAdapter;
import java.util.ArrayList;
import java.util.List;
public class MyFragmentPagerAdapter extends FragmentStateAdapter {
    List<Fragment> fragmentList;
    public MyFragmentPagerAdapter(@NonNull FragmentManager fragmentManager, 
                                  @NonNull Lifecycle lifecycle,List<Fragment> fragmentList) {
        super(fragmentManager, lifecycle);
        this.fragmentList=fragmentList;
    }
    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return fragmentList.get(position);
    }
    @Override
    public int getItemCount() {
        return fragmentList.size();
    }
}

5.BlankFragment文件代码

package com.example.wechatpage;
import android.content.Context;
import android.net.Uri;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class BlankFragment extends Fragment {
    private static final String ARG_TEXT= "param1";
    private String mTextString;
    View rootView;
    public BlankFragment() {
    }
    public static BlankFragment newInstance(String param1) {
        BlankFragment fragment = new BlankFragment();
        Bundle args = new Bundle();
        args.putString(ARG_TEXT, param1);
        fragment.setArguments(args);
        return fragment;
    }
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mTextString = getArguments().getString(ARG_TEXT);
        }
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        if (rootView==null) {
             rootView = inflater.inflate(R.layout.fragment_blank, container, false);
        }
        initView();
        return rootView;
    }
    private void initView() {
        TextView textView = rootView.findViewById(R.id.tv_item);
        textView.setText(mTextString);
    }
}

6.效果图：

七、viewpager+fragment模拟微信首页实现的具体步骤：

1.定义一个layout，专门放下面的布局文件

2.定义一个drawable，选择点击之前之后的变化

3.将布局放入主布局，放在viewpager下面

4.解析xml，响应点击事件，定义布局变量

5.设置xiewpager2的滑动监听结果

6.判断对应位置的对应滑动页面，和点击之后滑动对应的页面

八、viewpager+fragment模拟微信首页的整体代码：

1.布局activity_main.xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/vp_item"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
    <include layout="@layout/bottom_layout"></include>
</LinearLayout>

2.布局fragment_blank.xml文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
tools:context=".BlankFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
    android:id="@+id/tv_item"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:textSize="36dp"
    android:text="hello" />
</FrameLayout>

3.布局bottom_layout.xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="60dp"
    android:orientation="horizontal"
    android:background="@color/gray">
    <LinearLayout
        android:id="@+id/ll_chat"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:orientation="vertical">
        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:id="@+id/iv_chat"
            android:layout_gravity="center"
            android:background="@drawable/tab_chat"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/tv_chat"
            android:gravity="center"
            android:text="微信"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/ll_contact"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:orientation="vertical">
        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:id="@+id/iv_contact"
            android:background="@drawable/tab_chat"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/tv_contact"
            android:gravity="center"
            android:text="通讯录"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/ll_find"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:orientation="vertical">
        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:id="@+id/iv_find"
            android:layout_gravity="center"
            android:background="@drawable/tab_chat"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/tv_find"
            android:gravity="center"
            android:text="发现"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/ll_me"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:orientation="vertical">
        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:id="@+id/iv_me"
            android:background="@drawable/tab_chat"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/tv_me"
            android:gravity="center"
            android:text="我"/>
    </LinearLayout>
</LinearLayout>

4.tab_chat.xml点击之前点击之后的drawable文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/chat_pressed" android:state_selected="true"/>
    <item android:drawable="@drawable/chat_normal" />
</selector>

5.MainActivity文件代码

package com.example.wechatpage;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager2.widget.ViewPager2;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    ViewPager2 viewpager;
    private LinearLayout ll_chat,ll_contact,ll_find,ll_me;
    private ImageView iv_chat,iv_contact,iv_find,iv_me,iv_current;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initPager();
        initTabView();
    }
    private void initTabView() {
        ll_chat=findViewById(R.id.ll_chat);
        ll_chat.setOnClickListener(this);
        ll_contact=findViewById(R.id.ll_contact);
        ll_contact.setOnClickListener(this);
        ll_find=findViewById(R.id.ll_find);
        ll_find.setOnClickListener(this);
        ll_me=findViewById(R.id.ll_me);
        ll_me.setOnClickListener(this);
        iv_chat=findViewById(R.id.iv_chat);
        iv_contact=findViewById(R.id.iv_contact);
        iv_find=findViewById(R.id.iv_find);
        iv_me=findViewById(R.id.iv_me);
        iv_chat.setSelected(true);
        iv_current=iv_chat;
    }
    private void initPager() {
        viewpager = findViewById(R.id.vp_item);
        ArrayList<Fragment> fragments=new ArrayList<>();
        fragments.add(BlankFragment.newInstance("微信聊天"));
        fragments.add(BlankFragment.newInstance("通讯录"));
        fragments.add(BlankFragment.newInstance("发现"));
        fragments.add(BlankFragment.newInstance("我"));
        MyFragmentPagerAdapter myFragmentPagerAdapter = new MyFragmentPagerAdapter
                                      (getSupportFragmentManager(),getLifecycle(),fragments);
        viewpager.setAdapter(myFragmentPagerAdapter);
        viewpager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
   @Override
   public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                super.onPageScrolled(position, positionOffset, positionOffsetPixels);
            }
            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
                changeTab(position);
            }
            @Override
            public void onPageScrollStateChanged(int state) {
                super.onPageScrollStateChanged(state);
            }
        });
    }
    private void changeTab(int position) {
        iv_current.setSelected(false);
        switch (position){
            case R.id.ll_chat:
                viewpager.setCurrentItem(0);
            case 0:
                iv_chat.setSelected(true);
                iv_current=iv_chat;
                break;
            case R.id.ll_contact:
                viewpager.setCurrentItem(1);
            case 1:
                iv_contact.setSelected(true);
                iv_current=iv_contact;
                break;
            case R.id.ll_find:
                viewpager.setCurrentItem(2);
            case 2:
                iv_find.setSelected(true);
                iv_current=iv_find;
                break;
            case R.id.ll_me:
                viewpager.setCurrentItem(3);
            case 3:
                iv_me.setSelected(true);
                iv_current=iv_me;
                break;
        }
    }
    @Override
    public void onClick(View v) {
        changeTab(v.getId());
    }
}

6.BlankFragment文件代码

package com.example.wechatpage;
import android.content.Context;
import android.net.Uri;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class BlankFragment extends Fragment {
    private static final String ARG_TEXT= "param1";
    // TODO: Rename and change types of parameters
    private String mTextString;
    View rootView;
    public BlankFragment() {
        // Required empty public constructor
    }
    // TODO: Rename and change types and number of parameters
    public static BlankFragment newInstance(String param1) {
        BlankFragment fragment = new BlankFragment();
        Bundle args = new Bundle();
        args.putString(ARG_TEXT, param1);
        fragment.setArguments(args);
        return fragment;
    }
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mTextString = getArguments().getString(ARG_TEXT);
        }
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        if (rootView==null) {
             rootView = inflater.inflate(R.layout.fragment_blank, container, false);
        }
        initView();
        return rootView;
    }
    private void initView() {
        TextView textView = rootView.findViewById(R.id.tv_item);
        textView.setText(mTextString);
    }
}

7.MyFragmentPagerAdapter文件代码

package com.example.wechatpage;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.lifecycle.Lifecycle;
import androidx.viewpager2.adapter.FragmentStateAdapter;
import java.util.ArrayList;
import java.util.List;
public class MyFragmentPagerAdapter extends FragmentStateAdapter {
    List<Fragment> fragmentList;
    public MyFragmentPagerAdapter(@NonNull FragmentManager fragmentManager,
                                  @NonNull Lifecycle lifecycle,List<Fragment> fragmentList) {
        super(fragmentManager, lifecycle);
        this.fragmentList=fragmentList;
    }
    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return fragmentList.get(position);
    }
    @Override
    public int getItemCount() {
        return fragmentList.size();
    }
}

8.效果图：