app引导页模板html（app下载页模板）
本文目录一览：
html5 做app引导页怎么做
H5edu教育Html5开发为您解答：
1、制作html5引导页面。
2、把做好的页面放入Android工程中assets文件夹下。
3、利用WebView加载asset文件夹下的html文件。
4、在引导页最后一页的按钮上捕捉点击事件，结束引导页，进入程序。
如何App实现引导页和欢迎页
欢迎页：这个在我们的微信里面就有这个，我们每一次打开微信的时候都有一个地球，那么这样就是欢迎页。欢迎页具有良好的数据缓存作用。
引导页：就是我们没次安装一个app的时候，前面都有几个图片。那么这个引导页有哪些作用，第一：它有教我们怎么使用这个app和接受这app。第二：有宣传的作用。
我们在这个功能中用到的知识点有ViewPage、ViewPage的适配器PageAdapter、ViewPage的滑动改变事件、、RadioGroupRadioButton的点击事件。
好，现在我们接下来上代码了。
这个就是我的项目结构。其中WActivity.class是欢迎页、FActivity.class是引导页、MyAdapter.class是ViewPage的适配、BasePageListen实现页面滑动的接口。
第一个我们先写WActivity这个类。
package com.example.office.startapp;
import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class WActivity extends AppCompatActivity {
private SharedPreferences sp;
private boolean isFirst;
//欢迎页面
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_w);
//获得共享参数对象
sp=getSharedPreferences("first", Context.MODE_PRIVATE);
//参数二 如果sp文件中没有记录的话 返回的默认值
isFirst=sp.getBoolean("isFirst",true);
//这里面的判断就是 如果是第一次进入app 那就跳转引导页
//不是第一次就跳到主页面
new Handler().postDelayed(new Runnable() {
SharedPreferences.Editor editor;
Intent intent;
@Override
public void run() {
if(isFirst){
intent =new Intent(WActivity.this,FActivity.class);
startActivity(intent);
WActivity.this.finish();
//把数据保存到sp里面
//获取可以向sp里面写入数据的对象
editor=sp.edit();
editor.putBoolean("first",false);
//提交我们的数据
editor.commit();
}else {
intent=new Intent(WActivity.this,MainActivity.class);
startActivity(intent);
WActivity.this.finish();
}
}
},1500);
}
}
下面我们就写MyAdpter这个类
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import java.util.List;
/**
* Created by OFFICE on 2016/8/9.
*/
public class MyAdapter extends PagerAdapter{
private List ImageView list;
private Context context;
public MyAdapter(Context context, ListImageView list) {
this.context = context;
this.list = list;
}
@Override
public int getCount() {
return list.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(list.get(position));
return list.get(position);
}
//里面有一个方法必须删除super.不删除会报错
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View)object);
}
}
我们写BasePageListen这个类
import android.support.v4.view.ViewPager;
/**
* Created by OFFICE on 2016/8/9.
*/
public class BasePageListen implements ViewPager.OnPageChangeListener{
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
最后我们写FActivit
import android.content.Intent;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import java.util.ArrayList;
import java.util.List;
//引导页
public class FActivity extends AppCompatActivity {
private ListImageView list;
private RadioGroup radioGroup;
private ViewPager viewPager;
private ImageView imageView1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_f);
viewPager= (ViewPager) findViewById(R.id.viewPage);
radioGroup= (RadioGroup) findViewById(R.id.radiogroup);
imageView1= (ImageView) findViewById(R.id.image) ;
initView();
imageView1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(FActivity.this, MainActivity.class);
startActivity(intent);
FActivity.this.finish();
}
});
MyAdapter myAdapter=new MyAdapter(this,list);
viewPager.setAdapter(myAdapter);
//viewPage变动RadioButton也在变动
viewPager.addOnPageChangeListener(new BasePageListen(){
@Override
public void onPageSelected(int position) {
RadioButton radioButton= (RadioButton) radioGroup.getChildAt(position);
radioButton.setChecked(true);
if(position==list.size()-1){
imageView1.setVisibility(View.VISIBLE);
}else {
imageView1.setVisibility(View.GONE);
}
}
});
//当点击RadioButton的时候，viewpage也在改变
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
viewPager.setCurrentItem(checkedId);
}
});
}
private void initView(){
int [] images={R.mipmap.yd1,R.mipmap.yd2,R.mipmap.yd3};
list=new ArrayListImageView();
for(int i=0;iimages.length;i++){
ImageView imageView=new ImageView(this);
imageView.setImageResource(images[i]);
list.add(imageView);
RadioButton radioButton=new RadioButton(this);
//设置radioButton的id
radioButton.setId(i);
//把ReaioButton放在group
radioGroup.addView(radioButton);
}
//设置默认选中的第一个按钮
//获得下标为0的按钮对象
RadioButton radioButton= (RadioButton) radioGroup.getChildAt(0);
radioButton.setChecked(true);
}
}
好了，复制上去就可以实现上面的效果。
APP 引导页设计1-引导页的分类
因工作原因，笔者体验过很多APP，其UI是笔者比较关注的一部分，毕竟UI是第一印象嘛，大部分APP，引导页作为其的第一个入口，新装时启动都会先显示引导页，介绍其功能特性。APP体验多了，逐渐有点心得，这里笔者对市面上APP的引导页做下归类，细数归纳下对引导页的所见所想。
根据引导页的目的、出发点不同，可以将其分为功能介绍类、推广类、问题解决类、卖萌搞笑类，一般引导页不会超过5页，下面看看各类精彩纷呈的引导页。
1.功能介绍类
这样的引导页最直白的就是截图展示功能特点，或者用形象化的物体（如下图QQ改版升级，其引导页就用代表性的企鹅来表现APP的主要功能。）
用户需要一针见血，在这样一个网络化的时代，人们停留的时间越来越短，浏览你的APP界面时间不会超过3秒，在这样宝贵的3秒里，你需要用简要明白、通俗易懂的文案和界面呈现，突出重点即可，展示我们的功能展示页面。
2.推广类
推广类引导页除了有一些产品功能的介绍外，更多是想传达产品的态度，让用户更明白这个产品的情怀，并考虑与整个产品风格、公司形象相一致。这一类的引导页如果做的不够吸引人，用户只会不耐烦地想快速划过。而制作精良、有趣的引导页，用户会驻足观赏。
以淘宝旅行为例，淘宝旅行通过清新、生活化场景的插图营造产品是一款乐享生活、跟着感觉走的出行应用，在你出行前就帮你计划好所有的行程安排，只要一个行李箱，说走就走，与产品的理念相契合。而另外一款应用，选用恬静、安逸的照片配以简洁的文字来渲染产品的基调。
3.搞笑卖萌类
不知道怎么概括，就是说一个故事？通常会配合一些动画效果来辅助展示。
4 、问题解决类
问题解决类通过描述在实际生活中会遇到的问题，直击痛点，通过最后的解决方案让用户产生情感上的联系，让用户对产品产生好感，增加产品粘度。例如QQ浏览器的引导页设计，通过形象的插图直接明了地说明了QQ浏览器解决了其他浏览器所遇到的问题（搜不到小说、看小说花钱、小说更新需要等）。
以上已经针对引导页的目的差异以及表现方式进行了相关归类，在具体的设计中还得注意一些原则,它们会让你的设计更加吸引人，信息传达的效果更好。
#本文同步发布到 pm263.com ，pm263为你提供更多更全的产品经理干货，欢迎大家访问。
关于app引导页模板html和app下载页模板的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注云尚网络www.ysfad.net。
相关文章
发表评论
暂时没有评论，来抢沙发吧~