复习
1.Fragment的产生
Fragment可以看成是一个小的Activity,但是你是否知道Fragment产生的原因是什么?
Fragment,中文翻译就是 碎片,Fragments 在活动Activity中为不同的屏幕尺寸修改布局配置(小屏幕可能每次显示一个片段,而大屏幕则可以显示两个或更多)
使用Fragment就相当于一个布局适配两个设备
让一个Activity简洁的地配置界面
简单高效,容易维护。
什么是Fragment
Fragment必须寄生在一个宿主Activity中,相当于子Activity
**Activity发送信息给Fragment
原生Bundle
2.如何隐藏标题栏
private void hideBar(){
ActionBar actionBar = getSupportActionBar();
if(actionBar!=null){
actionBar.hide();
}
}
ViewPager2
介绍
允许左右翻转带数据的页面
分析源码
ViewPager2虽然是继承自ViewGroup,但是其实它是对RecyclerView的封装
我们先来看看ViewPager2
的基本源码,重点在initialize
方法里面:
private void initialize(Context context, AttributeSet attrs) {
// 初始化RecyclerView
mRecyclerView = new RecyclerViewImpl(context);
mRecyclerView.setId(ViewCompat.generateViewId());
// 初始化LayoutManager
mLayoutManager = new LinearLayoutManagerImpl(context);
mRecyclerView.setLayoutManager(mLayoutManager);
setOrientation(context, attrs);
mRecyclerView.setLayoutParams(
new ViewGroup.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
mRecyclerView.addOnChildAttachStateChangeListener(enforceChildFillListener());
// 创建滑动事件转换器的对象
mScrollEventAdapter = new ScrollEventAdapter(mLayoutManager);
// 创建模拟拖动事件的对象
mFakeDragger = new FakeDrag(this, mScrollEventAdapter, mRecyclerView);
// 创建PagerSnapHelper对象,用来实现页面切换的基本效果
mPagerSnapHelper = new PagerSnapHelperImpl();
mPagerSnapHelper.attachToRecyclerView(mRecyclerView);
mRecyclerView.addOnScrollListener(mScrollEventAdapter);
// ······
}
在initialize方法里面,主要初始化RecyclerView的基本配置和基本组件包括:
1.给RecyclerView设置了滑动监听事件 (ScrollEventAdapter)
2.设置PagerSnapHelper,实现页面切换的效果
具体源码分析可查看:ViewPager2原理解析 - 简书 (jianshu.com)
实例1:简单轮播图的制作
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2QQTq0tt-1656562525156)(https://gitee.com/guan-xiongyao/image/raw/master/img/20220416153008.png)]
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.viewpager2.widget.ViewPager2
android:layout_width="match_parent"
android:layout_height="200dp"
android:id="@+id/viewPager"
>
</androidx.viewpager2.widget.ViewPager2>
</LinearLayout>
MainActivity.java
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.RecyclerView;
import androidx.viewpager2.widget.ViewPager2;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPager2 viewPager = findViewById(R.id.viewPager);
ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter();
viewPager.setAdapter(viewPagerAdapter); // 给ViewPager配置适配器
}
}
新建XML文件:命名为item_pager
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/container">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/ivImage"
android:layout_centerInParent="true"
android:scaleType="centerCrop"
/>
<!--
centerCrop 将图片等比例缩放,
让图像的短边与ImageView的边长度相同,
即不能留有空白,缩放后截取中间部分进行显示。
fitXY 是将原图进行横方向(即XY方向)的拉伸后绘制的,
会改变原始的比例
-->
</RelativeLayout>
新建ViewPagerAdapter.java文件
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;
import java.util.List;
public class ViewPagerAdapter extends RecyclerView.Adapter<ViewPagerAdapter.ViewPagerViewHolder> {
// 图片数组
private List<Integer> img = new ArrayList<>();
// 在适配器的构造函数中添加图片数组
public ViewPagerAdapter(){
img.add(R.drawable.gdufs);
img.add(R.drawable.gdufs2);
img.add(R.drawable.world); // 这里的图片可自行添加
}
// onCreatedViewHolder()方法作用是绑定item视图
@NonNull
@Override
public ViewPagerViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
return new ViewPagerViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_pager,parent,false));
}
// 该方法的作用是将数据跟视图(ViewHolder)绑定
@Override
public void onBindViewHolder(@NonNull ViewPagerViewHolder holder, int position) {
holder.mIv.setImageResource(img.get(position));
}
// 返回Item的数量,即可以ViewPager可以滑动的页数
@Override
public int getItemCount() {
return img.size();
}
// 创建ViewHolder内部类,用来存储并绑定实例化的Item对象
class ViewPagerViewHolder extends RecyclerView.ViewHolder{
ImageView mIv;
RelativeLayout mContainer;
public ViewPagerViewHolder(@NonNull View itemView) {
super(itemView);
mContainer = itemView.findViewById(R.id.container);
mIv = itemView.findViewById(R.id.ivImage);
}
}
}
ViewPager2+Fragment的联合使用
实例2:上下导航栏
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qgtf4nd3-1656562525157)(https://gitee.com/guan-xiongyao/image/raw/master/img/20220416171627.png)]
水平ViewPager
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="com.example.ViewPager2.activity.HorizontalScroll">
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/vp_h"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;
import android.os.Bundle;
import com.example.ViewPager2.adapter.HorizontalVpAdapter;
import com.example.viewpagers.R;
public class HorizontalScroll extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_horizontal_scroll);
ViewPager2 viewPager2 = findViewById(R.id.vp_h);
HorizontalVpAdapter adapter = new HorizontalVpAdapter(this);
viewPager2.setAdapter(adapter);
}
}
适配器文件:HorizontalVpAdapter.java
package com.example.ViewPager2.adapter;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import com.example.viewpagers.R;
import java.util.ArrayList;
import java.util.List;
public class HorizontalVpAdapter extends RecyclerView.Adapter<HorizontalVpAdapter.HorizontalVpViewHolder> {
private List<Integer> backgrounds;
private Context mContext;
// 适配器的构造方法,添加不同背景到数组里
public HorizontalVpAdapter(Context context){
mContext = context;
if(backgrounds == null){
backgrounds = new ArrayList<>();
backgrounds.add(R.color.blue);
backgrounds.add(R.color.white);
backgrounds.add(R.color.black);
backgrounds.add(R.color.teal_200);
backgrounds.add(R.color.teal_700);
backgrounds.add(R.color.purple_200);
}
}
// onCreatedViewHolder()方法作用是绑定item视图
@NonNull
@Override
public HorizontalVpViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
return new HorizontalVpViewHolder(LayoutInflater.from(mContext)
.inflate((R.layout.item), parent, false));
}
// 该方法的作用是将数据跟视图(ViewHolder)绑定
@Override
public void onBindViewHolder(@NonNull HorizontalVpViewHolder holder, int position) {
holder.mTextView.setText("第 " + (position + 1) + "界面");
holder.mLinearLayout.setBackgroundColor(backgrounds.get(position));
}
// 返回Item的数量,即可以ViewPager可以滑动的页数
@Override
public int getItemCount() {
if(backgrounds == null){
return 0;
}
return backgrounds.size();
}
// 创建ViewHolder内部类,用来存储并绑定实例化的Item对象
class HorizontalVpViewHolder extends RecyclerView.ViewHolder {
private LinearLayout mLinearLayout;
private TextView mTextView;
HorizontalVpViewHolder(@NonNull View itemView) {
super(itemView);
mLinearLayout = itemView.findViewById(R.id.item_ll_background);
mTextView = itemView.findViewById(R.id.item_tv_title);
}
}
}
item.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"
android:id="@+id/item_ll_background">
<TextView
android:id="@+id/item_tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
垂直ViewPager
垂直的和水平的一样,只需要在 android:orientation=“vertical” 即可,其他一致
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/vp_v"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"/>
底部导航栏——RadioGroup 与 ViewPager 2 连用
java文件NavigationBottom.java
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;
import android.os.Bundle;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import com.example.ViewPager2.adapter.RgAdapter;
import com.example.ViewPager2.fragment.HomeFragment;
import com.example.ViewPager2.fragment.MessageFragment;
import com.example.ViewPager2.fragment.MyFragment;
import com.example.viewpagers.R;
public class NavigationBottom extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {
private ViewPager2 vpRg;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_navigation_bottom);
RgAdapter adapter = new RgAdapter(this);
RadioGroup rg = findViewById(R.id.rg);
vpRg = findViewById(R.id.vp_rg);
rg.setOnCheckedChangeListener(this);
vpRg.setAdapter(adapter);
adapter.addFragment(new HomeFragment());
adapter.addFragment(new MessageFragment());
adapter.addFragment(new MyFragment());
vpRg.setCurrentItem(0);
// 这个方法可以可以监听到 ViewPager 2 的界面变化,进而去操作其他的控件。
vpRg.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
@Override
public void onPageSelected(int position) {
super.onPageSelected(position);
switch (position){
case 0:
((RadioButton)findViewById(R.id.rb_home)).setChecked(true);
break;
case 1:
((RadioButton)findViewById(R.id.rb_msg)).setChecked(true);
break;
case 2:
((RadioButton)findViewById(R.id.rb_my)).setChecked(true);
break;
}
}
});
}
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId){
case R.id.rb_home:
vpRg.setCurrentItem(0);
break;
case R.id.rb_msg:
vpRg.setCurrentItem(1);
break;
case R.id.rb_my:
vpRg.setCurrentItem(2);
break;
}
}
}
适配器文件RgAdapter.java
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;
import java.util.ArrayList;
import java.util.List;
public class RgAdapter extends FragmentStateAdapter {
private List<Class> fragments;
public RgAdapter(@NonNull FragmentActivity fragmentActivity){
super(fragmentActivity);
if(fragments == null){
fragments = new ArrayList<>();
}
}
public void addFragment(Fragment fragment){
if(fragments != null){
fragments.add(fragment.getClass());
}
}
@NonNull
@Override
public Fragment createFragment(int position) {
try {
return (Fragment) fragments.get(position).newInstance();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InstantiationException e) {
e.printStackTrace();
}
return null;
}
@Override
public int getItemCount() {
return fragments.size();
}
}
新建color文件夹:select_rg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/teal_200" android:state_checked="true"/>
<item android:color="@color/grey" android:state_checked="false" />
</selector>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/vp_rg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/rg"/>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#d9d9d9"
android:layout_above="@id/rg"
/>
<RadioGroup
android:id="@+id/rg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:paddingTop="5dp"
>
<RadioButton
android:id="@+id/rb_home"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:checked="true"
android:drawableTop="@drawable/selector_home"
android:drawablePadding="5dp"
android:gravity="center"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:text="@string/home"
android:textColor="@color/select_rg"
android:textSize="16sp"
/>
<RadioButton
android:id="@+id/rb_msg"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/selector_msg"
android:drawablePadding="5dp"
android:gravity="center"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:text="@string/msg"
android:textColor="@color/select_rg"
android:textSize="16sp"/>
<RadioButton
android:id="@+id/rb_my"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/selector_my"
android:drawablePadding="5dp"
android:gravity="center"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:text="@string/my"
android:textColor="@color/select_rg"
android:textSize="16sp"/>
</RadioGroup>
</RelativeLayout>
顶部导航栏——TabLayout 与 ViewPager 2 连用
NavigationTop.java文件
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;
import android.graphics.Color;
import android.os.Bundle;
import com.example.ViewPager2.adapter.TabAdapter;
import com.example.viewpagers.R;
import com.google.android.material.tabs.TabLayout;
public class NavigationTop extends AppCompatActivity {
private ViewPager2 vpTab;
private TabLayout tabVp;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_navigation_top);
TabAdapter adapter = new TabAdapter(this);
vpTab = findViewById(R.id.vp_tb);
tabVp = findViewById(R.id.tb_vp);
vpTab.setAdapter(adapter); // 这句很重要!!!
tabVp.setTabTextColors(Color.parseColor("#111111"),Color.parseColor("#0371DD"));
adapter.addColor(android.R.color.holo_blue_bright);
adapter.addColor(android.R.color.holo_red_dark);
adapter.addColor(android.R.color.holo_green_dark);
adapter.addColor(android.R.color.holo_blue_dark);
adapter.addColor(android.R.color.holo_purple);
adapter.addColor(android.R.color.holo_orange_dark);
tabVp.addTab(tabVp.newTab().setText("第一个界面"));
tabVp.addTab(tabVp.newTab().setText("第二个界面"));
tabVp.addTab(tabVp.newTab().setText("第三个界面"));
tabVp.addTab(tabVp.newTab().setText("第四个界面"));
tabVp.addTab(tabVp.newTab().setText("第五个界面"));
tabVp.addTab(tabVp.newTab().setText("第六个界面"));
tabVp.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
vpTab.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
vpTab.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);
tabVp.setScrollPosition(position, 0, false);
}
@Override
public void onPageScrollStateChanged(int state) {
super.onPageScrollStateChanged(state);
}
});
}
}
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"
tools:context="com.example.ViewPager2.activity.NavigationTop"
>
<com.google.android.material.tabs.TabLayout
android:id="@+id/tb_vp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:tabIndicatorFullWidth="false"
app:tabIndicatorColor="#0371DD"
app:tabRippleColor="@android:color/transparent"
app:tabSelectedTextColor="#0371DD"
app:tabTextColor="#111111"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>
<androidx.viewpager2.widget.ViewPager2
android:layout_below="@id/tb_vp"
android:id="@+id/vp_tb"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toBottomOf="@+id/tb_vp"
/>
</RelativeLayout>
添加子Fragment——ShowFragment.java
import android.os.Bundle;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.TextView;
import com.example.viewpagers.R;
import java.util.ArrayList;
import java.util.List;
/**
* A simple {@link Fragment} subclass.
* Use the {@link ShowFragment#newInstance} factory method to
* create an instance of this fragment.
*/
public class ShowFragment extends Fragment {
public ShowFragment() {
// Required empty public constructor
}
/**
* Use this factory method to create a new instance of
* this fragment using the provided parameters.
*
* @return A new instance of fragment ShowFragment.
*/
// TODO: Rename and change types and number of parameters
public static ShowFragment newInstance(List<Integer> colors, int item) {
ShowFragment fragment = new ShowFragment();
Bundle args = new Bundle();
args.putSerializable("color",(ArrayList<Integer>)colors);
args.putInt("item",item);
fragment.setArguments(args);
return fragment;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_show, container, false);
}
@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
view.<FrameLayout>findViewById(R.id.fl_show)
.setBackgroundResource(((ArrayList<Integer>) getArguments()
.getSerializable("color")).get(getArguments().getInt("item")));
view.<TextView>findViewById(R.id.tv_show)
.setText("第 " + (getArguments().getInt("item")+1) + "个页面");
super.onViewCreated(view, savedInstanceState);
}
}
fragment_show.xml
<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"
android:id="@+id/fl_show"
tools:context="com.example.ViewPager2.fragment.ShowFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:id="@+id/tv_show"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/hello_blank_fragment" />
</FrameLayout>
适配文件: TabAdapter
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;
import com.example.ViewPager2.fragment.ShowFragment;
import java.util.ArrayList;
import java.util.List;
public class TabAdapter extends FragmentStateAdapter {
private List<Integer> colors;
public TabAdapter(@NonNull FragmentActivity fragmentActivity) {
super(fragmentActivity);
if(colors == null){
colors = new ArrayList<>();
}
}
public void addColor(int color){
if(colors != null){
colors.add(color);
}
}
@NonNull
@Override
public Fragment createFragment(int position) {
return ShowFragment.newInstance(colors,position);
}
@Override
public int getItemCount() {
return colors.size();
}
}
拓展:ViewPager2+Fragment+RecyclerView
参考博客:https://blog.csdn.net/xiangshiweiyu_hd/article/details/104005810
port androidx.viewpager2.adapter.FragmentStateAdapter;
import com.example.ViewPager2.fragment.ShowFragment;
import java.util.ArrayList;
import java.util.List;
public class TabAdapter extends FragmentStateAdapter {
private List<Integer> colors;
public TabAdapter(@NonNull FragmentActivity fragmentActivity) {
super(fragmentActivity);
if(colors == null){
colors = new ArrayList<>();
}
}
public void addColor(int color){
if(colors != null){
colors.add(color);
}
}
@NonNull
@Override
public Fragment createFragment(int position) {
return ShowFragment.newInstance(colors,position);
}
@Override
public int getItemCount() {
return colors.size();
}
}
## 拓展:ViewPager2+Fragment+RecyclerView
参考博客:https://blog.csdn.net/xiangshiweiyu_hd/article/details/104005810