您的位置:首页 > 其它

1.viewpager

2015-10-27 19:45 295 查看
ViewPager是android扩展包v4包中的类,这个类可以让用户左右切换当前的view。
ViewPager类直接继承了ViewGroup类,所以它是一个容器类,可以在其中添加其他的view类。
ViewPager类需要一个PagerAdapter适配器类给它提供数据。
ViewPager经常和Fragment一起使用,并且提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter类供Fragment中的ViewPager使用。


实现这种效果:有好几个页面,上面是viewpager可以左右滑,中间是按钮,只在最后一页显示出来,点击跳转到主页面。下面的几个点的实现可以是几张图片,也可以动态的添加几个点,小红点跟随页面动。1.布局
<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"

    android:layout_width="match_parent"

android:layout_height="match_parent" />


<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:padding="5dp"//padding是从内往外撑

android:text="开始体验"

android:visibility="invisible"

android:textColor="@drawable/btn_guide_text_selector" />


<RelativeLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:layout_marginBottom="20dp" >


<LinearLayout

android:id="@+id/ll_point_group"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

android:orientation="horizontal" >

</LinearLayout>


<View

android:id="@+id/view_red_point"

android:layout_width="10dp"

android:layout_height="10dp"

android:background="@drawable/shape_point_red" />

</RelativeLayout>


</RelativeLayout>

[/code]按钮的选择器
//新建drawable目录,背景状态选择器

<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>

[/code]
//文字颜色选择器

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


<item android:state_pressed="true" android:color="@android:color/black"/>

<item android:color="@android:color/white"/>


</selector>

[/code]小点:
//
drawable目录下,形状选择器
<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="oval" >


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


</shape>

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

[/code]2.主页面LayoutParams相当于一个Layout的信息包,它封装了Layout的位置、高、宽等信息。其实这个LayoutParams类是用于child view(子视图) 向 parent view(父视图)传达自己的意愿的一个东西(孩子想变成什么样向其父亲说明)其实子视图父视图可以简单理解成
一个LinearLayout 和 这个LinearLayout里边一个 TextView 的关系 TextView 就算LinearLayout的子视图 child view 。需要注意的是LayoutParams只是ViewGroup的一个内部类这里边这个也就是ViewGroup里边这个LayoutParams类是 base class 基类实际上每个不同的ViewGroup都有自己的LayoutParams子类
//第一个参数为宽的设置,第二个参数为高的设置。

LinearLayout.LayoutParams p = new LinearLayout.LayoutParams(

LinearLayout.LayoutParams.FILL_PARENT,

LinearLayout.LayoutParams.WRAP_CONTENT

);

//调用addView()方法增加一个TextView到线性布局中

mLayout.addView(textView, p);

//比较简单的一个例子

/**<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Text View"/>*/ 效果一样

[/code]
/**

* 新手引导

*

*@author Kevin

*

*/

public class GuideActivity extends Activity {


private static final int[] mImageIds = new int[] { R.drawable.guide_1,

R.drawable.guide_2, R.drawable.guide_3 };


private ViewPager vpGuide;

private ArrayList<ImageView> mImageViewList;


private LinearLayout llPointGroup;// 引导圆点的父控件


private int mPointWidth;// 圆点间的距离


private View viewRedPoint;// 小红点


private Button btnStart;// 开始体验


@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);


requestWindowFeature(Window.FEATURE_NO_TITLE);// 去掉标题

setContentView(R.layout.activity_guide);

vpGuide = (ViewPager) findViewById(R.id.vp_guide);

llPointGroup = (LinearLayout) findViewById(R.id.ll_point_group);

viewRedPoint = findViewById(R.id.view_red_point);

btnStart = (Button) findViewById(R.id.btn_start);


btnStart.setOnClickListener(new OnClickListener() {


@Override

public void onClick(View v) {

// 更新sp, 表示已经展示了新手引导

PrefUtils.setBoolean(GuideActivity.this,

"is_user_guide_showed", true);


// 跳转主页面

startActivity(new Intent(GuideActivity.this, MainActivity.class));

finish();

}

});


initViews();

vpGuide.setAdapter(new GuideAdapter());


vpGuide.setOnPageChangeListener(new GuidePageListener());

}


/**

	*初始化界面

	*/

private void initViews() {

mImageViewList = new ArrayList<ImageView>();


// 初始化引导页的3个页面

for (int i = 0; i < mImageIds.length; i++) {

ImageView image = new ImageView(this);

image.setBackgroundResource(mImageIds[i]);// 设置引导页背景,注意是
Resource
mImageViewList.add(image);

}


// 初始化引导页的小圆点

for (int i = 0; i < mImageIds.length; i++) {

View point = new View(this);

point.setBackgroundResource(R.drawable.shape_point_gray);// 设置引导页默认圆点


LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
10, 10);//通过params设置布局的参数,括号里是宽高
if (i > 0) {

params.leftMargin = 10;// 设置圆点间隔

}


point.setLayoutParams(params);// 设置圆点的大小


llPointGroup.addView(point);// 将圆点添加给线性布局

}


// 获取视图树, 对layout结束事件进行监听,获取小灰点的距离

llPointGroup.getViewTreeObserver().addOnGlobalLayoutListener(

new OnGlobalLayoutListener() {


// 当layout执行结束后回调此方法

@Override

public void onGlobalLayout() {

System.out.println("layout 结束");

llPointGroup.getViewTreeObserver()

.removeGlobalOnLayoutListener(this);

mPointWidth = llPointGroup.getChildAt(1).getLeft()

- llPointGroup.getChildAt(0).getLeft();

System.out.println("圆点距离:" + mPointWidth);

}

});

}


/**

	*ViewPager数据适配器

	*

	*@author Kevin

	*

	*/

class GuideAdapter extends PagerAdapter {


@Override

public int getCount() {

return mImageIds.length;

}


@Override

public boolean isViewFromObject(View arg0, Object arg1) {

return arg0 == arg1;

}


@Override

public Object instantiateItem(ViewGroup container, int position) {

container.addView(mImageViewList.get(position));

return mImageViewList.get(position);

}


@Override

public void destroyItem(ViewGroup container, int position, Object object) {

container.removeView((View) object);

}

}


/**

	*viewpager的滑动监听

	*

	*@author Kevin

	*

	*/

class GuidePageListener implements OnPageChangeListener {


// 滑动事件

@Override

public void onPageScrolled(int position, float positionOffset,

int positionOffsetPixels) {

// System.out.println("当前位置:" + position + ";百分比:" + positionOffset

// + ";移动距离:" + positionOffsetPixels);

			int len = (int) (mPointWidth*positionOffset) + position

* mPointWidth;

RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) viewRedPoint

.getLayoutParams();// 获取当前红点的布局参数

params.leftMargin = len;// 设置左边距


viewRedPoint.setLayoutParams(params);// 重新给小红点设置布局参数

}


// 某个页面被选中

@Override

public void onPageSelected(int position) {

if (position == mImageIds.length - 1) {// 最后一个页面

btnStart.setVisibility(View.VISIBLE);// 显示开始体验的按钮

} else {

btnStart.setVisibility(View.INVISIBLE);

}

}


// 滑动状态发生变化

@Override

public void onPageScrollStateChanged(int state) {


}


}


}

[/code]3.SharePreference封装类

public class PrefUtils {


public static final String PREF_NAME = "config";


public static boolean getBoolean(Context ctx, String key,

boolean defaultValue) {

SharedPreferences sp = ctx.getSharedPreferences(PREF_NAME,

Context.MODE_PRIVATE);

return sp.getBoolean(key, defaultValue);

}


public static void setBoolean(Context ctx, String key, boolean value) {

SharedPreferences sp = ctx.getSharedPreferences(PREF_NAME,

Context.MODE_PRIVATE);

sp.edit().putBoolean(key, value).commit();

}

}

[/code]2.闪屏页
只有一个imageview,主要是对动画的操作
/**

*闪屏页

*/

public class SplashActivity extends Activity {


RelativeLayout rlRoot;


@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_splash);


rlRoot = (RelativeLayout) findViewById(R.id.rl_root);


startAnim();


//LibUtils.doSomething();

//rlRoot.setBackgroundResource(R.drawable.newscenter_press);

}


/**

	*开启动画

	*/

private void startAnim() {


// 动画集合

AnimationSet set = new AnimationSet(false);


// 旋转动画

RotateAnimation rotate = new RotateAnimation(0, 360,

Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,

0.5f);

rotate.setDuration(1000);// 动画时间

rotate.setFillAfter(true);// 保持动画状态


// 缩放动画

ScaleAnimation scale = new ScaleAnimation(0, 1, 0, 1,

Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,

0.5f);

scale.setDuration(1000);// 动画时间

scale.setFillAfter(true);// 保持动画状态


// 渐变动画

AlphaAnimation alpha = new AlphaAnimation(0, 1);

alpha.setDuration(2000);// 动画时间

alpha.setFillAfter(true);// 保持动画状态


set.addAnimation(rotate);

set.addAnimation(scale);

set.addAnimation(alpha);


// 设置动画监听

set.setAnimationListener(new AnimationListener() {


@Override

public void onAnimationStart(Animation animation) {


}


@Override

public void onAnimationRepeat(Animation animation) {


}


// 动画执行结束

@Override

public void onAnimationEnd(Animation animation) {

jumpNextPage();

}

});


rlRoot.startAnimation(set);

}


/**

	*跳转下一个页面

	*/

private void jumpNextPage() {

// 判断之前有没有显示过新手引导

boolean userGuide = PrefUtils.getBoolean(this, "is_user_guide_showed",

false);


if (!userGuide) {

// 跳转到新手引导页

startActivity(new Intent(SplashActivity.this, GuideActivity.class));

} else {

startActivity(new Intent(SplashActivity.this, MainActivity.class));

}


finish();

}


}

[/code]

来自为知笔记(Wiz)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: