Implementation of tabhost through ViewPager + Fragment for android project profiling

Implementation of tabhost through ViewPager + Fragment for android project profiling

In the project, you need to use the navigation bar on the end bar. sliding or clicking it will switch to the view above,

 

This effect is implemented using Viewpager + Fragmen, which is a mainstream solution. If you do not know much about fragment before joining us, you can first read Fragment of android (Official Website documentation translation)

The entire file is as follows:

Let's talk about it. First, layout the file main. xml.

 

In fact, the entire layout above is very simple, that is, ViewPager + LinearLayout. After writing mian, lay1, lay2, lay3 and other files are written later. They are only common layout files and no code is pasted, you can download the code to view it.

 

Next, MainActivity. java

 

Package com. vatty. activity; import java. util. arrayList; import java. util. hashMap; import java. util. map; import android. content. res. resources; import android. OS. bundle; import android. support. v4.app. fragment; import android. support. v4.app. fragmentActivity; import android. support. v4.view. viewPager; import android. support. v4.view. viewPager. onPageChangeListener; import android. util. displayMetrics; import android. util. log; import android. view. view; import android. view. window; import android. view. animation. animation; import android. view. animation. translateAnimation; import android. widget. imageView; import android. widget. textView;/***** MainActivity. java * @ author mayi * 11:51:28 **/public class MainActivity extends FragmentActivity {private static final String TAG = MainActivity; private ViewPager mPager; private ArrayList
 
  
FragmentsList; private ImageView ivBottomLine; private TextView TV _tab_1, TV _tab_2, TV _tab_3, TV _tab_4; private int currIndex = 0; private int bottomLineWidth; private int offset = 0; private int position_one; private int accept; private int position_three; private Resources resources; @ Override public void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); requestWindowFeature (Window. FEATURE_NO_TITLE); setContentView (R. layout. main); resources = getResources (); InitWidth (); InitTextView (); InitViewPager ();} /*** get the control in the bottom bar and add the listening event */private void InitTextView () {TV _tab_1 = (TextView) findViewById (R. id. TV _tab_1); TV _tab_2 = (TextView) findViewById (R. id. TV _tab_2); TV _tab_3 = (TextView) findViewById (R. id. TV _tab_3); TV _tab_4 = (TextView) findViewById (R. id. TV _tab_4); TV _tab_1.setOnClickListener (new MyOnClickListener (0); listener (new MyOnClickListener (1); listener (new MyOnClickListener (2); listener (new MyOnClickListener (3 ));} /*** initialize ViewPager */private void InitViewPager () {// obtain the viewpager control mPager = (ViewPager) findViewById (R. id. vPager); // Fragment container fragmentsList = new ArrayList
  
   
(); Map
   
    
ParamMap = new HashMap
    
     
(); ParamMap. put (userid, XiaoHong); paramMap. put (age, 23); Map
     
      
ParamMap2 = new HashMap
      
        (); ParamMap2.put (userid, vatty); paramMap2.put (age, 24); Map
       
         ParamMap3 = new HashMap
        
          (); ParamMap3.put (userid, James); paramMap3.put (age, 25); Map
         
           ParamMap4 = new HashMap
          
            (); ParamMap4.put (userid, hongshengpeng.com); paramMap4.put (age, 26); // generate the fragment Fragment activityfragment = TestFragment corresponding to each tab. newInstance (Hello Activity ., paramMap); Fragment groupFragment = TestFragment. newInstance (Hello Group ., paramMap2); Fragment friendsFragment = TestFragment. newInstance (Hello Friends ., paramMap3); Fragment chatFragment = TestFragment. newInstance (Hello Chat ., paramMap4); // Add to Frag FragmentsList in the ment container. add (activityfragment); fragmentsList. add (groupFragment); fragmentsList. add (friendsFragment); fragmentsList. add (chatFragment); // add the adapter mPager to ViewPager. setAdapter (new MyFragmentPagerAdapter (getsuppfrfragmentmanager (), fragmentsList); // set the default view to 0th mPager. setCurrentItem (0); // Add the listener event mPager to Viewpager. setOnPageChangeListener (new MyOnPageChangeListener ();}/*** initialize the bottom bar to obtain the corresponding width. */Private void InitWidth () {ivBottomLine = (ImageView) findViewById (R. id. iv_bottom_line); // obtain the width of the white slide line in the bottom bar. bottomLineWidth = ivBottomLine. getLayoutParams (). width; Log. d (TAG, cursor imageview width = + bottomLineWidth); // obtain the screen width DisplayMetrics dm = new DisplayMetrics (); getWindowManager (). getdefadisplay display (). getMetrics (dm); int screenW = dm. widthPixels; // the screen is divided into four portions, and the distance between each portion of the white slide is calculated as offset = (int) (scr EenW/4.0-bottomLineWidth)/2); Log. I (MainActivity, offset = + offset); // calculate the position of the Bottom Bar position_one = (int) (screenW/4.0); position_two = position_one * 2; position_three = position_one * 3;}/*** the Custom listening class defines the listening class so that it can be shared. * @ Author Administrator **/public class MyOnClickListener implements View. onClickListener {private int index = 0; public MyOnClickListener (int I) {index = I;} @ Override public void onClick (View v) {// sets the current view mPager of ViewPager. setCurrentItem (index) ;}};/*** page sliding listener * @ author Administrator **/public class MyOnPageChangeListener implements OnPageChangeListener {@ Override public void onPageSelected (int index) {// Animation animation = null; switch (index) {case 0: if (currIndex = 1) {// code generation sliding Animation animation = new TranslateAnimation (position_one, 0, 0, 0); // change the color value of TV _tab_2 so that it does not have the selected effect TV _tab_2.setTextColor (resources. getColor (R. color. lightwhite);} else if (currIndex = 2) {animation = new TranslateAnimation (position_two, 0, 0, 0); TV _tab_3.setTextColor (resources. getColor (R. color. lightwhite);} else if (currIndex = 3) {animation = new TranslateAnimation (position_three, 0, 0, 0); TV _tab_4.setTextColor (resources. getColor (R. color. lightwhite);} // change the color value of TV _tab_1 to make it have the selected effect TV _tab_1.setTextColor (resources. getColor (R. color. white); break; case 1: if (currIndex = 0) {animation = new TranslateAnimation (0, position_one, 0, 0); TV _tab_1.setTextColor (resources. getColor (R. color. lightwhite);} else if (currIndex = 2) {animation = new TranslateAnimation (position_two, position_one, 0, 0); TV _tab_3.setTextColor (resources. getColor (R. color. lightwhite);} else if (currIndex = 3) {animation = new TranslateAnimation (position_three, position_one, 0, 0); TV _tab_4.setTextColor (resources. getColor (R. color. lightwhite);} TV _tab_2.setTextColor (resources. getColor (R. color. white); break; case 2: if (currIndex = 0) {animation = new TranslateAnimation (0, position_two, 0, 0); TV _tab_1.setTextColor (resources. getColor (R. color. lightwhite);} else if (currIndex = 1) {animation = new TranslateAnimation (position_one, position_two, 0, 0); TV _tab_2.setTextColor (resources. getColor (R. color. lightwhite);} else if (currIndex = 3) {animation = new TranslateAnimation (position_three, position_two, 0, 0); TV _tab_4.setTextColor (resources. getColor (R. color. lightwhite);} TV _tab_3.setTextColor (resources. getColor (R. color. white); break; case 3: if (currIndex = 0) {animation = new TranslateAnimation (0, position_three, 0, 0); TV _tab_1.setTextColor (resources. getColor (R. color. lightwhite);} else if (currIndex = 1) {animation = new TranslateAnimation (position_one, position_three, 0, 0); TV _tab_2.setTextColor (resources. getColor (R. color. lightwhite);} else if (currIndex = 2) {animation = new TranslateAnimation (position_two, position_three, 0, 0); TV _tab_3.setTextColor (resources. getColor (R. color. lightwhite);} TV _tab_4.setTextColor (resources. getColor (R. color. white); break;} // record the current page position. currIndex = index; // The animation remains in the animation state after it is played. setFillAfter (true); // animation duration animation. setDuration (300); // slide the white line on the bottom bar to start animation ivBottomLine. startAnimation (animation) ;}@ Override public void onPageScrolled (int arg0, float arg1, int arg2) {}@ Override public void onPageScrollStateChanged (int arg0 ){}}}
          
         
        
       
      
     
    
   
  
 

The entire code is used for initialization preparation, loading layout, getting various controls, setting the adapter, and adding listeners. The Code contains more detailed comments, which will not be discussed here.

 

The following is the Fragment module:

TestFragment. java

 

Package com. vatty. activity; import java. util. arrayList; import java. util. map; import android. OS. bundle; import android. support. v4.app. fragment; import android. view. layoutInflater; import android. view. view; import android. view. viewGroup; import android. widget. listView; import com. vatty. adapter. contactAdapter; import com. vatty. model. contact;/*** TestFragment. java * @ author mayi * 11:54:19 **/public class TestFragment extends Fragment {private static final String TAG = TestFragment; private Map
 
  
Maplist;/*** get the new Fragment * @ param s * @ param map * @ return */static TestFragment newInstance (String s, Map
  
   
Map) {TestFragment newFragment = new TestFragment (); final SerializableMap myMap = new SerializableMap (); myMap. setMap (map); // Bundle stores data Bundle bundle = new Bundle (); bundle. putSerializable (map, myMap); // Fragment transfers data newFragment. setArguments (bundle); return newFragment;} @ Overridepublic void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); // Log. d (TAG, TestFragment ----- onCreate); // get the data Bundle bundle = getArguments (); SerializableMap serializableMap = (SerializableMap) bundle transmitted by Fragment. get (map); maplist = serializableMap. getMap () ;}@ Overridepublic View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {// Log. d (TAG, TestFragment ----- onCreateView); // load the layout (layout file) View = inflater to be displayed in this Fragment. inflate (R. layout. lay1, container, false); // ------------------------------- development based on your project needs ------------------------------------------------ // obtain the control ListView lv = (ListView) view in layout. findViewById (R. id. listView3); // getActivity (). getApplicationContext () method to get ContextContactAdapter hc = new ContactAdapter (getActivity (). getApplicationContext (), getContact (); lv. setAdapter (hc); lv. setCacheColorHint (0); return view;} private ArrayList
   
    
GetContact () {ArrayList
    
     
HcList = new ArrayList
     
      
(); For (int I = 0; I <10; I ++) {Contact c0 = new Contact (); c0.setTxPath (R. drawable. more_game +); c0.setName (maplist. get (userid) + age: + maplist. get (age); hcList. add (c0) ;}return hcList ;}@ Overridepublic void onDestroy () {super. onDestroy (); // Log. d (TAG, TestFragment ----- onDestroy );}}
     
    
   
  
 

At this point, the main code modules in the entire demo have been presented. The other modules similar to adapter are not much different from the ones we normally develop. You can download the code to view them.