android欢迎界面的绘制

最新推荐文章于 2021-09-14 22:57:11 发布

feiyangxiaomi

最新推荐文章于 2021-09-14 22:57:11 发布

阅读量7.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： android日常笔记文章标签： Viewpager 开场界面

本文链接：https://blog.youkuaiyun.com/feiyangxiaomi/article/details/12840881

android日常笔记专栏收录该内容

47 篇文章

订阅专栏

本文详细介绍如何使用ViewPager组件创建Android应用的欢迎界面，并分享了界面设计思路、页面切换效果及实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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，这并不是我们想要的结果。

最后附上源码：