先看下效果图
图片是可以实现切换的
主要用到的技术:
ViewPager
PagerAdapter
类似于ArrayAdapter与ListView
具体怎么做开代码,注释应该算详细的了
MainActivity.java
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import java.util.ArrayList;
import java.util.List;
/*
* Created by WXJ-try on 2016/12/20.
* 1、写一个合适的布局文件,在布局文件中添加ViewPager空间,最好导v4包的
* 2、在MainActivity中准备好图片数据,定义一个int数据存放图片
* 3、定义一个List存放ImageView
* 4、写一个类继承PaperAdapter,并重写里面的方法
* 4.1、getCount()中设置好图片资源的个数
* 4.2、在isViewFromObject(),中设置return view == object;目前不知道为什么
* 4.3、重点重写instantiateItem()方法,在里面完成为ViewPager添加图片
* 4.4、重写destroyItem()方法,container.removeView((View) object);,目前还不知道为什么
* 5、为ViewPager绑定适配器
*
* 存在的问题:
* 1、在instantiateItem()方法中每次都需要重新生成ImageView,耗资源
* 解决办法:
* 1、利用一个数组将第一次新建的ImageView存储起来,下次不再重新生成而是到数组里直接取
*
* 为底部添加对应于图片的小园点
* 1、在drawable中定义shape的布局文件
* */
public class MainActivity extends AppCompatActivity {
//得到图片
private int images[] = {R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e};
private LinearLayout linearLayout;
private ViewPager viewPager;
private ImageView lan_imageView;
private List<ImageView> list;
private int pointWidth;
private Button button;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
linearLayout = (LinearLayout) findViewById(R.id.ll);
viewPager = (ViewPager) findViewById(R.id.vp);
lan_imageView = (ImageView) findViewById(R.id.lan_iv);
button = (Button) findViewById(R.id.bt);
//优化添加代码---
list = new ArrayList<ImageView>();
for (int i = 0; i < images.length; i++) {
ImageView imageView = new ImageView(MainActivity.this);
list.add(imageView);
//处理小灰点,将小灰点加到界面上,可以出现对应个数的灰点
ImageView huiImageView = new ImageView(this);
huiImageView.setImageResource(R.drawable.bg_hui);
//调整灰点之间的间距,
/*
* LayoutParams作用:用于子控件向父控件提出请求
* */
LinearLayout.LayoutParams layoutParams =
new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
huiImageView.setLayoutParams(layoutParams);
//为小圆点设置边距
if (i > 0) {
layoutParams.leftMargin = 20;
}
//将小灰点添加到界面上
linearLayout.addView(huiImageView);
}
//---优化添加代码
/*
* 获得两个灰点之间的距离,作为小蓝点滑动的参考依据
* 直接用getWidth()不能得到,因为View组件要在onResume回调后完成
* 在视图树全部绘制完成时调用
* */
lan_imageView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
/*函数解释
* getChildAt(1)得到linearLayout的对应子控件
* getLeft() 的到该控件相对于父控件的左距离
* */
pointWidth = linearLayout.getChildAt(1).getLeft() - linearLayout.getChildAt(0).getLeft();
}
});
PagerAdapter pagerAdapter = new Myadapter();
viewPager.setAdapter(pagerAdapter);
//为ViewPager设置监听器,实现相关的方法
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
/*
* 当页面在滑动的时候会调用此方法,在滑动被停止之前,此方法回一直得到调用。
* 其中三个参数的含义分别为:
* position :当前页面,及你点击滑动的页面
* positionOffset:当前页面偏移的百分比
* positionOffsetPixels:当前页面偏移的像素位置
* */
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//完成小蓝点可以根据页面划过的百分百移动相应的百分百
//要设置小蓝点的位置同样涉及到边距,也要得到layoutParams
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) lan_imageView.getLayoutParams();
//这里不好解释
layoutParams.leftMargin = (int)(pointWidth * positionOffset+ position * pointWidth);
lan_imageView.setLayoutParams(layoutParams);
}
/*此方法是页面跳转完后得到调用,
* position是你当前选中的页面的Position(位置编号)
*/
@Override
public void onPageSelected(int position) {
if(position == images.length-1){
button.setVisibility(View.VISIBLE);
}else {
button.setVisibility(View.GONE);
}
}
/*此方法是在状态改变的时候调用,其中state这个参数有三种状态(0,1,2)。
* state ==1的时辰默示正在滑动,
* state==2的时辰默示滑动完毕了,
* state==0的时辰默示什么都没做。
* */
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
class Myadapter extends PagerAdapter {
@Override
public int getCount() {
return images.length;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
//滑动一次调用一次
@Override
public Object instantiateItem(ViewGroup container, int position) {
/*优化前代码
ImageView imageView = new ImageView(MainActivity.this);
imageView.setImageResource(images[position]);
container.addView(imageView);*/
//优化添加代码
ImageView imageView = list.get(position);
imageView.setImageResource(images[position]);
container.addView(imageView);
//优化添加代码
return imageView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
}
activity_main.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:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fdfdfd"
tools:context="com.example.mynewviewpager.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
></android.support.v4.view.ViewPager>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginBottom="50dp">
<!--为四个小灰点占位-->
<LinearLayout
android:id="@+id/ll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
</LinearLayout>
<!--小蓝点,直接可以覆盖小灰点-->
<ImageView
android:id="@+id/lan_iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/bg_lan"/>
<Button
android:id="@+id/bt"
android:visibility="gone"
android:background="#5cc2fc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="欢迎使用"/>
</RelativeLayout>
</RelativeLayout>
两种点的设计代码
小灰点 bg_hui.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size android:height="10dp" android:width="10dp"/>
<solid android:color="#d9d9d9"/>
</shape>
小蓝点bg_lan.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size android:width="10dp" android:height="10dp"/>
<solid android:color="#5cc2fc"/>
</shape>