閃屏界面的實現分析

實現的效果:


主要代碼及分析:

1.引導界面整體佈局,在佈局文件中首先加入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"
    tools:context=".GuideActivit<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"
    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:id="@+id/linearLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="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_2"
             android:layout_marginLeft="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/bg_point"
            
             />
        <ImageView
            android:id="@+id/guide_3"
            android:layout_marginLeft="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/bg_point"
             />
        <ImageView
            android:id="@+id/guide_4"
             android:layout_marginLeft="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/bg_point"
            />
    </LinearLayout>
</RelativeLayout>y" >
    <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:id="@+id/linearLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="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_2"
             android:layout_marginLeft="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/bg_point"
            />
        <ImageView
            android:id="@+id/guide_3"
            android:layout_marginLeft="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/bg_point"
             />
        <ImageView
            android:id="@+id/guide_4"
             android:layout_marginLeft="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/bg_point"
            />
    </LinearLayout>
</RelativeLayout>

其中bg_point_selected的代碼:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns: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 version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<!-- 未被選中 -->
<solid android:color="@android:color/black" />
<size
android:height="8dp"
android:width="8dp" />    

</shape>

2.切換佈局文件:

view1_of_pager.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="@drawable/guide_2"
    android:orientation="vertical" >
    </LinearLayout>
view2_of_pager.xml文件、view3_of_pager.xml文件與上的代碼相同,只是圖片不同。
view4_of_pager.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:background="@drawable/guide_1"
    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:gravity="center"
      android:text="GO"
      android:textColor="#ffffff"
      android:textSize="30sp"
      />
</RelativeLayout>

3.編寫GuideAdapter類:

package com.example.cl;
import java.util.List;


import android.support.v4.view.PagerAdapter;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
public class GuideAdapter extends PagerAdapter {
	private List<View> views;
	public GuideAdapter(List<View> views) {
		this.views = views;
	}
	@Override
	public int getCount() {
	return  views.size();
	
		
	}
	@Override
	public boolean isViewFromObject(View view, Object object) {
		return view==object;
	}
	@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
		View view=views.get(position);
		container.removeView(view);
	}
	@Override
	public Object instantiateItem(ViewGroup container, int position) {
		container.addView(views.get(position));
		return views.get(position);
	}
	
    
}

<span style="color:#ff0000;">
</span>

這裏特別講一下PageAdapter——PageView的適配器:

適配器想必大家都不莫生,在ListView中也有適配器,listView通過重寫GetView()函數來獲取當前要加載的Item。而PageAdapter不太相同,畢竟PageAdapter是單個VIew的合集。

PageAdapter 必須重寫的四個函數:

  • boolean isViewFromObject(View arg0, Object arg1)
  • int getCount() 
  • void destroyItem(ViewGroup container, int position,Object object)
  • Object instantiateItem(ViewGroup container, int position)
先看看各個函數,我們上面都做了什麼吧:

@Override
	public int getCount() {
	return  views.size();
	
		
	}
getCount():返回要滑動的VIew的個數

@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
		View view=views.get(position);
		container.removeView(view);
	}
destroyItem():從當前container中刪除指定位置(position)的View;

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


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_2,R.id.guide_3,R.id.guide_4};
   private ImageView[] dots;
   private TextView tvGO;
   @Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_guide);
		initGuideViews();
		initDots();
		setListeners();
	}

	private void setListeners() {
	
	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) {

			
		}
	});
	tvGO.setOnClickListener(new OnClickListener() {
		
		@Override
		public void onClick(View arg0) {
			// TODO Auto-generated method stub
			Intent intent=new Intent(GuideActivity.this,LoginActivity.class);
		    startActivity(intent);
		}
	});
}

	private void initDots() {
	
	dots=new ImageView[4];
	for(int i=0;i<dots.length;i++){
		dots[i]=(ImageView) findViewById(guide_dots[i]);
		
	}
	
}

	private void initGuideViews() {
	vpGuide=(ViewPager) findViewById(R.id.vpGuide);
	//準備好切換的view
	guideViews=new ArrayList<View>();
	LayoutInflater layoutInfalter=LayoutInflater.from(this);
	guideViews.add(layoutInfalter.inflate(R.layout.view1_of_pager, null));
	guideViews.add(layoutInfalter.inflate(R.layout.view2_of_pager, null));
	guideViews.add(layoutInfalter.inflate(R.layout.view3_of_pager, null));
	<strong><span style="color:#ff0000;">View view4=layoutInfalter.inflate(R.layout.view4_of_pager, null);
       guideViews.add(view4);
       tvGO=(TextView) view4.findViewById(R.id.tvGO);</span></strong>
	GuideAdapter guideAdapter=new GuideAdapter(guideViews);
	vpGuide.setAdapter(guideAdapter);
}

	

}

以上爲實現閃屏界面的主要代碼,還不完善,繼續加油!!!!

發佈了37 篇原創文章 · 獲贊 7 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章