Add Fragment as content to Activity in Android

👁 96 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Today we try add Fragment layout in another Activity layout, that reduce  complexity develop user interface. For this example we need 3 layout: main.xml, fragment1.xml, fragment2.xml, and 3 classes: MainActivity.java, Fragment1.java, Fragment2.java

Code of xml layouts

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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="I m fragment ONE"
        android:gravity="center"
        android:background="#5eff6a"
        android:textAppearance="?android:attr/textAppearanceLarge" />

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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="I m fragment ONE"
        android:gravity="center"
        android:background="#5eff6a"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

 

Code of Java — classes

package com.example.dynamicfragments;

import android.support.v7.app.ActionBarActivity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.Display;
import android.view.Menu;
import android.view.MenuItem;
import android.view.WindowManager;

public class MainActivity extends ActionBarActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

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

		// get the display mode
		int displaymode = getResources().getConfiguration().orientation;
		if (displaymode == 1) { // it portrait mode
			Fragment1 f1 = new Fragment1();
			fragmentTransaction.replace(android.R.id.content, f1);
		} else {// its landscape
			Fragment2 f2 = new Fragment2();
			fragmentTransaction.replace(android.R.id.content, f2);
		}
		fragmentTransaction.commit();

	}
}

 

package com.example.dynamicfragments;

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

public class Fragment1 extends Fragment {
	public View onCreateView(LayoutInflater inflater, ViewGroup vg,
			Bundle savedInstanceState) {
		return inflater.inflate(R.layout.fragment1, vg, false);
	}
}

 

package com.example.dynamicfragments;

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

public class Fragment2 extends Fragment {
	public View onCreateView(LayoutInflater inflater, ViewGroup vg,
			Bundle savedInstanceState) {
		return inflater.inflate(R.layout.fragment2, vg, false);
	}
}

 

Conclusion result for this example

Create sliding menu-panel for android in fragment-layout

👁 109 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Hi All! In this post i am want to show you how to create android sliding panel for menu or content. This menu by founded on TranslateAnimation class.

For this we need one layout file bellow

XML code for this layout is shown bellow

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <SurfaceView
        android:id="@+id/surfaceView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

    <RelativeLayout
        android:id="@+id/rlContentSliding"
        android:layout_width="220dp"
        android:layout_height="fill_parent"
        android:background="#BBB"
        android:orientation="vertical" >

        <LinearLayout
            android:id="@+id/llFakeLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical" android:visibility="gone">
        </LinearLayout>

        <ListView
            android:id="@+id/listView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >
        </ListView>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rlContentMain"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#AfA"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/llButtonLine"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true" android:background="#fff" android:layout_margin="2dp"
            android:weightSum="1">

            <Button
                android:id="@+id/button"
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                android:text="slide"
                android:layout_weight="0.11" />
        </LinearLayout>

    </RelativeLayout>

</RelativeLayout>

Now we have to attach our layout as a fragment to the main Activity, adding events to the button in the method OnCreateView

public class SlideExampleFragment extends Fragment {
    View V;
    private Button buttonSwitch;
    private View subLayout;
    private View topLayout;
    private ListView subViewListView;
    private String listViewDummyContent[]={"Menu Item 1","Menu Item 2","Menu Item 3","Menu Item 2"};
    private Display display;
    private View fakeLayout;
    private Animation.AnimationListener AL;

    // Values for after the animation
    private int oldLeft;
    private int oldTop;
    private int newleft;
    private int newTop;
    private int screenWidth;
    private int animToPostion;
    // TODO change the name of the animToPostion for a better explanation.

    private boolean menuOpen = false;
    
    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, final ViewGroup container, Bundle savedInstanceState) {
        // Inflate the layout for this fragment

        V = inflater.inflate(R.layout.slide_layout, container, false);

        buttonSwitch = (Button)V.findViewById(R.id.button);
        subLayout = (View) V.findViewById(R.id.rlContentSliding);
        topLayout = (View) V.findViewById(R.id.rlContentMain);
        subViewListView=(ListView)V.findViewById(R.id.listView1);
        fakeLayout = (View)V.findViewById(R.id.llFakeLayout);

        subViewListView.setAdapter(new ArrayAdapter<String>(getActivity(),android.R.layout.simple_list_item_1 , listViewDummyContent));

        display =  getActivity().getWindowManager().getDefaultDisplay();
        screenWidth = display.getWidth();
        int calcAnimationPosition = (screenWidth /3);

        // Value where the onTop Layer has to animate
        // also the max width of the layout underneath
        // Set Layout params for subLayout according to calculation
        animToPostion = screenWidth - calcAnimationPosition;

        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(animToPostion, RelativeLayout.LayoutParams.FILL_PARENT);
        subLayout.setLayoutParams(params);

        topLayout.setOnTouchListener(new View.OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent event) {

                if(event.getAction() == MotionEvent.ACTION_DOWN) {
                    if (menuOpen == true) {
                        animSlideLeft();
                    }
                }

                return false;
            }
        });

        buttonSwitch.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                if(menuOpen == false){
                    animSlideRight();
                } else if (menuOpen == true) {
                    animSlideLeft();
                }
            }
        });

        AL = new Animation.AnimationListener() {

            @Override
            public void onAnimationStart(Animation animation) {
                buttonSwitch.setClickable(false);
                topLayout.setEnabled(false);
            }
            @Override
            public void onAnimationRepeat(Animation animation) {
                // TODO Auto-generated method stub

            }
            @Override
            public void onAnimationEnd(Animation animation) {
                if(menuOpen == true) {
                    Log.d("", "Open");
                    topLayout.layout(oldLeft, oldTop, oldLeft + topLayout.getMeasuredWidth(), oldTop + topLayout.getMeasuredHeight() );
                    menuOpen = false;
                    buttonSwitch.setClickable(true);
                    topLayout.setEnabled(true);
                } else if(menuOpen == false) {
                    Log.d("","FALSE");
                    topLayout.layout(newleft, newTop, newleft + topLayout.getMeasuredWidth(), newTop + topLayout.getMeasuredHeight() );
                    topLayout.setEnabled(true);
                    menuOpen = true;
                    buttonSwitch.setClickable(true);
                }
            }
        };

        return V;
    }

    public void animSlideRight(){

        fakeLayout.setVisibility(View.VISIBLE);
        newleft = topLayout.getLeft() + animToPostion;
        newTop = topLayout.getTop();
        TranslateAnimation slideRight = new TranslateAnimation(0,newleft,0,0);
        slideRight.setDuration(500);
        slideRight.setFillEnabled(true);
        slideRight.setAnimationListener(AL);
        topLayout.startAnimation(slideRight);
    }

    public void animSlideLeft() {

        fakeLayout.setVisibility(View.GONE);
        oldLeft = topLayout.getLeft() - animToPostion;
        oldTop = topLayout.getTop();
        TranslateAnimation slideLeft = new TranslateAnimation(newleft,oldLeft,0,0);
        slideLeft.setDuration(500);
        slideLeft.setFillEnabled(true);
        slideLeft.setAnimationListener(AL);
        topLayout.startAnimation(slideLeft);
    }
}

End result for this post show bellow