[Android] Sliding Screen Switching Using Include layout + Fragment

[Android] Sliding Screen Switching Using Include layout + Fragment
The previous article describes the technical part of Image Processing for the "hand-picked" project. This article focuses on the layout of the main interface and screen sliding switching, combined with the video of the great god of Hong Yang and the first line of code of Guo Shen (the Android blog of the two contestants), the following content is completed:
(1). Learn to use the Include layout XML
(2). Load fragment by adding an adapter
(3) Implement sliding touch switching screen ViewPager
(4). Change the icon and background, and respond to the control and Transmission Parameters in fragment.
References:
Guo's first line of Android code
Hong Yang great god interface http://www.imooc.com/learn/198

I. Running Effect

As shown in, sliding screens can be used to change the layout of "space", "album", and "follow". At the same time, the icon color turns blue and the background color deepens.

A button event is added. In fragment1, click the button to display the content. In fragment3, click the button to obtain and display the second layout.

2. Project Structure

Iii. Include layout XML file First, add the header layout top_layout.xml with the relative layout and the two icons on the right:

Then, add the bottom layout bottom_layout.xml, which consists of three LinearLayout horizontal layout. Each LinearLayout consists of ImageView and TextView:

Finally, the Include layout is called in activity_main.xml, and ViewPager is used to load different fragment and implement touch screen switching on the control:

In MainActivity. java, the onCreate function sets the requestWindowFeature (Window. FEATURE_NO_TITLE) with no title. In the xml file, you can set the Frame preview effect without a title,Shows the display layout.:


4. Implement fragment switching on the touch screen First, set the layout XML file of Fragment. fragment_layout1.xml is as follows. Others are similar:

Then add FragmentFirst. java, FragmentSecond. java and FragmentThird. FragmentSecond. java is as follows, and others are similar:

package com.example.layouttest;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class FragmentSecond extends Fragment {@Override      public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {                return inflater.inflate(R.layout.fragment_layout2, container, false);           }   }

PS: as I have just been learning Android for a month, my article is very basic. In the new class, you can click "Browse" to add a custom inheritance superclass or click "add" to add an interface. Fragment is inherited here. note: "import android. support. v4.app. fragment; "all must be consistent.
Then set MainActivity. java. The Code is as follows:

Package com. example. layouttest; import java. util. arrayList; import java. util. list; import android. OS. bundle; import android. support. v4.app. fragment; import android. support. v4.app. fragmentActivity; import android. support. v4.app. fragmentPagerAdapter; import android. support. v4.view. viewPager; import android. view. window; public class MainActivity extends FragmentActivity {// Note: support is used during import. v4.app/view: keep consistent private ViewPager viewPager1; private FragmentPagerAdapter fpAdapter; private List
 
  
ListData; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); // Note: to set a title, you must call it before setContentView. Otherwise, the requestWindowFeature (Window. FEATURE_NO_TITLE); setContentView (R. layout. activity_main); // initialize ViewPager setViewPager ();} private void setViewPager () {// initialize data viewPager1 = (ViewPager) findViewById (R. id. viewpager1); listData = new ArrayList
  
   
(); FragmentFirst fragmentFirst = new FragmentFirst (); FragmentSecond fragmentSecond = new FragmentSecond (); required FragmentThird = new fragmentThird (); // Add listData to the listData list. add (fragmentFirst); listData. add (fragmentSecond); listData. add (fragmentThird); // ViewPager is equivalent to a component container implementing page switching fpAdapter = new FragmentPagerAdapter (getsuppfrfragmentmanager () {@ Overridepublic int getCount () {return listData. size () ;}@ Overridepublic Fragment getItem (int arg0) {return listData. get (arg0) ;}}; // set the adapter viewPager1.setAdapter (fpAdapter );}}
  
 

In this case, you can achieve the touch screen switching effect, but you also need to note: (1). You need to change MainActivity inheritance from Activity to FragmentActivity.
(2 ). you may encounter an error "the type is not applicable to the parameter (FragmentFirst)". You need to modify the import "import android. support. v4.app. fragment; "Pay attention to support. v4.app/view must be consistent.

5. Implement slide screen conversion icon In this case, you need to add a custom variable when setting the sliding switch icon at the bottom:

// Private ImageView image1; private ImageView image2; private ImageView image3; private LinearLayout layout1; private LinearLayout layout2; private LinearLayout layout3;

Then, add the following code in the setViewPager () function "viewPager1.setAdapter (fpAdapter)". In the switch, 0, 1, and 2 correspond to the three la s installed in listData:

// Initialize the icon image1 = (ImageView) findViewById (R. id. image1); image2 = (ImageView) findViewById (R. id. image2); image3 = (ImageView) findViewById (R. id. image3); layout1 = (LinearLayout) findViewById (R. id. bottomLayout1); layout2 = (LinearLayout) findViewById (R. id. bottomLayout2); layout3 = (LinearLayout) findViewById (R. id. bottomLayout3); // Sliding Screen transform icon viewPager1.setOnPageChangeListener (new OnPageChangeListener () {@ Overridepublic void onPageSelected (int arg0) {switch (arg0) {case 0: // switch the image to image1.setImageDrawable (getResources (). getDrawable (R. drawable. image_bottom_effect); image2.setImageDrawable (getResources (). getDrawable (R. drawable. image_bottom_frame_no); image3.setImageDrawable (getResources (). getDrawable (R. drawable. image_bottom_person_no); // background enhancement layout1.setBackgroundResource (R. drawable. image_toolbar_bg_sel); layout2.setBackgroundResource (R. drawable. image_toolbar_bg); layout3.setBackgroundResource (R. drawable. image_toolbar_bg); break; case 1: // image switching image1.setImageDrawable (getResources (). getDrawable (R. drawable. image_bottom_effect_no); image2.setImageDrawable (getResources (). getDrawable (R. drawable. image_bottom_frame); image3.setImageDrawable (getResources (). getDrawable (R. drawable. image_bottom_person_no); // background enhancement layout1.setBackgroundResource (R. drawable. image_toolbar_bg); layout2.setBackgroundResource (R. drawable. image_toolbar_bg_sel); layout3.setBackgroundResource (R. drawable. image_toolbar_bg); break; case 2: // image switching image1.setImageDrawable (getResources (). getDrawable (R. drawable. image_bottom_effect_no); image2.setImageDrawable (getResources (). getDrawable (R. drawable. image_bottom_frame_no); image3.setImageDrawable (getResources (). getDrawable (R. drawable. image_bottom_person); // background enhancement layout1.setBackgroundResource (R. drawable. image_toolbar_bg); layout2.setBackgroundResource (R. drawable. image_toolbar_bg); layout3.setBackgroundResource (R. drawable. image_toolbar_bg_sel); break ;}@ Overridepublic void onPageScrolled (int arg0, float arg1, int arg2) {}@ Overridepublic void onPageScrollStateChanged (int arg0 ){}});

6. Call the buttons and Transfer Parameters in Fragment Set the FragmentFirst. java file and click the button event through the onActivityCreated function:

Public class FragmentFirst extends Fragment {@ Override public View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {return inflater. inflate (R. layout. fragment_layout1, container, false) ;}@ Overridepublic void onActivityCreated (Bundle savedInstanceState) {super. onActivityCreated (savedInstanceState); // Add the RESPONSE event Button button1 = (Button) getActivity () of fragment1 (). findViewById (R. id. button1); button1.setOnClickListener (new OnClickListener () {@ Override public void onClick (View v) {TextView textView1 = (TextView) getActivity (). findViewById (R. id. textView1); textView1.setText ("click in fragment1 ");}});}}

FragmentThird. java implementation click Fragment3 to obtain data in Fragment2:

Public class FragmentThird extends Fragment {@ Override public View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {return inflater. inflate (R. layout. fragment_layout3, container, false) ;}@ Overridepublic void onActivityCreated (Bundle savedInstanceState) {super. onActivityCreated (savedInstanceState); // Add the RESPONSE event Button button3 = (Button) getActivity () of fragment3 (). findViewById (R. id. button3); button3.setOnClickListener (new OnClickListener () {@ Override public void onClick (View v) {TextView textView1 = (TextView) getActivity (). findViewById (R. id. textView2); TextView textView3 = (TextView) getActivity (). findViewById (R. id. textView3); textView3.setText ("click to get fragment2 information: \ n" + textView1.getText ());}});}}

PS: whether the TextView of the Fragment XML file needs to be set with different IDs. If the same textView1 setting of Fragment1 and Fragment2 does not respond.
This article mainly describes how to use the Include layout, Fragment screen cutting, and ViewPager sliding effects. I hope the article will be helpful to you, especially for Android beginners. Please forgive me for any errors or deficiencies in this article.
:
(By: Eastmount November 10, 2014 http://blog.csdn.net/eastmount)