Andaroid 新手引导页及小圆点添加

原创 2015年11月19日 14:03:40

直接上代码!!


先看布局文件吧,很简单的一个布局。。这里为什么用一个空的线性布局呢,想不通的可以先往后看

<FrameLayout 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:id="@+id/ll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:layout_marginBottom="50dp"
android:orientation="horizontal" >
</LinearLayout>

</FrameLayout>


java代码

package com.example.guidedemo;


import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;

public class MainActivity extends Activity {

private ViewPager mViewPager;
private GuidePagerAdapter mAdapter;
private LinearLayout ll;
private ImageView[] images;
private int[] icons = { R.drawable.bg_guide1, R.drawable.bg_guide2,
R.drawable.bg_guide3 };

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mViewPager = (ViewPager) findViewById(R.id.viewPager);
ll = (LinearLayout) findViewById(R.id.ll);
mAdapter = new GuidePagerAdapter();
mViewPager.setAdapter(mAdapter);
mViewPager.setOnPageChangeListener(pagerListener);
initDot();
}

/**
* 初始化小圆点的方法
*/
private void initDot() {
images = new ImageView[icons.length];// 小圆点具体有多少个,就看有多少张图片
for (int i = 0; i < icons.length; i++) {
ImageView iv = new ImageView(this);
LayoutParams lp = new LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
lp.weight = 1;// 让他们权重都为1,注意这里是LinearLayout.LayoutParams.
lp.setMargins(10, 0, 0, 0);
iv.setLayoutParams(lp);
if (i == 0) {// 这里默认让第一个圆点是红色,因为是第一页嘛
iv.setImageResource(R.drawable.icon_red);
} else {// 其他为灰色
iv.setImageResource(R.drawable.icon_gray);
}
images[i] = iv;// 把创建出来的ImageView放到这个数组里面
ll.addView(images[i]);// 添加到刚写的那个空的线性布局中去
}

}

/**
* ViewPager的滑动监听方法
*/
private OnPageChangeListener pagerListener = new OnPageChangeListener() {

@Override
public void onPageSelected(int arg0) {
for (int i = 0; i < images.length; i++) {
if(i == arg0){
images[i].setImageResource(R.drawable.icon_red);
}else{
images[i].setImageResource(R.drawable.icon_gray);
}
}

}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {

}

@Override
public void onPageScrollStateChanged(int arg0) {

}
};

public class GuidePagerAdapter extends PagerAdapter {

/**
* viewPgaer有多少页
*/
@Override
public int getCount() {
return icons.length;
}

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}

/**
* View视图长什么样,全靠这个方法啦
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView iv = new ImageView(MainActivity.this);// 代码动态的创建一个ImageView
LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT);
iv.setLayoutParams(lp);
// 这里最好用BackgroundResource,因为ImageResource相当于XML里面定义的src
iv.setBackgroundResource(icons[position]);
container.addView(iv);// 切记一定要把当前View对象添加到ViewGroup中,不然就什么都看不到
return iv;
}

/**
* 移除View视图
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}

}


看完了是不是觉得很简单 

引导页添加小圆点以及滑动进入主页面

APP大多数在引导页都是一些炫图加导航小圆点,在最后一页直接滑动进入主界面。 首先介绍小圆点的添加: XML布局:...

引导页的实现,用ViewPager,底下有小圆点显示以及滑动进入主页面

实习的第一个经理布置的任务就是实现引导页功能,在这和大家分享下 1.布局采用相对布局中有ViewPager和LinearLayout 代码如下:...

android引导页中的小圆点随手势滑动demo

直接上代码,首先是布局文件: xml version="1.0" encoding="utf-8"?> xmlns:android="http://schemas.android.com/apk...

Android学习(二十六)APP引导页面以及小圆点滑动的实现

1、先看效果如下: 2、然后实现这个效果大体说明:1)滑动的页面,用ViewPager来实现 2)小圆点用LinerLayout里面添加图片来实现 3)三个滑动页面和小圆点都是图片 4)当滑动到当前...
  • myGFZ
  • myGFZ
  • 2017年07月04日 14:21
  • 794

ViewPager实现APP的引导页面(小圆点联动)

ViewPager是v4扩展包中提供的一个控件,是一个ViewGroup,可以包含多个View,当时手指在屏幕上左右滑动时,可以切换页面。 一般常用的APP引导页面通常会用到ViewPager技术。 ...

自动添加轮播图导航条(小圆点)

在项目中开发,轮播图是必须有的技术点,但是从产品及设计的角度来说,轮播图和导航条是绝配! 所以,自己就写了自动添加轮播图导航条,直接贴代码,都有注释,并且很详细 先上效果图: 第一步:主布局...
  • willba
  • willba
  • 2017年05月18日 15:48
  • 473

ViewPager中代码动态的添加小圆点作为指示器indicator,以及实现无限轮播

1.首先我们需要一个相对布局装一个线性布局的容器和一个白色的小点作为选中的标识,用灰点表示未选中的情况。 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Andaroid 新手引导页及小圆点添加
举报原因:
原因补充:

(最多只允许输入30个字)