加载页,引导页(小红点的绘制)

最新推荐文章于 2025-05-06 21:00:58 发布

原创最新推荐文章于 2025-05-06 21:00:58 发布 · 597 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个简单的Android应用引导页实现方案，包括使用ViewPager展示不同图片、动态调整指示器位置及开始按钮的显示隐藏逻辑。

Java类中

public class MainActivity extends AppCompatActivity {

    private ViewPager mViewPager;
    private LinearLayout llContainer;
    private ImageView ivRedPoint;
    private Button btnStart;

    //图片id集合
    private int[] mImageIds = new int[] { R.drawable.guide_1,R.drawable.guide_2, R.drawable.guide_3 };

    private ArrayList<ImageView> mImageViews;

    private int mPointDis;//圆点移动距离

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);//从代码中去掉标题栏的方法, 必须在setContentView之前调用
        setContentView(R.layout.activity_main);
        initViews();
        initData();
    }

    //初始化布局
    private void initViews() {
        mViewPager = (ViewPager) findViewById(R.id.vp_guide);
        llContainer = (LinearLayout) findViewById(R.id.ll_container);
        ivRedPoint = (ImageView) findViewById(R.id.iv_red_point);
        btnStart = (Button) findViewById(R.id.btn_start);
    }

    //初始化数据
    private void initData() {
        //初始化三张图片的ImageView
        mImageViews = new ArrayList<ImageView>();
        for (int i = 0; i < mImageIds.length; i++) {
            ImageView view = new ImageView(this);
            view.setBackgroundResource(mImageIds[i]);
            mImageViews.add(view);

            //初始化小圆点
            ImageView point = new ImageView(this);
            point.setImageResource(R.drawable.shape_point_normal);

            //初始化布局参数
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
            if (i > 0) {
                params.leftMargin = 10;//从第二个点开始设置左边距10px
            }

            point.setLayoutParams(params);//设置布局参数

            llContainer.addView(point);
        }

        mViewPager.setAdapter(new GuideAdapter());

        //监听ViewPager滑动事件,更新小红点位置
        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                if (position == mImageIds.length - 1) {
                    //最后一个页面显示开始体验按钮
                    btnStart.setVisibility(View.VISIBLE);
                } else {
                    btnStart.setVisibility(View.GONE);
                }
            }

            //监听滑动事件
            @Override
            public void onPageScrolled(int position, float positionOffset,int positionOffsetPixels) {
                System.out.println("当前位置:" + position + ";偏移百分比:" + positionOffset);

                //通过修改小红点的左边距来更新小红点的位置
                int leftMargin = (int) (mPointDis * positionOffset + position * mPointDis + 0.5f);//要将当前的位置信息产生的距离加进来
                //获取小红点的布局参数
                RelativeLayout.LayoutParams params =  (android.widget.RelativeLayout.LayoutParams) ivRedPoint.getLayoutParams();
                params.leftMargin = leftMargin;
                ivRedPoint.setLayoutParams(params);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        //监听layout执行结束的事件, 一旦结束之后, 在去获取当前的left位置
        //视图树
        ivRedPoint.getViewTreeObserver().addOnGlobalLayoutListener(
                new ViewTreeObserver.OnGlobalLayoutListener() {

                    //一旦视图树的layout方法调用完成, 就会回调此方法
                    @SuppressWarnings("deprecation")
                    @Override
                    public void onGlobalLayout() {
                        //布局位置已经确定,可以拿到位置信息了
                        mPointDis = llContainer.getChildAt(1).getLeft()
                                - llContainer.getChildAt(0).getLeft();
                        System.out.println("mPointDis:" + mPointDis);

                        //移除观察者
                        ivRedPoint.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                    }
                });

        //开始体验按钮点击
        btnStart.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                //在sp中记录访问过引导页的状态
                PrefUtils.putBoolean(getApplicationContext(), "is_guide_show",true);

                //跳到主页面
                startActivity(new Intent(getApplicationContext(),MainActivity.class));
                finish();
            }
        });
    }

    @Override
    protected void onStart() {
        super.onStart();
    }

    @Override
    protected void onResume() {
        super.onResume();
    }

    class GuideAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return mImageIds.length;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        //初始化布局
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            //ImageView view = new ImageView(getApplicationContext());
            ImageView view = mImageViews.get(position);

            container.addView(view);

            return view;
        }

        //销毁布局
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }

    }


}

他的布局中的XML文件

<android.support.v4.view.ViewPager
    android:id="@+id/vp_guide"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true" >
</android.support.v4.view.ViewPager>

<Button
    android:id="@+id/btn_start"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="60dp"
    android:background="@drawable/btn_guide_selector"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:text="开始体验"
    android:textColor="@color/txt_guide_selector"
    android:visibility="gone" />

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="30dp" >


    <LinearLayout
        android:orientation="horizontal"
        android:id="@+id/ll_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

    </LinearLayout>

    <ImageView
        android:id="@+id/iv_red_point"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/shape_point_selected" />

</RelativeLayout>

其中的color文件夹下的txt_guide_selector文件

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    
    <item android:color="#000" android:state_pressed="true"/>
    <item android:color="#fff"/>

</selector>

其中drawble下的btn_guide_selector文件(开始点击的按下换图)

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    
    <item android:drawable="@drawable/button_red_pressed" android:state_pressed="true"/>
    <item android:drawable="@drawable/button_red_normal"/>

</selector>

其中drawble下的shape_point_normal文件

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <solid android:color="#cccccc" />

    <size
        android:height="10dp"
        android:width="10dp" />

</shape>

其中drawble下的shape_point_selector文件

<shape xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="oval" >

    <solid android:color="#f00" />

    <size
        android:height="10dp"
        android:width="10dp" />

</shape>

这样就好了