android欢迎界面是所有程序开始的一个简短的自我介绍,让用户能够通过简单的描述和图片信息更好的了解软件,对用户体验效果非常的重要。这里我会使用VIewPager做一个欢迎界面。
1设计背景图片
根据4.0手机的宽高480:800 = 3:5的一个比例,所以自己图片宽要大于480,同时比例要和3:5差距不大。这里使用640:960这样常见的宽高,保证图片的完整比例,既不会被拉伸的明显,也不会被缩放的变形。
设计各个页面的显示情况,最好是简单明晰,吸引人。
2设计页面
这里总共设计了四个界面,背景依次为:
接下来就是在界面上加上一些效果。
2.1统一的字体样式
在每个页面的字体我都是用了统一的格式,代码如下:
<?xml version="1.0" encoding="utf-8"?><resources> <style name="whats_new_title"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:layout_marginTop">20dp</item> <item name="android:textAppearance">?android:attr/textAppearanceLarge</item> <item name="android:textColor">@color/yellow</item> <item name="android:textSize">20sp</item> <item name="android:textStyle">bold|italic</item> </style></resources>
2.2进入最后一个页面的一个按键格式
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:drawable="@drawable/whats_new_start_btn_pressed" /> <item android:drawable="@drawable/whats_new_start_btn_normal" /></selector>
3 程序实现页面的切换功能
public class mainWelcom extends Activity { //翻页控件 private ViewPager mViewPager; private ImageView mPage0; private ImageView mPage1; private ImageView mPage2; private ImageView mPage3; @Override public void onCreate(Bundle savedInstanceState) { //去掉标题栏全屏显示 requestWindowFeature(Window.FEATURE_NO_TITLE); super.onCreate(savedInstanceState); setContentView(R.layout.main); mViewPager = (ViewPager)findViewById(R.id.whatsnew_viewpager); mViewPager.setOnPageChangeListener(new MyOnPageChangeListener()); mPage0 = (ImageView)findViewById(R.id.page0); mPage1 = (ImageView)findViewById(R.id.page1); mPage2 = (ImageView)findViewById(R.id.page2); mPage3 = (ImageView)findViewById(R.id.page3); /* * 这里是每一页要显示的布局,根据应用需要和特点自由设计显示的内容 * 以及需要显示多少页等 */ LayoutInflater mLi = LayoutInflater.from(this); View view1 = mLi.inflate(R.layout.whats_news_gallery1, null); View view2 = mLi.inflate(R.layout.whats_news_gallery2, null); View view3 = mLi.inflate(R.layout.whats_news_gallery3, null); View view4 = mLi.inflate(R.layout.whats_news_gallery4, null); /* * 这里将每一页显示的view存放到ArrayList集合中 * 可以在ViewPager适配器中顺序调用展示 */ final ArrayList<View> views = new ArrayList<View>(); views.add(view1); views.add(view2); views.add(view3); views.add(view4); //填充ViewPager的数据适配器 pagerAdapter mPagerAdapter = new pagerAdapter(views); mViewPager.setAdapter(mPagerAdapter); } public class MyOnPageChangeListener implements OnPageChangeListener { public void onPageSelected(int page) { //翻页时当前page,改变当前状态园点图片 switch (page) { case 0: mPage0.setImageDrawable(getResources().getDrawable(R.drawable.page_now)); mPage1.setImageDrawable(getResources().getDrawable(R.drawable.page)); break; case 1: mPage1.setImageDrawable(getResources().getDrawable(R.drawable.page_now)); mPage0.setImageDrawable(getResources().getDrawable(R.drawable.page)); mPage2.setImageDrawable(getResources().getDrawable(R.drawable.page)); break; case 2: mPage2.setImageDrawable(getResources().getDrawable(R.drawable.page_now)); mPage1.setImageDrawable(getResources().getDrawable(R.drawable.page)); mPage3.setImageDrawable(getResources().getDrawable(R.drawable.page)); break; case 3: mPage3.setImageDrawable(getResources().getDrawable(R.drawable.page_now)); mPage2.setImageDrawable(getResources().getDrawable(R.drawable.page)); break; } } public void onPageScrolled(int arg0, float arg1, int arg2) { } public void onPageScrollStateChanged(int arg0) { } }}
这里的ViewPager相当于一个双向队列,实现界面的左右切换。设置一pagerAdapter
package com.news.welcome;import java.util.ArrayList;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.View;public class pagerAdapter extends PagerAdapter { private ArrayList<View> views; public pagerAdapter(ArrayList<View> views){ this.views = views; } @Override public int getCount() { return this.views.size(); } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } public void destroyItem(View container, int position, Object object) { ((ViewPager)container).removeView(views.get(position)); } //页面view public Object instantiateItem(View container, int position) { ((ViewPager)container).addView(views.get(position)); return views.get(position); }}
4 程序启动显示此界面
<application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" > <activity android:name="com.news.welcome.mainWelcom" android:label="@string/app_name" android:theme="@android:style/Theme.NoTitleBar.Fullscreen"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name="com.phoneapidemo.MainActivity" android:theme="@style/themeTitle"></activity> <activity android:name="com.phoneapidemo.Login" android:theme="@style/themeTitle"></activity> </application>
这里要注意,android:theme="@android:style/Theme.NoTitleBar.Fullscreen需要使用,因为在Mainfest中的设置会在程序中先执行,也就是他会比requestWindowFeature
(Window.FEATURE_NO_TITLE)先运行。如果有其他title则会先显示title,这并不是我们想要的结果。
最后附上源码:
http://download.csdn.net/detail/feiyangxiaomi/6418453