Android – fragments (a)

“This is the 7th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Fragment is a KIND of UI fragment that can be embedded in activities. It enables programs to make more reasonable and full use of the large screen space, so it is widely used on tablets. Much like an activity, a fragment has its own layout and life cycle. A fragment can also be understood as a mini-activity, although the mini-activity may be as large as an ordinary activity.

So how do you get the most out of a tablet? If we develop a news app, one of the interfaces uses RecyclerView to display a set of news headlines, and when you click on one of the headlines, another interface is opened to display the details. If in a mobile phone, we can design it like this:

If the tablet were designed this way, the title would be too long, unsightly, and a waste of space:

Therefore, the best solution is to put the list of headlines and details in two shards, and then refer to both shards in the same activity to make the most of the space on the screen.

Simple use of fragments

Let’s start by writing a simple Fragment example to practice. Load two fragments in one activity and divide the two fragments evenly across the screen. Create a new left fragment layout left_fragment.xml and add a Button:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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>
Copy the code

Create a new right fragment layout right_fragment.xml and add a TextView text:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#00ff00">
    
    <TextView
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="This is a Fragment"
        android:textSize="20sp"/>
</LinearLayout>
Copy the code

Create a new LeftFragment class and let it inherit the Fragment and reference the left_fragment.xml layout:

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; }}Copy the code

Create a new RightFragment class as above:

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; }}Copy the code

In activity_main.xml, you can then add shards to the layout using tags and also display the name of the shard to be added via the Android: Name attribute:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <fragment
        android:id="@+id/left_fragment"
        android:name="com.example.wenjiancunchu.LeftFragment"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        />
    <fragment
        android:id="@+id/right_fragment"
        android:name="com.example.wenjiancunchu.RightFragment"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        />
</LinearLayout>
Copy the code