1.需求
1.1实现以下功能
1.2 分析一下都有什么要求:
- 可以滑动的页面
- 导航栏,可以选择打开的页面
- 下标,需要随着页面改变而改变
2.实现
2.1使用viewPager,及使用PagerTabStrip,但发现使用PagerTabStrip并不能固定标题,故导航栏自己实现,而页面滑动使用viewpager
2.2主页面布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/tab_bar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal">
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="@string/btn1"
android:background="#fff"/>
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="@string/btn2"
android:background="#fff"/>
<Button
android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="@string/btn3"
android:background="#fff"/>
</LinearLayout>
<!--使用shapeDrawable填充-->
<TextView
android:id="@+id/cursor"
android:layout_width="wrap_content"
android:layout_height="5dp"
android:scaleType="matrix"
android:background="@drawable/rect"
android:clickable="false"/>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</android.support.v4.view.ViewPager>
</LinearLayout>
2.3子页面布局,只是一个TextView ,故不贴了
2.4shapeDrawable填充游标的背景颜色
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 设置填充色 -->
<solid android:color="#FFB90F" />
</shape>
2.5页面滑动监听事件以及按钮的监听事件
//页面滑动监听事件
package com.example.myviewpager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.TextView;
public class MyPageListener implements OnPageChangeListener {
//距离
private int kio;
//移动的view
private TextView view;
//当前页面
private int curPage=0;
public MyPageListener() {
// TODO Auto-generated constructor stub
}
public MyPageListener(TextView view,int kio) {
// TODO Auto-generated constructor stub
this.view = view;
this.kio = kio;
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
/**
fromXDelta:位置变化的起始点X坐标。
toXDelta:位置变化的结束点X坐标。
fromYDelta:位置变化的起始点Y坐标。
toYDelta:位置变化的结束点Y坐标。
**/
@Override
public void onPageSelected(int arg0) {
Animation am = new TranslateAnimation(curPage*kio, arg0*kio , 0, 0);
am.setDuration(300);
am.setFillAfter(true);
view.startAnimation(am);
curPage = arg0;
}
}
//按钮监听事件
package com.example.myviewpager;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
public class BtnListener implements OnClickListener {
private ViewPager pager;
public BtnListener() {
// TODO Auto-generated constructor stub
}
public BtnListener(ViewPager v)
{
this.pager = v;
}
public void onClick(View v) {
String text = ((Button)v).getText().toString();
if(text.equals("btn1"))
{
pager.setCurrentItem(0);
}
if(text.equals("btn2"))
{
pager.setCurrentItem(1);
}
if(text.equals("btn3"))
{
pager.setCurrentItem(2);
}
}
}
2.6主activity
public class MainActivity extends Activity {
private Button btn1,btn2,btn3;
private ViewPager vPager;
private List<View> vList;
private TextView cursor;
private MyPageListener pageListener;
private BtnListener btnListener;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initButton();
vList = new ArrayList<View>();
vPager = (ViewPager)findViewById(R.id.viewpager);
vList.add(LayoutInflater.from(this).inflate(R.layout.view1_layout, null));
vList.add(LayoutInflater.from(this).inflate(R.layout.view2_layout, null));
vList.add(LayoutInflater.from(this).inflate(R.layout.view3_layout, null));
MyViewPagerAdapter adapter = new MyViewPagerAdapter(vList);
vPager.setAdapter(adapter);
pageListener = new MyPageListener(cursor,getScreenWidth()/3);
vPager.setOnPageChangeListener(pageListener);
btnListener = new BtnListener(vPager);
btn1.setOnClickListener(btnListener);
btn2.setOnClickListener(btnListener);
btn3.setOnClickListener(btnListener);
}
//初始化导航栏
public void initButton()
{
btn1 = (Button)findViewById(R.id.btn1);
btn2 = (Button)findViewById(R.id.btn2);
btn3 = (Button)findViewById(R.id.btn3);
cursor = (TextView)findViewById(R.id.cursor);
btn1.setWidth(getScreenWidth()/3);
btn2.setWidth(getScreenWidth()/3);
btn3.setWidth(getScreenWidth()/3);
cursor.setWidth(getScreenWidth()/3);
}
public int getScreenWidth()
{
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
int screenW = dm.widthPixels;// 获取分辨率宽度
return screenW;
}
@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;
}
}