android碎片简易实现方法（Fragment）

实现步骤：

1、Activity 界面 xml 布局（界面导航栏和碎片片段容器）

2、实现 Fragment 的 xml 布局界面的布局（需要几个就实现几个）

3、实现 Fragment 并和xml 连接（有几个就实现几个）

4、在 Activity 中初始化各个 Fragment

5、实现添加和移除 Fragment 视图方法

6、灵活的调用添加和移除 Fragment 视图的方法

视图：

详细实现步骤：

1、Activity 界面 xml 布局（界面导航栏和碎片片段容器）

<!--内容显示界面-->
<FrameLayout
    android:layout_weight="1"
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="0dp"/>

<!--导航栏-->
<RadioGroup
    android:id="@+id/menu"
    android:background="#053175"
    android:layout_gravity="bottom"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <RadioButton
        android:id="@+id/home_rb"
        android:textSize="12sp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="5dp"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:button="@null"
        android:drawablePadding="5dp"
        android:textColor="@drawable/index_activity_backcolor"
        android:text="@string/home"
        android:drawableTop="@drawable/index_activity_home"
        android:gravity="center" />

    <RadioButton
        android:id="@+id/sleep_rb"
        android:layout_width="0dp"
        android:textSize="12sp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="5dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:button="@null"
        android:drawablePadding="5dp"
        android:textColor="@drawable/index_activity_backcolor"
        android:drawableTop="@drawable/index_activity_sleep"
        android:gravity="center"
        android:text="@string/sleep" />

    <RadioButton
        android:id="@+id/Statistics_rb"
        android:layout_width="0dp"
        android:textSize="12sp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="5dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:button="@null"
        android:drawablePadding="5dp"
        android:textColor="@drawable/index_activity_backcolor"
        android:drawableTop="@drawable/index_activity_statistics"
        android:gravity="center"
        android:text="@string/statistics" />

    <RadioButton
        android:id="@+id/find_rb"
        android:layout_width="0dp"
        android:textSize="12sp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="5dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:button="@null"
        android:drawablePadding="5dp"
        android:textColor="@drawable/index_activity_backcolor"
        android:drawableTop="@drawable/index_activity_find"
        android:gravity="center"
        android:text="@string/find" />
    <RadioButton
        android:id="@+id/myself_rb"
        android:layout_width="0dp"
        android:textSize="12sp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="5dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:button="@null"
        android:drawablePadding="5dp"
        android:textColor="@drawable/index_activity_backcolor"
        android:drawableTop="@drawable/index_activity_myself"
        android:gravity="center"
        android:text="@string/myself" />
</RadioGroup>

FrameLayout 是所有碎片界面布局的地方，RadioGroup 是界面导航栏

这里也是通过 id 对 RadioButton 控件进行控制，

其中：

android:textColor="@drawable/index_activity_backcolor"

是点击后的文字效果改变（文字变颜色），这里可以看出，它是在 drawable 下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#33D8FD" android:state_checked="true"></item>
    <item android:color="#245EB8" android:state_checked="false"></item>
</selector>

@drawable/index_activity_myself 呢？

就是图片的效果改变（文字上面的小图片），它是在 drawable-hdpi 下（这个包没有的自己创建）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/myself_1" android:state_checked="true"/>
        <item android:drawable="@drawable/myself_2" android:state_checked="false"/>
</selector>

myself_1 和 myself_2 都是图片，就是效果图中导航栏文字上面显示的那些图片

注：这里只展示其中的两个 xml 其他的仿照着写就行了

2、实现 Fragment 的 xml 布局界面的布局（需要几个就实现几个）

点击了导航栏后，界面的碎片容器会展示点击关联的界面，这些界面就是 Fragment 关联的 xml 布局界面

这些布局我就不展示了，只需要根据需求自己布局就好了（上面有五个导航，就表示有五个 xml 布局界面）

3、实现 Fragment 并和xml 连接（有几个就实现几个）

这里需要创建类，继承 Fragment 并关联 xml （第二步的 xml 布局）

如上面的展示图片，我的页面有五个导航按钮，就需要写五个这样的类，相应的关联五个需要的 xml 布局

4、在 Activity 中初始化各个 Fragment

Fragment 都是类，按照类的初始化方法将它们初始化

试例：

private OneFragment oneFragment;

oneFragment = new OneFragment();

5、实现添加和移除 Fragment 视图方法

//动态添加 Fragment
private void addFragment(Fragment fragment, String tag) {
    FragmentManager manager = getSupportFragmentManager();
    FragmentTransaction transaction = manager.beginTransaction();
    transaction.add(R.id.fragment_container, fragment, tag);
    transaction.commit();
}

//将 container(碎片容器) 中的视图移除，然后添加上 fragment 视图
public void replaces(Fragment fragment){
    FragmentManager manager = getSupportFragmentManager();
    FragmentTransaction transaction = manager.beginTransaction();
    transaction.replace(R.id.fragment_container, fragment);
    transaction.commit();
}

有 addFragment(Fragment fragment, String tag) 方法，才能将Fragment添加到Activity

有 replaces(Fragment fragment) 方法，才能移除替换碎片容器中的布局

6、灵活的调用添加和移除 Fragment 视图的方法

这里就可以根据自己的需要灵活调用方法操作了

第4、5、6步的完整代码：

import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.RadioButton;

import com.win.fragmentspot.fragment.FiveFragment;
import com.win.fragmentspot.fragment.FourFragment;
import com.win.fragmentspot.fragment.OneFragment;
import com.win.fragmentspot.fragment.ThreeFragment;
import com.win.fragmentspot.fragment.TwoFragment;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    private FrameLayout fragment_container; //碎片容器
    private RadioButton mHomeRb, mSleepRb, mStatisticsRb,mFindRb, mMySelfRb; //碎片的五个按钮
    private RadioButton[] rbs;
    //碎片布局
    private OneFragment oneFragment;
    private TwoFragment twoFragment;
    private ThreeFragment threeFragment;
    private FourFragment fourFragment;
    private FiveFragment fiveFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
        fragment();
        //首先设置第一个界面布局
        oneFragment = new OneFragment();
        replaces(oneFragment);

    }

    public void init(){
        mHomeRb = (RadioButton) findViewById(R.id.home_rb);
        mSleepRb = (RadioButton) findViewById(R.id.sleep_rb);
        mStatisticsRb = (RadioButton) findViewById(R.id.Statistics_rb);
        mFindRb = (RadioButton) findViewById(R.id.find_rb);
        mMySelfRb = (RadioButton) findViewById(R.id.myself_rb);
        mHomeRb.setOnClickListener(this);
        mSleepRb.setOnClickListener(this);
        mStatisticsRb.setOnClickListener(this);
        mFindRb.setOnClickListener(this);
        mMySelfRb.setOnClickListener(this);
        mHomeRb.setChecked(true);
        rbs = new RadioButton[5];
        rbs[0] = mHomeRb;
        rbs[1] = mSleepRb;
        rbs[2] = mStatisticsRb;
        rbs[3] = mFindRb;
        rbs[4] = mMySelfRb;
        for (RadioButton rb : rbs) {//设置导航图像的大小
            Drawable[] drs = rb.getCompoundDrawables();
            Rect r = new Rect(0, 0, drs[1].getMinimumWidth() * 2 / 3 - 5, drs[1].getMinimumHeight() * 2 / 3 - 5);
            drs[1].setBounds(r);
            rb.setCompoundDrawables(null, drs[1], null, null);
        }
    }

    public void fragment(){
        oneFragment = new OneFragment();
        addFragment(oneFragment,"one");
        twoFragment = new TwoFragment();
        addFragment(twoFragment,"two");
        threeFragment = new ThreeFragment();
        addFragment(threeFragment,"three");
        fourFragment = new FourFragment();
        addFragment(fourFragment,"four");
        fiveFragment = new FiveFragment();
        addFragment(fiveFragment,"five");
    }

    //动态添加 Fragment
    private void addFragment(Fragment fragment, String tag) {
        FragmentManager manager = getSupportFragmentManager();
        FragmentTransaction transaction = manager.beginTransaction();
        transaction.add(R.id.fragment_container, fragment, tag);
        transaction.commit();
    }

    //将 container(碎片容器) 中的视图移除，然后添加上 fragment 视图
    public void replaces(Fragment fragment){
        FragmentManager manager = getSupportFragmentManager();
        FragmentTransaction transaction = manager.beginTransaction();
        transaction.replace(R.id.fragment_container, fragment);
        transaction.commit();
    }

    @Override
    public void onClick(View view) {
        //点击后，调用 replaces() 方法将布局替换掉，前面的布局就移除掉
        switch(view.getId()){
            case R.id.home_rb:
                oneFragment = new OneFragment();
                replaces(oneFragment);
                break;
            case R.id.sleep_rb:
                twoFragment = new TwoFragment();
                replaces(twoFragment);
                break;
            case R.id.Statistics_rb:
                threeFragment = new ThreeFragment();
                replaces(threeFragment);
                break;
            case R.id.find_rb:
                fourFragment = new FourFragment();
                replaces(fourFragment);
                break;
            case R.id.myself_rb:
                fiveFragment = new FiveFragment();
                replaces(fiveFragment);
                break;
        }
    }
}

注：这里的这个Fragment只能通过点击来进行切换，并且会将原来的视图移除，所以还是有一些问题，

如过又点击回到原来的视图，会发现这是重新出来的加载的，因此如过要借鉴的需要自己注意一下

源码：https://github.com/iscopy/FragmentSpot

android碎片简易实现方法（Fragment）

猜你喜欢