1. Toy模板网首页
  2. > Toy博客

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

9月前 作者：微笑伴你而行 分类：Toy博客 阅读(44) 违法举报

这篇具有很好参考价值的文章主要介绍了Android 顶部标签栏及内容列表的设计与实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

案例演示

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

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控件实现顶部标签栏

案例演示

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

1、配置依赖

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

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实现列表

案例演示

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

1、配置依赖

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

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文章来源地址https://www.toymoban.com/news/detail-417900.html

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

到了这里，关于Android 顶部标签栏及内容列表的设计与实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包