android控件之Fragment(碎片)

本文通过创建一个Android模块,详细介绍了如何利用Fragment(碎片)来实现仿微信主界面的效果。首先在activity_main.xml中添加按钮,然后设计不同布局的Fragment,并重写onCreateView方法。接着在MainActivity中为按钮添加点击事件,完成界面之间的交互。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Fragment生命周期图:
这里写图片描述
通过demo来学习fragment

实现几个界面的交互 如下:
这里写图片描述

1、新建module,在activity_main.xml布局文件下添加几个按钮button。

2、在layout下写几个布局

//一个按钮的布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
<Button
    android:id="@+id/button_test"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="fragment测试"/>
</LinearLayout>
----------------------------------------
//文本的布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
<TextView
    android:id="@+id/textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="我是第二个"/>
</LinearLayout>
、-----------------------------
//输入框的view
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
<EditText
    android:id="@+id/edittext"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="请输入内容"/>
</LinearLayout>

3、写几个类分别对应不同的布局,重写onCreateView方法

//注意类要继承Fragment
public class MyFirstFragment extends Fragment{
    private Button mButton;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {//点击事件
        View view = inflater.inflate(R.layout.fragment_test,null);//对应按钮的布局文件
        mButton = (Button) view.findViewById(R.id.button_test);
        mButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getActivity(),"你点击了按钮",Toast.LENGTH_SHORT).show();
            }
        });
        return view;
    }
}
------------------------------------------------
//对应文本的布局文件
public class MySecondFragment extends Fragment {
    private TextView mTextView;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment2, null);
        mTextView = (TextView) view.findViewById(R.id.textview);
        return view;
    }
     public void setText(String text) {//setText方法
        if (mTextView != null) {
            mTextView.setText(text);
        }
    }
}
-------------------------------------------------
public class MyThirdFragmrnt extends Fragment {
    private EditText mEditText;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment3,null);
        mEditText = (EditText) view.findViewById(R.id.edittext);
        return view;
    }
    public String getText(){
        String s = null;
        if(mEditText!=null){
            s = mEditText.getText().toString();
        }
        return s;
    }
}

4、在avtivity中对activity_main.xml布局的几个按钮添加点击事件

  protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mButton1 = (Button) findViewById(R.id.button1);
        mButton2 = (Button) findViewById(R.id.button2);
        mButton3 = (Button) findViewById(R.id.button3);
        mButton1.setOnClickListener(MainActivity.this);
        mButton2.setOnClickListener(MainActivity.this);
        mButton3.setOnClickListener(MainActivity.this);
//下面是点击按钮时将前一个按钮的布局清空,显示新的布局,用replace
  @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button1:
               mTransaction = mFragmentManager.beginTransaction();
                mTransaction.replace(R.id.framelayout,myFirstFragment);
                mTransaction.commit();
                break;
            case R.id.button2:
                mTransaction = mFragmentManager.beginTransaction();
                mTransaction.replace(R.id.framelayout,mySecondFragment);
                mTransaction.commit();
                break;
            case R.id.button3:
                mTransaction = mFragmentManager.beginTransaction();
                mTransaction.replace(R.id.framelayout,myThirdFragmrnt);
                mTransaction.commit();
                break;
        }
    }
-----------------------------------------------------
//下面是在输入框界面输入文本后点击文本界面显示出输入的内容
public class MainActivity extends FragmentActivity implements View.OnClickListener {
//    private FrameLayout mFrameLayout;
    private Button mButton1;
    private Button mButton2;
    private Button mButton3;
    private MyFirstFragment myFirstFragment;
    private MySecondFragment mySecondFragment;
    private MyThirdFragmrnt myThirdFragmrnt;
    private FragmentManager mFragmentManager;
    private FragmentTransaction mTransaction;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
//        mFrameLayout = (FrameLayout) findViewById(R.id.framelayout);
        mButton1 = (Button) findViewById(R.id.button1);
        mButton2 = (Button) findViewById(R.id.button2);
        mButton3 = (Button) findViewById(R.id.button3);
        mButton1.setOnClickListener(MainActivity.this);
        mButton2.setOnClickListener(MainActivity.this);
        mButton3.setOnClickListener(MainActivity.this);
        mFragmentManager = getSupportFragmentManager();
        myFirstFragment = new MyFirstFragment();
        mySecondFragment = new MySecondFragment();
        myThirdFragmrnt = new MyThirdFragmrnt();

        mTransaction.add(R.id.framelayout,myFirstFragment);
        mTransaction.add(R.id.framelayout,mySecondFragment);
        mTransaction.add(R.id.framelayout,myThirdFragmrnt);
        mTransaction.hide(myFirstFragment);
        mTransaction.hide(mySecondFragment);
        mTransaction.commit();
    }


    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button1:
                mTransaction = mFragmentManager.beginTransaction();
                mTransaction.hide(mySecondFragment);//隐藏
                mTransaction.hide(myThirdFragmrnt);
                mTransaction.show(myFirstFragment);
                mTransaction.commit();//提交
                break;
            case R.id.button2:
                mTransaction = mFragmentManager.beginTransaction();
                String  text = myThirdFragmrnt.getText();
                mySecondFragment.setText(text);
                mTransaction.hide(myFirstFragment);
                mTransaction.hide(myThirdFragmrnt);
                mTransaction.show(mySecondFragment);
                mTransaction.commit();
                break;
            case R.id.button3:
                mTransaction = mFragmentManager.beginTransaction();
                mTransaction.hide(myFirstFragment);
                mTransaction.hide(mySecondFragment);
                mTransaction.show(myThirdFragmrnt);
                mTransaction.commit();
                break;
        }
    }
}

仿微信主界面

布局
这里写图片描述

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"></android.support.v4.view.ViewPager>

<RadioGroup
    android:id="@+id/radiogroup"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_alignParentBottom="true"
    android:gravity="center">
  <RadioButton
      android:id="@+id/radiobutton1"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:button="@null"
      android:gravity="center"
      android:drawableTop="@drawable/message"/>
    <RadioButton
        android:id="@+id/radiobutton2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:button="@null"
        android:gravity="center"
        android:drawableTop="@drawable/person"/>
    <RadioButton
        android:id="@+id/radiobutton3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:button="@null"
        android:gravity="center"
        android:drawableTop="@drawable/dongtai"/>
</RadioGroup>

</LinearLayout>

Adapter

//继承FragmentPagerAdapter
public class MyFragmentAdapter extends FragmentPagerAdapter {
    private List<Fragment> mFragment;
    public MyFragmentAdapter(FragmentManager fm,List<Fragment> fragment) {
        super(fm);
        mFragment = fragment;
    }

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

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

MainActivity

public class MainActivity extends FragmentActivity {
    private MyFirstFragment myFirstFragment;
    private MySecondFragment mySecondFragment;
    private MyThirdFragmrnt myThirdFragmrnt;
    private FragmentManager mFragmentManager;
    private FragmentTransaction mTransaction;
    private RadioGroup mRadioGroup;
    private MyFragmentAdapter mAdapter;
    private ViewPager mViewPager;
    private List<Fragment> mFragments;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mFragmentManager = getSupportFragmentManager();
        mFragments = new ArrayList<>();
        myFirstFragment = new MyFirstFragment();
        mySecondFragment = new MySecondFragment();
        myThirdFragmrnt = new MyThirdFragmrnt();
        mFragments.add(myFirstFragment);
        mFragments.add(mySecondFragment);
        mFragments.add(myThirdFragmrnt);

        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mAdapter = new MyFragmentAdapter(mFragmentManager,mFragments);
        mViewPager.setAdapter(mAdapter);
        mRadioGroup = (RadioGroup) findViewById(R.id.radiogroup);
        mRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                    case R.id.radiobutton1:
                     mViewPager.setCurrentItem(0);
                        break;
                    case R.id.radiobutton2:
                        mViewPager.setCurrentItem(1);
                        break;
                    case R.id.radiobutton3:
                        mViewPager.setCurrentItem(2);
                        break;
                }
            }
        });
        mRadioGroup.check(R.id.radiobutton1);
        //下面是viewpager与radiogroup建立联系
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                    switch (position){
                        case 0:
                            mRadioGroup.check(R.id.radiobutton1);
                            break;
                        case 1:
                            mRadioGroup.check(R.id.radiobutton2);
                            break;
                        case 2:
                            mRadioGroup.check(R.id.radiobutton3);
                            break;
                        default:
                            break;
                    }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值