Android 顶部标签栏及内容列表的设计与实现

一、使用ViewPager控件实现翻页效果

案例演示

1、主页面添加ViewPager控件

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
        
LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2、创建适配器继承FragmentPagerAdapter

在适配器类中创建构造方法，传入FragmentManager对象及放入ViewPager的Fragment对象集合
MyAdapter.java

public class MyAdapter extends FragmentPagerAdapter {
    private List<Fragment> fragmentList;

    public MyAdapter(@NonNull FragmentManager fm, List<Fragment> list) {
        super(fm);
        this.fragmentList=list;
    }
    //获取当前滑动到fragment对象
    @NonNull
    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }
    //获取fragment个数
    @Override
    public int getCount() {
        return fragmentList.size();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3、为ViewPager对象设置适配器

1. 准备Fragment集合
2. 创建MyAdapter适配器

MainActivity.java

public class MainActivity extends AppCompatActivity {
    private ViewPager viewPager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager=findViewById(R.id.viewpager);
        //准备fragment集合
        List<Fragment> list=new ArrayList<>();
        list.add(new Fragment1());
        list.add(new Fragment2());
        list.add(new Fragment3());
        //创建MyAdapter对象
        MyAdapter myAdapter=new MyAdapter(getSupportFragmentManager(),list);
        //设置Adapter
        viewPager.setAdapter(myAdapter);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

4、设置ViewPager监听

• onPageScrolled()方法在页面滑动时调用，在滑动停止之前，会一直调用此方法，第一个参数为当前页面，即单机滑动的页面，第二个参数是当前页面偏移的百分比，第三个参数是当前页面便宜的像素的位置
• onPageSelected()方法在页面滑动结束后调用，参数position是当前选中页面的位置
• onPageScrollStateChanged()方法在页面滑动状态改变时调用，参数state有3个值;SCROLL_STATE_DRAGCING表示用户手指按在屏幕上并且开始拖动的状态、SCROLL_STATE_IDLE表示滑动动画做完的状态、SCROLL_STATE_SETTLING表示手指离开屏幕的状态。

        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                //页面滑动调用此方法
            }

            @Override
            public void onPageSelected(int position) {
                //滑动到某个页面调用此方法
  				Toast.makeText(MainActivity.this, "这是第"+(position+1)+"个fragment", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                //页面滚动状态发生变化调用此方法
            }
        });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

二、使用TabLayout控件实现顶部标签栏

案例演示

1、配置依赖

2、布局文件加入TabLayout控件

• 选中标题颜色 app:tabSelectedTextColor=“@color/red”
• 标签文字下方指示器颜色 app:tabIndicatorColor=“@color/red”
• 标签默认字体颜色 app:tabTextColor=“@color/black”

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <com.google.android.material.tabs.TabLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/teal_200"
        app:tabIndicatorColor="@color/red"
        app:tabSelectedTextColor="@color/red"
        app:tabTextColor="@color/black"/>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3、MyAdapter修改

添加存储标题的集合，修改构造方法，重写getPageTitle（）方法返回对应的fragment标签

public class MyAdapter extends FragmentPagerAdapter {
    private List<Fragment> fragmentList;
    private List<String> titles;

    public MyAdapter(@NonNull FragmentManager fm, List<Fragment> list,List<String> titles) {
        super(fm);
        this.fragmentList=list;
        this.titles=titles;
    }
    //获取当前滑动到fragment对象
    @NonNull
    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }
    //获取fragment个数
    @Override
    public int getCount() {
        return fragmentList.size();
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return titles.get(position);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

4、fragment与titles关联

关联方法tabLayout.setupWithViewPager(viewPager)

public class MainActivity extends AppCompatActivity {
    private TabLayout tabLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout=findViewById(R.id.tableLayout);
        //关联tablaLayout和viewPager
        tabLayout.setupWithViewPager(viewPager);
        //准备titles集合
        List<String> titles=new ArrayList<>();
        titles.add("f1");
        titles.add("f2");
        titles.add("f3");
        //创建MyAdapter对象
        MyAdapter myAdapter=new MyAdapter(getSupportFragmentManager(),list,titles);
        //设置Adapter
        viewPager.setAdapter(myAdapter);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

三、使用RecyclerView实现列表

案例演示

1、配置依赖

2、添加控件

我们用RecyclerView控件来代替ListView控件，所以我们在activity_main.xml中将其替换

intergral_activity

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
1
2
3
4

3、自定义适配器

1. onCreateViewHolder（）：创建整个布局的视图持有者
2. onBindViewHolder（）：绑定每项的持有者
3. getItemCount（）：获得列表项数目

LinearAdapter.java

public class LinearAdapter extends RecyclerView.Adapter {
    private List<Item> dataList;
    private LayoutInflater inflater;
    private Context context;

    public LinearAdapter(List<Item> dataList, Context context) {
        inflater=LayoutInflater.from(context);
        this.dataList = dataList;
        this.context = context;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        //加载布局列表
        View view=inflater.inflate(R.layout.item_list,parent,false);
        ViewHolder holder=new ViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, @SuppressLint("RecyclerView") int position) {
        ViewHolder Holder= (ViewHolder) holder;
        Item item=dataList.get(position);
        //为列表项设置内容
        Holder.t1.setText(item.getTop_text());
        Holder.t2.setText(item.getBelow_text());
        //添加列表项上的按钮点击事件
        Holder.b1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                switch (position){
                    case 3:
                        Toast.makeText(context, "每日答题被点击", Toast.LENGTH_SHORT).show();
                        Intent intent =new Intent(context,QuestionActivity.class);
                        context.startActivity(intent);
                        break;
                }
            }
        });
    }

    @Override
    public int getItemCount() {
        return dataList==null ? 0: dataList.size();
    }
    //创建viewholder对象用于获取控件
    public class ViewHolder extends RecyclerView.ViewHolder{
        private TextView t1,t2;
        private Button b1;
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            t1=itemView.findViewById(R.id.tv_name);
            t2=itemView.findViewById(R.id.tv_describe);
            b1=itemView.findViewById(R.id.tv_button);
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

4、对控件进行设置

IntegralActivity.java

public class IntegralActivity extends AppCompatActivity {

    public RecyclerView recyclerView;
    public List<Item> list;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.intergral_activity);
        //准备数据
        initData();
        //找到对应的控件
        recyclerView=findViewById(R.id.recyclerview);
        //创建线形布局管理器
        LinearLayoutManager manager=new LinearLayoutManager(this);
        //设置线形布局的方向为垂直
        manager.setOrientation(RecyclerView.VERTICAL);
        //设置布局管理器
        recyclerView.setLayoutManager(manager);
        //创建适配器对象
        LinearAdapter adapter=new LinearAdapter(list,this);
        recyclerView.setAdapter(adapter);
        //添加列表项分割线
        recyclerView.addItemDecoration(new DividerItemDecoration(this,LinearLayoutManager.VERTICAL));
    }
    public void initData(){
        list=new ArrayList<>();
        list.add(new Item("登入","1/分首次登入"));
        list.add(new Item("市政学习","1/分每日有效阅读、播报一篇"));
        list.add(new Item("视听学习","1/分每日有效视听、观看一个"));
        list.add(new Item("每日答题","1/分每组答题答对1题积1分"));
        list.add(new Item("挑战答题","每日仅前两句得分，每日上限5分"));
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33