滑动操作是对用户体验非常友好的操作,如何实现呢,下面介绍第一种ViewPager+Fragment实现方式。
首先要准备一个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:orientation="vertical"
android:background="#E5E5E5">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:orientation="horizontal">
<TextView
android:id="@+id/textView01"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="40dp"
android:gravity="center"
android:textColor="#EEE685"
android:background="#FF4040"
android:text="第一页"
/>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#EEDFCC">
</View>
<TextView
android:id="@+id/textView02"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="40dp"
android:textColor="#D1D1D1"
android:gravity="center"
android:text="第二页"/>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#EEDFCC">
</View>
<TextView
android:id="@+id/textView03"
android:layout_width="0dp"
android:layout_weight="1"
android:textColor="#D1D1D1"
android:layout_height="40dp"
android:gravity="center"
android:text="第三页"/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#EEDFCC">
</View>
<LinearLayout
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<ImageView
android:id="@+id/img01"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginBottom="5dp"
android:scaleType="matrix"
android:src="@mipmap/fragment01"/>
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewp_01"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>
然后后台绑定,找到所有的控件,主要的操作是设置适配器,设置偏移量等等,完整代码如下:
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.viewpage);
setview();
}
private void setview() {
textView01 = findViewById(R.id.textView01);
textView01.setOnClickListener(this);
textView02 = findViewById(R.id.textView02);
textView02.setOnClickListener(this);
textView03 = findViewById(R.id.textView03);
textView03.setOnClickListener(this);
fragment01 = new Fragment01();
fragment02 = new Fragment02();
fragment03 = new Fragment03();
mFragmentList.add(fragment01);
mFragmentList.add(fragment02);
mFragmentList.add(fragment03);
mFragmentAdapter = new FragmentAdapter(this.getSupportFragmentManager(), mFragmentList);
vp = findViewById(R.id.viewp_01);
img01 = findViewById(R.id.img01);
vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
//页面在滑动过程中不停触发该方法:position:当前滑动到的位置,positionOffset:偏移量的百分比,positionOffsetPixels:偏移量的数值
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
switch (position) {
case 0:
textView01.setTextColor(android.graphics.Color.parseColor("#ffffff"));
textView02.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
textView03.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
textView01.setBackgroundColor(android.graphics.Color.parseColor("#FF4040"));
textView02.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
textView03.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
//把当前位置传递到动画方法中,进行滑动
movePositionX(0);
break;
case 1:
textView01.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
textView02.setTextColor(android.graphics.Color.parseColor("#ffffff"));
textView03.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
textView01.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
textView02.setBackgroundColor(android.graphics.Color.parseColor("#FF4040"));
textView03.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
//把当前位置传递到动画方法中,进行滑动
movePositionX(1);
break;
case 2:
textView01.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
textView02.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
textView03.setTextColor(android.graphics.Color.parseColor("#ffffff"));
textView01.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
textView02.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
textView03.setBackgroundColor(android.graphics.Color.parseColor("#FF4040"));
//把当前位置传递到动画方法中,进行滑动
movePositionX(2);
}
}
@Override
//当页面的滑动状态改变时该方法会被触发,页面的滑动状态有3个:“0”表示什么都不做,“1”表示开始滑动,“2”表示结束滑动。
public void onPageScrollStateChanged(int state) {
}
});
initPosition();
vp.setAdapter(mFragmentAdapter);
}
private void movePositionX(int toPosition) {
int one = img_wight + offset * 2;// 页面一到页面二移动量
int two = one * 2;// 页卡1 -> 页卡3 偏移量
Log.i("Text", "oneoneone " + one);
//创建一个移动动画,用来实现滑动效果
Animation animation = null;
switch (toPosition) {
case 0:
if (currIndex == 1) {
animation = new TranslateAnimation(one, 0, 0, 0);
} else if (currIndex == 2) {
animation = new TranslateAnimation(two, 0, 0, 0);
}
break;
case 1:
if (currIndex == 0) {
animation = new TranslateAnimation(0, one, 0, 0);
} else if (currIndex == 2) {
animation = new TranslateAnimation(two, one, 0, 0);
}
break;
case 2:
if (currIndex == 0) {
animation = new TranslateAnimation(0, two, 0, 0);
} else if (currIndex == 1) {
animation = new TranslateAnimation(one, two, 0, 0);
}
break;
}
currIndex = toPosition;
animation.setFillAfter(true);// True:图片停在动画结束位置
animation.setDuration(300);
img01.startAnimation(animation);
}
private void initPosition() {
//很明显是通过BitmapFactory.decodeResource()方法获取图片资源的宽度
img_wight = BitmapFactory.decodeResource(getResources(), R.mipmap.fragment01).getWidth();
//看上面注释(01)
DisplayMetrics disp = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(disp);
w = disp.widthPixels;//获取了分辨率的宽度
offset = ((w / 3) - img_wight) / 2;// 计算偏移量
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.textView01:
//绑定viewopager对应的页卡
vp.setCurrentItem(0);
break;
case R.id.textView02:
vp.setCurrentItem(1);
break;
case R.id.textView03:
vp.setCurrentItem(2);
break;
}
}
注意其中的setCurrentItem参数,这和后面的其他控件操作此功能有关。
第二种,NavigationTabbar
这是第三方库,还是比较好用的,具体操作可以上github上下载相关代码。
第三种就是 NavigationTabbar+Fragment了,这种在开发中常见,而且效果不错,
主要代码如下:
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.navigation_fragment);
vp = findViewById(R.id.vp);
navigationAdapter = new NavigationAdapter(getSupportFragmentManager());
vp.setAdapter(navigationAdapter);
vp.setOffscreenPageLimit(3);
initView();
}
private void initView() {
final NavigationTabBar navigationTabBar = (NavigationTabBar) findViewById(R.id.ntb);
String[] colors = getResources().getStringArray(R.array.default_preview);
ArrayList<NavigationTabBar.Model> models = new ArrayList<>();
models.add(new NavigationTabBar.Model
.Builder(getResources().getDrawable(R.drawable.ic_first), Color.parseColor(colors[0]))
.title("Heart")
.build());
models.add(new NavigationTabBar.Model
.Builder(getResources().getDrawable(R.drawable.ic_second), Color.parseColor(colors[1]))
.title("Cup")
.build());
models.add(new NavigationTabBar.Model
.Builder(getResources().getDrawable(R.drawable.ic_third), Color.parseColor(colors[2]))
.title("Diploma")
.build());
navigationTabBar.setModels(models);
navigationTabBar.setViewPager(vp,2);
navigationTabBar.setIsTitled(true);
/*
* 点击事件写在各个fragment中
* */
navigationTabBar.setOnTabBarSelectedIndexListener(new NavigationTabBar.OnTabBarSelectedIndexListener() {
@Override
public void onStartTabSelected(NavigationTabBar.Model model, int index) {
}
@Override
public void onEndTabSelected(NavigationTabBar.Model model, int index) {
vp.setCurrentItem(index, false);
}
});
}
由于比较简单,所以我把代码打包,只需更改manifest启动项即可 ,下载地址如下: