文章目录
- 1 ViewPager2简介
- 1.1 ViewPager2应用场合
- 1.2 ViewPager2应用背景
- 2 应用案例
-
1 ViewPager2简介
1.1 ViewPager2应用场合
ViewPager2的应用场景:
- 引导界面、相册多图片预览
- 多Tab页面、 App导航
- 广告播放展示
1.2 ViewPager2应用背景
ViewPager2的应用背景:
- androidx.viewpager2:viewpager2
- Names: V4 V7 Androidx etc.
- Android Support Libraries(需要手动加入库)
2 应用案例
2.1 图片轮播
先看看下使用步骤:
- 添加依赖
- xml布局中引用viewpager
- 声明数组,将图片存入
- 创建适配器,完成资源配置
- 为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=".MainActivity">
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/pagers"
android:layout_width="match_parent"
android:layout_height="180dp"
android:orientation="horizontal"
app:layout_constraintTop_toTopOf="parent"></androidx.viewpager2.widget.ViewPager2>
<LinearLayout
android:id="@+id/dots"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_horizontal"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="160dp">
<ImageView
android:layout_width="10dp"
android:layout_height="10dp"
android:background="@drawable/dot_selected"/>
<ImageView
android:layout_width="10dp"
android:layout_height="10dp"
android:background="@drawable/dot_unselected"/>
<ImageView
android:layout_width="10dp"
android:layout_height="10dp"
android:background="@drawable/dot_unselected"/>
<ImageView
android:layout_width="10dp"
android:layout_height="10dp"
android:background="@drawable/dot_unselected"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
其中用到了给ImageView设置背景的drawable文件,内容如下:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#cccccc"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#777777" />
</shape>
然后看下Java文件:
package com.example.viewpagerdemo;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.RecyclerView;
import androidx.viewpager2.widget.ViewPager2;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
List<Integer> pics = new ArrayList<>();
LinearLayout dots;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
pics.add(R.mipmap.bg1);
pics.add(R.mipmap.bg2);
pics.add(R.mipmap.bg3);
pics.add(R.mipmap.bg4);
RecyclerView.Adapter adapter = new RecyclerView.Adapter() {
@NonNull
@Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View v = LayoutInflater.from(MainActivity.this).inflate(R.layout.item,parent,false);
return new ViewHolder(v);
}
@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
ViewHolder h = (ViewHolder) holder;
h.container.setBackgroundResource(pics.get(position));
}
@Override
public int getItemCount() {
return pics.size();
}
};
ViewPager2 pagers = findViewById(R.id.pagers);
pagers.setAdapter(adapter);
dots = findViewById(R.id.dots);
pagers.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
@Override
public void onPageSelected(int position) {
super.onPageSelected(position);
for(int i = 0 ;i < dots.getChildCount() ; i++){
((ImageView)dots.getChildAt(i)).setBackgroundResource(R.drawable.dot_unselected);
}
((ImageView)dots.getChildAt(position)).setBackgroundResource(R.drawable.dot_selected);
}
});
}
public class ViewHolder extends RecyclerView.ViewHolder{
public LinearLayout container;
public ViewHolder(@NonNull View itemView) {
super(itemView);
container = itemView.findViewById(R.id.container);
}
}
}
2.2 导航
首先看下需要实现的界面:
需要使用到TabLayout+ViewPager,步骤如下:
- 添加依赖。
- 在.xml中分别加入TabLayout和ViewPager。
- 在.Java中分别指定布局和ViewPager的引用。
- 通过事件关联TabLayout和ViewPager(需要使用到FragmentStateAdapter适配器)。
依赖添加如下:
apply plugin: 'com.android.application'
android {
compileSdkVersion 30
buildToolsVersion "30.0.3"
defaultConfig {
applicationId "com.example.viewpagertest_20210707"
minSdkVersion 15
targetSdkVersion 30
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'androidx.appcompat:appcompat:1.0.2'
implementation 'androidx.viewpager2:viewpager2:1.0.0-alpha02'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
implementation 'com.androidkun:XTabLayout:1.1.4'
implementation 'androidx.legacy:legacy-support-v4:1.0.0'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test.ext:junit:1.1.0'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'
}
首先看下主页Activity的xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".TabActivity"
android:orientation="vertical">
<com.androidkun.xtablayout.XTabLayout
android:id="@+id/tab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:xTabTextColor="#ccc"
app:xTabTextSize="15sp"
app:xTabSelectedTextColor="#ff0000"
app:xTabSelectedTextSize="20sp"></com.androidkun.xtablayout.XTabLayout>
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/pagers"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"></androidx.viewpager2.widget.ViewPager2>
</LinearLayout>
Fragment就是指设置了背景图片而已,这里就不贴代码了,没有意义。
下面看一下界面的java代码:
package com.example.viewpagerdemo;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager2.adapter.FragmentStateAdapter;
import androidx.viewpager2.widget.ViewPager2;
import android.os.Bundle;
import android.widget.Toast;
import com.androidkun.xtablayout.XTabLayout;
import java.util.ArrayList;
import java.util.List;
public class TabActivity extends AppCompatActivity {
XTabLayout tab;
ViewPager2 pagers;
List<Fragment> list = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab);
tab = findViewById(R.id.tab);
XTabLayout.Tab t1 = tab.newTab();
t1.setText("财经");
tab.addTab(t1);
tab.addTab(tab.newTab().setText("军事"));
tab.addTab(tab.newTab().setText("科技"));
tab.addTab(tab.newTab().setText("视频"));
tab.addTab(tab.newTab().setText("体育"));
tab.setOnTabSelectedListener(new XTabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(XTabLayout.Tab tab) {
int position = tab.getPosition();
pagers.setCurrentItem(position);
}
@Override
public void onTabUnselected(XTabLayout.Tab tab) {
}
@Override
public void onTabReselected(XTabLayout.Tab tab) {
}
});
pagers = findViewById(R.id.pagers);
list.add(new Fragment1());
list.add(new Fragment2());
list.add(new Fragment3());
list.add(new Fragment4());
list.add(new Fragment5());
pagers.setAdapter(new FragmentStateAdapter(getSupportFragmentManager()) {
@NonNull
@Override
public Fragment getItem(int position) {
return list.get(position);
}
@Override
public int getItemCount() {
return list.size();
}
});
pagers.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
@Override
public void onPageSelected(int position) {
super.onPageSelected(position);
tab.getTabAt(position).select();
}
});
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)