1.viewpager
- 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>
按钮的选择器
//新建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>
//文字颜色选择器
<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>
小点:
//
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>
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"/>*/ 效果一样
/**
* 新手引导
*
* @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]);// 设置引导页背景,注意是
ResourcemImageViewList.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) {
}
}
}
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();
}
}
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();
}
}