引导页[文字动态出来]

                  示例工程[附工程代码]

    一:效果及介绍

                              

          1.每个引导页里有一张背景图片,有个文字序列，并且文字是逐行显示出来的.

  2. 底部的指示器是可以动态变化的,根据图片的多少决定总数,选中那个就会变亮。

          3.适配器可以自动滑动。

     二：实现思路

   a)实现引导页,肯定要使用v4包里的ViewPager组件。根据现在的效果，item子组件由一个ImageView[图片]和四个TextView组成,四个TextView要相互错开，且每个TextView一行只能显示一个字。

          b)实现指示器,就是那一堆小点。实现原理就是继承LinearLayout,根据用户设置的总数，决定创建几个子ImageView出来,设置了选中点后，把对应子view的背景图片置为选中，其它子view置成正常背景。只需要自定义个组件即可。

         c)文字动态飞出来的效果，到对应页面后，发延迟消息，收到消息在发消息，逐步把四个TextView里的文本展示出来。

     三：关键代码分析

           a) 主界面布局 guider_main.xml

        xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".GuideMainActivity" >


   
              android:id="@+id/view_guide"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"
        />
    
               android:id="@+id/guider_point"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:orientation="horizontal"
         android:layout_alignParentBottom="true"
         android:layout_alignParentRight="true"
         android:layout_marginBottom="10dp"
         />
     

     b)item的配置文件 guider_item.xml 

         xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    >
    
             android:id="@+id/iv_guide"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:layout_centerInParent="true"
         />


            android:id="@+id/tv_info1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="1"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="20dp"
        android:textSize="16sp"
        />
    
    
            android:id="@+id/tv_info2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/tv_info1"
        android:ems="1"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="40dp"
        android:textSize="16sp"
        />
    
            android:id="@+id/tv_info3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/tv_info2"
        android:ems="1"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="60dp"
        android:textSize="16sp"
        />
    
    
            android:id="@+id/tv_info4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/tv_info3"
        android:ems="1"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="70dp"
        android:textSize="20sp"
        />

 c)自定义的指示器实现

    /**
 * @author luyg
 * @function: 指示小圆点，可动态添加
 */
public class GuidePointLayout extends LinearLayout {

private int count ;
private int marginRight = 0;
private int normalId = R.drawable.launcher_point_n;
private int selectId = R.drawable.launcher_point_s;
private int selectIndex =0 ;


public GuidePointLayout(Context context) {
super(context);
}


public GuidePointLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}


public GuidePointLayout(Context context, AttributeSet attrs, int defStyleAttr,
int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}


/**
* @param count : 指示点的总数
* @param marginRight : 指示点的右间距
*/
public void init(int count , int marginRight ){
this.count =count;
this.marginRight = marginRight ;
initViews();
selectPoint(0);
}



private void initViews(){
for (int i = 0; i < count; i++) {
ImageView imageView = new ImageView(getContext());
imageView.setImageResource(normalId);
ViewGroup.LayoutParams layoutParams =new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT ,
ViewGroup.LayoutParams.WRAP_CONTENT);
imageView.setLayoutParams(layoutParams);
imageView.setPadding(0, 0, marginRight, 0);
this.addView(imageView);
}
}

public void selectPoint(int index){
if (index<=0 || index>=getChildCount()) {
//correnct error index
selectIndex = 0;
}else {
selectIndex = index ;
}

for(int i = 0 ; iif (i==selectIndex) {
((ImageView)getChildAt(i)).setImageResource(selectId);
}else {
((ImageView)getChildAt(i)).setImageResource(normalId);
}
}
}

/**
* @function: 指示点右移动
*/
public void increase(){
((ImageView)getChildAt(selectIndex)).setImageResource(normalId);
selectIndex++;
if (selectIndex>=getChildCount()) {
selectIndex=getChildCount()-1;
}
((ImageView)getChildAt(selectIndex)).setImageResource(selectId);
}

/**
* @function: 指示点左移动
*/
public void decrease(){
((ImageView)getChildAt(selectIndex)).setImageResource(normalId);
selectIndex--;
if (selectIndex<0) {
selectIndex=0;
}
((ImageView)getChildAt(selectIndex)).setImageResource(selectId);
}

}

 d) ViewPager及适配器的实现就不贴代码了，网上示例很多。