Android多屏滑动:ViewPager自定义小圆圈标签 仿app初次运行时的导航
浏览数：19 /
时间：2015年06月11日
上文说了多屏滑动基础用法，遗留标签页的问题。纵观App的滑屏体验，标签页无非有三种:一种是每个View对应一个小圆圈，当前View对应的小圆圈颜色和其他不一样。但是所有View的标签在同一时刻都是可见的。如下两张图片所示,这也是本文的效果:
第二种：标签页是类似QQ和微信，只有当前View下有线性标识。其他View么有。效果如下:
第三种：跟第二种类似，但是没有标签页，整个下面的线时同一个颜色，标签就是个RaditoButton来作标识，如下所示：
本文介绍第一种效果，类似app第一次安装后运行显示的导航页。这种ViewPager的标签页实现如下
1、在ViewPager的母布局中，放ImageView来标识，有几个View就对应放几个ImageView。如果希望标签在ViewPager的布局上，母布局就用帧布局。希望标识在View的下方就用其他布局，或者写死View的高度.本例中的布局：
activity_main.xml
<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=".MainActivity" >
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true" >
</android.support.v4.view.ViewPager>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/viewpager"
android:orientation="horizontal" >
<ImageView
android:id="@+id/page_icon_1"
android:layout_width="20dip"
android:layout_height="20dip"
android:layout_weight="1"
android:src="@drawable/page_icon" />
<ImageView
android:id="@+id/page_icon_2"
android:layout_width="20dip"
android:layout_height="20dip"
android:layout_weight="1"
android:src="@drawable/page_icon" />
<ImageView
android:id="@+id/page_icon_3"
android:layout_width="20dip"
android:layout_height="20dip"
android:layout_weight="1"
android:src="@drawable/page_icon" />
</LinearLayout>
</RelativeLayout>2、在Java文件里，给ViewPager设置监听setOnPageChangeListener的onPageSelected(),在View切换时显示动画,下面贴出MainActivity.java的全部代码:
package org.yanzi.testviewpager1;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.PagerTitleStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
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.Button;
import android.widget.ImageView;
import android.widget.Toast;
public class MainActivity extends Activity {
List<View> mViews = new ArrayList<View>();
String[] mTitles = {"页面1", "页面2", "页面3"};
MyPagerAdapter pagerAdapter;
PagerTabStrip pagerTabStrip;
PagerTitleStrip pagerTitleStrip;
ViewPager viewPager;
View view1, view2, view3;
Button btn1, btn2, btn3;
ImageView img1, img2, img3;
BtnListener btnListener;
private int currIndex = -1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initUI();
initPageIcon();
LayoutInflater flater = (LayoutInflater) this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view1 = flater.inflate(R.layout.first_pager_layout, null);
view2 = flater.inflate(R.layout.second_pager_layout, null);
view3 = flater.inflate(R.layout.third_pager_layout, null);
mViews.add(view1);
mViews.add(view2);
mViews.add(view3);
pagerAdapter = new MyPagerAdapter(mViews, mTitles);
viewPager.setAdapter(pagerAdapter);
initBtns();
viewPager.setCurrentItem(1);
currIndex = 1;
img2.setImageResource(R.drawable.page_selected);
/* //设置pagerTabStrip
pagerTabStrip.setTabIndicatorColor(Color.RED);
pagerTabStrip.setTextColor(Color.RED);
pagerTabStrip.setClickable(false);
pagerTabStrip.setTextSpacing(40);
pagerTabStrip.setBackgroundColor(Color.GRAY);
pagerTabStrip.setDrawFullUnderline(true);*/
//ViewPager滑动监听
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
Animation anim = null;
switch(arg0){
case 0:
img1.setImageResource(R.drawable.page_selected);
img2.setImageResource(R.drawable.page_icon);
if(currIndex == (arg0 + 1)){
anim = new TranslateAnimation(arg0 + 1, arg0, 0, 0);
}
break;
case 1:
img2.setImageResource(R.drawable.page_selected);
img1.setImageResource(R.drawable.page_icon);
img3.setImageResource(R.drawable.page_icon);
if(arg0 == (currIndex + 1)){
anim = new TranslateAnimation(arg0 - 1, arg0, 0, 0);
}else if(arg0 == (currIndex - 1)){
anim = new TranslateAnimation(arg0 + 1, arg0, 0, 0);
}
break;
case 2:
img3.setImageResource(R.drawable.page_selected);
img2.setImageResource(R.drawable.page_icon);
if(arg0 == (currIndex + 1)){
anim = new TranslateAnimation(arg0 - 1, arg0, 0, 0);
}
break;
default:break;
}
currIndex = arg0;
anim.setFillAfter(true);
anim.setDuration(300);
showToast("切换至:" + mTitles[arg0]);
}
@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
}
});
}
@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;
}
private void initUI(){
viewPager = (ViewPager)findViewById(R.id.viewpager);
// pagerTabStrip = (PagerTabStrip)findViewById(R.id.pagertab);
}
private void initBtns(){
if(view1 != null){
btn1 = (Button)view1.findViewById(R.id.btn_in_first);
}
if(view2 != null){
btn2 = (Button)view2.findViewById(R.id.btn_in_second);
}
if(view3 != null){
btn3 = (Button)view3.findViewById(R.id.btn_in_third);
}
btnListener = new BtnListener();
btn1.setOnClickListener(btnListener);
btn2.setOnClickListener(btnListener);
btn3.setOnClickListener(btnListener);
}
class BtnListener implements View.OnClickListener{
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
switch (v.getId()){
case R.id.btn_in_first:
showToast("您点击了第一个界面");
break;
case R.id.btn_in_second:
showToast("您点击了第2个界面");
break;
case R.id.btn_in_third:
showToast("您点击了第3个界面");
break;
default:break;
}
}
}
private void showToast(String s){
Toast.makeText(getApplicationContext(), s, Toast.LENGTH_SHORT).show();
}
private void initPageIcon(){
img1 = (ImageView)findViewById(R.id.page_icon_1);
img2 = (ImageView)findViewById(R.id.page_icon_2);
img3 = (ImageView)findViewById(R.id.page_icon_3);
}
}
在initPageIcon()函数里实例化3个ImageView，然后再onCreate()里设置默认显示ViewPager的中间的View:
viewPager.setCurrentItem(1);
currIndex = 1;
img2.setImageResource(R.drawable.page_selected);
接着就是滑动监听,在这里改变标签:
@Override
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
Animation anim = null;
switch(arg0){
case 0:
img1.setImageResource(R.drawable.page_selected);
img2.setImageResource(R.drawable.page_icon);
if(arg0 == (currIndex- 1)){
anim = new TranslateAnimation(arg0 + 1, arg0, 0, 0);
}
break;
case 1:
img2.setImageResource(R.drawable.page_selected);
img1.setImageResource(R.drawable.page_icon);
img3.setImageResource(R.drawable.page_icon);
if(arg0 == (currIndex + 1)){
anim = new TranslateAnimation(arg0 - 1, arg0, 0, 0);
}else if(arg0 == (currIndex - 1)){
anim = new TranslateAnimation(arg0 + 1, arg0, 0, 0);
}
break;
case 2:
img3.setImageResource(R.drawable.page_selected);
img2.setImageResource(R.drawable.page_icon);
if(arg0 == (currIndex + 1)){
anim = new TranslateAnimation(arg0 - 1, arg0, 0, 0);
}
break;
default:break;
}
currIndex = arg0;
anim.setFillAfter(true);
anim.setDuration(300);
showToast("切换至:" + mTitles[arg0]);
}因为三个ImageView在xml都写成默认状态，而currIndex标识切换view前的标签页，arg0表示当前页。以从中间View切换到左边为例，当arg0 = currIndex - 1,就表示从右滑动到了左，anim = new TranslateAnimation(arg0 + 1, arg0, 0, 0);如果切换到的View左右都有View则要设置它左右的view标签到自然态，更多可以参考这个仿微信导航的帖子.
TranslateAnimation是一个移位动画，其实这里不用动画直接ImageView改变也是可以的，不知道为啥上面那个仿微信的链接里为啥用动画。。这里是代码的方式启动一个动画，可以参考 链接1 链接2 。这块比较奇怪的是没有调用startAnimation()这个方法，难道anim.setFillAfter(true)？设置下就ok了么？？？ 待改日仔细研究下动画再给答案。
更多关于动画: 链接
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
