仿微信首次安装界面设计(多张图片滑动)

现在的位置: 首页 > 综合 > 正文

仿微信首次安装界面设计(多张图片滑动)

2018年02月16日 ⁄ 综合 ⁄ 共 7838字 ⁄ 字号小中大 ⁄ 评论关闭

界面效果：

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

【上篇】android多张图片翻转和倒影效果
【下篇】android好看表单界面设计（TableLayout）及查询数据列表显示2

作者: moco

该日志由 moco 于6年前发表在综合分类下，最后更新于 2018年02月16日.
转载请注明: 仿微信首次安装界面设计(多张图片滑动) | 学步园 +复制链接

抱歉!评论已关闭.

学步园

仿微信首次安装界面设计(多张图片滑动)

作者: moco

书签

最新文章New

本站推荐

返回首页