实战Walker之引导界面的实现分析

最新推荐文章于 2024-07-29 09:59:43 发布

zhang342532

最新推荐文章于 2024-07-29 09:59:43 发布

阅读量266

点赞数

本文链接：https://blog.csdn.net/zhang342532/article/details/51531631

版权

界面效果

通过引导界面，用户能够快速了解应用的主要功能。当划到最后的界面，点击Go进入主界面。

实现过程：

1.设计引导界面整体布局，修改自动生成的activity_guide.xml文件，在布局文件里首先加入ViewPager这个组件，然后加入四个ImageView组件，主要代码如下：

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=".GuideActivity" >

    <android.support.v4.view.ViewPager
        android:id="@+id/vpGuide"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true">
    </android.support.v4.view.ViewPager>
    <!-- 底部的四个圆点 -->
    <LinearLayout 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="40dp">
        <ImageView 
            android:id="@+id/guide_dot1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/bg_point_selected"/>
        <ImageView 
            android:id="@+id/guide_dot2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:background="@drawable/bg_point"/>
        <ImageView 
            android:id="@+id/guide_dot3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:background="@drawable/bg_point"/>
        <ImageView 
            android:id="@+id/guide_dot4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:background="@drawable/bg_point"/>
    </LinearLayout>
</RelativeLayout>

其中bg_point_selected.xml文件如下：

<?xml version="1.0" encoding="utf-8">
<shape xmls:android="http://schemas.android.com/apk/res/android"
      android:shape="oval">
<solid android:color="#427AB7">
<size
     android:height="8dp"
    android:width="8dp"/>
</shape>

bg_point.xml文件如下：

<?xml version="1.0" encoding="utf-8">
<shape xmls:android="http://schemas.android.com/apk/res/android"
      android:shape="oval">
<!--未被选中-->
<solid android:color="@android:color/black"/>
<size<strong>
     </strong>android:height="8dp"
    android:width="8dp"/>
</shape>

2,，定义好切换的布局文件view1_of_pager.xml文件, view2_of_pager.xml文件, view3_of_pager.xml文件, view4_of_pager.xml文件

其中view1_of_pager.xml文件, view2_of_pager.xml文件, view3_of_pager.xml文件三个文件中布局类似，只是背景图片不同

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   <strong> android:background="@drawable/guide_1"</strong>
    android:orientation="vertical" >
    

</LinearLayout>

view4_of_pager.xml文件布局如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/guide_4"
    android:orientation="vertical" >
   <TextView 
       android:id="@+id/tvGo"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentBottom="true"
       android:layout_alignParentRight="true"
       android:layout_marginBottom="16dp"
       android:layout_marginRight="19dp"
       android:background="@drawable/start_select"
       android:layout_gravity="center"
       android:text="Go"
       android:textColor="#ffffff"
       android:textSize="30sp"/>

</RelativeLayout>

其中start_select.xml文件如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/start_before"
        android:state_pressed="false"></item>
    <item android:drawable="@drawable/start_after"
        android:state_pressed="true"></item>
</selector>

start_befor.xml文件如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval">
    <solid android:color="#2362A7"/>
    <size 
        android:height="80dp"
        android:width="80dp"/>
</shape>

3.编写GuideAdapter类 extends PageAdapter

public class GuideAdapter extends PagerAdapter{

	private List<View> views;
	public GuideAdapter(List<View>views){
		this.views=views;
	}
	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return views.size();
	}

	@Override
	public boolean isViewFromObject(View view, Object object) {
		// TODO Auto-generated method stub
		return view == object;
	}
	
	@Override
	public Object instantiateItem(ViewGroup container, int position) {
		// TODO Auto-generated method stub
		container.addView(views.get(position));
		return views.get(position);
	}
	@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
		// TODO Auto-generated method stub
		View view = views.get(position);
		container.removeView(view);
	}
}

4.修改GuideActivity类，代码如下：

public class GuideActivity extends Activity {

	private List<View> guideViews;
	private ViewPager vpGuide;
	private int[] guide_dots={R.id.guide_dot1,R.id.guide_dot2,
			R.id.guide_dot3,R.id.guide_dot4};//4个导航点
	
	private ImageView[] dots;
	private TextView tvGo;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_guide);
		initGuideViews();

                tvGo=(TextView)findViewById(R.id.tvGo);
		initDots();
		setListeners();
	}
	private void setListeners() {
		// TODO Auto-generated method stub
		vpGuide.setOnPageChangeListener(new OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int position) {
				
				for(int i=0;i<guide_dots.length;i++){
					if(position==i){
						dots[i].setImageResource(R.drawable.bg_point_selected);
					}else{
						dots[i].setImageResource(R.drawable.bg_point);
					}
				}
			}
			
			@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
				
			}
		});
		tvGo.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View view) {
				
				Intent intent=new Intent(GuideActivity.this,LoginActivity.class);
				startActivity(intent);
			}
		});
	}
	private void initDots() {
		// TODO Auto-generated method stub
		dots=new ImageView[4];
		for(int i=0;i<dots.length;i++){
			dots[i]=(ImageView) findViewById(guide_dots[i]);
		}
	}
	private void initGuideViews() {
		// TODO Auto-generated method stub
		vpGuide=(ViewPager)findViewById(R.id.vpGuide);
		//准备好切换的view
		guideViews=new ArrayList<View>();
		LayoutInflater layoutInflater=LayoutInflater.from(this);
		guideViews.add(layoutInflater.inflate(R.layout.view1_of_pager, null));
		guideViews.add(layoutInflater.inflate(R.layout.view2_of_pager, null));
		guideViews.add(layoutInflater.inflate(R.layout.view3_of_pager, null));

<span style="white-space:pre">		</span>guideViews.add(layoutInflater.inflate(R.layout.view4_of_pager,null));
		GuideAdapter guideAdapte = new GuideAdapter(guideViews);
		vpGuide.setAdapter(guideAdapter);
	}

	
}