Android--碎片

296 阅读4分钟

碎片是一种可以嵌入在活动当中的UI片段,它可以让程序更加合理和充分的利用大屏幕的空间,在平板上应用广泛。它和活动很像,同样包含布局和拥有自己的生命周期。

下面我们来学习一下碎片在平板上的应用。首先要创建一个平板模拟器,然后启动模拟大,效果如下

接着新建一个FragmentTest项目。

碎片的简单用法

先来一个最简单的碎片示例来练练手,在一个活动当中添加两个碎片,并让这两个碎片平分屏幕空间。

新建left_fragment.xml,代码如下所示

<?xml version="1.0" encoding="utf-8"?>
<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"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="Button"
        />
</LinearLayout>

这个布局非常简单,只放置了一个按钮,并让它水平居中,然后新建右侧碎片布局right_fragment.xml,代码如下所示

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:background="#00ff00"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:textSize="20sp"
        android:text="This is right Fragment"
        />

</LinearLayout>

可以看到,我们将这个布局的背景色设置成了绿色,并放置了一个TextView用来显示一段文本。

接下来新建一个LeftFragment类,并让它继承自Fragment,代码如下所示

public class LeftFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.left_fragment, container, false);
        return view;
    }
}

这里仅重写了fragment的onCreate()方法,通过LayoutInflater的inflate()方法把刚创建的left_fragment.xml布局动态加载进来,再用同样的方式创建RightFragment类,代码如下所示

public class RightFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.right_fragment, container, false);
        return view;
    }
}

基本上代码都是相同的,我相信已经没胡什么解决的必要了。接下来修改activity.xml中的代码,如下所示

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <fragment
        android:id="@+id/left_fragment"
        android:name="com.example.fragmenttest.LeftFragment"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />

    <fragment
        android:id="@+id/right_fragment"
        android:name="com.example.fragmenttest.RightFragment"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />
    
</LinearLayout>

可以看到我们这里用了 <fragment> 标签来加载碎片到布局当中, 这里用了android:name 属性来显式指定了要添加的碎片类名,注意一定要类的包名也加上。

现在运行一下程序,效果如下图所示

动态添加碎片

根据具体情况给程序动态添加碎片,就可以将程序界面定制的更加多样化。 我们在之前的代码的基础上继续完善,新建another_right_fragment.xml布局,代码如下所示

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:background="#ffff00"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is another right fragment"
        android:textSize="24sp"
        android:layout_gravity="center_horizontal"
        />

</LinearLayout>

这个布局的代码跟right_fragment.xml中的代码基本相同,只不过背景颜色和显示的文本不一样而已。

接下来新建AnotherRightFragment类,代码如下所示

public class AnotherRightFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.another_right_fragment, container, false);
        return view;
    }
}

代码同样非常简单,跟之前RightFragment基本相同,只是加载的布局文件不一样。这样另一个碎片就准备好了,接下来就是把它动态加载到活动当中了。

修改activity.xml中的代码,如下所示

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <fragment
        android:id="@+id/left_fragment"
        android:name="com.example.fragmenttest.LeftFragment"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />

    <FrameLayout
        android:id="@+id/right_layout"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        />

</LinearLayout>

可以看到,现在将右侧碎片替换成了FrameLayout,这是Android中最简单的一个布局,所有控件默认在布局的左上角,由于这里仅需要在布局中添加一个碎片且不需要任何定位,因此非常适合用FrameLayout。

最后就是修改MainActivity中的代码,如下所示

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button button = (Button) findViewById(R.id.button);
        button.setOnClickListener(this);
        replaceFragment(new RightFragment());
    }

    private void replaceFragment(Fragment fragment) {
//        通过getSupportFragmentManager()获取FragmentManager实例
        FragmentManager fragmentManager = getSupportFragmentManager();
//        开启一个事务
        FragmentTransaction transaction = fragmentManager.beginTransaction();
//        替换碎片
        transaction.replace(R.id.right_layout, fragment);
//        提交事务
        transaction.commit();
    }


    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.button:
                replaceFragment(new AnotherRightFragment());
                break;
            default:
                break;
        }
    }
}

可以看到,首先我们给左侧碎片中的按钮注册了点击事件,然后调用replaceFragment()动态添加RightFragment()碎片。当点击按钮的时候,又会调用replaceFragment()方法将右侧替换成AnotherRightFragment碎片。

重新运行程序,效果如下所示

内容参考自《第一行代码》

github代码

码云代码

个人网站:www.panbingwen.cn