最近一直在苦學android,看到好的UI互動界面真是挖幹心思也要想弄明怎麼實作的。正好滑動翻頁的UI界面幾乎比比皆是,恰巧從網絡上擷取相關知識的總結學習一下,今天就把學到的成果彙總一下。
其實有很多方法都能實作滑動翻頁,這裡也采用了最簡單的方法。利用實作ViewPager.OnPageChangeListener接口來實作滑動。
廢話不多說看看效果圖吧。
主窗體布局activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/mainweixin"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#eee"
android:orientation="vertical" >
<RelativeLayout
android:id="@+id/main_bottom"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_alignParentBottom="true"
android:background="@drawable/bottom_bar"
android:orientation="vertical" >
<ImageView
android:id="@+id/img_tab_now"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:scaleType="matrix"
android:src="@drawable/tab_bg" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:paddingBottom="2dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="vertical" >
<ImageView
android:id="@+id/img_weixin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:scaleType="matrix"
android:src="@drawable/tab_weixin_pressed" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="微信"
android:textColor="#fff"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="vertical" >
<ImageView
android:id="@+id/img_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:scaleType="matrix"
android:src="@drawable/tab_address_normal" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="通訊錄"
android:textColor="#fff"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="vertical" >
<ImageView
android:id="@+id/img_friends"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:scaleType="matrix"
android:src="@drawable/tab_find_frd_normal" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="朋友們"
android:textColor="#fff"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="vertical" >
<ImageView
android:id="@+id/img_settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:scaleType="matrix"
android:src="@drawable/tab_settings_normal" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="設定"
android:textColor="#fff"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="@id/main_bottom"
android:layout_alignParentTop="true"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="@+id/tabpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" >
</android.support.v4.view.ViewPager>
</LinearLayout>
</RelativeLayout>
各個page的布局隻舉一個微信page的例子main_tab_weixin.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#fcfcfc"
android:orientation="vertical" >
<RelativeLayout
android:id="@+id/title"
android:layout_width="fill_parent"
android:layout_height="45dp"
android:background="@drawable/title_bar"
android:gravity="center_vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="通訊錄"
android:textColor="#ffffff"
android:textSize="20sp" />
</RelativeLayout>
<TextView
android:id="@+id/main_tab_weixin_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="這是一個通訊錄清單的首頁面"
android:textSize="70dp" />
</LinearLayout>
代碼實作部分:
package com.icedcap.weixinuidemo;
import java.util.ArrayList;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Display;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.PopupWindow;
public class MainActivity extends Activity {
private ViewPager mTabPager;
private ImageView mTabImg;// 動畫圖檔
private ImageView mTab1, mTab2, mTab3, mTab4;
private int zero = 0;// 動畫圖檔偏移量
private int currIndex = 0;// 目前頁卡編号
private int one;// 單個水準動畫位移
private int two;
private int three;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
flipPage();
}
private void initView() {
mTabPager = (ViewPager) findViewById(R.id.tabpager);
// set滑動翻頁監聽
mTabPager.setOnPageChangeListener(new MyOnPageChangeListener());
mTab1 = (ImageView) findViewById(R.id.img_weixin);
mTab2 = (ImageView) findViewById(R.id.img_address);
mTab3 = (ImageView) findViewById(R.id.img_friends);
mTab4 = (ImageView) findViewById(R.id.img_settings);
mTabImg = (ImageView) findViewById(R.id.img_tab_now);
// set底部imageview的onclicklistener
mTab1.setOnClickListener(new MyOnClickListener(0));
mTab2.setOnClickListener(new MyOnClickListener(1));
mTab3.setOnClickListener(new MyOnClickListener(2));
mTab4.setOnClickListener(new MyOnClickListener(3));
}
private void flipPage() {
Display currDisplay = getWindowManager().getDefaultDisplay();// 擷取螢幕目前分辨率
int displayWidth = currDisplay.getWidth();
int displayHeight = currDisplay.getHeight();
one = displayWidth / 4; // 設定水準動畫平移大小
two = one * 2;
three = one * 3;
// 将要分頁顯示的View裝入數組中
LayoutInflater mLi = LayoutInflater.from(this);
View view1 = mLi.inflate(R.layout.main_tab_weixin, null);
View view2 = mLi.inflate(R.layout.main_tab_address, null);
View view3 = mLi.inflate(R.layout.main_tab_friends, null);
View view4 = mLi.inflate(R.layout.main_tab_settings, null);
// 每個頁面的view資料
final ArrayList<View> views = new ArrayList<View>();
views.add(view1);
views.add(view2);
views.add(view3);
views.add(view4);
// 填充ViewPager的資料擴充卡
PagerAdapter mPagerAdapter = new PagerAdapter() {
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public int getCount() {
return views.size();
}
@Override
public void destroyItem(View container, int position, Object object) {
((ViewPager) container).removeView(views.get(position));
}
@Override
public Object instantiateItem(View container, int position) {
((ViewPager) container).addView(views.get(position));
return views.get(position);
}
};
mTabPager.setAdapter(mPagerAdapter);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
/**
* 頭标點選監聽
*/
public class MyOnClickListener implements View.OnClickListener {
private int index = 0;
public MyOnClickListener(int i) {
index = i;
}
@Override
public void onClick(View v) {
mTabPager.setCurrentItem(index);
}
};
/**
* 頁卡切換監聽(原作者:D.Winter)
*/
public class MyOnPageChangeListener implements OnPageChangeListener {
@Override
public void onPageSelected(int arg0) {
Animation animation = null;
switch (arg0) {
case 0:
mTab1.setImageDrawable(getResources().getDrawable(
R.drawable.tab_weixin_pressed));
if (currIndex == 1) {
animation = new TranslateAnimation(one, 0, 0, 0);
mTab2.setImageDrawable(getResources().getDrawable(
R.drawable.tab_address_normal));
} else if (currIndex == 2) {
animation = new TranslateAnimation(two, 0, 0, 0);
mTab3.setImageDrawable(getResources().getDrawable(
R.drawable.tab_find_frd_normal));
} else if (currIndex == 3) {
animation = new TranslateAnimation(three, 0, 0, 0);
mTab4.setImageDrawable(getResources().getDrawable(
R.drawable.tab_settings_normal));
}
break;
case 1:
mTab2.setImageDrawable(getResources().getDrawable(
R.drawable.tab_address_pressed));
if (currIndex == 0) {
animation = new TranslateAnimation(zero, one, 0, 0);
mTab1.setImageDrawable(getResources().getDrawable(
R.drawable.tab_weixin_normal));
} else if (currIndex == 2) {
animation = new TranslateAnimation(two, one, 0, 0);
mTab3.setImageDrawable(getResources().getDrawable(
R.drawable.tab_find_frd_normal));
} else if (currIndex == 3) {
animation = new TranslateAnimation(three, one, 0, 0);
mTab4.setImageDrawable(getResources().getDrawable(
R.drawable.tab_settings_normal));
}
break;
case 2:
mTab3.setImageDrawable(getResources().getDrawable(
R.drawable.tab_find_frd_pressed));
if (currIndex == 0) {
animation = new TranslateAnimation(zero, two, 0, 0);
mTab1.setImageDrawable(getResources().getDrawable(
R.drawable.tab_weixin_normal));
} else if (currIndex == 1) {
animation = new TranslateAnimation(one, two, 0, 0);
mTab2.setImageDrawable(getResources().getDrawable(
R.drawable.tab_address_normal));
} else if (currIndex == 3) {
animation = new TranslateAnimation(three, two, 0, 0);
mTab4.setImageDrawable(getResources().getDrawable(
R.drawable.tab_settings_normal));
}
break;
case 3:
mTab4.setImageDrawable(getResources().getDrawable(
R.drawable.tab_settings_pressed));
if (currIndex == 0) {
animation = new TranslateAnimation(zero, three, 0, 0);
mTab1.setImageDrawable(getResources().getDrawable(
R.drawable.tab_weixin_normal));
} else if (currIndex == 1) {
animation = new TranslateAnimation(one, three, 0, 0);
mTab2.setImageDrawable(getResources().getDrawable(
R.drawable.tab_address_normal));
} else if (currIndex == 2) {
animation = new TranslateAnimation(two, three, 0, 0);
mTab3.setImageDrawable(getResources().getDrawable(
R.drawable.tab_find_frd_normal));
}
break;
}
currIndex = arg0;
animation.setFillAfter(true);// True:圖檔停在動畫結束位置
animation.setDuration(150);
mTabImg.startAnimation(animation);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
}
}
源碼下載下傳位址: http://download.csdn.net/detail/icedcap/6997347