实现方式一
SmartBeiJing.png
activity_guide.xml
<?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/vp_guide"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="30dp">
<LinearLayout
android:id="@+id/ll_point"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"/>
<ImageView
android:id="@+id/iv_red_point"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/circle_red"/>
</RelativeLayout>
</RelativeLayout>
guide_vp_item.xml
<?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" >
<TextView
android:id="@+id/tv_start_use"
android:layout_width="100dp"
android:layout_height="36dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="70dp"
android:background="@drawable/guide_tv"
android:gravity="center"
android:text="@string/start_use"
android:textColor="@color/tv_white"
android:textSize="18sp"
android:visibility="gone" />
</RelativeLayout>
public class GuideActivity extends Activity {
private Context mContext;
int[] mGuidePicture = new int[]{R.drawable.guide_1, R.drawable.guide_2, R.drawable.guide_3};
private int mPointDis;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_guide);
mContext = this;
initUI();
}
private void initUI() {
ViewPager vp_guide = (ViewPager) findViewById(R.id.vp_guide);
vp_guide.setAdapter(new GuidePagerAdapter());
final LinearLayout ll_point = (LinearLayout) findViewById(R.id.ll_point);
final ImageView iv_red_point = (ImageView) findViewById(R.id.iv_red_point);
// 添加灰色小圆点
ImageView imageView;
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
layoutParams.leftMargin = 20;
for(int i = 0; i < mGuidePicture.length; i ++){
imageView = new ImageView(mContext);
imageView.setImageResource(R.drawable.circle_gray);
if(i != 0){
imageView.setLayoutParams(layoutParams);
}
ll_point.addView(imageView);
}
// 监听layout方法结束的事件,位置确定好之后再获取圆点间距
// 视图树
iv_red_point.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
// 移除监听,避免重复回调
iv_red_point.getViewTreeObserver().removeGlobalOnLayoutListener(this);
// iv_red_point.getViewTreeObserver().removeOnGlobalLayoutListener(this);
// layout方法执行结束的回调
mPointDis = ll_point.getChildAt(1).getLeft() - ll_point.getChildAt(0).getLeft();
System.out.println("圆点距离:" + mPointDis);
}
});
// 设置滑动事件监听
vp_guide.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrolled(int position,float positionOffset, int positionOffsetPixels) {
// 更新小红点距离
// 计算小红点当前的左边距
int leftMargin = (int) (mPointDis * positionOffset) + position * mPointDis;
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) iv_red_point.getLayoutParams();
// 修改左边距
params.leftMargin = leftMargin;
// 重新设置布局参数
iv_red_point.setLayoutParams(params);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
class GuidePagerAdapter extends PagerAdapter{
private ArrayList<View> mGuideViewList;
public GuidePagerAdapter(){
initData();
}
private void initData() {
View view;
mGuideViewList = new ArrayList<View>();
for(int i = 0; i < mGuidePicture.length; i ++){
view = View.inflate(mContext, R.layout.guide_vp_item, null);
view.setBackgroundResource(mGuidePicture[i]);
if(i == mGuidePicture.length - 1){
TextView tv_start_use = (TextView) view.findViewById(R.id.tv_start_use);
tv_start_use.setVisibility(View.VISIBLE);
tv_start_use.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(mContext, "Hello world", Toast.LENGTH_SHORT).show();
}
});
}
mGuideViewList.add(view);
}
}
@Override
public int getCount() {
return mGuideViewList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = mGuideViewList.get(position);
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
}
实现方式二
sto.png
activity_guide.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="@+id/vp_guide"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<com.viewpagerindicator.CirclePageIndicator
android:id="@+id/indicator"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_marginBottom="30dp"
android:padding="5dp"
app:radius="5dp"
app:fillColor="#ff0000"
app:pageColor="#666666"/>
</RelativeLayout>
guide_vp_item.xml
<?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" >
<TextView
android:id="@+id/tv_start_use"
android:layout_width="100dp"
android:layout_height="36dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="70dp"
android:background="@drawable/guide_tv"
android:gravity="center"
android:text="@string/start_use"
android:textColor="@color/tv_white"
android:textSize="18sp"
android:visibility="gone" />
</RelativeLayout>
public class GuideActivity extends Activity {
private Context mContext;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_guide);
mContext = this;
initUI();
}
private void initUI() {
ViewPager vp_guide = (ViewPager) findViewById(R.id.vp_guide);
vp_guide.setAdapter(new GuidePagerAdapter());
// 开源控件viewpagerindicator下CirclePageIndicator的使用
PageIndicator mIndicator = (CirclePageIndicator) findViewById(R.id.indicator);
mIndicator.setViewPager(vp_guide);
}
class GuidePagerAdapter extends PagerAdapter {
private ArrayList<View> mGuideViewList;
public GuidePagerAdapter() {
initData();
}
private void initData() {
mGuideViewList = new ArrayList<View>();
int[] guidePicture = new int[] {
R.drawable.guide1,
R.drawable.guide2,
R.drawable.guide3,
R.drawable.guide4
};
View view;
for (int i = 0; i < guidePicture.length; i++) {
view = View.inflate(mContext, R.layout.guide_vp_item, null);
view.setBackgroundResource(guidePicture[i]);
if (i == guidePicture.length - 1) {
TextView tv_start_use = (TextView) view.findViewById(R.id.tv_start_use);
tv_start_use.setVisibility(View.VISIBLE);
tv_start_use.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(mContext, "Hello world",Toast.LENGTH_SHORT).show();
}
});
}
mGuideViewList.add(view);
}
}
@Override
public int getCount() {
return mGuideViewList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = mGuideViewList.get(position);
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
}
网友评论