圣人云:发图不留种,菊花万人捅;但是对于整天泡代码的程序猿来说,我认为恰恰应该是:发种不留图,*****。所以为了保住菊花,每次搞博客的时候,我总要提醒自己:先发图,后上种。。。
刚开始搞导航页时从网上找到个叫MyScrollLayout(extends ViewGroup)的自定义组件,代码繁琐,滑动速度感觉不是很舒服;现在发现大家都在用ViewPager,试了下感觉滑动速度舒服多了,而且在一个类里面就可以搞定,值得拥有,直接粘主要代码了。
1. activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="@+id/guide_viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" >
<android.support.v4.view.PagerTitleStrip
android:id="@+id/pagertitle"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="bottom"
android:background="#0000"
android:textColor="#ffff" />
</android.support.v4.view.ViewPager>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="30dp"
android:gravity="center_horizontal" >
<ImageView
android:id="@+id/guide_img_point0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="10dp"
android:src="@drawable/guide_dot_bg_selector" />
<ImageView
android:id="@+id/guide_img_point1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="10dp"
android:src="@drawable/guide_dot_bg_selector" />
<ImageView
android:id="@+id/guide_img_point2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="10dp"
android:src="@drawable/guide_dot_bg_selector" />
<ImageView
android:id="@+id/guide_img_point3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="10dp"
android:src="@drawable/guide_dot_bg_selector" />
</LinearLayout>
</RelativeLayout>
</FrameLayout>
2.
guide_page3.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/guide_4"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/splash_4"
android:gravity="bottom|center_horizontal">
<Button
android:id="@+id/guide_btn_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="40dp"
android:background="@drawable/guide_btn_start_selector"
android:onClick="gotoMainPage"/>
</LinearLayout>
</LinearLayout>
3. GuideActivity.java
/**
* 导航页
*/
public class GuideActivity extends BaseActivity{
private ViewPager viewPager = null;
private ImageView[] img_points = new ImageView[4];
//底部四个小点的id
private int[] img_pointIDs = {R.id.guide_img_point0, R.id.guide_img_point1, R.id.guide_img_point2, R.id.guide_img_point3};
private List<View> listViews = new ArrayList<View>();
//四张滚动的导航图片
private int[] resources = {R.layout.guide_page0, R.layout.guide_page1, R.layout.guide_page2, R.layout.guide_page3};
private LayoutInflater inflater = null;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_guide);
initUI();
}
private void initUI() {
inflater = LayoutInflater.from(this);
viewPager = (ViewPager) findViewById(R.id.guide_viewpager);
viewPager.setOnPageChangeListener(new MyPageChangeListener());
for(int i=0;i<img_points.length;i++){
img_points[i] = (ImageView) findViewById(img_pointIDs[i]);
//初始化第一个小点为选中状态,其他未选中状态
if(i != 0){
img_points[i].setEnabled(false);
}
View view = inflater.inflate(resources[i], null);
listViews.add(view);
}
viewPager.setAdapter(new MyPageAdapter());
}
private class MyPageAdapter extends PagerAdapter{
@Override
public int getCount() {
return listViews.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public Object instantiateItem(View container, int position) {
((ViewPager)container).addView(listViews.get(position));
return listViews.get(position);
}
@Override
public void destroyItem(View container, int position, Object object) {
((ViewPager)container).removeView(listViews.get(position));
}
}
private class MyPageChangeListener implements OnPageChangeListener{
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageSelected(int arg0) {
setImageEnable(arg0);
}
}
/** 设置底部小点状态切换 */
private void setImageEnable(int position) {
for(int i=0;i<img_points.length;i++){
if(i == position){
img_points[i].setEnabled(true);
}else{
img_points[i].setEnabled(false);
}
}
}
/** 点最后一张图上的button跳转到主界面 */
public void gotoMainPage(View v) {
Editor editor = getSharedPreferences("first_start", 0).edit();
editor.putInt("IsFirstStart", DemoApplication.getInstance().getVersionCode());
editor.commit();
Intent intent = new Intent(this, MainActivity.class);
startActivity(intent);
finish();
// overridePendingTransition(R.anim.push_right_in, R.anim.push_left_out);
}
}
4. DemoApplication.java中的方法
/** 获取版本号 **/
public int getVersionCode() {
int versioncode = -1;
try {
PackageManager pm = getPackageManager();
PackageInfo pi = pm.getPackageInfo(getPackageName(), 0);
versioncode = pi.versionCode;
} catch (Exception e) {
e.printStackTrace();
}
return versioncode;
}
5.
SplashActivity.java中检测是否需要走导航页
/** 判断是否为首次进入软件 */
private boolean checkIsFirstStart() {
SharedPreferences sp = getSharedPreferences("first_start", 0);
int lastVersion = sp.getInt("IsFirstStart", 0);//根据版本号判断是否为首次启动
// Log.d(TAG, lastVersion+","+MyApplication.localVersion);
//根据版本号判断,如果本次启动的应用版本号 >SharedPreferences里面存的版本号
//则说明本次为升级应用,如果相等则说明没有更新
if (DemoApplication.getInstance().getVersionCode() > lastVersion) {
return true;
}
return false;
}
只传了三个主要文件,具体的图片和颜色值可以下载源代码看看。