仿微信首次安装界面设计(多张图片滑动)
界面效果：
2.主布局文件
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:orientation="vertical" tools:context=".PagerActivity" > <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" > <android.support.v4.view.PagerTitleStrip android:id="@+id/pagertitle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom" android:background="#896443" android:textColor="#164263" /> </android.support.v4.view.ViewPager> <LinearLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:orientation="horizontal" > <Button android:id="@+id/start" android:layout_width="wrap_content" android:layout_height="50dp" android:layout_gravity="start" android:text="直接开始我的微信生活" android:textSize="18sp" android:textColor="#489466" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:paddingLeft="30dp" android:gravity="center_vertical" > <ImageView android:id="@+id/page1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:alpha="60" android:layout_gravity="bottom" android:layout_marginBottom="30dp" android:layout_marginLeft="10dp" android:scaleType="matrix" android:src="@drawable/nn" /> <ImageView android:id="@+id/page2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom" android:layout_marginBottom="30dp" android:layout_marginLeft="10dp" android:scaleType="matrix" android:alpha="60" android:src="@drawable/page" /> <ImageView android:id="@+id/page3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom" android:layout_marginBottom="30dp" android:layout_marginLeft="10dp" android:alpha="60" android:scaleType="matrix" android:src="@drawable/page" /> <ImageView android:id="@+id/page4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom" android:layout_marginBottom="30dp" android:layout_marginLeft="10dp" android:alpha="60" android:scaleType="matrix" android:src="@drawable/page" /> </LinearLayout> </FrameLayout>
3.每个图片需要定义的布局文件 为View1.xml View2.xml View3.xml View4.xml
每一页只是设置背景和一个textview文本控件，代码都是很相似的，只列举其中一个。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:background="@drawable/aa" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="77dp" android:textSize="28sp" android:textColor="#d54661" android:text="微信不只是个聊天工具*****可以设置自己想显示的文字" /> </RelativeLayout>
4.微信启动界面完成后返回到程序操作入口 .即类似我们所见的微信登录界面。
界面布局可以是登录或者微信首页，根据自己的需要设置，这里我只是一个文本提示。
<RelativeLayout android:background="@drawable/wx"> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:textColor="#89494a" android:textSize="20sp" android:layout_marginTop="151dp" android:text="欢迎来到微信首页，您的支持是我们最大的勇气！" /></RelativeLayout>
5.关键的activity代码。实现多张图片滑动效果。
学习使用android提供的support.v4.view.ViewPager类，重写该类填充内容代码，更改适配器显示自定义的内容，并重写页面改变监听事件（OnPageChangeListener），处理图片动画效果。
public class PagerActivity extends Activity {private ViewPager mViewPager;// 声明ViewPager对象private PagerTitleStrip strip;// 声明动画标题，此处用不到，直接可以在getPageTitle（）设置private int currIndex = 0;// 当前页面private ImageView p1, p2, p3, p4;private Button main;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_pager);mViewPager = (ViewPager) this.findViewById(R.id.viewpager);mViewPager.setOnPageChangeListener(new MyOnPageChangeListener());strip = (PagerTitleStrip) this.findViewById(R.id.pagertitle);main=(Button) this.findViewById(R.id.start);p1 = (ImageView) this.findViewById(R.id.page1);p2 = (ImageView) this.findViewById(R.id.page2);p3 = (ImageView) this.findViewById(R.id.page3);p4 = (ImageView) this.findViewById(R.id.page4);//strip.smain.setOnClickListener(new Button.OnClickListener() {@Overridepublic void onClick(View v) {Intent i=new Intent(PagerActivity.this,HelloActivity.class);startActivity(i);PagerActivity.this.finish();}});// 将要分页显示的View装入数组中LayoutInflater inflaters = LayoutInflater.from(this);View view1 = inflaters.inflate(R.layout.view1, null);View view2 = inflaters.inflate(R.layout.view2, null);View view3 = inflaters.inflate(R.layout.view3, null);View view4 = inflaters.inflate(R.layout.view4, null);// 每个页面的view数据final ArrayList<View> views = new ArrayList<View>();views.add(view1);views.add(view2);views.add(view3);views.add(view4);// 每一个也没标题final List<String> titles = new ArrayList<String>();titles.add("第一页");titles.add("第二页");titles.add("第三页");titles.add("第四页");// 填充ViewPager的数据适配器，我们重写即可PagerAdapter mPagerAdapter = new PagerAdapter() {@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic int getCount() {return views.size();}@Overridepublic void destroyItem(View container, int position, Object object) {((ViewPager) container).removeView(views.get(position));//移除视图}@Overridepublic CharSequence getPageTitle(int position) {return titles.get(position);//设置页标题，本项目位于屏幕底部}@Overridepublic Object instantiateItem(View container, int position) {((ViewPager) container).addView(views.get(position));//获得当前视图return views.get(position);}};mViewPager.setAdapter(mPagerAdapter);// 设置重写的Adapter。这样就实现了ViewPager的滑动效果。}public class MyOnPageChangeListener implements OnPageChangeListener {public void onPageSelected(int arg0) {// 参数arg0为选中的ViewAnimation animation = null;// 声明动画对象switch (arg0) {case 0:p1.setImageDrawable(getResources().getDrawable(R.drawable.nn));// 当前Viewp2.setImageDrawable(getResources().getDrawable(R.drawable.page));// 下一个Viewif (currIndex == arg0 - 1) {// 如果滑动到上一个Viewanimation = new TranslateAnimation(arg0 - 1, arg0, 0, 0); // 圆点移动效果动画，从当前View移动到下一个View} else if (currIndex == arg0 + 1) {// 圆点移动效果动画，从当前View移动到下一个View，下同。animation = new TranslateAnimation(arg0 + 1, arg0, 0, 0);}break;case 1: p2.setImageDrawable(getResources().getDrawable(R.drawable.nn));p1.setImageDrawable(getResources().getDrawable(R.drawable.page));p3.setImageDrawable(getResources().getDrawable(R.drawable.page));if (currIndex == arg0 - 1) {animation = new TranslateAnimation(arg0 - 1, arg0, 0, 0);} else if (currIndex == arg0 + 1) {animation = new TranslateAnimation(arg0 + 1, arg0, 0, 0);}break;case 2:p3.setImageDrawable(getResources().getDrawable(R.drawable.nn));p4.setImageDrawable(getResources().getDrawable(R.drawable.page));p2.setImageDrawable(getResources().getDrawable(R.drawable.page));if (currIndex == arg0 - 1) {animation = new TranslateAnimation(arg0 - 1, arg0, 0, 0);} else if (currIndex == arg0 + 1) {animation = new TranslateAnimation(arg0 + 1, arg0, 0, 0);}break;case 3:p4.setImageDrawable(getResources().getDrawable(R.drawable.nn));p3.setImageDrawable(getResources().getDrawable(R.drawable.page));if (currIndex == arg0 - 1) {animation = new TranslateAnimation(arg0 - 1, arg0, 0, 0);} else if (currIndex == arg0 + 1) {animation = new TranslateAnimation(arg0 + 1, arg0, 0, 0);}break;}currIndex = arg0;// 设置当前Viewanimation.setFillAfter(true);// True:设置图片停在动画结束位置animation.setDuration(500);// 设置动画持续时间}@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}}}
使用的图片nn.gif（被选择时 page.gif（初始状态）
微信上的是一个小点，效果是有很大区别，自己设计的没有那么美观，但是大体功能基本实现，自己学到了关于ViewPager类的使用。 图片按钮是在网上找的，并用图片处理程序稍微涂改了一下，以便区别用户当前选择的页，并实时更新图片。修改不仔细只是学会如何显示该功能，以后开发项目时应用到可以借鉴并美化好各个界面，达到给人一种美观效果，自己美化比较缺少，希望自己在网页设计上也有一定提高，继续学习！