02-引导界面的搭建
上一篇我们实现了Splash界面的搭建及判断是否第一次进入应用程序的不同界面跳转操作
接下来我们进行对引导界面的搭建及其方法实现
1.界面切换底部小圆点布局设计 guide.xml
<span style="font-size:14px;"><?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:background="@android:color/white"
>
<android.support.v4.view.ViewPager
android:id="@+id/vPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<LinearLayout
android:id="@+id/ll_yuandian"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="5.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="8dip"
android:src="@drawable/dots" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="8dip"
android:src="@drawable/dots" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="8dip"
android:src="@drawable/dots" />
</LinearLayout>
</RelativeLayout></span>
2.第一个引导界面和最后一个引导界面Button按钮的布局
（我们需要将这俩个按钮先设置为隐藏）
<?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:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<Button
android:visibility="gone"
android:id="@+id/bt_splash_jump"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:padding="10dp"
android:background="@drawable/dg_button_cancel_normal"
android:text="跳过"
android:textSize="15sp"/>
<Button
android:visibility="gone"
android:id="@+id/go_home"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="50.0dp"
android:background="@drawable/dg_button_cancel_normal"
android:clickable="true"
android:padding="15.0dip"
android:text="立即体验"/>
</RelativeLayout>
3.GuideActivity代码 GuideActivity.java
<span style="color:#333333;">package rain.zhihuixian; import android.app.Activity; import android.os.Bundle; import android.support.v4.view.ViewPager; import android.view.LayoutInflater; import android.view.View; import android.widget.ImageView; import android.widget.LinearLayout; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; /** * Created by:Rain on 2016/2/20 19:40 * E-mail: [email protected] * Url: http://blog.csdn.net/sinat_33680954 * 签名: 通过改变自我适应万变的世界 ---Rain */ public class GuideActivity extends Activity { private List<View> views; //记录当前选中位置 private int currentIndex; //底部小圆点图片 private ImageView[] dots; private Map<Integer, View> viewMap = new HashMap<Integer, View>(); //引导图片资源 private int[] image_splashs = { R.drawable.splash01, R.drawable.splash02, R.drawable.splash03 }; private LinearLayout mYuandian; private ViewPager mPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.guide); initView(); initDots(); } /** * 初始化原点 */ private void initDots() { mYuandian = (LinearLayout) findViewById(R.id.ll_yuandian); dots = new ImageView[views.size()]; //循环获取小圆点图片 for (int i = 0; i < image_splashs.length; i++) { dots[i] = (ImageView) mYuandian.getChildAt(i); //初始化所有想都可以使用 dots[i].setEnabled(true); //设置位置tag dots[i].setTag(i); } currentIndex = 0; //选中状态设置为白色 dots[currentIndex].setEnabled(false); } private void setCurrentDot(int postion) { if (postion < 0 || postion > views.size() - 1 || currentIndex == postion) { return; } dots[postion].setEnabled(false); dots[currentIndex].setEnabled(true); currentIndex = postion; } /** * 初始化控件 */ private void initView() { views = new ArrayList<View>(); for(int i=0;i< image_splashs.length;i++) { View view = getView(i,image_splashs[i]); views.add(view); } mPager = (ViewPager) findViewById(R.id.vPager); mPager.setAdapter(</span><span style="color:#ff0000;">new Myadapter(views,this)</span><span style="color:#333333;">); //绑定回调，监听viewpager界面切换操作 mPager.setOnPageChangeListener(onPageChangeListener); } private View getView(int i, int image_splash) { View rowView = this.viewMap.get(i); if (rowView == null) { LayoutInflater inflater = this.getLayoutInflater(); rowView = inflater.inflate(R.layout.guide_item, null); ImageView image_item = (ImageView)rowView.findViewById(R.id.image); image_item.setBackgroundResource(image_splash); viewMap.put(i, rowView); } return rowView; } /** * ViewPager界面切换监听 */ ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.OnPageChangeListener() { //滑动的时候调用的方法 @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } //当界面切换完调用的方法 @Override public void onPageSelected(int position) { //设置底部小圆点状态 setCurrentDot(position); } //滑动状态改变的时候调用的方法 @Override public void onPageScrollStateChanged(int state) { } }; } </span>
4.MyAdapter代码
package rain.zhihuixian; import android.content.Intent; import android.support.v4.view.PagerAdapter; import android.view.View; import android.view.ViewGroup; import android.widget.Button; import java.util.List; import rain.Utils.Contants; import rain.Utils.SharedPreferencesUtil; /** * Created by:Rain on 2016/2/20 20:38 * E-mail: [email protected] * Url: http://blog.csdn.net/sinat_33680954 * 签名: 通过改变自我适应万变的世界 ---Rain */ public class Myadapter extends PagerAdapter { private List<View> views; private GuideActivity guideActivity; private Button mSplashjump; private Button mHome; public Myadapter(List<View> views, GuideActivity guideActivity) { this.views = views; this.guideActivity = guideActivity; } @Override public int getCount() { return views.size(); } //判断viewpager页面的view是否与object一致 @Override public boolean isViewFromObject(View view, Object object) { return view == object; } //添加viewpager条目，初始化position位置的界面 @Override public Object instantiateItem(ViewGroup container, int position) { container.addView(views.get(position), 0); if (position == 0){ mSplashjump = (Button) container.findViewById(R.id.bt_splash_jump); mSplashjump.setVisibility(View.VISIBLE); mSplashjump.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { setGuide(); goHome(); } }); } if (position == views.size()-1){ mHome = (Button) container.findViewById(R.id.go_home); mHome.setVisibility(View.VISIBLE); mHome.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { setGuide(); goHome(); } }); } return views.get(position); } //销毁viewpager条目 @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } protected void goHome() { Intent intent = new Intent(guideActivity,HomeActivity.class); guideActivity.startActivity(intent); guideActivity.finish(); } //设置已经引导过了，下次启动不用再次引导 protected void setGuide(){ SharedPreferencesUtil.saveBoolean(guideActivity.getApplication(),Contants.ISFIRSTENTER,false); } }
5.效果图