1. 程式人生 > >android學習——實現歡迎介面圖片動畫滑動切換

android學習——實現歡迎介面圖片動畫滑動切換

剛學習的時候想做兩個activity之間滑動切換的效果,就查了幾個部落格寫了之前的一篇“activity實現動畫切換”,現在看來這個功能好水,難看且基本不會有用到的。

但第一次啟動APP歡迎介面滑動進入的效果很常見,所以就查資料寫了這麼一個。

首先要了解一下ViewPager,簡單的說它的的功能就是可以使檢視左右滑動那樣。下面詳細介紹這個效果步驟:

1,在activity_main中載入ViewPager
,其他不需要佈局

<android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
</pre><pre name="code" class="java">
<pre name="code" class="java" style="color: rgb(51, 51, 51); line-height: 26px;"><span style="font-family: Arial;">2,建立幾個layout,用來顯示需要滑動的圖片,我這裡是三個,每個layout中可以做自己需要的佈局,背景圖片設定為自己設計好的,放在drawable資料夾中,我又在右上角加了一個透明且有邊框的“跳過”按鈕,程式碼如下</span>
<pre name="code" class="java"><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/welcome1"
    android:orientation="vertical" >

    <Button
        android:id="@+id/pass1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/shape"
        android:text="@string/welcome_pass"
        android:textColor="#ffffff" />

</RelativeLayout>


其他兩個跟這個一樣,背景圖片換了,button按鈕id換成pass2 和in

3,建立一個WelcomeActivity,裡面的程式碼如下

public class WelcomeActivity extends Activity implements OnClickListener {
<span style="white-space:pre">	</span>private ViewPager mViewPager;
<span style="white-space:pre">	</span>List<View> viewList;


<span style="white-space:pre">	</span>@Override
<span style="white-space:pre">	</span>protected void onCreate(Bundle savedInstanceState) {
<span style="white-space:pre">		</span>super.onCreate(savedInstanceState);
<span style="white-space:pre">		</span>setContentView(R.layout.splash_activity);


<span style="white-space:pre">		</span>
<span style="white-space:pre">		</span>@SuppressWarnings("static-access")
<span style="white-space:pre">		</span>// 用LayoutInflater中的getLayoutInflater載入要顯示的介面
<span style="white-space:pre">		</span>// 獲得 LayoutInflater 例項
<span style="white-space:pre">		</span>LayoutInflater mInflater = getLayoutInflater().from(this);


<span style="white-space:pre">		</span>// 載入要顯示的介面
<span style="white-space:pre">		</span>View v1 = mInflater.inflate(R.layout.welcome1, null);
<span style="white-space:pre">		</span>View v2 = mInflater.inflate(R.layout.welcome2, null);
<span style="white-space:pre">		</span>View v3 = mInflater.inflate(R.layout.welcome3, null);


<span style="white-space:pre">		</span>// 將要分頁顯示的View裝入陣列中
<span style="white-space:pre">		</span>viewList = new ArrayList<View>();
<span style="white-space:pre">		</span>viewList.add(v1);
<span style="white-space:pre">		</span>viewList.add(v2);
<span style="white-space:pre">		</span>viewList.add(v3);


<span style="white-space:pre">		</span>// 例項化ViewPager元件,並設定它的PagerAdapter,在這裡一般需要重寫PagerAdapter,具體設定和重寫見WelcomeActivityAdapter
<span style="white-space:pre">		</span>mViewPager = (ViewPager) findViewById(R.id.viewpager);
<span style="white-space:pre">		</span>mViewPager.setAdapter(new WelcomePagerAdapter(viewList));
<span style="white-space:pre">		</span>mViewPager.setCurrentItem(0);


<span style="white-space:pre">		</span>/*
<span style="white-space:pre">		</span> * 另外一種初始化寫法:
<span style="white-space:pre">		</span> *  // 初始化Adapter 
<span style="white-space:pre">		</span> * private ViewPagerAdapter vpAdapter; 
<span style="white-space:pre">		</span> * 
<span style="white-space:pre">		</span> * vpAdapter = new ViewPagerAdapter(viewList, this); 
<span style="white-space:pre">		</span> * vp = (ViewPager)findViewById(R.id.viewpager); 
<span style="white-space:pre">		</span> * vp.setAdapter(vpAdapter); 
<span style="white-space:pre">		</span> * // 繫結回撥
<span style="white-space:pre">		</span> * vp.setOnPageChangeListener(this);
<span style="white-space:pre">		</span> */


<span style="white-space:pre">		</span>//獲取列表中的每個介面
<span style="white-space:pre">		</span>View view0 = viewList.get(0);
<span style="white-space:pre">		</span>View view1 = viewList.get(1);
<span style="white-space:pre">		</span>View view2 = viewList.get(2);


<span style="white-space:pre">		</span>// 找到介面中的“跳過”按鈕
<span style="white-space:pre">		</span>Button pass1 = (Button) view0.findViewById(R.id.pass1);
<span style="white-space:pre">		</span>Button pass2 = (Button) view1.findViewById(R.id.pass2);
<span style="white-space:pre">		</span>Button in = (Button) view2.findViewById(R.id.in);
<span style="white-space:pre">		</span>
<span style="white-space:pre">		</span>//設定onClick
<span style="white-space:pre">		</span>pass1.setOnClickListener(this);
<span style="white-space:pre">		</span>pass2.setOnClickListener(this);
<span style="white-space:pre">		</span>in.setOnClickListener(this);


<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>//設定onClick方法,點選跳轉到主介面,因為每一個按鈕的點選事件都是進入程式,所以不需要switch了
<span style="white-space:pre">	</span>@Override
<span style="white-space:pre">	</span>public void onClick(View v) {
<span style="white-space:pre">		</span>
<span style="white-space:pre">		</span>Intent intent = new Intent(WelcomeActivity.this, LoginActivity.class);
<span style="white-space:pre">		</span>WelcomeActivity.this.startActivity(intent);
<span style="white-space:pre">		</span>WelcomeActivity.this.finish();
<span style="white-space:pre">	</span>}

4,建立WelcomePagerAdapterActivity,程式碼如下:
//PagerAdapter是viewpager的介面卡,必須繼承它
public class WelcomePagerAdapter extends PagerAdapter {

	//介面列表
	private List<View> mListView;
	public WelcomePagerAdapter(List<View> mListView) {
		super();
		this.mListView = mListView;
	}

	// 銷燬arg1位置的介面
	public void destroyItem(View arg0, int arg1, Object arg2) {
		((ViewGroup) arg0).removeView(mListView.get(arg1));
	}

	@Override
	public void finishUpdate(View arg0) {

	}

	// 獲取當前窗體介面數
	public int getCount() {
		return mListView.size();
	}

	// 初始化arg1位置的介面
	@Override
	public Object instantiateItem(View arg0, int arg1) {
		((ViewGroup) arg0).addView(mListView.get(arg1), 0);
		return mListView.get(arg1);
	}

	// 判斷是否由物件生成介面
	public boolean isViewFromObject(View arg0, Object arg1) {
		return arg0 == (arg1);
	}

	@Override
	public void restoreState(Parcelable arg0, ClassLoader arg1) {

	}

	@Override
	public Parcelable saveState() {
		return null;
	}

	@Override
	public void startUpdate(View arg0) {

	}

}

5,建立一個歡迎介面結束後要進入的Activity,我設定的是一個登陸介面,這個根據自己的需要編寫,下一篇寫,登陸功能的實現。