在项目中开发,轮播图是必须有的技术点,但是从产品及设计的角度来说,轮播图和导航条是绝配!
所以,自己就写了自动添加轮播图导航条,直接贴代码,都有注释,并且很详细
先上效果图:
第一步:主布局视图
<?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">
<!--轮播的图片-->
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<!--小圆点容器-->
<LinearLayout
android:layout_centerHorizontal="true"
android:id="@+id/indicator_llyout"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:layout_marginBottom="100dp"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
第二步:重点代码
public class MainActivity extends AppCompatActivity {
private ViewPager mViewPager;
private LinearLayout mLinearLayout;
//轮播的图片资源
int[] imagResStr = new int[]{R.mipmap.ic_launcher,R.mipmap.ic_launcher_round,R.mipmap.ic_launcher,R.mipmap.ic_launcher_round};
//轮播小圆点
ImageView[] mIndicatorImags ;
//转载图片的集合
private List<View> ImgeList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mViewPager = (ViewPager) findViewById(R.id.viewPager);
mLinearLayout = (LinearLayout) findViewById(R.id.indicator_llyout);
//动态添加导航条圆点
//获取数据资源
initData();
//设置图片轮播
mViewPager.setAdapter(new PagerAdapter() {
@Override
public int getCount() {
return ImgeList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
//销毁资源
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
//去掉继承父类的方法
container.removeView(ImgeList.get(position));
}
//添加资源
@Override
public Object instantiateItem(ViewGroup container, int position) {
//去掉继承父类的方法
container.addView(ImgeList.get(position));
return ImgeList.get(position);
}
});
//设置滑动监听
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
//滑动完成时改变,动态改变小圆点
@Override
public void onPageSelected(int position) {
for (int i = 0; i < mIndicatorImags.length; i++) {
//红色
mIndicatorImags[i].setBackgroundResource(R.drawable.ic_indicators_red);
if(i != position) {
//白色
mIndicatorImags[i].setBackgroundResource(R.drawable.ic_indicators_white);
}
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void initData() {
mIndicatorImags = new ImageView[4];
ImgeList = new ArrayList<>(4);
for (int i = 0;i<4 ;i++){
View view = LayoutInflater.from(this).inflate(R.layout.activity_guide_item, null);
ImageView imagOder = (ImageView) view.findViewById(R.id.guide_image);
//设置图片资源
imagOder.setBackgroundResource(imagResStr[i]);
//将视图资源添加到集合当中(不是图片资源imagOder,否则会报错如下:)
// 备注: java.lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first.
ImgeList.add(view);
//圆点图片
mIndicatorImags[i] = new ImageView(this);
if(i== 0) {
//默认圆点为红色
mIndicatorImags[i].setBackgroundResource(R.drawable.ic_indicators_red);
}else {
//为白色,并添加间隔距离
mIndicatorImags[i].setBackgroundResource(R.drawable.ic_indicators_white);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(-2,-2);
//设置左右间隔
params.setMargins(20,0,0,0);
mIndicatorImags[i].setLayoutParams(params);
}
//为容器添加圆点
mLinearLayout.addView(mIndicatorImags[i]);
}
}
}
第三步:添加的图片视图
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:orientation="vertical">
<ImageView
android:id="@+id/guide_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:scaleType="center" />
</LinearLayout>
以上就可以实现了