Android软件怎么加一个引导界面
发布网友
发布时间：2022-07-12 20:54
共4个回答
热心网友
时间：2023-10-20 07:21
首先，打开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;
}
}
最终文件结构：
运行，就能出现开始的效果了。
热心网友
时间：2023-10-20 07:21
所谓的引导界面就是一个activity，比如现在很流行的左右滑动引导界面，就是在一个activity中使用viewpager实现的。
不同效果的引导界面使用不同的技术实现。但他们大多都是一个activity。
热心网友
时间：2023-10-20 07:22
热心网友
时间：2023-10-20 07:23
