Android软件怎么加一个引导界面
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Android软件怎么加一个引导界面相关的知识，希望对你有一定的参考价值。
软件本身是一个扫描软件，现在引导界面能加进去，但是不知道怎么进入到扫描界面
首先，打开eclipse，建立一个空的项目。
我们需要的资源：
1. 找几张图片（以4张为例，这个可以自己决定），分别命名：guide_page1.png、guide_page2.png、guide_page3.png、guide_page4.png。
2. 再找一个button的按钮，类似百度地图上的最后一个“进入地图”按钮。命名为：start_btn.png。
3. 两种dot： 。分别命名：guide_dot_focus.png、guide_dot_normal.png。
将以上资源放到res/drawable-hdpi文件夹下(以上资源均在下方源码下载中)：
在res/drawable文件夹下添加文件guide_dot_style.xml，用于创建导航小点的样式。
guide_dot_style.xml
[cpp] view plaincopy
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="@drawable/guide_dot_focus" android:state_selected="true"/>
<item android:drawable="@drawable/guide_dot_normal"/>
</selector>
在res/layout文件夹下建立一个guide_view.xml，创建我们的页面来显示导航图片。
guide_view.xml
[java] view plaincopy
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/guide_view_pager">
</android.support.v4.view.ViewPager>
<LinearLayout
android:layout_alignParentBottom="true"
android:layout_marginBottom="10dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:orientation="horizontal"
android:id="@+id/guide_dots">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="15dip"
android:src="@drawable/guide_dot_style"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="15dip"
android:src="@drawable/guide_dot_style"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="15dip"
android:src="@drawable/guide_dot_style"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="15dip"
android:src="@drawable/guide_dot_style"/>
</LinearLayout>
</RelativeLayout>
LinearLayout布局是为了放置4个导航小点。
我们还需要单独为最后一张图片做一个布局，因为这里面有一个button，我们需要给这个button添加点击事件，所以得单独为它写个布局。在res/layout中添加guide_content_view.xml。
guide_content_view.xml
[java] view plaincopy
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@drawable/guide_page4"/>
<Button
android:layout_alignParentBottom="true"
android:layout_marginBottom="35dip"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/start_btn"
android:id="@+id/start_btn"/>
</RelativeLayout>
布局文件完成了，我们来看我们的java代码。
我们需要一个页面适配器来显示我们的viewpager中的图片，在src目录中添加一个ViewPagerAdapter.java文件。
ViewPagerAdapter.java
[java] view plaincopy
package cn.staray.guidetest;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import java.util.ArrayList;
/**
* @Filename ViewPagerAdapter.java
* @Package cn.staray.guidetest
* @Project Guidetest
* @Create 2014-6-12 下午2:57:31
* @author Staray
* @Description 界面适配器
*/
public class ViewPagerAdapter extends PagerAdapter
private final ArrayList<View> mViews;
public ViewPagerAdapter(ArrayList<View> views)
mViews = views;
// 返回页面数目
@Override
public int getCount()
if (mViews != null)
return mViews.size();
return 0;
@Override
public int getItemPosition(Object object)
return super.getItemPosition(object);
// 初始化position位置的页面
@Override
public Object instantiateItem(View view, int position)
((ViewPager)view).addView(mViews.get(position), 0);
return mViews.get(position);
// 判断是否由对象生成界面
@Override
public boolean isViewFromObject(View arg0, Object arg1)
return (arg0 == arg1);
// 销毁position位置的界面
@Override
public void destroyItem(View view, int position, Object arg2)
((ViewPager)view).removeView(mViews.get(position));
接着我们完成我们的主文件，在src目录中添加一个GuideActivity.java文件。
GuideActivity.java
[java] view plaincopy
package cn.staray.guidetest;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import java.util.ArrayList;
/**
* @Filename GuideActivity.java
* @Package cn.staray.guidetest
* @Project Guidetest
* @Create 2014-6-12 下午2:44:23
* @author Staray
* @Description 引导界面
*/
public class GuideActivity extends Activity
// 显示导航页面的viewpager
private ViewPager guideViewPager;
// 页面适配器
private ViewPagerAdapter guideViewAdapter;
// 页面图片列表
private ArrayList<View> mViews;
// 图片资源，这里我们放入了3张图片，因为第四张图片，我们已经在guide_content_view.xml中加载好了
// 一会直接添加这个文件就可以了。
private final int images[] =
R.drawable.guide_page1, R.drawable.guide_page2, R.drawable.guide_page3
;
// 底部导航的小点
private ImageView[] guideDots;
// 记录当前选中的图片
private int currentIndex;
// 还记得我们的开始按钮吗？
private Button startBtn;
@Override
protected void onCreate(Bundle savedInstanceState)
super.onCreate(savedInstanceState);
setContentView(R.layout.guide_view);
initView();
initDot();
// 添加页面更换监听事件，来更新导航小点的状态。
guideViewPager.setOnPageChangeListener(new OnPageChangeListener()
@Override
public void onPageSelected(int arg0)
setCurrentDot(arg0);
@Override
public void onPageScrolled(int arg0, float arg1, int arg2)
@Override
public void onPageScrollStateChanged(int arg0)
);
// 开始按钮的点击事件监听
startBtn.setOnClickListener(new OnClickListener()
@Override
public void onClick(View v)
// 我们随便跳转一个页面
Intent intent = new Intent(GuideActivity.this, MainActivity.class);
startActivity(intent);
GuideActivity.this.finish();
);
// 初始化页面
private void initView()
guideViewPager = (ViewPager)findViewById(R.id.guide_view_pager);
mViews = new ArrayList<View>();
for (int i = 0; i < images.length; i++)
// 新建一个ImageView容器来放置我们的图片。
ImageView iv = new ImageView(GuideActivity.this);
iv.setBackgroundResource(images[i]);
// 将容器添加到图片列表中
mViews.add(iv);
// 上面添加了三张图片了，还有一张放在guide_content_view.xml中，我们把这个页面也添加进来。
View view = LayoutInflater.from(GuideActivity.this).inflate(R.layout.guide_content_view,
null);
mViews.add(view);
// 现在为我们的开始按钮找到对应的控件
startBtn = (Button)view.findViewById(R.id.start_btn);
// 现在用到我们的页面适配器了
guideViewAdapter = new ViewPagerAdapter(mViews);
guideViewPager.setAdapter(guideViewAdapter);
// 初始化导航小点
private void initDot()
// 找到放置小点的布局
LinearLayout layout = (LinearLayout)findViewById(R.id.guide_dots);
// 初始化小点数组
guideDots = new ImageView[mViews.size()];
// 循环取得小点图片，让每个小点都处于正常状态
for (int i = 0; i < mViews.size(); i++)
guideDots[i] = (ImageView)layout.getChildAt(i);
guideDots[i].setSelected(false);
// 初始化第一个小点为选中状态
currentIndex = 0;
guideDots[currentIndex].setSelected(true);
// 页面更换时，更新小点状态
private void setCurrentDot(int position)
if (position < 0 || position > mViews.size() - 1 || currentIndex == position)
return;
guideDots[position].setSelected(true);
guideDots[currentIndex].setSelected(false);
currentIndex = position;
最终文件结构：
运行，就能出现开始的效果了。
参考技术A所谓的引导界面就是一个activity，比如现在很流行的左右滑动引导界面，就是在一个activity中使用viewpager实现的。
不同效果的引导界面使用不同的技术实现。但他们大多都是一个activity。
能具体说说是什么方法吗 或者告诉我一下要看哪方面的内容
Android项目实战：实现第一次进入软件的引导页
原文:Android项目实战（三）：实现第一次进入软件的引导页最近做的APP接近尾声了，就是些优化工作了，
我们都知道现在的APP都会有引导页，就是安装之后第一次打开才显示的引导页面（介绍这个软件的几张可以切换的图）
自己做了一下，结合之前学过的
思路很简单，APP的主界面还是作为主Activity，只要新添加一个类来判断是不是第一次打开APP
设主activity 名字为：MainActivity.java 判断是不是第一次打开APP且实现引导页面的类 LoginActivity ，另外还需要一个类 这是安卓开发_慕课网_ViewPager切换动画（3.0版本以上有效果）中用到的 ZoomOutPageTransformer.java
1.在主activity中,在一开始 先跳转到LoginActivity类中
1 protected void onCreate(Bundle savedInstanceState) { 2 super.onCreate(savedInstanceState); 3 requestWindowFeature(Window.FEATURE_NO_TITLE); 4 setContentView(R.layout.activity_main); 5 startActivity(new Intent(MainActivity.this, LoginActivity.class)); //跳转到LoginActivity类中 6 //初始化 7 init(); 8 initEvent(); 9 //默认显示第一个功能的界面(微信界面) 10 setSelect(0); 11 }
2.在LoginActivity类中判断是不是第一次打开，如果是，则显示ViewPager切换动画效果
如果不是，则执行finish();语句，直接结束这个Activity 自然的就回到了主Activity中了
LoginActivity代码
1 package com.example.qunxiong; 2 3 import java.io.OutputStream; 4 import java.util.ArrayList; 5 import java.util.List; 6 7 8 9 import android.app.Activity; 10 import android.content.Context; 11 import android.content.Intent; 12 import android.content.SharedPreferences; 13 import android.content.SharedPreferences.Editor; 14 import android.os.Bundle; 15 import android.support.v4.view.PagerAdapter; 16 import android.support.v4.view.ViewPager; 17 import android.view.View; 18 import android.view.ViewGroup; 19 import android.view.View.OnClickListener; 20 import android.widget.Button; 21 import android.widget.ImageView; 22 import android.widget.ImageView.ScaleType; 23 24 public class LoginActivity extends Activity { 25 private ViewPager mviewpager; //控件 26 private int[] mImgIds = new int[]{R.drawable.bg_rank_shenqi_0,R.drawable.bg_rank_shenqi_1,R.drawable.bg_rank_shenqi_10};//初始化图片 27 private List<ImageView> mImages = new ArrayList<ImageView>(); 28 private Button jump; 29 private SharedPreferences preferences; 30 private Editor editor; 31 private OutputStream os; 32 @Override 33 protected void onCreate(Bundle savedInstanceState) { 34 super.onCreate(savedInstanceState); 35 setContentView(R.layout.login); 36 preferences = getSharedPreferences("phone", Context.MODE_PRIVATE); 37 jump = (Button) findViewById(R.id.jump); 38 jump.setOnClickListener(new OnClickListener() { 39 @Override 40 public void onClick(View v) { 41 // TODO Auto-generated method stub 42 finish(); 43 } 44 }); 45 //判断是不是首次登录， 46 if (preferences.getBoolean("firststart", true)) { 47 editor = preferences.edit(); 48 //将登录标志位设置为false，下次登录时不在显示首次登录界面 49 editor.putBoolean("firststart", false); 50 editor.commit(); 51 mviewpager = (ViewPager) findViewById(R.id.id_viewpager); 52 //为ViewPage切换添加动画效果(3.0以上版本才可以有效果) 53 mviewpager.setPageTransformer(true, new ZoomOutPageTransformer()); 54 55 mviewpager.setAdapter(new PagerAdapter() { 56 57 @Override 58 public Object instantiateItem(View container, int position) { 59 ImageView imageview = new ImageView(LoginActivity.this); 60 imageview.setImageResource(mImgIds[position]); 61 imageview.setScaleType(ScaleType.CENTER_CROP); //设置图片不变形 62 ((ViewGroup) container).addView(imageview); 63 mImages.add(imageview); 64 return imageview; 65 }; 66 @Override 67 public void destroyItem(View container, int position, Object object) { 68 // TODO Auto-generated method stub 69 70 ((ViewPager) container).removeView(mImages.get(position)); 71 } 72 public boolean isViewFromObject(View view, Object object) { 73 // TODO Auto-generated method stub 74 return view == object; 75 } 76 77 @Override 78 public int getCount() { //返回图片个数 79 // TODO Auto-generated method stub 80 return mImgIds.length; 81 } 82 }); 83 } 84 else 85 { 86 finish(); 87 } 88 89 } 90 } 91
切换动画效果代码
ZoomOutPageTransformer.java
1 package com.example.qunxiong; 2 3 import android.annotation.SuppressLint; 4 import android.support.v4.view.ViewPager; 5 import android.view.View; 6 7 public class ZoomOutPageTransformer implements ViewPager.PageTransformer { 8 private static final float MIN_SCALE = 0.85f; 9 private static final float MIN_ALPHA = 0.5f; 10 11 @SuppressLint("NewApi") public void transformPage(View view, float position) { 12 int pageWidth = view.getWidth(); 13 int pageHeight = view.getHeight(); 14 15 if (position < -1) { // [-Infinity,-1) 16 // This page is way off-screen to the left. 17 view.setAlpha(0); 18 19 } else if (position <= 1) { // [-1,1] 20 // Modify the default slide transition to shrink the page as well 21 float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position)); 22 float vertMargin = pageHeight * (1 - scaleFactor) / 2; 23 float horzMargin = pageWidth * (1 - scaleFactor) / 2; 24 if (position < 0) { 25 view.setTranslationX(horzMargin - vertMargin / 2); 26 } else { 27 view.setTranslationX(-horzMargin + vertMargin / 2); 28 } 29 30 // Scale the page down (between MIN_SCALE and 1) 31 view.setScaleX(scaleFactor); 32 view.setScaleY(scaleFactor); 33 34 // Fade the page relative to its size. 35 view.setAlpha(MIN_ALPHA + 36 (scaleFactor - MIN_SCALE) / 37 (1 - MIN_SCALE) * (1 - MIN_ALPHA)); 38 39 } else { // (1,+Infinity] 40 // This page is way off-screen to the right. 41 view.setAlpha(0); 42 } 43 } 44 }
以上是关于Android软件怎么加一个引导界面的主要内容，如果未能解决你的问题，请参考以下文章
来抠个图吧~——更优雅的Android UI界面控件高亮的实现