引导页[文字动态出来]

来源：互联网发布：java面向对象编程思想编辑：程序博客网时间：2024/04/27 19:43

示例工程[附工程代码]

一:效果及介绍

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

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

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

二：实现思路

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

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

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

三：关键代码分析

a) 主界面布局 guider_main.xml

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

<android.support.v4.view.ViewPager
android:id="@+id/view_guide"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none"
/>

<com.lyg.guide.view.GuidePointLayout
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"
/>

</RelativeLayout

b)item的配置文件 guider_item.xml

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 ; i<getChildCount() ; i++){
if (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及适配器的实现就不贴代码了，网上示例很多。

0 0