【济南中心】Android课程同步笔记Day2：智慧北京-项目实现

Splash界面动画

效果分析：

全屏显示

执行旋转、缩放、透明度改变动画

       动画执行完成后，进入引导界面
文件AndroidManifest.xml：

[XML] 纯文本查看 复制代码

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.itheima.zhbj">

    <application
        android:allowBackup="true"
        android:icon="@drawable/icon_150"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".activity.SplashActivity"
            android:theme="@android:style/Theme.NoTitleBar.Fullscreen"
           >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".activity.GuideActivity"/>
        <activity android:name=".activity.MainActivity"
            android:theme="@android:style/Theme.NoTitleBar"/>
    </application>

</manifest>

执行动画

[Java] 纯文本查看 复制代码

package com.itheima.zhbj.activity;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.widget.RelativeLayout;

import com.itheima.zhbj.R;
import com.itheima.zhbj.utils.Constant;
import com.itheima.zhbj.utils.SPUtils;

import butterknife.BindView;
import butterknife.ButterKnife;

public class SplashActivity extends Activity implements Animation.AnimationListener {

    @BindView(R.id.rl)
    RelativeLayout rl;

    private Handler mHandler = new Handler();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);
        ButterKnife.bind(this);

        Animation animation = createAnimation();
        rl.startAnimation(animation);
        //监听动画
        animation.setAnimationListener(this);
    }

    //创建动画
    private Animation createAnimation(){
        AnimationSet set = new AnimationSet(false);
        //旋转
        RotateAnimation rotate = new RotateAnimation(0,360,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
        rotate.setDuration(2000);
        //缩放
        ScaleAnimation scale = new ScaleAnimation(0,1,0,1,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
        scale.setDuration(2000);
        //透明度
        AlphaAnimation alpha = new AlphaAnimation(0,1);
        alpha.setDuration(1000);

        set.addAnimation(rotate);
        set.addAnimation(scale);
        set.addAnimation(alpha);
        return set;
    }

    @Override
    public void onAnimationStart(Animation animation) {

    }

    //动画执行后调用
    @Override
    public void onAnimationEnd(Animation animation) {
        //延时2s进入向导界面GuideActivity  该方法在主线程   发送一个延时的消息
        mHandler.postDelayed(new MyTask(),2000);
    }

    @Override
    public void onAnimationRepeat(Animation animation) {

    }

    private class MyTask implements  Runnable{

        @Override
        public void run() {
           boolean has_guide =  SPUtils.getBoolean(getApplicationContext(), Constant.KEY_HAS_GUIDE,false);
            if(has_guide){
                //进入主界面
                Intent intent = new Intent(getApplicationContext(),MainActivity.class);
                startActivity(intent);
            }else{
                //进入向导界面
                Intent intent = new Intent(getApplicationContext(),GuideActivity.class);
                startActivity(intent);
            }
            finish();
        }
    }
}

添加动画监听，执行跳转

[Java] 纯文本查看 复制代码

package com.itheima.zhbj.activity;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.widget.RelativeLayout;

import com.itheima.zhbj.R;
import com.itheima.zhbj.utils.Constant;
import com.itheima.zhbj.utils.SPUtils;

import butterknife.BindView;
import butterknife.ButterKnife;

public class SplashActivity extends Activity implements Animation.AnimationListener {

    @BindView(R.id.rl)
    RelativeLayout rl;

    private Handler mHandler = new Handler();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);
        ButterKnife.bind(this);

        Animation animation = createAnimation();
        rl.startAnimation(animation);
        //监听动画
        animation.setAnimationListener(this);
    }

    //创建动画
    private Animation createAnimation(){
        AnimationSet set = new AnimationSet(false);
        //旋转
        RotateAnimation rotate = new RotateAnimation(0,360,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
        rotate.setDuration(2000);
        //缩放
        ScaleAnimation scale = new ScaleAnimation(0,1,0,1,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
        scale.setDuration(2000);
        //透明度
        AlphaAnimation alpha = new AlphaAnimation(0,1);
        alpha.setDuration(1000);

        set.addAnimation(rotate);
        set.addAnimation(scale);
        set.addAnimation(alpha);
        return set;
    }

    @Override
    public void onAnimationStart(Animation animation) {

    }

    //动画执行后调用
    @Override
    public void onAnimationEnd(Animation animation) {
        //延时2s进入向导界面GuideActivity  该方法在主线程   发送一个延时的消息
        mHandler.postDelayed(new MyTask(),2000);
    }

    @Override
    public void onAnimationRepeat(Animation animation) {

    }

    private class MyTask implements  Runnable{

        @Override
        public void run() {
           boolean has_guide =  SPUtils.getBoolean(getApplicationContext(), Constant.KEY_HAS_GUIDE,false);
            if(has_guide){
                //进入主界面
                Intent intent = new Intent(getApplicationContext(),MainActivity.class);
                startActivity(intent);
            }else{
                //进入向导界面
                Intent intent = new Intent(getApplicationContext(),GuideActivity.class);
                startActivity(intent);
            }
            finish();
        }
    }
}

向导界面的ViewPager

打开【文件activity_guide.xml】，引入Viewpager控件

[XML] 纯文本查看 复制代码

<?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:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v4.view.ViewPager>

</RelativeLayout>

去除标题和状态栏

[Java] 纯文本查看 复制代码

public class GuideActivity extends Activity implements ViewPager.OnPageChangeListener {

    private static final String TAG = "GuideActivity";
    @BindView(R.id.vp)
    ViewPager vp;
    @BindView(R.id.bt_start)
    Button btStart;
    @BindView(R.id.red_point)
    View redPoint;
    @BindView(R.id.container_gray_point)
    LinearLayout containerGrayPoint;
    //向导图片
    private int[] imgs = new int[]{R.drawable.guide_1, R.drawable.guide_2, R.drawable.guide_3};
    private List<ImageView> views;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //去除标题
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_guide);
        ButterKnife.bind(this);
        //去除状态栏
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
    }

}

初始化ViewPager和数据，动态创建图片

[Java] 纯文本查看 复制代码

public class GuideActivity extends Activity implements ViewPager.OnPageChangeListener {

    private static final String TAG = "GuideActivity";
    @BindView(R.id.vp)
    ViewPager vp;
    @BindView(R.id.bt_start)
    Button btStart;
    @BindView(R.id.red_point)
    View redPoint;
    @BindView(R.id.container_gray_point)
    LinearLayout containerGrayPoint;
    //向导图片
    private int[] imgs = new int[]{R.drawable.guide_1, R.drawable.guide_2, R.drawable.guide_3};
    private List<ImageView> views;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //去除标题
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_guide);
        ButterKnife.bind(this);
        //去除状态栏
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

        initViewPager();

    }


    //初始化ViewPager的数据
    private void initViewPager() {
        views = new ArrayList<>();
        for (int resId : imgs) {
            ImageView iv = new ImageView(this);
            iv.setBackgroundResource(resId);
            views.add(iv);
        }

      }
}

创建适配器，加载图片

[Java] 纯文本查看 复制代码

public class GuideVPAdapter extends PagerAdapter {

    private List<ImageView> views;

    public GuideVPAdapter(List<ImageView> views) {
        this.views = views;
    }

    @Override
    public int getCount() {
        return views.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view = views.get(position);
        container.addView(view);
        return view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
    }
}

绑定Viewpager

[Java] 纯文本查看 复制代码

package com.itheima.zhbj.activity;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
public class GuideActivity extends Activity implements ViewPager.OnPageChangeListener {

    private static final String TAG = "GuideActivity";
    @BindView(R.id.vp)
    ViewPager vp;
    @BindView(R.id.bt_start)
    Button btStart;
    @BindView(R.id.red_point)
    View redPoint;
    @BindView(R.id.container_gray_point)
    LinearLayout containerGrayPoint;
    //向导图片
    private int[] imgs = new int[]{R.drawable.guide_1, R.drawable.guide_2, R.drawable.guide_3};
    private List<ImageView> views;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //去除标题
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_guide);
        ButterKnife.bind(this);
        //去除状态栏
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

        initViewPager();
        initGrayPoint();
    }

    //动态的创建灰色的点
    private void initGrayPoint() {
        for (int resId : imgs) {
            View view = new View(this);
            view.setBackgroundResource(R.drawable.point_gray_bg);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(10,10);
            params.rightMargin = 20;//设置右边距
            containerGrayPoint.addView(view,params);
        }
    }

    //初始化ViewPager的数据
    private void initViewPager() {
        views = new ArrayList<>();
        for (int resId : imgs) {
            ImageView iv = new ImageView(this);
            iv.setBackgroundResource(resId);
            views.add(iv);
        }

        vp.setAdapter(new GuideVPAdapter(views));
    }
}

开始体验按钮

在布局中添加开始体验按钮

[Java] 纯文本查看 复制代码

<?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:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v4.view.ViewPager>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="开始体验"
        android:id="@+id/bt_start"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="60dp"
        android:visibility="gone"
        android:padding="15dp"
        android:textColor="@color/btn_text_selector"
        android:background="@drawable/btn_selector"/>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp">

        <LinearLayout
            android:id="@+id/container_gray_point"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <!--在代码中动态的添加灰色的点-->
        </LinearLayout>
        <!--红色的点-->
        <View
            android:id="@+id/red_point"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/point_red_bg"/>
    </RelativeLayout>


</RelativeLayout>

给ViewPager添加滑动监听

[Java] 纯文本查看 复制代码

public class GuideActivity extends Activity implements ViewPager.OnPageChangeListener {

    private static final String TAG = "GuideActivity";
    @BindView(R.id.vp)
    ViewPager vp;
    @BindView(R.id.bt_start)
    Button btStart;
    @BindView(R.id.red_point)
    View redPoint;
    @BindView(R.id.container_gray_point)
    LinearLayout containerGrayPoint;
    //向导图片
    private int[] imgs = new int[]{R.drawable.guide_1, R.drawable.guide_2, R.drawable.guide_3};
    private List<ImageView> views;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //去除标题
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_guide);
        ButterKnife.bind(this);
        //去除状态栏
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

        initViewPager();
   
    }

      //初始化ViewPager的数据
    private void initViewPager() {
        views = new ArrayList<>();
        for (int resId : imgs) {
            ImageView iv = new ImageView(this);
            iv.setBackgroundResource(resId);
            views.add(iv);
        }

        vp.setAdapter(new GuideVPAdapter(views));
        //设置页面的滑动监听
        vp.addOnPageChangeListener(this);
    }




    //position:当前滑动页面的下标    positionOffset：页面的滑动比率    positionOffsetPixels：页面滑动的实际像素
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
      
    }

    //页面选中的时候调用
    @Override
    public void onPageSelected(int position) {
        if (position == imgs.length - 1) {
            //显示按钮
            btStart.setVisibility(View.VISIBLE);
        } else {
            //隐藏按钮
            btStart.setVisibility(View.GONE);
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

处理ViewPager监听事件

[Java] 纯文本查看 复制代码

/**
 * Created by Apple on 2016/9/23.
 */
public class GuideActivity extends Activity implements ViewPager.OnPageChangeListener {

    private static final String TAG = "GuideActivity";
    @BindView(R.id.vp)
    ViewPager vp;
    @BindView(R.id.bt_start)
    Button btStart;
    @BindView(R.id.red_point)
    View redPoint;
    @BindView(R.id.container_gray_point)
    LinearLayout containerGrayPoint;
    //向导图片
    private int[] imgs = new int[]{R.drawable.guide_1, R.drawable.guide_2, R.drawable.guide_3};
    private List<ImageView> views;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //去除标题
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_guide);
        ButterKnife.bind(this);
        //去除状态栏
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

        initViewPager();

    }

        //初始化ViewPager的数据
    private void initViewPager() {
        views = new ArrayList<>();
        for (int resId : imgs) {
            ImageView iv = new ImageView(this);
            iv.setBackgroundResource(resId);
            views.add(iv);
        }

        vp.setAdapter(new GuideVPAdapter(views));
        //设置页面的滑动监听
        vp.addOnPageChangeListener(this);
    }

    @OnClick(R.id.bt_start)
    public void onClick() {
        //进入主界面
        SPUtils.saveBoolean(this, Constant.KEY_HAS_GUIDE,true);
        Intent intent = new Intent(this,MainActivity.class);
        startActivity(intent);
        finish();
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    //页面选中的时候调用
    @Override
    public void onPageSelected(int position) {
        if (position == imgs.length - 1) {
            //显示按钮
            btStart.setVisibility(View.VISIBLE);
        } else {
            //隐藏按钮
            btStart.setVisibility(View.GONE);
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

给开始按钮添加点击事件

[Java] 纯文本查看 复制代码

public class GuideActivity extends Activity implements ViewPager.OnPageChangeListener {

    private static final String TAG = "GuideActivity";
    @BindView(R.id.vp)
    ViewPager vp;
    @BindView(R.id.bt_start)
    Button btStart;
    @BindView(R.id.red_point)
    View redPoint;
    @BindView(R.id.container_gray_point)
    LinearLayout containerGrayPoint;
    //向导图片
    private int[] imgs = new int[]{R.drawable.guide_1, R.drawable.guide_2, R.drawable.guide_3};
    private List<ImageView> views;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //去除标题
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_guide);
        ButterKnife.bind(this);
        //去除状态栏
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

        initViewPager();
        initGrayPoint();
    }

    //动态的创建灰色的点
    private void initGrayPoint() {
        for (int resId : imgs) {
            View view = new View(this);
            view.setBackgroundResource(R.drawable.point_gray_bg);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(10,10);
            params.rightMargin = 20;//设置右边距
            containerGrayPoint.addView(view,params);
        }
    }

    //初始化ViewPager的数据
    private void initViewPager() {
        views = new ArrayList<>();
        for (int resId : imgs) {
            ImageView iv = new ImageView(this);
            iv.setBackgroundResource(resId);
            views.add(iv);
        }

        vp.setAdapter(new GuideVPAdapter(views));
        //设置页面的滑动监听
        vp.addOnPageChangeListener(this);
    }

    @OnClick(R.id.bt_start)
    public void onClick() {
        //进入主界面
        SPUtils.saveBoolean(this, Constant.KEY_HAS_GUIDE,true);
        Intent intent = new Intent(this,MainActivity.class);
        startActivity(intent);
        finish();
    }



    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }

    //页面选中的时候调用
    @Override
    public void onPageSelected(int position) {
        if (position == imgs.length - 1) {
            //显示按钮
            btStart.setVisibility(View.VISIBLE);
        } else {
            //隐藏按钮
            btStart.setVisibility(View.GONE);
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

开始按钮添加状态选择器

[XML] 纯文本查看 复制代码

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" android:drawable="@drawable/button_red_pressed"/>
    <item android:drawable="@drawable/button_red_normal"/>

</selector>

给按钮添加文字颜色选择器

[XML] 纯文本查看 复制代码

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="#000"/>
    <item android:color="#fff"/>
</selector>

设置状态选择器

[Java] 纯文本查看 复制代码

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="开始体验"
    android:id="@+id/bt_start"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="60dp"
    android:visibility="gone"
    android:padding="15dp"
    android:textColor="@color/btn_text_selector"
    android:background="@drawable/btn_selector"/>

创建红色和灰色的小圆点

添加布局

[XML] 纯文本查看 复制代码

<RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp">

        <LinearLayout
            android:id="@+id/container_gray_point"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <!--在代码中动态的添加灰色的点-->
        </LinearLayout>
        <!--红色的点-->
        <View
            android:id="@+id/red_point"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/point_red_bg"/>
    </RelativeLayout>

初始化小灰点

[Java] 纯文本查看 复制代码

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    //去除标题
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.activity_guide);
    ButterKnife.bind(this);
    //去除状态栏
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

    initViewPager();
    initGrayPoint();
}

//动态的创建灰色的点
private void initGrayPoint() {
    for (int resId : imgs) {
        View view = new View(this);
        view.setBackgroundResource(R.drawable.point_gray_bg);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(10,10);
        params.rightMargin = 20;//设置右边距
        containerGrayPoint.addView(view,params);
    }
}

小红点的移动

小红点移动原理：

1. 获取第一个小灰点的左边距离

              containerGrayPoint.getChildAt(0).getLeft()

2. 获取第二个小灰点的左边距离

              containerGrayPoint.getChildAt(1).getLeft()

3.两点之间的距离 = 第二点的左边距离 - 第一个点的左边距离

              containerGrayPoint.getChildAt(1).getLeft()-llContainer.getChildAt(0).getLeft();

4. 根据移动的百分百，计算小红点当前移动之后的左边距

根据当前的ViewPager移动的索引*小红点移动的距离 + 小红点移动距离 * 滑动百分比

设置ViewPager的滑动监听

[Java] 纯文本查看 复制代码

public class GuideActivity extends Activity implements ViewPager.OnPageChangeListener {

    private static final String TAG = "GuideActivity";
    @BindView(R.id.vp)
    ViewPager vp;
    @BindView(R.id.bt_start)
    Button btStart;
    @BindView(R.id.red_point)
    View redPoint;
    @BindView(R.id.container_gray_point)
    LinearLayout containerGrayPoint;
    //向导图片
    private int[] imgs = new int[]{R.drawable.guide_1, R.drawable.guide_2, R.drawable.guide_3};
    private List<ImageView> views;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //去除标题
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_guide);
        ButterKnife.bind(this);
        //去除状态栏
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

        initViewPager();
        initGrayPoint();
    }

    //动态的创建灰色的点
    private void initGrayPoint() {
        for (int resId : imgs) {
            View view = new View(this);
            view.setBackgroundResource(R.drawable.point_gray_bg);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(10,10);
            params.rightMargin = 20;//设置右边距
            containerGrayPoint.addView(view,params);
        }
    }

    //初始化ViewPager的数据
    private void initViewPager() {
        views = new ArrayList<>();
        for (int resId : imgs) {
            ImageView iv = new ImageView(this);
            iv.setBackgroundResource(resId);
            views.add(iv);
        }

        vp.setAdapter(new GuideVPAdapter(views));
        //设置页面的滑动监听
        vp.addOnPageChangeListener(this);
    }

    @OnClick(R.id.bt_start)
    public void onClick() {
        //进入主界面
        SPUtils.saveBoolean(this, Constant.KEY_HAS_GUIDE,true);
        Intent intent = new Intent(this,MainActivity.class);
        startActivity(intent);
        finish();
    }

    //小灰点之间的宽度
    private int width;

    //position:当前滑动页面的下标    positionOffset：页面的滑动比率    positionOffsetPixels：页面滑动的实际像素
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        MyLogger.i(TAG,"position:"+position+",positionOffset:"+positionOffset+",positionOffsetPixels:"+positionOffsetPixels);

        if(width == 0){
            width = containerGrayPoint.getChildAt(1).getLeft() - containerGrayPoint.getChildAt(0).getLeft();
            MyLogger.i(TAG,"width:"+width);
        }

        //修改小红点与相对布局的左边距
        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) redPoint.getLayoutParams();
        params.leftMargin = (int)(position*width + width*positionOffset);
        redPoint.setLayoutParams(params);
    }

    //页面选中的时候调用
    @Override
    public void onPageSelected(int position) {
        if (position == imgs.length - 1) {
            //显示按钮
            btStart.setVisibility(View.VISIBLE);
        } else {
            //隐藏按钮
            btStart.setVisibility(View.GONE);
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

监听onPageScrolled方法，移动小圆点

[Java] 纯文本查看 复制代码

//position:当前滑动页面的下标    positionOffset：页面的滑动比率    positionOffsetPixels：页面滑动的实际像素
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    MyLogger.i(TAG,"position:"+position+",positionOffset:"+positionOffset+",positionOffsetPixels:"+positionOffsetPixels);

    if(width == 0){
        width = containerGrayPoint.getChildAt(1).getLeft() - containerGrayPoint.getChildAt(0).getLeft();
        MyLogger.i(TAG,"width:"+width);
    }

    //修改小红点与相对布局的左边距
    RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) redPoint.getLayoutParams();
    params.leftMargin = (int)(position*width + width*positionOffset);
    redPoint.setLayoutParams(params);
}

通过首选项记录是否体验过向导、进入主界面

封装sp工具

[Java] 纯文本查看 复制代码

public final class SPUtils {
   
   private final static String name = "config";
   private final static int mode = Context.MODE_PRIVATE;
   
   /**
    * 保存首选项
    * @param context
    * @param key
    * @param value
    */
   public static void saveBoolean(Context context,String key,boolean value){
      SharedPreferences sp = context.getSharedPreferences(name, mode);
      Editor edit = sp.edit();
      edit.putBoolean(key, value);
      edit.commit();
   }
   public static void saveInt(Context context,String key,int value){
      SharedPreferences sp = context.getSharedPreferences(name, mode);
      Editor edit = sp.edit();
      edit.putInt(key, value);
      edit.commit();
   }
   public static void saveString(Context context,String key,String value){
      SharedPreferences sp = context.getSharedPreferences(name, mode);
      Editor edit = sp.edit();
      edit.putString(key, value);
      edit.commit();
   }
   
   
   /**
    * 获取首选项
    * @param context
    * @param key
    * @param defValue
    * @return
    */
   public static boolean getBoolean(Context context,String key,boolean defValue){
      SharedPreferences sp = context.getSharedPreferences(name, mode);
      return sp.getBoolean(key, defValue);
   }
   
   public static int getInt(Context context,String key,int defValue){
      SharedPreferences sp = context.getSharedPreferences(name, mode);
      return sp.getInt(key, defValue);
   }
   
   public static String getString(Context context,String key,String defValue){
      SharedPreferences sp = context.getSharedPreferences(name, mode);
      return sp.getString(key, defValue);
   }

}

记录开启向导界面

[Java] 纯文本查看 复制代码

@onClick(R.id.btn_start)
        public  void onClick() {
                SPUtil.saveBoolean(this,Constant.KEY_HAS_GUIDE,true);
                Intent intent =new Intent(this ,MainActivity.class);
                startActivity(intent);
                finish();
        }

在闪屏界面，动画结束之后，根据记录的首选项，跳转界面

底部tab的实现

布局文件

[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:orientation="vertical"
   >

    <com.itheima.zhbj.view.NoScrollViewPager
        android:id="@+id/tab_vp"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <RadioGroup
        android:id="@+id/rg_tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bottom_tab_bg"
        android:gravity="center_vertical"
        android:orientation="horizontal">
        <RadioButton
            android:id="@+id/rb_home"
            android:drawableTop="@drawable/tab_home_selector"
            android:text="首页"
            android:checked="true"
            style="@style/main_tab_rg_style" />
        <RadioButton
            android:id="@+id/rb_newscener"
            android:drawableTop="@drawable/tab_newscenter_selector"
            android:text="新闻中心"
            style="@style/main_tab_rg_style" />
        <RadioButton
            android:id="@+id/rb_smartservice"
            android:drawableTop="@drawable/tab_smartservice_selector"
            android:text="智慧服务"
            style="@style/main_tab_rg_style" />
        <RadioButton
            android:id="@+id/rb_govaffairs"
            android:drawableTop="@drawable/tab_govaffairs_selector"
            android:text="政务"
            style="@style/main_tab_rg_style" />
        <RadioButton
            android:id="@+id/rb_setting"
            android:drawableTop="@drawable/tab_setting_selector"
            android:text="设置"
            style="@style/main_tab_rg_style" />
    </RadioGroup>

</LinearLayout>

抽取RadioButton相同样式

为每个底部tab添加图片选择器（以tab_home_selector为例）

为每个tab的文字添加颜色选择器（以tab_home_selector为例）

ViewPager+Fragment+FragmentViewPager的实现
布局初始化

初始化ViewPpager

创建5个Fragment（以homeFragment为例）


创建FragmentPagerAdapter，初始化5个Fragment
ViewPager绑定5个Fragment



点击底部的tab切换ViewPager的页面给RadioGrou设置滑动监听

实现onCheckedChanagerListener的回调方法：监听选中事件

让ViewPager切换到对应的Fragment

侧滑菜单的引入
创建侧滑菜单布局

[Java] 纯文本查看 复制代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#0f0">

</LinearLayout>

初始化侧滑菜单

[Java] 纯文本查看 复制代码

//初始化侧滑菜单
private void initSlidingMenu() {
    //创建侧滑菜单对象
    slidingMenu = new SlidingMenu(this);
    //设置菜单从左边滑出
    slidingMenu.setMode(SlidingMenu.LEFT);
    //设置侧滑菜单，默认不可以滑出
    slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_NONE);
    //设置侧滑菜单滑出后，主界面的宽度
    slidingMenu.setBehindOffset(200);
    //以内容的形式添加到Activity
    slidingMenu.attachToActivity(this,SlidingMenu.SLIDING_CONTENT);
    //设置侧滑菜单的布局
    slidingMenu.setMenu(R.layout.activity_main_menu);

禁用ViewPager左右滑动
自定义ViewPager处理拦截事件和处理事件，不对此滑动事件进行拦截，不对此滑动事件处理

[Java] 纯文本查看 复制代码

public class NoScrollViewPager extends ViewPager {
    public NoScrollViewPager(Context context) {
        super(context);
    }

    public NoScrollViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return false;//不拦击事件
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return false;//不处理事件
    }
}

替换V4包的ViewPager


BaseFragment布局的抽取
初始化布局文件

[Java] 纯文本查看 复制代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:background="#fff"
    android:layout_height="match_parent">
    <!--标题-->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/title_red_bg">
        <ImageButton
            android:id="@+id/ib_menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/img_menu"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"/>
        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:textColor="#fff"
            android:textSize="18sp"
            android:text="标题"
            />
        <ImageButton
            android:id="@+id/ib_pic_type"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/icon_pic_grid_type"
            android:layout_centerVertical="true"
            android:layout_marginRight="20dp"
            android:layout_alignParentRight="true"/>
    </RelativeLayout>
    <!--内容-->
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></FrameLayout>
</LinearLayout>

BaseFragment标题的抽取

[Java] 纯文本查看 复制代码

public abstract class BaseFragment extends Fragment {

    @BindView(R.id.ib_menu)
    ImageButton ibMenu;
    @BindView(R.id.tv_title)
    TextView tvTitle;
    @BindView(R.id.ib_pic_type)
    ImageButton ibPicType;
    @BindView(R.id.container)
    FrameLayout container;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_tab_base, container, false);
        ButterKnife.bind(this, view);
        return view;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        initTitle();
    }

    //初始化标题   让每个子类去进行实现
    public abstract void initTitle();

    //设置Menu的显示状态
    public void setIbMenuDisplayState(boolean isShow){
        ibMenu.setVisibility(isShow?View.VISIBLE:View.GONE);
    }
    //设置PicType的显示状态
    public void setIbPicTypeDisplayState(boolean isShow){
        ibPicType.setVisibility(isShow?View.VISIBLE:View.GONE);
    }

    //设置标题内容
    public void setTitle(String title){
        tvTitle.setText(title);
    }

    //创建内容
    public abstract View createContent();

    //向容器里面添加内容
    public void addView(View view){
        //清空原来的内容
        container.removeAllViews();
        //添加内容
        container.addView(view);
    }


    @OnClick(R.id.ib_menu)
    public void onClick() {
        //对于侧滑菜单进行切换
        //目标：获取SlidingMenu -->MainActivity
        ((MainActivity)getActivity()).slidingMenu.toggle();
    }
}

BaseFragment内容的抽取

[Java] 纯文本查看 复制代码

public abstract class BaseFragment extends Fragment {

    @BindView(R.id.ib_menu)
    ImageButton ibMenu;
    @BindView(R.id.tv_title)
    TextView tvTitle;
    @BindView(R.id.ib_pic_type)
    ImageButton ibPicType;
    @BindView(R.id.container)
    FrameLayout container;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_tab_base, container, false);
        ButterKnife.bind(this, view);
        return view;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        initTitle();
    }

    //初始化标题   让每个子类去进行实现
    public abstract void initTitle();

    //设置Menu的显示状态
    public void setIbMenuDisplayState(boolean isShow){
        ibMenu.setVisibility(isShow?View.VISIBLE:View.GONE);
    }
    //设置PicType的显示状态
    public void setIbPicTypeDisplayState(boolean isShow){
        ibPicType.setVisibility(isShow?View.VISIBLE:View.GONE);
    }

    //设置标题内容
    public void setTitle(String title){
        tvTitle.setText(title);
    }

    //创建内容
    public abstract View createContent();

    //向容器里面添加内容
    public void addView(View view){
        //清空原来的内容
        container.removeAllViews();
        //添加内容
        container.addView(view);
    }

}

定义向容器添加内容的方法

[Java] 纯文本查看 复制代码

public abstract class BaseFragment extends Fragment {

    @BindView(R.id.ib_menu)
    ImageButton ibMenu;
    @BindView(R.id.tv_title)
    TextView tvTitle;
    @BindView(R.id.ib_pic_type)
    ImageButton ibPicType;
    @BindView(R.id.container)
    FrameLayout container;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_tab_base, container, false);
        ButterKnife.bind(this, view);
        return view;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        initTitle();
    }

    //初始化标题   让每个子类去进行实现
    public abstract void initTitle();

    //设置Menu的显示状态
    public void setIbMenuDisplayState(boolean isShow){
        ibMenu.setVisibility(isShow?View.VISIBLE:View.GONE);
    }
    //设置PicType的显示状态
    public void setIbPicTypeDisplayState(boolean isShow){
        ibPicType.setVisibility(isShow?View.VISIBLE:View.GONE);
    }

    //设置标题内容
    public void setTitle(String title){
        tvTitle.setText(title);
    }

    //创建内容
    public abstract View createContent();

    //向容器里面添加内容
    public void addView(View view){
        //清空原来的内容
        container.removeAllViews();
        //添加内容
        container.addView(view);
    }


    @OnClick(R.id.ib_menu)
    public void onClick() {
        //对于侧滑菜单进行切换
        //目标：获取SlidingMenu -->MainActivity
        ((MainActivity)getActivity()).slidingMenu.toggle();
    }
}

联网获取数据接口抽取

五个Fragment中，由于首页、新闻中心、智慧服务、政务

需要联网的，因此 抽取一个联网加载数据的行为，定义个联网加载数据的接口。

[Java] 纯文本查看 复制代码

interface BaseLoadNetDataOperator{
       public void loadNetData(String url);
}

让首页、新闻中心、智慧服务、政务去实现。

代码实现

点击menu完成侧滑菜单的切换

给菜单按钮添加点击事件

[Java] 纯文本查看 复制代码

@OnClick(R.id.ib_menu)
public void onClick() {
    //对于侧滑菜单进行切换
    //目标：获取SlidingMenu -->MainActivity
    ((MainActivity)getActivity()).slidingMenu.toggle();
}

控制SlidingMenu的打开和关闭

[Java] 纯文本查看 复制代码

@OnClick(R.id.ib_menu)
public void onClick() {
    //对于侧滑菜单进行切换
    //目标：获取SlidingMenu -->MainActivity
    ((MainActivity)getActivity()).slidingMenu.toggle();
}

不同的Tab页面控制侧滑菜单是否可以滑出
tab切换时，控制slidingMenu的滑出模式

设置SlindingMenu默认不可滑动
注意：这是tab切换时，来控制滑动模式。默认情况下，slidingMenu的滑动模式为可滑出的。因此，在初始化SlindingMenu时，设置默认的不可滑出


加载数据的入口
切换Fragment，联网获取数据

[Java] 纯文本查看 复制代码

public void onCheckedChanged(RadioGroup group, int checkedId) {
    int item = 0;
    switch (checkedId){
        case R.id.rb_home:
            item = 0;
            slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_NONE);//无法滑出侧滑菜单
            break;
        case R.id.rb_newscener:
            item = 1;
            slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
            break;
        case R.id.rb_smartservice:
            item = 2;
            slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
            break;
        case R.id.rb_govaffairs:
            item = 3;
            slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
            break;
        case R.id.rb_setting:
            item = 4;
            slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_NONE);
            break;
    }
    //让上面的ViewPager切换到对应的页面
    tabVp.setCurrentItem(item,false);

    //加载网络数据的入口
    BaseFragment baseFragment = (BaseFragment) fragments.get(item);
    if(baseFragment instanceof BaseLoadNetDataOperator){
        ((BaseLoadNetDataOperator) baseFragment).loadNetData();
    }
}

从服务器上获取新闻中心页的数据
定义常量类

[Java] 纯文本查看 复制代码

public class Constant {

    //是否已经执行完向导
    public final static String KEY_HAS_GUIDE = "key_has_guide";
    //服务器的主机
    public final static String HOST = "http://10.0.2.2:8080/zhbj";

    //新闻中心页面的数据地址
    public final static String NEWSCENTER_URL = HOST + "/categories.json";
}

网络加载数据

[Java] 纯文本查看 复制代码

public class NewsCenterFragment extends BaseFragment implements BaseLoadNetDataOperator {

    private static final String TAG = "NewsCenterFragment";
    private NewsCenterBean newsCenterBean;

    @Override
    public void initTitle() {
        setIbMenuDisplayState(true);
        setIbPicTypeDisplayState(false);
        setTitle("新闻中心");
    }

    @Override
    public View createContent() {
        return null;
    }

    @Override
    public void loadNetData() {
        final String url = Constant.NEWSCENTER_URL;
        OkHttpUtils.get()
                .url(url)
                .build()
                .execute(new StringCallback() {
                    @Override
                    public void onError(Call call, Exception e, int id) {
                        MyToast.show(getActivity(), "获取新闻中心数据失败");
                    }
                    @Override
                    public void onResponse(String response, int id) {
                        MyLogger.i(TAG,response);
                        //把response  == json 转换成对应的数据模型
                        processData(response);
                    }
                });
    }

    //把Json格式的字符串转换成对应的模型对象
    public void processData(String json){
        Gson gson = new Gson();
        newsCenterBean = gson.fromJson(json, NewsCenterBean.class);
        //把数据传递给MainActivity
        ((MainActivity)getActivity()).setNewsCenterMenuBeanList(newsCenterBean.data);
    }
}

把新闻中心的json转换成对应的模型对象
格式化json数据

封装javaBean对象：NewsCenterBean

[Java] 纯文本查看 复制代码

/**
 * Created by Apple on 2016/9/26.
 * 新闻中心对应的模型对象
 */
public class NewsCenterBean {
    public List<NewsCenterMenuBean> data;
    public List<String> extend;
    public int retcode;


    //侧滑菜单对应的分类数据
    public class NewsCenterMenuBean{
        public List<NewsCenterNewsTabBean> children;
        public int id;
        public String title;
        public String url;
        public String url1;
        public String dayurl;
        public String excurl;
        public String weekurl;
        public int type;
    }

    //新闻中心新闻tab的模型
    public class NewsCenterNewsTabBean{
        public int id;
        public String title;
        public String url;
        public int type;
    }
}

使用GSON进行转换

[Java] 纯文本查看 复制代码

public class NewsCenterFragment extends BaseFragment implements BaseLoadNetDataOperator {

    private static final String TAG = "NewsCenterFragment";
    private NewsCenterBean newsCenterBean;

    @Override
    public void initTitle() {
        setIbMenuDisplayState(true);
        setIbPicTypeDisplayState(false);
        setTitle("新闻中心");
    }

    @Override
    public View createContent() {
        return null;
    }

    @Override
    public void loadNetData() {
        final String url = Constant.NEWSCENTER_URL;
        OkHttpUtils.get()
                .url(url)
                .build()
                .execute(new StringCallback() {
                    @Override
                    public void onError(Call call, Exception e, int id) {
                        MyToast.show(getActivity(), "获取新闻中心数据失败");
                    }
                    @Override
                    public void onResponse(String response, int id) {
                        MyLogger.i(TAG,response);
                        //把response  == json 转换成对应的数据模型
                        processData(response);
                    }
                });
    }

    //把Json格式的字符串转换成对应的模型对象
    public void processData(String json){
        Gson gson = new Gson();
        newsCenterBean = gson.fromJson(json, NewsCenterBean.class);
        //把数据传递给MainActivity
        ((MainActivity)getActivity()).setNewsCenterMenuBeanList(newsCenterBean.data);
    }
}

把数据传递给MainActivity的侧滑菜单
在MainActivity中声明保存侧滑菜单的数据

将数据传递给MainActivity

多谢分享