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]);// 设置引导页背景,注意是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) {		}	}}

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();	}}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android干货

安卓开发_浅谈自定义组件

2948
来自专栏Android开发指南

7.侧滑、ViewDragHelper、属性动画

3245
来自专栏Sorrower的专栏

一起来做个拜年App吧!

972
来自专栏Jack的Android之旅

模仿企鹅FM播放主页面滑动动态改变各视图的大小

国庆的一个任务就是把自己之前写的代码搬到博客。这次给各位带来的是通过滑动来动态改变各个View的大小进而达到企鹅FM播放页面的滑动效果(仅仅是滑动效果),老规矩...

1012
来自专栏Android干货园

Android自定义View之TitleBar,通用标题栏

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/49...

2222
来自专栏向治洪

android 自定义gallerey并实现预览功能

自从Gallery被谷歌废弃以后,Google推荐使用ViewPager和HorizontalScrollView来实现Gallery的效果。的确Horizon...

2795
来自专栏Android小菜鸡

巧妙运用补间动画,自定义广告轮播CarouselView 2.0

  这是前一篇文章绘制的CarouselView的升级版,有兴趣的同学,可以去关注一下笔者前一篇文章。自定义广告图片轮播View——CarouselView

1182
来自专栏向治洪

android galley实现画廊效果

今天在做一个软件界面时用到了ImageSwitcher和Gallery控件,在看API时,感觉上面的例子讲的不是很具体,效率并不高。在这里我就以一个图片浏览功能...

2019
来自专栏Android学习之路

ViewDragHelper使用笔记及侧滑菜单实践

3406
来自专栏青蛙要fly的专栏

项目需求讨论-仿ios底部弹框实现及分析

hi,在项目开发中,有时候需要仿照ios的底部弹框做效果,比如我们在iPhone上面关闭定位的时候,就会弹出ios特有的底部弹框:

1243

扫码关注云+社区

领取腾讯云代金券