不说闲话,先上 效果图:
不用管,中间的录制菜单栏,那个是夜神模拟器自带的屏幕录制功能。
首先是布局文件:
activity_main.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="#FFFFFF"
android:orientation="vertical">
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="40.0dip"
android:background="#C0C0C0">
<TextView
android:id="@+id/text1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="第一标签"
android:textColor="#000000"
android:textSize="20.0dip" />
<TextView
android:id="@+id/text2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="第二标签"
android:textColor="#000000"
android:textSize="20.0dip" />
<TextView
android:id="@+id/text3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="第三标签"
android:textColor="#000000"
android:textSize="20.0dip" />
</LinearLayout>
<!-- android:scaleType="matrix" -->
<ImageView
android:id="@+id/cursor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/select"
android:contentDescription="@null" />
<android.support.v4.view.ViewPager
android:id="@+id/viewFlipper1"
android:layout_width="match_parent"
android:layout_height="wrap_content"></android.support.v4.view.ViewPager>
</LinearLayout>
view1.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:background="#008"
android:layout_height="match_parent">
</LinearLayout>
view2.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:background="#080"
android:layout_height="match_parent">
</LinearLayout>
view3.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:background="#800"
android:layout_height="match_parent">
</LinearLayout>
三个view之间的区别在于背景颜色不同。
标签页下面会移动的横杠是一个红色的图片:
因为这个图片的长度和一个标签页的长度往往都不一样,所以需要手动设置这个imageView的长度,具体说明看代码:
package com.martsforever.owa.viewpager_example;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.util.DisplayMetrics;
import android.view.Display;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private ViewPager viewPager;// ViewPager定义在xml中
private ImageView underlineView;// 横向下划线
private int currentIndex; // 当前标签位置
List<View> viewPagerItems;//每一页显示的View
int screenWidth;//屏幕宽度
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
}
public void initViews() {
// 初始化每一页的内容
LayoutInflater inflater = LayoutInflater.from(this);
View view1 = inflater.inflate(R.layout.view1, null);
View view2 = inflater.inflate(R.layout.view2, null);
View view3 = inflater.inflate(R.layout.view3, null);
List<View> viewPagerItems = new ArrayList<>();
viewPagerItems.add(view1);
viewPagerItems.add(view2);
viewPagerItems.add(view3);
viewPager = (ViewPager) findViewById(R.id.viewFlipper1);
// 自定义PagerAdapter并设置OnPageChangeListener监听
MyPagerAdapter adapter = new MyPagerAdapter(viewPagerItems);
viewPager.setAdapter(adapter);
viewPager.setOnPageChangeListener(adapter);
// 设置标签页监听
findViewById(R.id.text1).setOnClickListener(this);
findViewById(R.id.text2).setOnClickListener(this);
findViewById(R.id.text3).setOnClickListener(this);
// 获取屏幕宽度
Display display = getWindowManager().getDefaultDisplay();
DisplayMetrics dm = new DisplayMetrics();
display.getMetrics(dm);
screenWidth = dm.widthPixels;
// 设置下划线的宽度
underlineView = (ImageView) findViewById(R.id.cursor);
ViewGroup.LayoutParams params = underlineView.getLayoutParams();
params.width = screenWidth / viewPagerItems.size();
underlineView.setLayoutParams(params);
}
class MyPagerAdapter extends PagerAdapter implements ViewPager.OnPageChangeListener {
private List<View> views;
public MyPagerAdapter(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) {
container.removeView(views.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(views.get(position), 0);
return views.get(position);
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
// 获取每一个标签页所占宽度
int section = screenWidth / views.size();
// currentIndex为上一次滑动所处标签页位置(0,1,2)
Animation animation = new TranslateAnimation(
section * currentIndex, section * position, 0, 0);
// 重新设置当前页
currentIndex = position;
animation.setDuration(250);
// 动画结束后停留在当前所处位置
animation.setFillAfter(true);
underlineView.startAnimation(animation);
Toast.makeText(MainActivity.this,
"您选择了第:" + (currentIndex+1) + "页", Toast.LENGTH_SHORT).show();
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
@Override
public void onClick(View v) {
int index = 0;
switch (v.getId()) {
case R.id.text1:
index = 0;
break;
case R.id.text2:
index = 1;
break;
case R.id.text3:
index = 2;
break;
}
viewPager.setCurrentItem(index);
}
}