android顶部标签栏的实现

main_Activity.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    android:id="@+id/bottomlinear"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="horizontal"
    android:background="#DCDCDC">
    <Button
        android:id="@+id/btn_first"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:padding="-5dp"
        android:textSize="14sp"
        android:text="专题一"
        android:background="#DCDCDC"
    />
    <Button
        android:id="@+id/btn_second"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:textSize="14sp"
        android:text="专题二"
        android:background="#DCDCDC"/>
    <Button
        android:id="@+id/btn_third"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1.5"
        android:textSize="14sp"
        android:text="这是专题三"
        android:background="#DCDCDC"/>

    <Button
        android:id="@+id/btn_four"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:textSize="14sp"
        android:text="专题四"
        android:background="#DCDCDC"/>
    <Button
        android:id="@+id/btn_fifth"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:textSize="14sp"
        android:text="专题五"
        android:background="#DCDCDC"/>

</LinearLayout>
<LinearLayout
    android:id="@+id/cursorarea"
    android:layout_width="fill_parent"
    android:background="#CDCDCD"
    android:orientation="horizontal"
    android:layout_height="2dp">
    <TextView
        android:id="@+id/txtv_bottom1"
        android:layout_width="0dp"
        android:layout_height="2dp"
        android:layout_weight="1"
        android:background="#ff0000"
        android:visibility="invisible"/>
    <TextView
        android:id="@+id/txtv_bottom2"
        android:layout_width="0dp"
        android:layout_height="2dp"
        android:layout_weight="1"
        android:background="#ff0000"
        android:visibility="invisible"/>
    <TextView
        android:id="@+id/txtv_bottom3"
        android:layout_width="0dp"
        android:layout_height="2dp"
        android:layout_weight="1.5"
        android:background="#ff0000"
        android:visibility="invisible"/>
    <TextView
        android:id="@+id/txtv_bottom4"
        android:layout_width="0dp"
        android:layout_height="2dp"
        android:layout_weight="1"
        android:background="#ff0000"
        android:visibility="invisible"/>
    <TextView
        android:id="@+id/txtv_bottom5"
        android:layout_width="0dp"
        android:layout_height="2dp"
        android:layout_weight="1"
        android:background="#ff0000"
        android:visibility="invisible"/>
</LinearLayout>


<androidx.viewpager.widget.ViewPager
    android:id="@+id/myviewpager"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="12">
</androidx.viewpager.widget.ViewPager>

fragment_tab1.xml其余四个类似

<?xml version="1.0" encoding="utf-8"?>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="第一个页面"/>

FirstFragment.java其它四个类似
package com.example.ruan.dingbiaoqianviewpager;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class FifthFragment extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_tab5,container,false);
}
}

MyPageAdapter。Java

package com.example.ruan.dingbiaoqianviewpager;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import java.util.List;

public class MyPagerAdapter extends FragmentPagerAdapter {
List fragments;
public MyPagerAdapter(@NonNull FragmentManager fm,List fragments) {
super(fm);
this.fragments=fragments;
}

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

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

}

MainActivity.java

package com.example.ruan.dingbiaoqianviewpager;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;

import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements View.OnClickListener, ViewPager.OnPageChangeListener {
    private ViewPager myviewpager;
    //选项卡中的按钮
    private Button btn_first;
    private Button btn_second;
    private Button btn_third;
    private Button btn_four;
    private Button btn_fifth;
    //指示条
    private TextView text_first;
    private TextView text_second;
    private TextView text_third;
    private TextView text_four;
    private TextView text_fifth;
     //下方指示条数组
    private TextView[] textArgs;
    //所有标题按钮的数组
    private Button[] btnArgs;
    //fragment的集合，对应每个子页面
    private ArrayList<Fragment> fragments;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    //初始化布局
    public void initView(){
        myviewpager=(ViewPager)this.findViewById(R.id.myviewpager);
        btn_first=(Button)this.findViewById(R.id.btn_first);
        btn_second=(Button)this.findViewById(R.id.btn_second);
        btn_third=(Button)this.findViewById(R.id.btn_third);
        btn_four=(Button)this.findViewById(R.id.btn_four);
        btn_fifth=(Button)this.findViewById(R.id.btn_fifth);

        //初始化按钮数组
        btnArgs=new Button[]{btn_first,btn_second,btn_third,btn_four,btn_fifth};

        text_first=(TextView)this.findViewById(R.id.txtv_bottom1);
        text_second = (TextView)this.findViewById(R.id.txtv_bottom2);
        text_third = (TextView)this.findViewById(R.id.txtv_bottom3);
        text_four = (TextView)this.findViewById(R.id.txtv_bottom4);
        text_fifth = (TextView)this.findViewById(R.id.txtv_bottom5);

        //初始化指示条数组
        textArgs=new TextView[]{text_first,text_second,text_third,text_four,text_fifth};
        //降低一个指示条设为可见
        textArgs[0].setVisibility(View.VISIBLE);

        btn_first.setOnClickListener(this);
        btn_second.setOnClickListener(this);
        btn_third.setOnClickListener(this);
        btn_four.setOnClickListener(this);
        btn_fifth.setOnClickListener(this);
        //再讲第一个按钮字体设置为红色，表示默认选中第一个
        btn_first.setTextColor(Color.RED);
        //为每个Fragment创建一个对象，放到Fragment集合中去，并通过参数传递个Adapter
        fragments=new ArrayList<>();
        fragments.add(new FirstFragment());
        fragments.add(new SecondFragment());
        fragments.add(new ThirdFragment());
        fragments.add(new ForthFragment());
        fragments.add(new FifthFragment());

        MyPagerAdapter adpter=new MyPagerAdapter(getSupportFragmentManager(),fragments);
        //将装载了数据的adapter设置给ViewPager
        myviewpager.setAdapter(adpter);
        //给myviewpager注册时间监听器
        myviewpager.setOnPageChangeListener(this);

    }

    // 重置所有按钮字体的颜色
    public void resetButtonColor(){
        btn_first.setTextColor(Color.BLACK);
        btn_second.setTextColor(Color.BLACK);
        btn_third.setTextColor(Color.BLACK);
        btn_four.setTextColor(Color.BLACK);
        btn_fifth.setTextColor(Color.BLACK);
    }

    @Override
    public void onClick(View view) {
          for(int i=0;i<btnArgs.length;i++){
              if(view.getId()==btnArgs[i].getId()){
                  myviewpager.setCurrentItem(i);
                  textArgs[i].setVisibility(View.VISIBLE);
              }else{
                  textArgs[i].setVisibility(View.INVISIBLE);
              }
          }
    }



    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    /***
     *onPageSelect会在每次滑动ViewPager的时候触发，所以所有的滑动时的变化都可以在这里定义，比如标题按钮的
     * 颜色随着滑动的变化等
     *
     */

    @Override
    public void onPageSelected(int position) {
       //每次滑动首先重置所有按钮颜色
        resetButtonColor();
        //将滑动到的当前按钮颜色设置为红色
        btnArgs[position].setTextColor(Color.RED);
        //设置响应指示条为红色
        for(int j=0;j<textArgs.length;j++){
            if(position==j){
                textArgs[j].setVisibility(View.VISIBLE);
            }else{
                textArgs[j].setVisibility(View.INVISIBLE);
            }
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}