【Android】Tab切换布局与监听

实验3  切换面包界面设计

一、实验目的

1. 掌握各种高级UI控件的基本使用;

2. 能够实现Tab切换效果。

二、实验任务

1. 根据原型图设计界面;

2. 实现Tab切换;

三、实验内容与要求

3.1 界面设计:

   (1)使用线性布局实现界面的基本布局;

   (2)使用不同的Tab实现方式实现tab的布局。

3.2 Tab切换

   (1)监听Tab变化事件;

   (2)切换对应的页面内容;

四、实现效果

显示界面

隐藏界面

移除界面

五、代码实现 

Fragment

package com.example.shiyan3.fragment;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.shiyan3.R;

public class FirstFG extends Fragment {
    // TODO: Rename parameter arguments, choose names that match
    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
    private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";

    // TODO: Rename and change types of parameters
    private String mParam1;
    private String mParam2;
    public FirstFG() {
        // Required empty public constructor
    }


    // TODO: Rename and change types and number of parameters
    public static FirstFG newInstance(String param1, String param2) {
        FirstFG fragment = new FirstFG();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, param1);
        args.putString(ARG_PARAM2, param2);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParam1 = getArguments().getString(ARG_PARAM1);
            mParam2 = getArguments().getString(ARG_PARAM2);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_firstfg, container, false);
    }
}

主界面

package com.example.shiyan3;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import com.example.shiyan3.fragment.FirstFG;

public class  MainActivity extends AppCompatActivity {
    FragmentManager fragmentManager;
    FragmentTransaction fragmentTransaction;
    FirstFG fragment;
    Button badd,bremove,bshow,bhide;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        badd = this.findViewById(R.id.addFragment);
        bremove =this.findViewById(R.id.removeFragment);
        bshow = this.findViewById(R.id.showFragment);
        bhide = this.findViewById(R.id.hideFragment);
        fragment = new FirstFG();
        Bundle bundle = new Bundle();
        bundle.putString("key","this is String Value");
        fragment.setArguments(bundle);

        fragmentManager = this.getSupportFragmentManager();

        fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.add(R.id.fgcontainer,fragment,"FirstFragment");
        fragmentTransaction.commit();

        badd.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                fragmentTransaction = fragmentManager.beginTransaction();
                fragmentTransaction.add(R.id.fgcontainer,fragment,"FirstFragment");
                fragmentTransaction.commit();
            }
        });

        bremove.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                fragmentTransaction = fragmentManager.beginTransaction();
                fragmentTransaction.remove(fragment);
                fragmentTransaction.commit();
            }
        });

        bshow.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                fragmentTransaction = fragmentManager.beginTransaction();
                fragmentTransaction.show(fragment);
                fragmentTransaction.commit();
            }
        });
        bhide.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                fragmentTransaction = fragmentManager.beginTransaction();
                fragmentTransaction.hide(fragment);
                fragmentTransaction.commit();
            }
        });
    }
}

六、实验总结

通过这次实验,我学习了tab切换界面的增删改查的操作,这些技能的熟练能够为我的进一步学习打下了基础。其次我了解到除了fragment,还有view、fragment+view等方法设计tab切换,它们各有特色,一者是点击切换,一者是滑动切换,组合后是一种复合功能。在此次学习中,仍有部分内容需要加强。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Android Studio 中,可以使用 TabLayout 和 ViewPager 来创建一个具有多个选项卡的布局。以下是创建 TabLayout 和 ViewPager 的步骤: 1. 在 XML 布局文件中,添加 TabLayout 和 ViewPager 组件: ``` <android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabGravity="fill" app:tabMode="fixed"/> <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent"/> ``` 2. 在 Java 代码中,创建一个 FragmentPagerAdapter 对象并将其设置为 ViewPager 的适配器: ``` ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager); viewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager())); TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout); tabLayout.setupWithViewPager(viewPager); ``` 3. 创建一个 Fragment 类来表示每个选项卡的内容,并在 MyPagerAdapter 中添加这些 Fragment。 ``` private class MyPagerAdapter extends FragmentPagerAdapter { private final String[] tabTitles = {"Tab 1", "Tab 2", "Tab 3"}; public MyPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { switch (position) { case 0: return new Tab1Fragment(); case 1: return new Tab2Fragment(); case 2: return new Tab3Fragment(); default: return null; } } @Override public int getCount() { return tabTitles.length; } @Override public CharSequence getPageTitle(int position) { return tabTitles[position]; } } ``` 其中,Tab1Fragment、Tab2Fragment 和 Tab3Fragment 是继承自 Fragment 的子类,分别表示每个选项卡的内容。 4. 在 Tab1Fragment、Tab2Fragment 和 Tab3Fragment 中,创建布局文件来定义每个选项卡的内容。 ``` public class Tab1Fragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.tab1_layout, container, false); // 在这里添加 Tab1 的布局内容 return view; } } ``` 其中,tab1_layout.xml 是用来定义 Tab1 的布局文件,其他选项卡以此类推。 这样就可以创建一个带有多个选项卡的布局了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

米莱虾

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值