首页 > 编程学习 > Android 顶部标签栏及内容列表的设计与实现

文章目录

    • 一、使用ViewPager控件实现翻页效果
        • 案例演示
      • 1、主页面添加ViewPager控件
      • 2、创建适配器继承FragmentPagerAdapter
      • 3、为ViewPager对象设置适配器
      • 4、设置ViewPager监听
    • 二、使用TabLayout控件实现顶部标签栏
        • 案例演示
      • 1、配置依赖
      • 2、布局文件加入TabLayout控件
      • 3、MyAdapter修改
      • 4、fragment与titles关联
    • 三、使用RecyclerView实现列表
        • 案例演示
      • 1、配置依赖
      • 2、添加控件
      • 3、自定义适配器
      • 4、对控件进行设置

一、使用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>

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();
    }
}

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);
    }
}

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) {
                //页面滚动状态发生变化调用此方法
            }
        });

二、使用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>

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);
    }
}

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);
    }
}

三、使用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"/>

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);
        }
    }
}

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分"));
    }
}
Copyright © 2010-2022 dgrt.cn 版权所有 |关于我们| 联系方式