ViewPager

ViewPager 以可滑动的格式显示视图或 Fragment。如果可能,请改用 viewpager2(后续会讲)

ViewPager 直接继承自 ViewGroup 类,它是一个容器类,可以在其中添加其他的 View。且自带手势横向滑动,以及平移动画效果

ViewPager 需要一个 PagerAdapter 适配器,来为它提供数据。其显示内容是若干个 View 对象,这些 View 对象可以是直接在 JAVA 程序中创建出来,也可以是使用 LayoutInflater 加载 xml 布局得到的

ViewPager 经常和 Fragment 一起使用,并且提供了专门的 FragmentPagerAdapter 和 FragmentStatePagerAdapter 类

来简单练习一下,首先在主布局中放入 viewpager

<androidx.viewpager.widget.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

然后创建3个类似的布局,分别命名为

page_one,page_two,page_three

<?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="#7bbfea"
android:gravity="center">

<TextView
android:id="@+id/tv_page_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Page 01"
android:textColor="@android:color/white"
android:textSize="18dp" />

</LinearLayout>

Activity

public class TestActivity extends Activity {
private ViewPager viewPager;
private PagerAdapter adapter;
private List<View> pages;

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

pages = new ArrayList<>();
pages.add(getLayoutInflater().inflate(R.layout.page_one, null));
pages.add(getLayoutInflater().inflate(R.layout.page_two, null));
pages.add(getLayoutInflater().inflate(R.layout.page_three, null));

viewPager = findViewById(R.id.viewpager);
adapter = new InnerPagerAdapter();
viewPager.setAdapter(adapter);
}

private class InnerPagerAdapter extends PagerAdapter {
@Override
public Object instantiateItem(ViewGroup container, int position) {
//添加第position个view对象,并添加到容器container中,并返回
View view = pages.get(position);
container.addView(view);
return view;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
//将第position个view从container中移除走
View view = pages.get(position);
container.removeView(view);
}

@Override
public int getCount() {
return pages.size();
}

@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
}
}

运行程序
【达内课程】ViewPager使用练习_ide

综合练习

xml

<?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.viewpager.widget.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />

<LinearLayout
android:id="@+id/rg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#e5e5e5"
android:orientation="horizontal">

<Button
android:id="@+id/btn_home"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@null"
android:drawableTop="@drawable/ju_selector"
android:drawablePadding="5dp"
android:text="首页"
android:textColor="@drawable/text_selector" />

<Button
android:id="@+id/btn_location"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@null"
android:drawableTop="@drawable/hua_selector"
android:drawablePadding="5dp"
android:text="位置"
android:textColor="@drawable/text_selector" />

<Button
android:id="@+id/btn_cart"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@null"
android:drawableTop="@drawable/suan_selector"
android:drawablePadding="5dp"
android:text="购物车"
android:textColor="@drawable/text_selector" />

</LinearLayout>
</RelativeLayout>

ju_selector.xml

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

activity

public class TestActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {
private Button btn_home;
private Button btn_location;
private Button btn_cart;
private ViewPager viewPager;

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

btn_home = findViewById(R.id.btn_home);
btn_location = findViewById(R.id.btn_location);
btn_cart = findViewById(R.id.btn_cart);
viewPager = findViewById(R.id.viewpager);

InnerClassOnClickListener innerClassOnClickListener = new InnerClassOnClickListener();
btn_home.setOnClickListener(innerClassOnClickListener);
btn_location.setOnClickListener(innerClassOnClickListener);
btn_cart.setOnClickListener(innerClassOnClickListener);
select(btn_home);

InnerFragmentPagerAdapter adapter = new InnerFragmentPagerAdapter(getSupportFragmentManager(), 1);
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(this);
}

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override
public void onPageSelected(int position) {
switch (position) {
case 0:
select(btn_home);
break;
case 1:
select(btn_location);
break;
case 2:
select(btn_cart);
break;
}
}

@Override
public void onPageScrollStateChanged(int state) {

}

private class InnerFragmentPagerAdapter extends FragmentPagerAdapter {

public InnerFragmentPagerAdapter(@NonNull FragmentManager fm, int behavior) {
super(fm, behavior);
}

@Override
public Fragment getItem(int position) {
Fragment fragment = null;
switch (position) {
case 0:
fragment = new OneFragment();
break;
case 1:
fragment = new TwoFragment();
break;
case 2:
fragment = new ThreeFragment();
break;
}
return fragment;
}

@Override
public int getCount() {
return 3;
}
}


private class InnerClassOnClickListener implements View.OnClickListener {

@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.btn_home:
select(btn_home);
viewPager.setCurrentItem(0);
break;
case R.id.btn_location:
select(btn_location);
viewPager.setCurrentItem(1);
break;
case R.id.btn_cart:
select(btn_cart);
viewPager.setCurrentItem(2);
break;
}
}
}

private void select(Button button) {
btn_home.setSelected(false);
btn_location.setSelected(false);
btn_cart.setSelected(false);

button.setSelected(true);

Toast.makeText(this, button.getText(), Toast.LENGTH_SHORT).show();
}
}

其中的FragmentOne

public class OneFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
//通过xml布局得到需要显示的view对象
View view = inflater.inflate(R.layout.fragment_one, null);
//返回view对象
return view;
}
}

运行程序:
【达内课程】ViewPager使用练习_android_02