。。嗯感觉越弄就越偏离阅读器的主要功能。。。
做欢迎界面的第一想法是不少软件在第一次使用的时候会以可以滑动切换的图片来显示部分使用帮助,之后每次在打开应用时便显示应用的logo持续1-2s。
效果如下图(logo就随便用画图弄了一个……)
当第一次加载时会显示出简单的使用的帮助
这里共设置了三个帮助图片可供来回滑动,当用户浏览完帮助滑动到最后一个页面时显示应用logo并提示用户点击进入MainActivity。如下图
当用户不是第一次进入此应用时,便只显示应用logo,我设置的是显示1.5s然后自动消失进入MainActivity。
下面是代码,SplashActivity.class通过查询指定txt文件中保存的此应用是否被用户使用过的状态来判断是显示帮助(ViewPager)还是定时显示logo
package com.ldgforever.jianreader;
import java.util.Map;
import java.util.Timer;
import java.util.TimerTask;
import com.ldgforever.savedata.savedata;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
public class SplashActivity extends Activity {
private int mShowTime = 1500;
private boolean FirstIn = true;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_splash);
/**
* 回显数据
*/
Map<String, String> userInfoMap = savedata.getUserInfo();
if (userInfoMap != null) {
FirstIn = Boolean.parseBoolean(userInfoMap.get("FirstIn"));
}
if (FirstIn) {
FirstIn = false;
savedata.saveUserInfo(FirstIn);
Intent ig = new Intent(SplashActivity.this, GuideActivity.class);
startActivity(ig);
finish();
} else {
TimerTask task = new TimerTask() {
@Override
public void run() {
goActivity(BookListActivity.class);
finish();
}
};
Timer timer = new Timer();
timer.schedule(task, mShowTime);
}
}
private void goActivity(Class<?> cls) {
Intent ia = new Intent(SplashActivity.this, cls);
startActivity(ia);
}
}
如果用户是第一次进入该应用,则跳转GuideActivity显示图片帮助
下面上代码
首先是ViewPager的适配器
package com.ldgforever.jianreader.adapter;
import java.util.ArrayList;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
public class ViewPagerAdapter extends PagerAdapter {
private ArrayList<View> views;
public ViewPagerAdapter(ArrayList<View> views) {
this.views = views;
}
@Override
public int getCount() {
if (views != null) {
return views.size();
}
return 0;
}
@Override
public Object instantiateItem(View container, int position) {
((ViewPager) container).addView(views.get(position), 0);
return views.get(position);
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return (arg0 == arg1);
}
@Override
public void destroyItem(View container, int position, Object object) {
((ViewPager) container).removeView(views.get(position));
}
}
然后是布局文件,布局文件这里还增加了四个小布局就不贴出来了,因为只是设置了background显示图片,默认显示的layout只有ViewPager和底部的四个小点
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.ldgforever.jianreader.GuideActivity" >
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:id="@+id/point"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="24.0dp"
android:orientation="horizontal"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="15.0dp"
android:src="@drawable/point"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="15.0dp"
android:src="@drawable/point"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="15.0dp"
android:src="@drawable/point"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="15.0dp"
android:src="@drawable/point"/>
</LinearLayout>
</RelativeLayout>
最后是.class文件,文件中不仅包含了让ViewPager显示图片的部分,还根据当前选中的页面的position来置小点的状态,而点的状态改变就导致小点颜色的改变,通过一个xml文件来设置:
<?xml version="1.0" encoding="UTF-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:drawable="@drawable/point_normal" />
<item android:state_enabled="false" android:drawable="@drawable/point_select" />
</selector>
package com.ldgforever.jianreader;
import java.util.ArrayList;
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.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
public class GuideActivity extends Activity {
private ViewPager viewPager;
private com.ldgforever.jianreader.adapter.ViewPagerAdapter vpAdapter;
private ArrayList<View> views;
private View view1, view2, view3, view4;
private ImageView[] points;
private int currentIndex;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_guide);
initView();
}
private void initView() {
LayoutInflater mLayoutInflater = LayoutInflater.from(this);
view1 = mLayoutInflater.inflate(R.layout.guide_page1, null);
view2 = mLayoutInflater.inflate(R.layout.guide_page2, null);
view3 = mLayoutInflater.inflate(R.layout.guide_page3, null);
view4 = mLayoutInflater.inflate(R.layout.guide_page4, null);
viewPager = (ViewPager) findViewById(R.id.viewpager);
views = new ArrayList<View>();
views.add(view1);
views.add(view2);
views.add(view3);
views.add(view4);
vpAdapter = new com.ldgforever.jianreader.adapter.ViewPagerAdapter(views);
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
if (position < 0 || position > 3 || currentIndex == position) {
return;
}
points[position].setEnabled(false);
points[currentIndex].setEnabled(true);
currentIndex = position;
if (position == 3) {
ImageButton mTryitNowButton = (ImageButton) findViewById(R.id.tryNow);
mTryitNowButton.setVisibility(View.VISIBLE);
mTryitNowButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Intent ib = new Intent(GuideActivity.this, BookListActivity.class);
startActivity(ib);
finish();
}
});
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
});
viewPager.setAdapter(vpAdapter);
initPoint(views.size());
}
private void initPoint(int views) {
points = new ImageView[views];
for (int i = 0; i < views; i++) {
LinearLayout linearLayout = (LinearLayout) findViewById(R.id.point);
points[i] = (ImageView) linearLayout.getChildAt(i);
points[i].setEnabled(true);
points[i].setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
int position = (Integer) v.getTag();
if (position < 0 || position > 3 || currentIndex == position) {
return;
}
points[position].setEnabled(false);
points[currentIndex].setEnabled(true);
currentIndex = position;
if (position < 0 || position >= 4) {
return;
}
viewPager.setCurrentItem(position);
}
});
points[i].setTag(i);
}
currentIndex = 0;
points[currentIndex].setEnabled(false);
}
}
当滑动到最后一个View时,用户需要点击“马上体验”来进入应用