界面效果:
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; @Override protected 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.s main.setOnClickListener(new Button.OnClickListener() { @Override public 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() { @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } @Override public int getCount() { return views.size(); } @Override public void destroyItem(View container, int position, Object object) { ((ViewPager) container).removeView(views.get(position));//移除视图 } @Override public CharSequence getPageTitle(int position) { return titles.get(position);//设置页标题,本项目位于屏幕底部 } @Override public 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为选中的View Animation animation = null;// 声明动画对象 switch (arg0) { case 0: p1.setImageDrawable(getResources().getDrawable(R.drawable.nn));// 当前View p2.setImageDrawable(getResources().getDrawable(R.drawable.page));// 下一个View if (currIndex == arg0 - 1) {// 如果滑动到上一个View animation = 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;// 设置当前View animation.setFillAfter(true);// True:设置图片停在动画结束位置 animation.setDuration(500);// 设置动画持续时间 } @Override public void onPageScrollStateChanged(int arg0) { } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } } }
使用的图片nn.gif(被选择时 page.gif(初始状态)
微信上的是一个小点,效果是有很大区别,自己设计的没有那么美观,但是大体功能基本实现,自己学到了关于ViewPager类的使用。 图片按钮是在网上找的,并用图片处理程序稍微涂改了一下,以便区别用户当前选择的页,并实时更新图片。修改不仔细只是学会如何显示该功能,以后开发项目时应用到可以借鉴并美化好各个界面,达到给人一种美观效果,自己美化比较缺少,希望自己在网页设计上也有一定提高,继续学习!