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
<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;
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 {
public Object instantiateItem(ViewGroup container, int position) {
//添加第position个view对象,并添加到容器container中,并返回
View view = pages.get(position);
container.addView(view);
return view;
}
public void destroyItem(ViewGroup container, int position, Object object) {
//将第position个view从container中移除走
View view = pages.get(position);
container.removeView(view);
}
public int getCount() {
return pages.size();
}
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
}
}
运行程序
综合练习
xml
<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;
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);
}
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
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;
}
}
public void onPageScrollStateChanged(int state) {
}
private class InnerFragmentPagerAdapter extends FragmentPagerAdapter {
public InnerFragmentPagerAdapter( FragmentManager fm, int behavior) {
super(fm, behavior);
}
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;
}
public int getCount() {
return 3;
}
}
private class InnerClassOnClickListener implements View.OnClickListener {
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 {
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
//通过xml布局得到需要显示的view对象
View view = inflater.inflate(R.layout.fragment_one, null);
//返回view对象
return view;
}
}
运行程序: