界面效果:
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类的使用。 图片按钮是在网上找的,并用图片处理程序稍微涂改了一下,以便区别用户当前选择的页,并实时更新图片。修改不仔细只是学会如何显示该功能,以后开发项目时应用到可以借鉴并美化好各个界面,达到给人一种美观效果,自己美化比较缺少,希望自己在网页设计上也有一定提高,继续学习!