android使用viewpager计算偏移量实现选项卡功能

作者:cf8833 时间:2023-12-06 12:53:02 

本文实例为大家分享了android实现选项卡功能,通过计算偏移量,设置tetxview和imageView的对应值,一些color的值读者自己去补充

实现效果图:

android使用viewpager计算偏移量实现选项卡功能

(1)简单写一个主界面的布局activity_main.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:layout_height="match_parent"
android:clipToPadding="true"
android:fitsSystemWindows="true"
android:background="@color/bg_color">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/bag_gray"
android:orientation="vertical">

<LinearLayout
 android:layout_width="match_parent"
 android:layout_height="36dp"
 android:background="@android:color/white"
 android:orientation="horizontal"
 android:weightSum="3">

<TextView
 android:id="@+id/tab1_tv"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 android:layout_weight="1"
 android:gravity="center"
 android:text="商品"
 android:textColor="@color/title_bag"
 android:textSize="18sp" />

<TextView
 android:id="@+id/tab2_tv"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 android:layout_weight="1"
 android:gravity="center"
 android:text="评价"
 android:textColor="@color/text_color_context"
 android:textSize="18sp" />
 <TextView
 android:id="@+id/tab3_tv"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 android:layout_weight="1"
 android:gravity="center"
 android:text="详情"
 android:textColor="@color/text_color_context"
 android:textSize="18sp" />

</LinearLayout>

<View
 android:layout_width="match_parent"
 android:layout_height="0.5dp"
 android:background="@color/text_color_context" />
<View
 android:id="@+id/cursor"
 android:layout_width="50dp"
 android:layout_height="2dp"
 android:layout_marginLeft="40dp"
 android:layout_marginTop="0dip"
 android:background="@color/title_bag"
 />
<android.support.v4.view.ViewPager
 android:id="@+id/thire_vp"
 android:layout_width="match_parent"
 android:layout_height="match_parent"/>
</LinearLayout>

</LinearLayout>

(2)设置viewpager的适配器:FragmentAdapter


public class FragmentAdapter extends FragmentPagerAdapter {
private ArrayList<Fragment> list;
FragmentManager fm;

public FragmentAdapter(FragmentManager fm, ArrayList<Fragment> list){
super(fm);
this.fm = fm;
this.list = list;
}

@Override
public Fragment getItem(int position) {
return list.get(position);
}

@Override
public int getCount() {
return list.size();
}
}

(3)然后设置三个fragment,因为有三个选项卡,所以我们新建三个fragment,分别是OneFragment、TwoFragment 、ThreeFragment ,布局的话也需要新建三个,跟fragment一一对应,因为布局过于简单,这里就不写了,简单写一点fragment的代码吧


public class OneFragment extends Fragment {

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_one,null);
return view;
}
}

(4)在MainActivity中,设置fragment的适配器,设置显示内容,并且做viewpager的事件监听


public class MainActivity extends FragmentActivity implements ViewPager.OnPageChangeListener,View.OnClickListener{
private TextView tab1Tv;
private TextView tab2Tv;
private TextView tab3Tv;
private View cursor;
private ViewPager thirdVp;

private ArrayList<Fragment> fragmentlist;
private int offset = 0;
private int screenWidth = 0;
private int screenl_3;
private LinearLayout.LayoutParams lp;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_product);

//绑定控件
tab1Tv = (TextView)findViewById(R.id.tab1_tv);
tab2Tv = (TextView)findViewById(R.id.tab2_tv);
tab3Tv = (TextView)findViewById(R.id.tab3_tv);
cursor = (View) findViewById(R.id.cursor);
thirdVp = (ViewPager) findViewById(R.id.thire_vp);

//获取屏幕宽度
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
screenWidth = dm.widthPixels;
screenl_3 = screenWidth/3; //裁剪3分之1
lp = (LinearLayout.LayoutParams)cursor.getLayoutParams();

fragmentlist = new ArrayList<>();
fragmentlist.add(new OneFragment());
fragmentlist.add(new TwoFragment());
fragmentlist.add(new ThreeFragment());

thirdVp.setAdapter(new FragmentAdapter(getSupportFragmentManager(),fragmentlist));
thirdVp.setCurrentItem(0);
thirdVp.setOffscreenPageLimit(2);

thirdVp.setOnPageChangeListener(this);
tab1Tv.setOnClickListener(this);
tab2Tv.setOnClickListener(this);
tab3Tv.setOnClickListener(this);
}

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
offset = (screenl_3-cursor.getLayoutParams().width)/2;
Log.d("TAG", "111----"+position + "--" + positionOffset + "--"
 + positionOffsetPixels);
final float scale = getResources().getDisplayMetrics().density;
if (position == 0){
 lp.leftMargin = (int)(positionOffsetPixels/3)+offset;
}else if(position ==1){
 lp.leftMargin = (int)(positionOffsetPixels/3)+screenl_3+offset;
}
cursor.setLayoutParams(lp);
upTextcolor(position);
}

private void upTextcolor(int position){
if (position==0){
 tab1Tv.setTextColor(getResources().getColor(R.color.title_bag));
 tab2Tv.setTextColor(getResources().getColor(R.color.text_color_context));
 tab3Tv.setTextColor(getResources().getColor(R.color.text_color_context));
}else if(position==1){
 tab1Tv.setTextColor(getResources().getColor(R.color.text_color_context));
 tab2Tv.setTextColor(getResources().getColor(R.color.title_bag));
 tab3Tv.setTextColor(getResources().getColor(R.color.text_color_context));
}else if(position==2){
 tab1Tv.setTextColor(getResources().getColor(R.color.text_color_context));
 tab2Tv.setTextColor(getResources().getColor(R.color.text_color_context));
 tab3Tv.setTextColor(getResources().getColor(R.color.title_bag));
}
}

@Override
public void onPageSelected(int position) {

}

@Override
public void onPageScrollStateChanged(int state) {

}

@Override
public void onClick(View view) {
switch (view.getId()) {
 case R.id.tab1_tv:
 thirdVp.setCurrentItem(0);
 break;
 case R.id.tab2_tv:
 thirdVp.setCurrentItem(1);
 break;
 case R.id.tab3_tv:
 thirdVp.setCurrentItem(2);
 break;
}
}
}

来源:https://blog.csdn.net/cf8833/article/details/79898366

标签:android,viewpager,选项卡
0
投稿

猜你喜欢

  • unity使用socket实现聊天室功能

    2021-08-12 01:57:59
  • C#开发Winform控件之打开文件对话框OpenFileDialog类

    2023-04-19 10:53:16
  • C#键值对容器的介绍

    2023-04-14 12:26:56
  • 用java WebSocket做一个聊天室

    2021-11-30 00:39:55
  • 全面解析Java中的引用类型

    2022-07-15 23:48:07
  • Android RecyclerView的简单使用

    2022-08-07 22:04:23
  • java多线程和并发包入门示例

    2022-05-10 12:29:34
  • Java 事务注解@Transactional回滚(try catch、嵌套)问题

    2021-05-29 17:54:43
  • Spring的IOC控制反转详解

    2023-08-24 02:50:50
  • 解决Properties属性文件中的值有等号和换行的小问题

    2023-09-07 19:22:58
  • Java 8中的18个常用日期处理(收藏)

    2023-03-02 02:01:54
  • 简单谈谈android studio 的单元测试

    2021-08-21 14:52:30
  • Maven build 命令介绍的使用详解

    2023-08-20 18:09:35
  • Spring Bean的线程安全问题

    2023-06-07 17:15:36
  • Java数据结构之稀疏数组的实现与应用

    2023-12-04 22:46:41
  • linux操作系统安装MONO执行C#程序的详解步骤

    2022-10-04 18:20:04
  • java使用OGEngine开发2048

    2023-07-23 06:07:43
  • SpringSecurity实现访问控制url匹配

    2021-11-03 00:18:16
  • C# Web应用调试开启外部访问步骤解析

    2023-04-01 15:24:01
  • java自旋锁和JVM对锁的优化详解

    2022-03-02 07:05:33
  • asp之家 软件编程 m.aspxhome.com