APP引导页的实现

来源：互联网发布：php pdo bindvalue 编辑：程序博客网时间：2024/04/30 05:13

画了好久布局，终于让我写一个引导页的功能。难度不大，同样是记录下来，方便复习。

首先是布局文件，用viewpager实现的页面滑动。

<?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_pages"        android:layout_width="match_parent"        android:layout_height="match_parent" >    </android.support.v4.view.ViewPager>    <RelativeLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:layout_marginBottom="30dip" >        <LinearLayout            android:id="@+id/ll_guide_points"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:orientation="horizontal" >        </LinearLayout>        <View            android:id="@+id/v_guide_redpoint"            android:layout_width="10dip"            android:layout_height="10dip"            android:background="@drawable/red_point" />    </RelativeLayout>    <Button        android:id="@+id/bt_guide_startexp"        android:background="#ff0000"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:layout_marginBottom="45dip"        android:paddingTop="5dip"        android:paddingBottom="5dip"        android:paddingLeft="10dip"        android:paddingRight="10dip"        android:textColor="@drawable/btn_colors"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="开始体验"        android:visibility="gone"        android:textSize="18sp" /></RelativeLayout>

代码实现

package com.sy.gudiedemo;import android.app.Activity;import android.content.Context;import android.os.Bundle;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.View;import android.view.ViewTreeObserver;import android.view.Window;import android.widget.Button;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.RelativeLayout;import java.util.ArrayList;public class MainActivity extends Activity {    private ViewPager vp_guids;    private LinearLayout ll_points;    private View v_redpoint;    private Button bt_startExp;    private ArrayList<ImageView> guids;    private MyAdapter adapter;    private int disPoints;//点与点之间的距离    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);// 去掉标题        setContentView(R.layout.activity_main);        initView();// 初始化界面        initData();// 初始化数据        initEvent();// 初始化组件事件    }    private void initEvent() {        //监听布局完成 ，触发的结果        v_redpoint.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {            @Override            public void onGlobalLayout() {                //取消注册 界面变化而发生的回调结果                v_redpoint.getViewTreeObserver().removeGlobalOnLayoutListener(this);                //计算点与点之间的距离                disPoints = (ll_points.getChildAt(1).getLeft() - ll_points.getChildAt(0)                        .getLeft());            }        });        //给按钮添加点击事件        bt_startExp.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                //保存设置的状态                //进入主界面                //关闭自己            }        });        //给ViewPage添加页码改变的事件        vp_guids.setOnPageChangeListener(new OnPageChangeListener() {            @Override            public void onPageSelected(int position) {                //当前ViewPager显示的页码                //如果ViewPager滑动到第三个页码(最后一页)，显示button                if (position == guids.size() - 1) {                    bt_startExp.setVisibility(View.VISIBLE);//设置设置按钮的显示                } else {                    //不是最后一页，隐藏该button按钮                    bt_startExp.setVisibility(View.GONE);                }            }            /* (non-Javadoc)             * @see android.support.v4.view.ViewPager.OnPageChangeListener#onPageScrolled(int, float, int)             * 在页面滑动过程触发的事件             * @param position 当前ViewPage停留的位置             * @param positionOffset 偏移的比例值             * @param positionOffsetPixels 偏移的像素             */            @Override            public void onPageScrolled(int position, float positionOffset,                                       int positionOffsetPixels) {                //positionOffset 移动的比例值                //计算红点的左边距                float leftMargin = disPoints * (position + positionOffset);                //设置红点的左边距                RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) v_redpoint.getLayoutParams();                layoutParams.leftMargin = Math.round(leftMargin);//对float类型四舍五入                //重新设置布局                v_redpoint.setLayoutParams(layoutParams);            }            @Override            public void onPageScrollStateChanged(int state) {            }        });    }    private void initData() {        // viewpaper adapter list        // 图片的数据        int[] pics = new int[]{R.mipmap.gudie_1, R.mipmap.gudie_2,                R.mipmap.gudie_3};        // 定义Viewpager使用的容器        guids = new ArrayList<ImageView>();        // 初始化容器中的数据        for (int i = 0; i < pics.length; i++) {            ImageView iv_temp = new ImageView(getApplicationContext());            iv_temp.setBackgroundResource(pics[i]);            // 添加界面的数据            guids.add(iv_temp);            // 给点的容器Linearlayout初始化添加灰色点            View v_point = new View(getApplicationContext());            v_point.setBackgroundResource(R.drawable.gray_point);            int dip = 10;            // 设置灰色点的大小            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(dip2px(getApplicationContext(), dip),

<span style="white-space:pre"></span>             dip2px(getApplicationContext(), dip));            // 设置点与点直接的空隙            // 第一个点不需要指定            if (i != 0)// 过滤第一个点                params.leftMargin = 10;// px            v_point.setLayoutParams(params);// 无缝隙的挨一起            // 添加灰色的点到线性布局中            ll_points.addView(v_point);        }        // 界面没有布局前，点的位置是确定不了的，布局完成，再求出点直接的距离        // 创建ViewPager的适配器        adapter = new MyAdapter(guids);        // 设置适配器        vp_guids.setAdapter(adapter);    }    private void initView() {        // ViewPage组件        vp_guids = (ViewPager) findViewById(R.id.vp_guide_pages);        // 动态加点容器        ll_points = (LinearLayout) findViewById(R.id.ll_guide_points);        // 红点        v_redpoint = findViewById(R.id.v_guide_redpoint);        // 开始体验的按钮        bt_startExp = (Button) findViewById(R.id.bt_guide_startexp);    }    /**     * 根据手机的分辨率从 dip 的单位 转成为 px(像素)     */    public static int dip2px(Context context, float dpValue) {        final float scale = context.getResources().getDisplayMetrics().density;        return (int) (dpValue * scale + 0.5f);    }}

viewpager的适配器

package com.sy.gudiedemo;import android.support.v4.view.PagerAdapter;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import java.util.ArrayList;import java.util.List;/** * Created by SY on 2016/3/26. */public class MyAdapter extends PagerAdapter{    private List<ImageView> guids;    MyAdapter(ArrayList<ImageView> list){        this.guids = list;    }    @Override    public int getCount() {        return guids.size();// 返回数据的个数    }    @Override    public boolean isViewFromObject(View arg0, Object arg1) {        return arg0 == arg1;// 过滤和缓存的作用    }    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        container.removeView((View) object);// 从Viewpager中移除    }    @Override    public Object instantiateItem(ViewGroup container, int position) {        // container viewpaper        // 获取View        View child = guids.get(position);        // 添加View        container.addView(child);        return child;    }}

最后是画的小圆点红色和灰色都是一样的

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="oval">    <corners android:radius="5dip"></corners>        <solid android:color="#ff0000"></solid></shape>

代码不难，主要方法都有注释，就这样了。

0 0