Latest web development tutorials

Android fragmentation single frame

Single frame debris: fragments of a single frame is designed for the small screen devices, such as handheld devices (mobile phones), Android 3.0 or later support.


Examples

This example explains how to create your own pieces. Here we create two fragments, one of which is used in the device is a cross-screen when the device is used in another vertical screen time. Let's follow the steps begin.

step description
1 Using Android Studio IDE to create an Android application, named Single Fragments, package name cn.uprogrammer.singlefragments.
2 Modify the main active file as shown below MainActivity.java. Here we are going to check the orientation of the device, and based on this to switch between different pieces.
3 Create PortraitFragment.java and LandscapeFragment.java two files in cn.uprogrammer.singlefragments package and associated method.
4 Create a layout file res / layout / landscape_fragment.xml and res / layout / portrait_fragment.xml to define the layout of the two fragments.
5 Modify res / layout / activity_main.xml to contain two fragments.
6 Define a constant need in the res / values ​​/ strings.xml in.
7 Launch Android emulator to run the application and verify the results of changes made to the application.

The following are the main contents of the active file src / cn.uprogrammer.singlefragments / MainActivity.java of:

package cn.uprogrammer.singlefragment;

import android.os.Bundle;
import android.app.Activity;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.content.res.Configuration;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Configuration config = getResources().getConfiguration();

        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction fragmentTransaction =
                fragmentManager.beginTransaction();

        /**
         * 检测设备方向,并做相应地操作。
         */
        if (config.orientation == Configuration.ORIENTATION_LANDSCAPE) {
            /**
             * 设备的横屏模式。
             */
            LandscapeFragment ls_fragment = new LandscapeFragment();
            fragmentTransaction.replace(android.R.id.content, ls_fragment);
        }else{
            /**
             * 设备的竖屏模式。
             */
            PortraitFragment pm_fragment = new PortraitFragment();
            fragmentTransaction.replace(android.R.id.content, pm_fragment);
        }
        fragmentTransaction.commit();
    }
}

Create two fragmented files LandscapeFragment.java and PortraitFragment.java in package cn.uprogrammer.singlefragments.

The following is the content LandscapeFragment.java file:

package cn.uprogrammer.singlefragment;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class LandscapeFragment extends Fragment {

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

}

The following is the content PortraitFragment.java file:

package cn.uprogrammer.singlefragment;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class PortraitFragment extends Fragment {

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

Create two layout files landscape_fragment.xml and portrait_fragment.xml in the directory res / layout directory.

The following is the content landscape_fragment.xml file:

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

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/landscape_message"
        android:textColor="#000000"
        android:textSize="28sp" />

    <!-- More GUI components go here  -->

</LinearLayout>

The following is the content portrait_fragment.xml file:

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

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/portrait_message"
        android:textColor="#000000"
        android:textSize="28sp" />

    <!-- More GUI components go here  -->

</LinearLayout>

The following is the content of res / layout / activity_main.xml file, which contains two pieces:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal">

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

    <fragment
        android:id="@+id/portrait_fragment"
        android:layout_weight="2"
        android:layout_width="0dp"
        android:layout_height="match_parent" />

</LinearLayout>

Ensure res / values ​​/ strings.xml file contains the following:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Single Fragment</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>
    <string name="landscape_message">这是横屏模式碎片</string>
    <string name="portrait_message">这是竖屏模式碎片</string>
</resources>

Let's just run a modified Single Fragments applications. I assume you've created AVD during the installation environment. Open your project in the active file, click on the toolbar image Icon to run the application In Android Studio. Android Studio install the application on the AVD and starts it. If all goes well, it will be displayed on the emulator window as follows:

image

In accordance with the following to change the direction of the emulator screen mode:

  • fn + control + F11 mac change in landscape as portrait and vice versa
  • ctrl + F11 on the windows
  • ctrl + F11 on Linux

When you change the mode, you will see the landscape mode suitable for the realization of the page:

image

In this way, you can at the same event by using unused pieces to achieve different interfaces. You can build the interface according to your needs using a different type of interface components.