以下是
使用View
Pager实现轮播图的基本步骤：
1. 在布局文件中添加一个View
Pager和一个指示器（通常
使用圆形的小点来表示）。
```xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v4.view.View
Pager
android:id="@+id/view_
pager"
android:layout_width="match_parent"
android:layout_height="200dp"/>
<LinearLayout
android:id="@+id/indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/view_
pager"
android:layout_cent
erHorizontal="true"
android:orientation="horizontal"/>
</RelativeLayout>
```
2. 创建一个
PagerAdapt
er，并在其中实现getItem()和getCount()方法。getItem()方法返回一个Fragment，用于显示每一页的内容。
```java
public class My
PagerAdapt
er extends Fragment
PagerAdapt
er {
private List<Fragment> fragmentList;
public My
PagerAdapt
er(FragmentManag
er fm, List<Fragment> fragmentList) {
sup
er(fm);
this.fragmentList = fragmentList;
}
@Ov
erride
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Ov
erride
public int getCount() {
return fragmentList.size();
}
}
```
3. 在Activity或Fragment中，初始化View
Pager和指示器，并设置
PagerAdapt
er和View
Pager的监听器。
```java
public class MainActivity extends AppCompatActivity {
private View
Pager view
Pager;
private LinearLayout indicator;
private List<Fragment> fragmentList;
private My
PagerAdapt
er pagerAdapt
er;
@Ov
erride
protected void onCreate(Bundle savedInstanceState) {
sup
er.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
view
Pager = (View
Pager) findViewById(R.id.view_
pager);
indicator = (LinearLayout) findViewById(R.id.indicator);
fragmentList = new ArrayList<>();
fragmentList.add(new MyFragment(R.drawable.image1));
fragmentList.add(new MyFragment(R.drawable.image2));
fragmentList.add(new MyFragment(R.drawable.image3));
pagerAdapt
er = new My
PagerAdapt
er(getSupportFragmentManag
er(), fragmentList);
view
Pager.setAdapt
er(
pagerAdapt
er);
view
Pager.addOn
PageChangeListen
er(new View
Pager.On
PageChangeListen
er() {
@Ov
erride
public void on
PageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Ov
erride
public void on
PageSelected(int position) {
updateIndicator(position);
}
@Ov
erride
public void on
PageScrollStateChanged(int state) {
}
});
addIndicator();
updateIndicator(0);
}
private void addIndicator() {
for (int i = 0; i < fragmentList.size(); i++) {
ImageView imageView = new ImageView(this);
imageView.setImag
eResource(R.drawable.indicator_selector);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
params.setMargins(10, 0, 10, 0);
indicator.addView(imageView, params);
}
}
private void updateIndicator(int position) {
for (int i = 0; i < indicator.getChildCount(); i++) {
ImageView imageView = (ImageView) indicator.getChildAt(i);
if (i == position) {
imageView.setSelected(true);
} else {
imageView.setSelected(false);
}
}
}
}
```
4. 创建一个Fragment，用于显示每一页的内容。可以在其中添加一个ImageView，用于显示图片。
```java
public class MyFragment extends Fragment {
private int resId;
public MyFragment() {
}
public MyFragment(int resId) {
this.resId = resId;
}
@Ov
erride
public View onCreateView(LayoutInflat
er inflat
er, ViewGroup contain
er,
Bundle savedInstanceState) {
View view = inflat
er.inflate(R.layout.fragment_my, contain
er, false);
ImageView imageView = (ImageView) view.findViewById(R.id.image_view);
imageView.setImag
eResource(resId);
return view;
}
}
```
5. 添加动画效果（可选）。可以
使用View
Pager的setCurrentItem()方法和Handl
er实现自动轮播效果，也可以
使用View
Pager的set
PageTransformer()方法添加页面切换动画效果。
```java
public class ZoomOut
PageTransformer implements View
Pager.
PageTransformer {
private static final float MIN_SCALE = 0.85f;
private static final float MIN_ALPHA = 0.5f;
public void
transformPage(View view, float position) {
int
pageWidth = view.getWidth();
int
pageHeight = view.getHeight();
if (position < -1) { // [-Infinity,-1)
// This
page is way off-screen to the left.
view.setAlpha(0f);
} else if (position <= 1) { // [-1,1]
// Modify the default slide transition to shrink the
page as well
float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
float v
ertMargin =
pageHeight * (1 - scaleFactor) / 2;
float horzMargin =
pageWidth * (1 - scaleFactor) / 2;
if (position < 0) {
view.set
TranslationX(horzMargin - v
ertMargin / 2);
} else {
view.set
TranslationX(-horzMargin + v
ertMargin / 2);
}
// Scale the
page down (between MIN_SCALE and 1)
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
// Fade the
page relative to its size.
view.setAlpha(MIN_ALPHA +
(scaleFactor - MIN_SCALE) /
(1 - MIN_SCALE) * (1 - MIN_ALPHA));
} else { // (1,+Infinity]
// This
page is way off-screen to the right.
view.setAlpha(0f);
}
}
}
```
1385
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
