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

来源：互联网发布：互联网运营书籍知乎编辑：程序博客网时间：2024/06/06 01:08

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>

这样就好了

阅读全文

2 0